传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 【成都校区】HTML

© 徐壹 初级黑马   /  2019-1-10 09:22  /  64 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

web 概念JavaWeb:
使用Java语言开发基于互联网的项目
软件架构:C / S
Client / Server 客户端 / 服务器端在用户本地有一个客户端程序,在远程有一个服务器端程序如:QQ,迅雷...
优点
  • 用户体验好

缺点
  • 开发、安装,部署,维护 麻烦


B / S
Browser / Server 浏览器 / 服务器端
  • 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序

优点
  • 开发、安装,部署,维护简单

缺点
  • 如果应用过大,用户的体验可能会受到影响
  • 对硬件要求过高

B / S 架构详解
资源分类:
静态资源
  • 使用静态网页开发技术发布的资源。特点:所有用户访问,得到的结果是一样的。如:文本,图片,音频、视频, html,CSS,JavaScript如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源

动态资源
  • 使用动态网页及时发布的资源。特点:所有用户访问,得到的结果可能不一样。如:jsp/servlet,php,asp...如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器

我们要学习动态资源,必须先学习静态资源!静态资源:HTML:用于搭建基础网页,展示页面的内容CSS:用于美化页面,布局页面JavaScript:控制页面的元素,让页面有一些动态的效果
html
是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言
超文本
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
标记语言
由标签构成的语言。<标签名称> 如 html,xml
标记语言不是编程语言。
快速入门        语法
html 文档后缀名 .html 或者 .htm
标签
围堵标签:有开始标签和结束标签。如 <html> </html>自闭合标签:开始标签和结束标签在一起。如 <br/>
可以嵌套:(需要正确嵌套,不能你中有我,我中有你)
  • 错误:<a><b></a></b>
  • 正确:<a><b></b></a>

在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
html 的标签不区分大小写,但是建议使用小写。
  <html>
  ​
      <head>
          <title>title</title>
      </head>
  ​
      <body>
  ​
          <FONT color='red'>Hello World</font><br/>
  ​
          <font color='green'>Hello World</font>
  ​
      </body>
  ​
  </html>文件标签
构成 html 最基本的标签
html:html文档的根标签
head:头标签。用于指定 html 文档的一些属性。引入外部的资源
title:标题标签。
body:体标签
<!DOCTYPE html> :html5 中定义该文档是 html 文档
文本标签
和文本有关的标签
<!-- 注释内容 -->:注释
<h1> to <h6>:标题标签(h1 ~ h6:字体大小逐渐递减)
<p>:段落标签
<br>:换行标签
<hr>:展示一条水平线
  • 属性:
    • color:颜色
    • width:宽度
    • size:高度
    • align:对齐方式
      • center:居中
      • left:左对齐
      • right:右对齐



<b>:字体加粗
<i>:字体斜体
<font>:字体标签
<center>:文本居中
  • 属性
    • color:颜色
    • size:大小
    • face:字体


属性定义
  • color
    • 英文单词:red, green, blue.
    • rgb(值1,值2,值3):值的范围:0 ~ 255。如 rgb(0, 0, 255)
    • #值1值2值3:值的范围:00 ~ FF 之间。如:#FF00FF。

  • width
    • 数值:width='20',数值的单位,默认是 px(像素)
    • 数值 %:占比相对于父元素的比例


图片标签
<img src="image/jingxuan.jpg" align="right" alt="古镇" width="500" height="500"/>
src:图片的位置
./:代表当前目录
  • ./image/1.jpg

../:代表上一级目录
列表标签
<ol>:定义一个有序列表
<ul>:定义一个无序列表
<li>:列表项
<ol type="A">:修改列表项编号样式
<ul type="">:修改无序列表项编号样式
  • 三种方式:
    • disc:实心圆
    • square:方形
    • circle:空心圆


超标签
<a href="地址" target="_blank">点我</a>:新页面打开网址
href:指定访问资源的 URL(统一资源定位符)
  • <a href="mailto:mail@mail.cn">我的邮箱</a>

target:指定打开资源的方式
  • _self:默认值,在当前页面打开
  • _blank:在空白页面打开

div & span 标签
div:每一个 div 占满一整行,块级标签。
span:文本信息在一行展示,行内标签,内联标签。
语义化标签
html5 中,为了提高程序可读性,提供的标签
<header>:页眉
<footer>:页脚
表格标签
  • table:定义表格
    • width:宽度
    • border:边框
    • cellpadding:定义内容和单元格的距离
    • cellspacing:定义单元格之间的距离。如果指定为 0,则单元格的线会合为一条
    • bgcolor:背景色
    • align:对齐方式

  • tr:定义行
    • bgcolor:背景色
    • align:对齐方式

  • td:定义单元格
    • colspan:合并列
    • rowspan:合并行

  • th:定义表头单元格
  • <caption>:表格标题
  • <thead>:表示表格的头部分
  • <tbody>:表示表格的体部分
  • <tfoot>:表示表格的脚部分


分享至 : QQ空间
收藏

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马