快速建结构方式：
v ！+tab html5的标签结构
v Meta
一、Meta标签
1. 规范电脑编码格式（charset）
<meta charset=”UTF-8”>
编码 Ascll 早期编码识别英文
Ansi 英文编码
Unicode 日文编码
Gbk 包含全部中文 繁体
Gb2313 简单中文
Big5 繁体中文
Utf-8 通用字符集（现流行）
2. 关键字（name）
<meta name=”keywords” content=”春，薄款，宽松，嘻哈”>向搜索引擎说明你的网页的关键词
3. 网页描述（name）
<meta name=”description” content=”新东方英语公司，是一家......”>
4. 网页重定向（http-equiv）
<metahttp-equiv=”refresh”content=”5;url=http://ww.mi.com”>
五秒后自动跳转到指定地址（小米官网）。
二、 Link标签
1. 链接外部样式文件
<link rel=”stylesheet” href=”1.css“>
2. icon图标
<link rel=”icon” href=”jd.ico”
三、表格
1、展示数据，是对网页重构(css+div）的一个有益补充
2、<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
属性：border:=”1” 边框
Width=”500” 表格的宽度
Height=”300” 表格的高度
Cellspacing=”2” 单元格与单元格之间的距离
Cellpading=”2” 单元格中的内容与边框之间的距离
Align=”left/center/right”
bgcolor=”red”背景颜色
注意：如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 tr或者td中的内容居中
3、表格结构
<table>
<thead>
<tr width=”300”> 注：不可以在thead中设置参数，thead只是一种规范格式
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
4、表头和单元格合并
（1）表头
<caption></caption>
（2） colspan=”2” 合并同一行上的单元格
Rowspan=“2” 合并同一列上的单元格
5、表格标题、边框颜色、内容垂直方式
（1）表格标题<th></th> 用法和td一样 在tr里面
（2）.边框颜色bordercopor=”red”
6、内容垂直对其方式
<td valign=”bottom”>阿娇</td>
Valign=”top”|”middle”|”bottom”
7、 细线表格
<table width=”500” height=”300” bgcolor=”green” cellspacing=”1”>
<tr bgcolor=”white”><tr>
三、表单之文本输入框，密码输入框，单选框
1、表单的作用：收集信息
2、表单的组成：提示信息，控件，表单域
<inform action=”1.php” method=””></form>
Action：处理信息
Method：“”get | post”（get通过地址栏提供传输信息，安全性差，post通过1.PHP处理信息，安全性高）
3、文本输入框
<input type=“text”maxlength=“6” readonly=“readonly”disabled=“disabled”>
Maxlength=“6”：限制字符输入长度
Readonly=“readonly”将输入框设置为只读状态（不能编辑）
Disabled=”disabed”
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
4、密码输入框
<input type=“password” name="pwd">
注意：文本输入框的所有属性对密码输入框都有效。
5、单选框
<input type=“radio” name="gender" checked="checked"> 男
<input type=“radio” name="gender" checked="checked"> 女
注意：只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。
6、下拉列表
- <select multiple=”multiple”>
<option>山东</option>
<option selected="selected">上海</option>
</select>
属性：Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
- 对下拉列表进行分组 <optgroup></optgroup>
<select multiple=”multiple” label="山东">
<option>济南</option>
<option>青岛</option>
</select>
属性：<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。
7、多选框
<input type="checkbox" checked="checked">语文
<input type="checkbox" checked="checked">数学
<input type="checkbox" checked="checked">英语
属性：Checked=”checked” 设置默认选中项
8、多行文本框
<textarea cols="30" rows="10"></textarea>
属性：Cols 控制输入字符的长度。
Rows 控制输入的行数
9、文件上传控件
<input type="file">
10、按钮
文件提交按钮 <input type="submit"> 可以实现信息提交功能
普通按钮 <input type="button" value="注册"> 不能提交信息，配合JS使用
图片按钮 <input type="image" src="1.jpg"> 图片按钮可实现信息提交功能
重置按钮 <input type="reset"> 将信息重置到默认状态
11、表单信息分组
<form action="1.css" method="post">
<fieldset>
<legend>分组信息</legend>
</fieldset>
</form>
属性：<fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称
四、h5补充控件
网址控件
<input type="url">
日期控件
<input type="date">
时间控件
<input type="time">
邮件控件
<input type="email">
数字控件
<input type="number" step="5">
滑块控件
<input type="range">
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
标签语义化意义： 1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
注意：1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；
来源：oschina
链接：https://my.oschina.net/u/4304562/blog/4470173