關於Web前端之HTML5，你知道多少？

瀏覽器內核

IE：trident
谷歌/歐鵬：blink
火狐：gecko
蘋果(Safari)：webkit

概念：也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息，渲染引擎是兼容性問題出現的根本原因。

URL地址

瀏覽器向服務器發送請求(通過http協議)。
http協議:超文本傳輸協議，也就是瀏覽器和服務端的網頁傳輸數據的約束和規範。
URL協議:平時我們寫的網址就是url地址
協議規定格式:scheme://host.domain:port/path/filename
scheme:定義因特網服務的類型，常見的就是http。
host:定義域主機（http的默認主機是www）。
domain:定義因特網域名比如:w3school.com.cn。
port:定義端口號（網頁默認端口:80）
path:網頁所在服務器上的路徑。
filename:文件名稱。

html簡介

html（Hyper Text Markup Language）中文譯爲“超文本標記語言”，主要是通過標記對網頁中的文本，圖片，聲音等內容進行描述。

開發工具

Adobe Dreamweave：歷史悠久，設計師使用。
Sublime：輕量級，有很多好用的插件。
Webstorm：重量級，太過智能。

`HTML<!DOCTYPE>`

聲明必須是 HTML 文檔的第一行，聲明是html5的版本。

Web標準構成

Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。
結構標準(Structure)：結構用於對網頁元素進行整理和分類，主要包括XML和XHTML兩個部分。
樣式標準(Presentation)：表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要指CSS。
行爲標準(Behavior)：行爲是指網頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分。

字符集：`<meta charset="utf-8">`

GB2312：簡體中文，包括6763個漢字。
BIG5：繁體中文，港澳臺等專用。
GBK：包含全部中文字符，是GB2312的擴展，加入對繁體字的支持，兼容GB2312。
UTF-8：則包含全世界所有國家需要用到的字符。

標題標籤(熟記)

這是一個雙標籤，有<h1>到<h6>
標題標籤語義:作爲標題使用，並且依據最重要性遞減。

注意:h1標籤因爲很重要，儘量少用，不要動不動就h1，一般h1都是給logo使用。

段落標籤(熟記)

單詞縮寫：paragraph，段落
在網頁中要把文字有條理地顯示出來，離不開段落標籤，就如同我們平常寫文章一樣，整個網頁也可以分爲若干個段落，而段落的標籤就是<p>文本內容</p>，是html文檔中最常見的標籤，默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。

水平線標籤(認識)

單詞縮寫：horizontal，橫線
在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標記來完成，<hr/>就是創建橫跨網頁水平線的標記。其基本語法格式爲：<hr/>是單標記。

換行標籤(熟記)

單詞縮寫：break 打斷，換行
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然後自動換行。如果希望某段文本強制換行顯示，就需要使用換行標籤<br/>，這時如果還像在word中直接敲回車鍵換行就不起作用了。

div span標籤(重點)

<div span>是沒有語義的，是我們網頁佈局主要的兩個盒子。
div就是division的縮寫，分割，區分的意思，其實有很多div來組合網頁。
span，跨度，跨距；範圍。
語法格式:
<div>這是頭部</div> <span>今日價格</span>

文本格式化標籤(熟記)

<b></b>和<strong></strong>文字以粗體方式顯示（XHTML推薦使用strong）
<i></i>和<em></em>文字以斜體方式顯示（XHTML推薦使用em）
<s></s>和<del></del>文字以加刪除線方式顯示（XHTML推薦使用del）
<u></u>和<ins></ins>文字以加下劃線方式顯示（XHTML不贊成使用u）

圖像標籤img(重點)

單詞縮寫：image 圖像
用法：<img src="圖像的URL" />
<img />標記屬性

鏈接標籤(重點)

單詞縮寫:anchor的縮寫。基本解釋錨，鐵錨的
語法結構:<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href：用於指定鏈接目標的URL地址，當爲標籤應用href屬性時，它就具有了超鏈接的功能。Hypertext Reference的縮寫。意思是超文本引用。
target：用於指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self爲默認值，_blank爲在新窗口中打開方式。

注意:

外部鏈接需要添加http://
內部鏈接直接鏈接內部頁面名稱即可，比如<a href="index.html">首頁</a>
如果當時沒有確定鏈接目標時，通常將href="#"，表示該鏈接暫時爲一個空連接。
不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以一添加超鏈接。

錨點定位(難點)

通過創建錨點鏈接，用戶能夠快速定位到目標內容。
創建錨點鏈接分爲兩步：
使用<a href="#id名">鏈接文本</a>
使用相應的id名標註跳轉目標的位置。id="id名"

base標籤

base可以設置整體鏈接的打開狀態，此標籤放在head中。
<base target="_blank" />所有鏈接頁面在新窗口中打開。

特殊字符標籤(理解)

註釋標籤


注意:多寫註釋是非常好的寫代碼習慣，團隊協作更順暢。註釋是寫給隊友看的，瀏覽器是不執行的。

路徑(重點,難點)

相對路徑：
圖像文件和HTML文件位於同一文件夾，只需要輸入圖像文件的名稱即可，如<img src="logo.gif" />。
圖像文件位於HTML文件的下一級文件夾，輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。
,圖像文件位於HTML文件的上一級文件夾，在文件名之前加入"…/"，如果是上兩級，則需要使用“…/…/”，以此類推，如<img src="../logo.gif" />。
絕對路徑：
“D:\web\img\logo.gif”，或完整的網絡地址，例如“http://www.love.com/images/logo.gif”。

無序列表ul(重點)

無序列表的各個列表之間沒有順序級別之分，是並列的。其基本語法格式如下：

<ul >
<li >列表1</li >
<li >列表2</li >
</ul >

注意:

<ul ></ul>中只能嵌套<li></li>，直接在<ul></ul>標籤中輸入其他標籤或者文字的做法是不被允許的。
<li></li>之間相當於一個容器，可以容納所有元素。
無序列表會帶有自己樣式屬性，放下那個樣式，讓css來。

有序列表ol(瞭解)

有序列表即爲有排列順序的列表，其各個列表項按照一定的順序排列定義，其基本語法如下：

<ol>
<li>列表1</li>
<li>列表2</li>
</ol>

ol所有特性基本與ul一致，但實際工作中，較少用ol。

自定義列表(理解)

定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

< dl>
< dt>名詞1< /dt>
< dd>名詞1解釋< /dd>
< dd>名詞2解釋< /dd>
< /dl>

表格table(會用)

創建表格：

<table>
<tr> //確定幾行
	 <td>單元格內的文字</td> //確定單元格數量
</tr>
</table>

注意：
<tr></tr>中只能嵌套<td></td>
<td></td>標籤，他就像一個容器，可以容納所有的元素。

表頭標籤

表頭一般位於表格的第一行或第一列，其文本加粗居中。設置表頭很簡單，主需要用表頭標籤<th></th>替代相應的單元格標籤<td></td>即可。

表格結構(瞭解)

在使用表格進行佈局時，可以將表格劃分爲頭部、主體和頁腳(頁腳因爲有兼容性問題,因此不再贅述)如下：

<thead></thead>：用於定義表格的頭部。必須位於<table></table>標籤中，一般包含網頁的logo和導航等頭部信息。
<tbody></tbody>：用於定義表格的主體。位於<table></table>標
籤中，一般包含網頁中除頭部和底部之外的其他內容。

表格標題

<table>
   <caption>我是表格標題</caption>
</table>

Caption標籤必須緊隨table標籤之後。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。

合併單元格(難點)

跨行合併：rowspan 跨列合併：colspan
合併單元格的思想:將多個內容合併的時候，就會有多餘的東西，把它刪除。例如把3個td合併成一個，那就多餘了2個，需要刪除。公式:刪除的個數 = 合併的個數 - 1

總結表格

①表格提供了HTML中定義表格式數據的方法。
②表格中由行中的單元格個組成。
③表格中沒有列元素，列的個數取決於行的單元格個數。
④表格不要糾結於外觀，那是CSS的作用。

表格的學習要求：能手寫表格結構，並且能合併單元格。

表單標籤(掌握)

在上面的語法中，<input />標籤爲單標籤，type屬性爲其最基本的屬性，其取值有多種，用於指定不同的控件類型。除了tpye屬性之外，<input />標籤還可以定義很多其他的屬性，其常用屬性如下表所示。

label標籤(理解)

label標籤爲input元素定義標註（標籤）。

作用：用於綁定一個表單元素，當點擊label標籤的時候，被綁定的表單元素就會獲得輸入焦點。

如何綁定元素呢？

單個表單用lalbel直接進行包裹input就可以了。
如果label裏面有多個表單，想定位到某個可以通過for，id的格式來進行。

textarea控件(文本域)

如果需要輸入大量的信息，就需要用到<textarea></textarea>標籤。通過textarea控件可以輕鬆地創建多行文本輸入框，其基本語法格式如下：

下拉菜單

使用select控件定義下拉菜單的基本語法格式如下：

注意：

中至少應包含一對。
在option中定義selected=“selected”時，當前項即爲默認選中項。

表單域

在HTML中，form標籤被用於定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。創建表單的基本語法格式如下：

常用屬性：

action在表單收集到信息後，需要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址。
method用於設置表單數據的提交方式，其取值爲get或者post。
name用於指定表單的名稱，以區分同一個頁面中的多個表單。
注意：每一個表單都應該有自己的表單域。

HTML5新標籤與特性

文檔類型設定（document）

HTML：sublime，輸入html：4s
XHTML：sublime，輸入html：xt
HTML5：sublime，輸入html：5 <!DOCTYPE html>

字符設定
<meta http-equiv="Content-Type" content="text/html;utf-8">HTML與XHTML中建議這樣去寫。
<meta charset="utf-8">HTML5的標籤中建議這樣去寫。
常用新標籤
datalist標籤定義選項列表。請與input元素配合使用改元素。
fieldset元素可將表單內的相關元素分組，打包，與legend搭配使用。

新增的input type屬性值：
常用新屬性：

多媒體embed(會使用)

embed可以用來插入各種多媒體，格式可以是Midi、wav、AIFF、AU、MP3等等。url爲音頻或視頻文件及其路徑，可以是相對路徑或絕對路徑。因爲兼容性的問題，這裏不多做介紹，後面會說到audio和video視頻多媒體。

多媒體audio

HTML5通過<audio>標籤來解決音頻播放的問題，用法很簡單，如下：

<audio src=“./music/ok.mp3”></audio>

通過附加屬性可以更好控制音頻播放，如下：

Autoplay：自動播放
Controls：是否顯示控件
Loop：循環播放

由於版權等原因，不同的瀏覽器可以支持播放的格式是不一樣的，如下圖供參考：

多媒體video

使用方法：<video src=“./video/mv.mp4” controls=“controls”></video>
同樣哈，通過附件屬性可以更好emmmmm，控制播放咯：
Autoplay：自動播放
Controls：是否顯示默認播放控件
Loop：循環播放
Width：設置播放窗口寬度
Height：設置播放窗口的高度