第一章：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 >百度</a>
target 屬性
<a 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" target="_blank" alt="方形">
<area shape="circle" coords="187,142,47" target="_blank" alt="圓形">
<area shape="poly" coords="287,26,240,66,308,112" 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 樣式