7.表格标签

在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。

• table标签：定义表格整体

<caption>我的标题</caption>：表格的标题

• tr标签：定义表格的行

height：设置行的高度
align：设置行内容的水平对齐方式
valign：设置行内容的垂直对齐方式：top middle bottom
bgcolor：设置行背景颜色
background：设置行的背景图像

• td标签

作用：定义表格单元格
td：普通表格
th：表头

• frame属性：表格的边框属性

<table frame="" rules="">

• 表格中的语义标签

<thead>/<tbody>/<tfoot>

合并单元格

横向合并单元格：colspan=""
纵向合并单元格：rowspan=""

单元格距

单元格边距：cellpadding=""
单元格间距：cellspacing=""

其他

背景颜色：background-color
排列位置：align：left/right

8.表单标签

• 表单标签

<form>表单结构：提示信息，表单域，表单控件

• 表单属性

- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。
- name：用于指定表单的名称，以区分同一个页面中的 多个表单,表单内容被提交必须有name属性

• 表单项标签

不同类型的input元素、下拉列表、文本域等。

- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域

input标签

通过type属性控制输入形式。

input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength

HTML5新type控件类型

< select>: 定义下拉列表, <option> 定义列表项

<select name="…" size="…" multiple>
<option value="…" selected>
…
</option>
…
</select>

size:可见选项数目
multiple：设定为多选
option：指定选择区中的一个选项
selected：默认选项

< textarea>: 文本域

<textarea cols="每行中的字符数" rows="显示的行数" wrap="…“> 文本内容</textarea>

wrap属性：
soft 当在表单中提交时，textarea 中的文本不换行。默认值。
hard 当在表单中提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须规定 cols 属性

• 表单的处理

表单分组

当表单上有很多信息需要填写，可以使用fieldset元素将相关的 元素组合在一起， 使表单更容易理解。

<form>
<fieldset>
<legend>请选择个人爱好</legend>
表单控件... 
 </fieldset>
</form>


<fieldset></fieldset>:表单的一个子容器，将所包含的内容以边框环绕方式显示
<legend></legend>:为<fieldset>边框添加相关的标题

表单的验证

1.HTML自带的控件检验

HTML5新增的Email/URL表单类型本身就具有对表单数据进行验证的功能。

2.pattern验证

<input pattern="reg exp">

正则表达式：

**普通字符** ： 大小写的字母和数字组成

**元字符**：具有特殊含义的字符

常用的元字符
. 匹配除换行符外任的任意字符
* 匹配0个或多个在它前面的字符
+ 匹配1个或多个在它前面的字符
？ 匹配0个或1个在它前面的字符
[…] 匹配方括号中的任一个字符
[^...] 匹配非方括号中的所有字符
^ 匹配字符串开始
﹩ 匹配字符串结束
{n} 匹配前面的元素或组合项连续出现n次
{n,} 匹配前面的元素或组合项至少连续出现n次
{m,n} 匹配前面的元素或组合项至少连续出现N次，最多连续出现M次
| 前后两个匹配条件进行逻辑或
例如：t.n可匹配tan、Ten、t#n等
例如：t*n可匹配n、tn、ttn等
例如：t+n可匹配tn、ttn等
例如：t?n可匹配n、tn
例如：t[abc]n可匹配tan、tbn、tcn。这个式子还可
用连接符表示为t[a-c]n 例如：t[^a]n可匹配tun、topn等,但不匹配tan
例如：t{2}n可匹配ttn
例如：t{2,}n可匹配ttn、tttn、tttttn

表单组件添加说明

Lable标签

Label标签是描述表单字段用途的文本。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

for：规定label绑定到哪个表单元素上，属性取值为表单元素的id。

form：规定label字段所属的一个或多个表单。 属性取值为formid

9.视频、音频标签

• 视频标签: <video>

- src: 规定视频的url
- controls: 显示播放控件
- width: 播放器的宽度
- height: 播放器的高度

• 音频标签: <audio>

- src: 规定音频的url
- controls: 显示播放控件

10.页面元素与属性(语义化标签)

• 语义化标签：

没有任何效果，只为了方便阅读，常常与CSS标签相结合使用

HTML5新增了页面元素标签来布局页面，各个区块中的内容语义比较清晰，<header>元素代表页眉，<nav>元素代表导航，<article>元素代表主页面区， <aside>元素代表次要信息区, <footer>元素代表页脚。

• 块标签

"

标签的属性 
style : 设置块元素的行内样式。
class :设置类选择器的名称。 
Align: 表示块元素中内容的对齐方式

""标签是双标签，用来组合文档中的行内元素。使用方法和标签基本相同。

<div>标签和<span>标签的主要区别是：
<span>标签不换行，均在一行显示
<div>标签换行,一个<div>标签要占满一行 
<span>标签不能包含<div>标签

• 结构元素标签

“

<header>标签用于定义文章的页眉信息，其中包含多个标题（<h1>~<h6>）、导航部分（<nav>）或普通内容（<p>和<span>）等部分

“