1. 什么是HTML5?
  2. 网页的组成部分
  3. html标签的语法、分类和属性
  4. 文档结构标签
  5. a标签（添加超链接）
  6. h标签、p标签
  7. div标签、pre标签
  8. img标签
  9. ul,ol,li,dl,dt,dd（无序列表、有序列表、自定义列表）
  10. b,strong,i,em,u,del,sup,sub（格式化文字样式的标签）
  11. table标签

1.什么是HTML5?

HTML5指的是新的html标准，html是超文本标记语言：Hyper Text Markup Language 。
HTML5是一个新的网络标准，包含了原HTML4的基础上新增了一些新的标准。目标是取代现有的HTML 4.01和XHTML 1.0标准。它希望能够减少互联网富应用（RIA）对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。

2. 网页的组成部分——W3C标准

由国际万维网联盟制定的一系列标准包括：

结构化标准语言（HTML&XML）
  • 呈现内页内容
    文字、图片等
表现标准语言（CSS）
  • 网页样式
    颜色、字体大小
行为标准语言（DOM&ECMAScrip）
  • 网页的交互行为（JavaScript）
    轮播图

3. html标签的语法、分类和属性

  • 语法
    规定：每一个标签都应该闭合！
    基本的语法是：<开始标签></结束标签>
  • 分类
    双标签：<开始标签></结束标签>，如<html> </html> 单标签：<开始标签 /> 如：<link />
  • 属性
    在“开始标签名”后，用空格分隔来写，多个标签属性也用空格来分隔 。
    每一个标签属性都由 key=“value” ,每个值用引号引起来。引号必须是成对写，不能是单、双引号交叉使用。
    错误的案例：‘aaa"
    正确的案例：“aaa”, ‘aaa’
    如：<link type="text/css" rel="stylesheet" href="login.css" /> 标签属性有全局标签属性和私有标签属性之分。
    全局：所有标签都可以使用的标签属性。
    如： id,class,style,data-*,…
    私有的：<a href="" alt="" ></a>

4. 文档结构标签

文档标题、段落和列表等称作结构。结构使内容更加具有逻辑性，易用性。

在网页中，结构的定义使用的是HTML语言。

html5标签布局 html5的标签_HTML5


html5标签布局 html5的标签_标签属性_02

5.a标签（添加超链接）

html5标签布局 html5的标签_html5标签布局_03

6. h标签、p标签

html5标签布局 html5的标签_标签属性_04


html5标签布局 html5的标签_html_05

7. div标签、pre标签

html5标签布局 html5的标签_标签属性_06


网页中呈现出来的效果就是这样的：

html5标签布局 html5的标签_html_07

8. img标签

html5标签布局 html5的标签_html_08


img标签一定要用div标签包裹起来

9. ul,ol,li,dl,dt,dd（无序列表、有序列表、自定义列表）

ul,ol,li,dl,dt,dd

它们都是块级标签，所以说，一般就可以不使用div来包裹。

块级标签的特点是每个标签都独占一行。一行无法显示完内容时，自动换行显示。

可以自行了解type,start两个标签属性。

html5标签布局 html5的标签_HTML5_09


html5标签布局 html5的标签_html5标签布局_10

10. b,strong,i,em,u,del,sup,sub（格式化文字样式的标签）

用于格式化文字的样式的标签，都是内联标签（行内标签）

html5标签布局 html5的标签_HTML5_11


html5标签布局 html5的标签_HTML5_12

11. table标签

table, thead,tbody,tfoot
caption,tr,th,td

<table>: 画一个表格
<tr>: 画一个行
<td>:画一个列, 单元格中的内容，默认是垂直居中的。水平居左。
<th>:画一个醒目的栏目标题，相当于一个列。 内容加粗，水平居中显示

标签属性：
table:
border=“1” 设置边框的粗细；
width=“400” height=“400”： 宽度和高度；
align=“center”：设置表格页面中的水平对齐的位置： left: 左。right:右；center:居中
cellpadding=“10”: 设置td标签的边框与内部文本内容的间隔距离。
cellspacing=“0”： 设置td与td之间的间距。
bgcolor=“red”: 设置整个表格的背景色
background=“图片地址” :设置表格的背景图片

thead,tbody,tfoot三个标签在table中的顺序，是不分先后顺序的。最终显示的结果，顺序都是按thead,tbody,tfoot显示的。

tr:
heihgt: 高度；
align=“center”: 让一行中的内容，在td单元格中，水平居中显示。
在tbody,tr,td中，都可以使用 align属性：
在td中，可以使用width,height

标签的关系：

table > caption,thead,tbody,tfoot > tr > th,td

父 > 子 的关系。

html5标签布局 html5的标签_html5标签布局_13


html5标签布局 html5的标签_HTML5_14

  • table标签中td的合并
    从左向右合并：colspan=“4”,4表示合并4列，多余的3列要删除。
    从上向下合并：rowspan=“4”,4表示合并4行，多余的3行中对应的td要删除。
    也允许一个单元格跨多行多列。
<td colspan="4" rowspan="4"></td>