第一章：HTML5概述####
1、HTML5概念：
HTML5 并不僅僅是 HTML 規(guī)范的最新版本，而是一系列用來制作現(xiàn)代富 Web 內(nèi)容的相關(guān)技術(shù)的總稱舌仍，其中最重要的三項(xiàng)技術(shù)分別為：HTML5 核心規(guī)范（ 標(biāo)簽元素） 铃拇、CSS（ 層疊樣式表第三代） 、和 JavaScript俩垃。
2励幼、HTML5 核心：主要由 W3C 官方的規(guī)范組成，涉及新的語義元素口柳、新的增強(qiáng)的Web表單苹粟、音頻和視頻、以及通過 JavaScript 繪圖的 Canvas跃闹。
3嵌削、HTML5 的特點(diǎn)：
向下兼容
用戶至上
化繁為簡(jiǎn)
無插件范式
訪問通用性
引入語義
引入原生媒體支持
引入可編程內(nèi)容
第二章：基本格式####
1、文檔結(jié)構(gòu)解析：
1.Doctype <!DOCTYPE html> //不分區(qū)大小寫
**2.html **元素 <html lang="zh-cn"> //如果是英文則為 en
**3.head **元素 <head>...</head> //這些信息在頁(yè)面不可見
**4.meta **元素 <meta charset="utf-8"> //除了設(shè)置編碼望艺，還有別的
**5.title **元素 <title>基本結(jié)構(gòu)</title>//瀏覽器左上角標(biāo)題
**6.body **元素 <body>...</body>
**7.a **元素
2苛秕、元素標(biāo)簽
單標(biāo)簽元素：?jiǎn)螛?biāo)簽一般用于聲明或者插入某個(gè)元素.
比如聲明字符編碼就用<meta>，插入圖片就用<img>
多標(biāo)簽元素：雙標(biāo)簽一般用于設(shè)置一段區(qū)域的內(nèi)容荣茫，將其包含起來.
比如段落<p>...</p>
第三章：文本元素####
1.<b>表示關(guān)鍵字和產(chǎn)品名稱想帅，加粗
<b>HTML5</b>
2.<strong>表示重要的文字，加粗
<strong>HTML5</strong>
3.<br>強(qiáng)制換行啡莉、<wbr>安全換行港准，根據(jù)瀏覽器
<br> Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.
4.<i>表示外文詞匯或科技術(shù)語，傾斜
<i>HTML5</i>
5.<em>加以強(qiáng)調(diào)咧欣，傾斜
<em>HTML5</em>
6.<s>表示不準(zhǔn)確或校正浅缸，刪除線
<s>HTML5</s>
7.<del>表示刪除文字，刪除線
<del>HTML5</del>
8.<u>表示給文字加上下劃線
<u>HTML5</u>
9.<ins>添加一段文本魄咕，下劃線
<ins>HTML5</ins>
10.<small>添加小號(hào)字體
<small>HTML5</small>
11.<sub><sup>添加上標(biāo)和下標(biāo)
<sub>5</sub>下標(biāo)
<sup>5</sup>上標(biāo)
12.<code>等表示輸入和輸出
13.<q>引用來自他處的內(nèi)容衩椒，雙引號(hào)
<q>HTML5</q>
14.<span>表示一般性文本
<span>HTML5</span>
第四章：超鏈接和路徑####
1、超鏈接的屬性
href 屬性
<a >百度</a>
target 屬性
<a target="_blank">百度</a>
----target參數(shù)：blank、_parent毛萌、_self苟弛、_top
最常用的是_blank，新建一個(gè)窗口阁将。而_self 是默認(rèn)膏秫，當(dāng)前窗口打開。
2做盅、相對(duì)與絕對(duì)路徑
所謂相對(duì)路徑缤削，就是相對(duì)于鏈接頁(yè)面而言的另一個(gè)頁(yè)面的路徑。而絕對(duì)路徑吹榴，就是直接從
file:///磁盤符開始的完整路徑亭敢。
目錄語法
同一個(gè)目錄：index2.html 或./index2.html；
在子目錄：xxx/index2.html图筹；
在孫子目錄：xxx/xxx/index2.html帅刀；
在父目錄：../index2.html痕支；
在爺爺目錄：../../index2.html盲镶；
3、錨點(diǎn):超鏈接通過屬性 id 或 name 實(shí)現(xiàn)錨點(diǎn)定位通今。
1.頁(yè)內(nèi)跳轉(zhuǎn)
<html>
<head>
<title>錨點(diǎn)的使用講解</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">第一個(gè)</a>
<a href="#2">第二個(gè)</a>
<a href="#3">第三個(gè)</a>
<a href="#4">第四個(gè)</a>
<a href="#5">第五個(gè)</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.跳轉(zhuǎn)至其他頁(yè)面
第五章：分組元素####
1.<p>建立段落
2.<div>通用分組
和<p>段落的區(qū)別就是民宿，兩段文本的上下空隙是沒有的。
3.<blockquote>引用大段他出內(nèi)容
<blockquote>元素實(shí)際作用除了和<p>元素一樣
4.<pre>展現(xiàn)格式化內(nèi)容
<pre> #####
#####
#####
#####
##### </pre>
5.<hr>添加分隔
6.<ul><li>添加無序列表
<ul>元素表示無序列表像鸡，而<li>元素則是內(nèi)部的列表項(xiàng)活鹰。
7.<ol><li>添加有序列表
<ol>元素表示有序列表，而<li>元素則是內(nèi)部的列表項(xiàng)只估。<ol>元素目前支持三種屬性
ol 元素屬性
start 從第幾個(gè)序列開始統(tǒng)計(jì)：<ol start="2">
reversed 是否倒序排列：<ol reversed>志群，一半主流瀏覽器不支持
type 表示列表的編號(hào)類型，值分別為：1蛔钙、a锌云、A、i吁脱、I
li 元素屬性
value 強(qiáng)行設(shè)置某個(gè)項(xiàng)目的編號(hào)如：<li value="7">王五</li>
8.<dl><dt><dd>生成說明列表
<dl>
<dt> 這是一份文件 </dt>
<dd> 這里是這份文件的詳細(xì)內(nèi)容 1 </dd>
<dd> 這里是這份文件的詳細(xì)內(nèi)容 2 </dd>
</dl>
解釋：這三個(gè)元素是一個(gè)整體桑涎，但<dt>或<dd>并非都必須出現(xiàn)。
第六章：表格元素####
1.<table><tr><td>構(gòu)建基礎(chǔ)表格
<table>元素表示一個(gè)表格的聲明兼贡，<tr>元素表示表格的一行攻冷，<td>元素表示一個(gè)單元
格。默認(rèn)無邊框遍希，可在<table>增加border 屬性等曼。
2.<th>為表格添加標(biāo)題單元格
<th>元素主要是添加標(biāo)題行的單元格，實(shí)際作用就是將內(nèi)部文字居中且加粗。
<th><td>均屬于單元格禁谦，包含兩個(gè)合并屬性：colspan胁黑、rowspan 等。
3.<thead>添加表頭
<thead>元素就是限制和規(guī)范了表格的表頭部分州泊。尤其是以后動(dòng)態(tài)生成表頭丧蘸，它的位置
是不固定的，使用此元素可以限定在開頭位置拥诡。
4.<tfoot>添加表腳
<tfoot>元素為表格生成表腳触趴，限制在表格的底部。
5.<tbody>添加表主體
<tbody>元素主要是包含住非表頭表腳的主體部分渴肉，有助于表格格式的清晰冗懦，更加有助
于后續(xù) CSS 和 JavaScript 的控制。
6.<caption>添加表格標(biāo)題
<caption>元素給表格添加一個(gè)標(biāo)題仇祭。
7.<colgroup>設(shè)置列
<colgroup>元素是為了處理某個(gè)列披蕉，span 屬性定義處理哪些列。
8.<col>更靈活的設(shè)置列
<col>元素表示單獨(dú)一列乌奇。如果設(shè)置了 span 則没讲，控制
多列。
應(yīng)用實(shí)例：
<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
第七章：文檔元素####
文檔元素的大部分標(biāo)簽礁苗，是沒有任何效果的爬凑，完全是為了配合語義使用，以強(qiáng)調(diào)它的結(jié)構(gòu)性试伙。
1.<header>表示首部
<header> 這里部分一般是頁(yè)面頭部嘁信，包括：LOGO、標(biāo)題疏叨、導(dǎo)航等內(nèi)容 </header>
2.<footer>表示尾部
<footer> 這里是頁(yè)面的尾部潘靖，一般包括：版權(quán)聲明、友情鏈接等內(nèi)容 </footer>
3.<h1>~<h6>添加標(biāo)題
<h1>標(biāo)題部分</h1>
<h1>~<h6>實(shí)際作用就是加粗并改變字體大小蚤蔓。用于各種標(biāo)題文檔卦溢。
4.<hgroup>組合標(biāo)題
5.<section>文檔主題
6.<nav>添加導(dǎo)航
7.<article>添加一個(gè)獨(dú)立成篇的文檔
8.<aside>生成注釋欄
9.<address>表示文檔或 article 元素的聯(lián)系信息。
10.<details>元素生成詳情區(qū)域秀又、<summary>元素在其內(nèi)部生成說明標(biāo)簽
第八章：嵌入元素####
1.<img>**嵌入圖像**
<img src="img.png" width="339" height="229" alt="風(fēng)景圖" ismap> </a>
2.<map>**創(chuàng)建分區(qū)響應(yīng)圖**
<img src="img.png" alt="風(fēng)景圖" 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>
通過圖片中的熱點(diǎn)進(jìn)行超鏈接
3.<iframe>**嵌入另一個(gè)文檔**
4.<embed>**嵌入插件內(nèi)容**
<embed src="" type="" width="480" height="400"></embed>
5.<progress>**顯示進(jìn)度**
<progress value="30" max="100"></progress>
<progress>元素可以顯示一個(gè)進(jìn)度條单寂，一般通過 JS 控制內(nèi)部的值。
6.<meter>**顯示范圍里的值**
<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>
<meter>元素顯示某個(gè)范圍內(nèi)的值吐辙。low值過低凄贩，high 值過高，optimum 最佳值袱讹，無效果疲扎。
第九章：音頻和視頻####
1昵时、嵌入一個(gè)WebM視頻
<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>
autoplay 表示自動(dòng)開始播放；controls 表示顯示播放控件椒丧；loop 表示循環(huán)播放壹甥；muted
表示靜音。
<video src="http://li.cc/test.webm" width="800" height="600" controls
preload="none"></video>
preload 屬性有三個(gè)值：none 表示播放器什么都不加載壶熏；metadata 表示播放之前只能
加載元數(shù)據(jù)（ 寬高句柠、第一幀畫面等信息） ；auto 表示請(qǐng)求瀏覽器盡快下載整個(gè)視頻棒假。
<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png"></video>
poster 屬性表示在視頻的第一幀溯职，做一張預(yù)覽圖。
兼容多個(gè)瀏覽器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
通過<source>元素引入多種格式的視頻帽哑，讓更多的瀏覽器保持兼容谜酒。
2、嵌入一個(gè)音頻
<audio src="test.mp3" controls autoplay></audio>
兼容多個(gè)瀏覽器
<audio controls>
<source src="test.mp3">
<source src="test.m4a">
<source src="test.wav">
</audio>
第十章：表單元素####（再看原文）
1妻枕、表單元素解析
1.<form>定義表單
2.<input>表示用戶輸入數(shù)據(jù)
3.<label>添加說明標(biāo)簽
4.<fieldset>對(duì)表單進(jìn)行編組
5.<legend>添加分組說明標(biāo)簽
6.<button>添加按鈕
2僻族、input元素解析
1.type 為 text 值時(shí)
2.type 為password 值時(shí)
3.type 為search 時(shí)
4.type 為number、range 時(shí)
5.type 為date 時(shí)
6.type 為color 時(shí)
7.type 為checkbox屡谐、radio 時(shí)
8.type 為submit述么、reset 和button 時(shí)
9.type 為image 時(shí)
10.type 為email、tel愕掏、url 時(shí)
11.type 為hidden 時(shí)
12.type 為file 時(shí)
3度秘、其他元素解析
1.Select生成下拉列表
2.textarea多行文本框
第十一章：全局屬性和其他####
1、實(shí)體
HTML 實(shí)體就是將有特殊意義的字符通過實(shí)體代碼顯示出來
2饵撑、元數(shù)據(jù)
<meta>元素可以定義文檔中的各種元數(shù)據(jù)敷钾，而且一個(gè) HTML 頁(yè)面可以包含多個(gè)<meta>元
素。
1.指定名/值元數(shù)據(jù)對(duì)
2.聲明字符編碼
3.模擬 HTTP 標(biāo)頭字段
3肄梨、全局屬性
全局屬性是所有元素共有的行為，HTML5 還提供了一些其他的全局屬性挠锥。
1.id 屬性
<p id="abc">段落</p>
解釋：id 屬性給元素分配一個(gè)唯一標(biāo)識(shí)符众羡。這種標(biāo)識(shí)符通常用來給 CSS 和 JavaScript 調(diào)用選
擇元素。一個(gè)頁(yè)面只能出現(xiàn)一次同一個(gè) id 名稱蓖租。
2.class 屬性
class 屬性用來給元素歸類粱侣。通過是文檔中某一個(gè)或多個(gè)元素同時(shí)設(shè)置 CSS 樣式。
3.lang 屬性
<p lang="en">HTML5</p>
可以局部設(shè)置語言蓖宦。
4.title 屬性
<p title="HTML5 教程">HTML5</p>
對(duì)元素的內(nèi)容進(jìn)行額外的提示齐婴。
5.style 屬性
<p style="color:red;">CSS 樣式</p>
設(shè)置元素行內(nèi) CSS 樣式