第一章：HTML5概述####
1、HTML5概念：
HTML5 并不仅仅是 HTML 规范的最新版本，而是一系列用来制作现代富 Web 内容的相关技术的总称，其中最重要的三项技术分别为：HTML5 核心规范（ 标签元素） 、CSS（ 层叠样式表第三代） 、和 JavaScript。
2、HTML5 核心：主要由 W3C 官方的规范组成，涉及新的语义元素、新的增强的Web表单、音频和视频、以及通过 JavaScript 绘图的 Canvas。
3、HTML5 的特点：
向下兼容
用户至上
化繁为简
无插件范式
访问通用性
引入语义
引入原生媒体支持
引入可编程内容
第二章：基本格式####
1、文档结构解析：
1.Doctype <!DOCTYPE html> //不分区大小写
**2.html **元素 <html lang="zh-cn"> //如果是英文则为 en
**3.head **元素 <head>...</head> //这些信息在页面不可见
**4.meta **元素 <meta charset="utf-8"> //除了设置编码，还有别的
**5.title **元素 <title>基本结构</title>//浏览器左上角标题
**6.body **元素 <body>...</body>
**7.a **元素
2、元素标签
单标签元素：单标签一般用于声明或者插入某个元素.
比如声明字符编码就用<meta>，插入图片就用<img>
多标签元素：双标签一般用于设置一段区域的内容，将其包含起来.
比如段落<p>...</p>
第三章：文本元素####
1.<b>表示关键字和产品名称，加粗
<b>HTML5</b>
2.<strong>表示重要的文字，加粗
<strong>HTML5</strong>
3.<br>强制换行、<wbr>安全换行，根据浏览器
<br> Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.
4.<i>表示外文词汇或科技术语，倾斜
<i>HTML5</i>
5.<em>加以强调，倾斜
<em>HTML5</em>
6.<s>表示不准确或校正，删除线
<s>HTML5</s>
7.<del>表示删除文字，删除线
<del>HTML5</del>
8.<u>表示给文字加上下划线
<u>HTML5</u>
9.<ins>添加一段文本，下划线
<ins>HTML5</ins>
10.<small>添加小号字体
<small>HTML5</small>
11.<sub><sup>添加上标和下标
<sub>5</sub>下标
<sup>5</sup>上标
12.<code>等表示输入和输出
13.<q>引用来自他处的内容，双引号
<q>HTML5</q>
14.<span>表示一般性文本
<span>HTML5</span>
第四章：超链接和路径####
1、超链接的属性
href 属性
<a href="http://www.baidu.com">百度</a>
target 属性
<a href="http://www.baidu.com" target="_blank">百度</a>
----target参数：blank、_parent、_self、_top
最常用的是_blank，新建一个窗口。而_self 是默认，当前窗口打开。
2、相对与绝对路径
所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接从
file:///磁盘符开始的完整路径。
目录语法
同一个目录：index2.html 或./index2.html；
在子目录：xxx/index2.html；
在孙子目录：xxx/xxx/index2.html；
在父目录：../index2.html；
在爷爷目录：../../index2.html；
3、锚点:超链接通过属性 id 或 name 实现锚点定位。
1.页内跳转
<html>
<head>
<title>锚点的使用讲解</title>
<style>
body{font-family:"微软雅黑";height:2000px;}
.nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;}
.nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;}
.nav a:hover{background:#04fdc4}
div{height:130px; line-height:130px;font-size:30px;text-align:center}
</style>
</head>
<body>
<p class="nav">
<a href="#1">第一个</a>
<a href="#2">第二个</a>
<a href="#3">第三个</a>
<a href="#4">第四个</a>
<a href="#5">第五个</a>
</p>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
</body>
</html>
2.跳转至其他页面
第五章：分组元素####
1.<p>建立段落
2.<div>通用分组
和<p>段落的区别就是，两段文本的上下空隙是没有的。
3.<blockquote>引用大段他出内容
<blockquote>元素实际作用除了和<p>元素一样
4.<pre>展现格式化内容
<pre> #####
#####
#####
#####
##### </pre>
5.<hr>添加分隔
6.<ul><li>添加无序列表
<ul>元素表示无序列表，而<li>元素则是内部的列表项。
7.<ol><li>添加有序列表
<ol>元素表示有序列表，而<li>元素则是内部的列表项。<ol>元素目前支持三种属性
ol 元素属性
start 从第几个序列开始统计：<ol start="2">
reversed 是否倒序排列：<ol reversed>，一半主流浏览器不支持
type 表示列表的编号类型，值分别为：1、a、A、i、I
li 元素属性
value 强行设置某个项目的编号如：<li value="7">王五</li>
8.<dl><dt><dd>生成说明列表
<dl>
<dt> 这是一份文件 </dt>
<dd> 这里是这份文件的详细内容 1 </dd>
<dd> 这里是这份文件的详细内容 2 </dd>
</dl>
解释：这三个元素是一个整体，但<dt>或<dd>并非都必须出现。
第六章：表格元素####
1.<table><tr><td>构建基础表格
<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元
格。默认无边框，可在<table>增加border 属性。
2.<th>为表格添加标题单元格
<th>元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。
<th><td>均属于单元格，包含两个合并属性：colspan、rowspan 等。
3.<thead>添加表头
<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置
是不固定的，使用此元素可以限定在开头位置。
4.<tfoot>添加表脚
<tfoot>元素为表格生成表脚，限制在表格的底部。
5.<tbody>添加表主体
<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助
于后续 CSS 和 JavaScript 的控制。
6.<caption>添加表格标题
<caption>元素给表格添加一个标题。
7.<colgroup>设置列
<colgroup>元素是为了处理某个列，span 属性定义处理哪些列。
8.<col>更灵活的设置列
<col>元素表示单独一列。如果设置了 span 则，控制
多列。
应用实例：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
显示效果如下：
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
第七章：文档元素####
文档元素的大部分标签，是没有任何效果的，完全是为了配合语义使用，以强调它的结构性。
1.<header>表示首部
<header> 这里部分一般是页面头部，包括：LOGO、标题、导航等内容 </header>
2.<footer>表示尾部
<footer> 这里是页面的尾部，一般包括：版权声明、友情链接等内容 </footer>
3.<h1>~<h6>添加标题
<h1>标题部分</h1>
<h1>~<h6>实际作用就是加粗并改变字体大小。用于各种标题文档。
4.<hgroup>组合标题
5.<section>文档主题
6.<nav>添加导航
7.<article>添加一个独立成篇的文档
8.<aside>生成注释栏
9.<address>表示文档或 article 元素的联系信息。
10.<details>元素生成详情区域、<summary>元素在其内部生成说明标签
第八章：嵌入元素####
1.<img>**嵌入图像**
<img src="img.png" width="339" height="229" alt="风景图" ismap> </a>
2.<map>**创建分区响应图**
<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map"> <map name="Map">
<area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47" href="http://www.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112" href="http://www.soso.com" target="_blank" alt="多边形">
</map>
通过图片中的热点进行超链接
3.<iframe>**嵌入另一个文档**
4.<embed>**嵌入插件内容**
<embed src="" type="" width="480" height="400"></embed>
5.<progress>**显示进度**
<progress value="30" max="100"></progress>
<progress>元素可以显示一个进度条，一般通过 JS 控制内部的值。
6.<meter>**显示范围里的值**
<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
<meter>元素显示某个范围内的值。low值过低，high 值过高，optimum 最佳值，无效果。
第九章：音频和视频####
1、嵌入一个WebM视频
<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>
autoplay 表示自动开始播放；controls 表示显示播放控件；loop 表示循环播放；muted
表示静音。
<video src="http://li.cc/test.webm" width="800" height="600" controls
preload="none"></video>
preload 属性有三个值：none 表示播放器什么都不加载；metadata 表示播放之前只能
加载元数据（ 宽高、第一帧画面等信息） ；auto 表示请求浏览器尽快下载整个视频。
<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png"></video>
poster 属性表示在视频的第一帧，做一张预览图。
兼容多个浏览器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。
2、嵌入一个音频
<audio src="test.mp3" controls autoplay></audio>
兼容多个浏览器
<audio controls>
<source src="test.mp3">
<source src="test.m4a">
<source src="test.wav">
</audio>
第十章：表单元素####（再看原文）
1、表单元素解析
1.<form>定义表单
2.<input>表示用户输入数据
3.<label>添加说明标签
4.<fieldset>对表单进行编组
5.<legend>添加分组说明标签
6.<button>添加按钮
2、input元素解析
1.type 为 text 值时
2.type 为password 值时
3.type 为search 时
4.type 为number、range 时
5.type 为date 时
6.type 为color 时
7.type 为checkbox、radio 时
8.type 为submit、reset 和button 时
9.type 为image 时
10.type 为email、tel、url 时
11.type 为hidden 时
12.type 为file 时
3、其他元素解析
1.Select生成下拉列表
2.textarea多行文本框
第十一章：全局属性和其他####
1、实体
HTML 实体就是将有特殊意义的字符通过实体代码显示出来
2、元数据
<meta>元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个<meta>元
素。
1.指定名/值元数据对
2.声明字符编码
3.模拟 HTTP 标头字段
3、全局属性
全局属性是所有元素共有的行为，HTML5 还提供了一些其他的全局属性。
1.id 属性
<p id="abc">段落</p>
解释：id 属性给元素分配一个唯一标识符。这种标识符通常用来给 CSS 和 JavaScript 调用选
择元素。一个页面只能出现一次同一个 id 名称。
2.class 属性
class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS 样式。
3.lang 属性
<p lang="en">HTML5</p>
可以局部设置语言。
4.title 属性
<p title="HTML5 教程">HTML5</p>
对元素的内容进行额外的提示。
5.style 属性
<p style="color:red;">CSS 样式</p>
设置元素行内 CSS 样式