1. doctype标记 用标准模式解析渲染该文档
2. 文档头部标记
补充关于引入资源：
(1) src【替换元素】 VS href【建立链接】：
- src 相当于把要引入的资源下载完毕后替换到目标位置！所以遇到src引入的资源会暂停页面的解析，直至资源下载完毕后才会继续解析渲染！！
- href 相当于对资源的链接引入，即遇到 href 引入的资源会并行下载资源，不会暂停对页面的解析！！
(2) VS @import加载引入 css资源：
- 在头部 标签中进行引入。用 标签引入的 css 资源会在加载页面时同步进行 引入，所以一般不会出现页面初始化无样式的问题。
- 用 @import引入的css资源，需要等到页面全部加载完毕后才会加载引入，所以会出现页面初始化无样式的问题。
so 多用 标签进行外部 css 资源的引入，且用 src 引入外部 js 资源多放到页面尾部！！
3. 列表元素 （有序 vs 无序 vs 自定义）
(1) 有序 < ol > < li >hhh< /li > < /ol >
- type 属性设置排序依据 （ol 和 li 都可以设置）
- start 排序的值从几开始
- reversed 倒序排列
(2) 无序 < ul > < li >hhh< /li > < /ul >
- type 属性设置每条数据前的标记（实心圆、空心圆、方块...）
有序和无序的效果图如下：
(3) 语义化描述列表 【自定义列表】< dl > < dt >人物简介：< /dt >< dd >严王< dd >< /dl >
4. 表格元素 table
< table /> 属性：
- 合并边框 border-collapse ：collapse
- 边框与内容之间距离 cellpadding：2
- 边框与边框之间距离 cellspacing：2
< td /> < th /> 单元格属性 ：
- 宽度比例：width ：30%
- 合并单元格（行） rowspan ：3
- 合并单元格（行） rowspan ：3
5. 表单元素 input 、 select 、textarea
表单的主要用途是为了收集用户信息 ，然后把用户输入的数据传送到服务器端！
表单由 表单域、表单控件（也称为表单元素、即填的小方框选择的小圆圈）、提示信息（姓名、年龄）三部分构成。
(1)表单域： 实现用户信息的收集和传递的容器 ，其实就是 < form />
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，取值为get或post |
| name | 名城 | 用于指定表单名称 |
(2) 表单控件： 单选按钮、复选框...（ < input > 标签的不同属性决定的）
2 . 1 ＜input＞
- 文本框 text 、密码框 password：
1.name属性 VS value属性 VS placeholder属性
- name 用于后台服务器区分表单中不同项的数据的含义（eg：姓名、性别...）
- value 是提交给后台服务器的数据内容，即可以设定默认值，这样初始化时就会默认填充在文本框中
- placeholder 用于显示在文本框中进行*信息提示*，如要求密码的格式，当文本框获得焦点时
会自动消失
注意：如果value属性初识时设置的有值，那么placeholder的值会被代替！！！
- 单选按钮 radio
要想实现单选，那么几个单选按钮的 name 属性的值应该统一，即：
< label for="hobby">游泳< /label > < input type="ratio" id="hobby" name="hobby">
< label for="hobby">跑步< /label > < input type="ratio" id="hobby" name="hobby">
- 复选框 checkbox
(3) label标签的配合使用 【up用户体验】（多用于ratio 、checkbox）
实现点击文字提示就可以选中相关的按钮
要想实现该效果，需要将 < label > 标签的 for 属性的值 与 ratio 、checkbox的 id 属性
的值统一！！！
2 . 2 ＜select＞下拉框
< select >
<option> 成都 </option>
<option checked> 北京 </option>
< /select >
- 属性 checked：默认选中！！！
2 . 3 ＜textarea＞ 文本域
6. html5 新增元素
(1) < video /> 视频标签
(2) < audio /> 音频标签
(3) 语义化标签
(4) 注释/ 翻译标签
(5) < canvas /> VS < svg / > 【canvas意为画布】【svg意为可缩放矢量图形】
canvas 指的是画布，类似于windows的画图工具。支持 2d 和 3d 效果。需要配合 js 来使用！！是以矩形为基础进行绘制的！！！
基础用法：
svg 意为可缩放矢量图形。是一种用于描述二维矢量图形的 XML 标记语言；可以无限缩放而不会失真！！
SVG代码写在根元素 < svg /> 根标签中，svg元素标签主要如下：
7. html5 新增 input 属性
- email 、url、tel、number
- 进度条 range
- search
- 选择框 date
