第一章 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="百度一下，你就知道">打開百度，你就知道！</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="百度一下，你就知道" 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、鍵盤事件
通過鍵盤觸發事件，類似用戶的行為：
5.5、鼠標事件
通過鼠標觸發事件，類似用戶的行為：
5.6、媒體事件
通過視頻（videos），圖像（images）或音頻（audio） 觸發該事件，多應用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>。
5.7、其它事件
