第一章 HTML5概述
1.1、什么是HTML
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
1.2、什么是HTML5
HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。
1.3、本文重要说明
由于HTML5只是在HTML的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起，HTML一般用于描述网页的结构，所以一些样式和脚本方面的标签和属性以及关于JavaScript部分的特性也不再提及，重点在于梳理常用标签体系。
1.4、浏览器的版本
现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等，通过对这些主流web浏览器的发展策略调查，发现它们都支持HTML5上采取了措施。
（1）IE浏览器
2010年3月16日，微软MIX10技术大会上宣布其推出的IE9浏览器已经支持HTML5。同时还声称，随后将会更多的支持HTML新标准和CSS3新特性。
（2）FireFox浏览器
2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版，该版本中Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多的HTML5语法分析器，以及支持更多的HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频，在线音频在内的多种应用都已经在版本中实现。
（3）Google浏览器
2010年2月19日，谷歌Gears项目经理通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。据费特表示，目前在谷歌看来，Gears应用用于HTML5的诸多创新非常相似，并且谷歌一直积极发展HTML5项目。因此只要谷歌不断以加强网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是谷歌做出吊证的重要原因。
（4）Safari浏览器
2010年6月7日，苹果在开发者发布会公布Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera浏览器
2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3，将会是全球互联网发展的未来趋势，包括目前Opera在内的诸多浏览器厂商，纷纷研发HTML5的相关产品，web未来属于HTML5。
综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。
1.5、选择开发工具
Notepad++
官方地址：点击打开
是否免费：免费
Visual Studio Code
官方地址：点击打开
是否免费：免费
HBuilderX
官方地址：点击打开
是否免费：免费
Dreamweaver
官方地址：点击打开
是否免费：收费
Sublime Text
官方地址：点击打开
是否免费：收费
Webstorm
官方地址：点击打开
是否免费：收费
Webstorm为本文使用的工具，请自行购买激活，也可以使用以上的免费工具，安装步骤都较为简单，在此省略！
第二章 HTML5语法
2.1、基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
2.2、语法规范
- HTML中不区分大小写，但是我们一般都使用小写
- HTML中的注释不能嵌套
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- HTML标签可以嵌套，但是不能交叉嵌套
- HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
2.3、标签规范
单标签：
<标签名 [属性名=属性值,...]>
成对标签：
<标签名 [属性名=属性值,...]></标签名>
第三章 HTML5标签
3.1、标题标签
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6>
3.2、段落标签
<p>这是一个段落</p>
3.3、链接标签
使用示例：
<a href="https://www.baidu.com">打开百度，你就知道！</a>
常见属性：
3.4、图像标签
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
3.5、表格标签
<table border="1px" cellpadding="0px" cellspacing="0px"> <tr> <th>表头一</th> <th>表头二</th> <th>表头三</th> <th>表头四</th> </tr> <tr> <td>单元格一</td> <td>单元格二</td> <td>单元格三</td> <td>单元格四</td> </tr> </table>
3.6、列表标签
无序列表：
<ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul>
有序列表：
<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>
自定义列表：
<dl> <dt>+</dt><dd>列表项</dd> <dt>+</dt><dd>列表项</dd> <dt>+</dt><dd>列表项</dd> </dl>
3.7、分组标签
<div>具体内容</div>
<span>具体内容</span>
3.8、语义标签
常见标签：
基本布局：
3.9、表单标签
常见标签：
案例演示：
1、form、input、label演示
<form action="" method="get"> <p> <label for="username">账户：</label> <input type="text" name="username" id="username"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password"> </p> <p><input type="submit"></p> </form>
2、textarea演示
<form action="" method="post"> <textarea name="mycontext" cols="30" rows="10"></textarea> <input type="submit"> </form>
3、fieldset、legend、select、optgroup、option演示
<form action="" method="post"> <fieldset> <legend>请选择你的爱好：</legend> <select name="myhobby" id="myhobby"> <optgroup label="运动"> <option value="篮球">篮球</option> <option value="足球">足球</option> </optgroup> <optgroup label="电子"> <option value="看电影">看电影</option> <option value="看电视">看电视</option> </optgroup> </select> </fieldset> </form>
4、datalist演示
<form action="" method="post"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
5、单选框演示
<form action="" method="post"> <input type="radio" name="sex" id="male" value="male" checked> <label for="male">Male</label> <input type="radio" name="sex" id="female" value="female"> <label for="female">female</label> </form>
6、复选框演示
<form action="" method="post"> <input type="checkbox" name="vehicle" id="bike" value="bike"> <label for="bike">I have a bike</label> <input type="checkbox" name="vehicle" id="car" value="car"> <label for="car">I have a car</label> </form>
3.10、框架标签
<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>
3.11、音频标签
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 Audio 标签。 </audio>
3.12、视频标签
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 Video 标签。 </video>
3.13、其它标签
水平线：<hr> 换行：<br> <b>粗体文本</b> <code>计算机代码</code> <em>强调文本</em> <i>斜体文本</i> <kbd>键盘输入</kbd> <pre>预格式化文本</pre> <small>更小的文本</small> <strong>重要的文本</strong> <abbr>缩写词或者首字母缩略词</abbr> <address>联系信息</address> <bdo>文字方向</bdo> <blockquote>从另一个源引用的部分</blockquote> <cite>工作的名称</cite> <del>删除的文本</del> <ins>插入的文本</ins> <sub>下标文本</sub> <sup>上标文本</sup>
3.14、头部标签
第四章 HTML5属性
4.1、属性概述
HTML标签可以设置属性，属性总是以名称/值对的形式出现，比如：name=“value”，它的主要作用是控制或修饰标签。
4.2、通用属性
第五章 HTML5事件
5.1、事件概述
HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
5.2、窗口事件
由窗口触发该事件 (同样适用于 <body> 标签)：
5.3、表单事件
表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：
5.4、键盘事件
通过键盘触发事件，类似用户的行为：
| 属性 | 值 | 描述 |
| onkeydown | script | 当按下按键时运行脚本。 |
| onkeypress | script | 当按下并松开按键时运行脚本。 |
| onkeyup | script | 当松开按键时运行脚本。 |
5.5、鼠标事件
通过鼠标触发事件，类似用户的行为：
5.6、媒体事件
通过视频（videos），图像（images）或音频（audio） 触发该事件，多应用于HTML媒体元素比如：<embed>，<object>，<img>，<audio>和<video>。
5.7、其它事件
| 属性 | 值 | 描述 |
| onshow | script | 当 <menu> 元素在上下文显示时触发。 |
| ontoggle | script | 当用户打开或关闭 <details> 元素时触发。 |
