本章首先介紹HTML5頁面的文檔結構，然后介紹HTML5的內容架構與文本、超鏈接、多媒體、表格及表單。
一、HTML5文檔結構
HTML5文件是由一些標簽語句組成的文本文件，標簽標識了內容和類型，Web瀏覽器通過解析這些標簽進行顯示。HTML5文件可以通過任意文本編輯器創建，但文件的擴展名必須使用“.htm”或“.html”，建議使用“.html”，以適應跨平台的需要。
相應的源代碼如下：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>頁面標題</title> </head> <body> … </body> </html>
在HTML5文檔中，文檔類型聲明<!DOCTYPE>是強制使用的，總是位於首行，這樣瀏覽器才能獲知文檔類型。
元素與標簽
元素是標記語言的基本單元，元素是通過使用HTML5標簽進行定義的。
元素（element）指文檔的各種成分（如頭、標題、段落、表格和列表等）。元素的類型、屬性和范圍用標簽來標識、設置和界定。
元素之間可以嵌套（形成樹狀結構），但不能交叉。嵌套的諸元素構成父子關系，外層稱為父元素，內層稱為子元素，多級嵌套則形成多重輩分的層次等級關系。
標簽（tag，標志/標記/標識/標注）是用來描述文檔內容的類型、組成與格式化信息的文本字符串，用一對尖括號“<”和“>”括起，位於起始標簽和終止標簽之間的文本是元素的內容。標簽可用於標識元素的類型，設置元素的屬性，並界定元素內容的始末。
如這是一個HTML5元素：
<b>此文本是粗體的。</b>
元素可按有無元素內容分為非空元素和空元素兩類，對應的標簽為非空標簽與空標簽。
1.非空元素與標簽
非空元素指含有內容的元素，非空標簽指標識非空元素的標簽，有開始和結束兩個標簽。非空元素標簽語句語法如下：
<元素名 [屬性名="屬性值"] …>元素內容</元素名>
其中“<元素名 [屬性名="屬性值"] …>”標識元素的開始，方括號內為可選內容。“</元素名>”標識元素的結束。
例如標題和超連接元素。
<title>測試頁</title> <a href="http://www.tsinghua.edu.cn/">清華大學</a>
2.空元素與標簽
空元素指不含內容的元素，空標簽指標識空元素的標簽。一個空元素只有一個標簽。空元素標簽語句語法如下：
<元素名 [屬性名="屬性值"] … />
例如圖像、換行和水平線元素。
<img src="lena.gif" /> <br /> <hr />
HTML5參考手冊
HTML5.2版本手冊可參閱https://www.w3.org/TR/html5/，最新的HTML5.3版本手冊可以參閱W3C在GitHub（一個開源項目托管平台）上的文檔內容，鏈接地址為http://w3c.github.io/html/。
屬性
屬性為HTML5元素提供附加信息。屬性總是以“名稱/值”對的形式出現，比如：“name="value"”，屬性總是在HTML5元素的開始標簽中規定。
開始標簽使用多個屬性時，用空格分隔，出現的順序無關緊要。屬性值要用單引號或雙引號括起來，單引號括起來的屬性值中可以包含雙引號，雙引號括起來的屬性值中也可以包含單引號。
<body bgcolor="yellow">
在HTML5文件中，有很多元素重復出現，為了區分，可以用id屬性給每個元素定義唯一的標識。在HTML5之前，以數值開頭的id和類是無效的，HTML5放開了這個限制，ID不能包含空格。每個元素的id屬性值在HTML5文檔中必須是唯一的。
如果有些元素無論內容還是樣式都基本相同，可以把這些元素合並為一類，用class屬性進行標識，這樣多個元素在表現時可以共用相同的樣式聲明。
HTML5語法規則要求比較松散，如某些標簽語句可以省略，省略並不意味着標簽不存在，它是隱含的；HTML5不區分大小寫；可以省略關閉空元素的斜杠；屬性值中只要不包含“>”、“、”、“=”或者空格等受限的字符，就可以不用加引號，沒有屬性值也可以。為了保證代碼規范，建議遵循以下幾點：
語法規則
1. 元素必須正確嵌套
所有的元素必須彼此正確地嵌套。如：
<b><i>粗體和斜體</i></b> <!--正確--> <b><i>粗體和斜體</b></i> <!--錯誤-->
2.非空元素要有結束標簽
瀏覽器雖然能夠對大多數沒有結束標簽的語句進行容錯處理，但有一些還是處理不了，為了避免這種情況，非空元素最好使用結束標簽。如：
<p>這是段落</p> <!--正確--> <p>這是段落 <!--不建議-->
3. 元素標簽名和屬性名最好小寫
標簽名和屬性名最好小寫。如：
<body> <p>這是段落</p> </body>
4. 屬性值最好加引號
屬性值最好用引號括起來，特別是屬性值含有空格的時候。如：
<table width="100%"> <!--正確-->
5. 屬性最好有值
使用的屬性最好有值，不能簡寫。如：
<input checked="checked" /><!—正確--> <input checked> <!—不建議-->
無論HTML5對語法要求多寬松，都有必要檢驗標記是否有效，可以通過W3C驗證器進行檢驗，鏈接地址為https://validator.w3.org/。
文檔結構元素
HTML5文檔結構元素用來描述HTML5文檔的頂層結構，包括文檔根元素html、頭元素head和體元素body。
<html>標簽
<html>與</html>標簽定義了文檔的開始和結束，告知瀏覽器其自身是一個HTML文檔。文檔由頭部和主體組成，文檔的頭部由<head>標簽定義，主體由<body>標簽定義。
<head>標簽
<head>標簽用於定義文檔頭部，<head>元素中的內容可以是腳本、樣式表和提供的元信息等。文檔的頭部描述了文檔的各種屬性和信息。
<base>、<link>、<meta>、<script>、<style>和<title>這些標簽可用在<head>里，<title>定義文檔的標題，是<head>唯一必需的元素。
<head>標簽放在文檔的開始處，緊跟在<html>后面。
<body>標簽
body元素定義文檔的主體，body元素包含文檔的所有內容（如文本、超連接、圖像、表格和列表等等）。
頭部元素
頭部元素里可以使用的標簽必須用在<head>里。
<title>標簽
<title>定義文檔的標題，標題顯示在瀏覽器窗口的標題欄上，當把文檔加入用戶的連接列表或者收藏夾時，標題將成為該文檔連接的默認名稱。<title>標簽是<head>標簽中唯一要求包含的。如：
<head> <title>木木書店</title> </head>
<meta>標簽
meta元素可提供有關頁面的元信息（meta-information），如針對搜索引擎提供的關鍵詞。<meta>標簽位於文檔的頭部，是空元素，<meta>標簽通過屬性定義與文檔相關聯的“名稱/值”對來提供頁面的元信息。“http-equiv”和“name”屬性是定義名稱的，“content”屬性是定義值的。
1. http-equiv屬性
http-equiv屬性定義了HTTP協議頭部使用的元信息名稱。
http-equiv屬性主要有以下幾個值。
expires
expires用於設定網頁在緩存區的到期時間，如果過期，必須到服務器上重新下載。expires必須使用GMT的時間格式。如：
<meta http-equiv="expires" content="Fri, 5 Mar 2012 18:18:18 GMT">
2. name屬性
和搜索有關的元信息
name屬性定義的meta名稱，主要是用於描述網頁內容和網頁的相關信息，便於搜索機器人查找和分類。包括：keywords、description、author、generator、revised和robots。
robots參數默認是all。
all：允許搜索機器人檢索網頁，頁面上的連接可以被查詢；
none：不允許搜索機器人檢索網頁，且頁面上的連接不可以被查詢；
index：允許搜索機器人檢索網頁，可以讓robot/spider登錄；
noindex：不允許搜索機器人檢索網頁，頁面上的連接可以被查詢，不讓robot/spider登錄；
follow：頁面上的連接可以被查詢；
nofollow：不允許搜索機器人檢索網頁，頁面上的連接可以被查詢。不讓robot/spider順着此頁的連接往下探查。
幾乎所有的搜索引擎都是通過搜索機器人自動在Internet搜索，當發現新的網站時，會檢索頁面中的keywords和decription，將其收錄到檢索數據庫，然后根據關鍵詞的密度將網站排序。
也就是說如果頁面沒有使用meta標簽定義keywords和description，那么搜索機器人無法將你的站點收錄到檢索數據庫，瀏覽者也就不可能通過搜索引擎來訪問你的站點。
二、HTML5內容結構與文本
內容結構簡稱結構，是為網頁內容建立一個框架，就象寫文章先寫一個提綱。結構使頁面內容看起來不會雜亂無章，每一部分都緊密聯系，形成一個整體。采用HTML5結構標簽可以將頁面划分成不同的區域或塊形成結構，然后在不同的區域或塊中填充內容，如報刊雜志版面設計一樣。
HTML5結構標簽
HTML5結構標簽用於搭建頁面主體內容結構，形成不同的區塊，完成整個頁面的排版布局。
<header>標簽
<header>標簽定義文檔的頁眉。通常用來放置整個頁面或頁面內的一個內容區塊的標題，但也可以包含其他內容，比如在header里面放置logo圖片、搜索表單等等。
一個頁面內並沒有限制header的出現次數，也就是說可以在同一頁面內，不同的內容區塊上分別加上一個header元素。
在HTML5中，一個header元素至少可以包含一個heading元素（h1-h6）。
<main>標簽
<main>標簽定義文檔的主要內容。<main>標簽中的內容對於文檔來說應當是唯一的，不包含在文檔中重復出現的內容，如邊欄、導航欄、版權信息、站點標志等。
在一個文檔中，不能出現一個以上的<main>標簽。<main>元素不能是<article>、<aside>、<footer>、<header> 或 <nav>的子元素。
<nav>標簽
<nav>標簽定義導航鏈接的部分，主要用於構建導航菜單、側邊欄導航、內頁導航和翻頁操作等區域。
<article>標簽
<article>標簽表示頁面中一塊與上下文不相關的獨立內容，比如一篇文章。這篇文章應有其自身的意義，應該有可能獨立於站點的其他部分，如論壇帖子、報紙文章、博客條目和用戶評論等。
<section>標簽
<section>標簽定義文檔中的節（區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<aside>標簽
<aside>標簽定義其所處內容之外的內容，這個內容應該與附近的內容相關，如可用作文章的側欄或邊欄。
<footer>標簽
<footer>標簽定義文檔或節的頁腳，元素應當含有其包含元素的信息。頁腳通常包含文檔的建立日期、作者、版權信息、使用條款鏈接和聯系信息等。可以在一個文檔中使用多個<footer>元素。
<div>標簽
HTML5幾乎所有的標簽都是有具體語義的，如<title>是定義文檔的標題。但<div>和<span>標簽並沒有具體標識這個元素到底是什么，需要在實際使用中根據元素內容確定。
<div>用來定義文檔中的分區或節，<div>標簽可以把文檔分割為獨立的、不同的部分，是一個容器標簽，<div>的內容可以是任何HTML5元素。如果有多個<div>標簽把文檔分成多個部分，可以使用id或class屬性來區分不同的<div>。
<div>是一個塊元素，塊元素的寬度為100％，而且后面隱藏附帶有換行符，塊元素在頁面顯示時始終占據一行，這樣塊元素周圍的元素不能與塊元素顯示在同一行上。
<div> <h3>這是一個標題</h3> <p>這是一個段落</p> </div> <span>一些文本</span> <span>一些其他文本</span>
<span>標簽
<span>用來定義文檔中一行的一部分，是行內元素，行內元素沒有固定的寬度，根據<span>元素的內容決定。<span>元素的內容主要是文本。
HTML5基礎標簽
基本標簽是HTML5使用最多的元素。
標題
標題使用<h1>至<h6>標簽進行定義。<h1>定義最大的標題，<h6>定義最小的標題，HTML5會自動在標題前后添加一個額外的換行。
<h1>這是一個標題</h1> <h2>這是一個標題</h2> <h3>這是一個標題</h3> <h4>這是一個標題</h4> <h5>這是一個標題</h5> <h6>這是一個標題</h6>
段落
正文段落使用<p>標簽進行定義，HTML5會自動在段落前后添加一個額外的空行。
<p>這是一個段落</p> <p>這是另一個段落</p>
換行符
在一個段落內，如果當前行沒結束，需換行顯示，可以使用<br />標簽。
<p>這是<br />一個段落<br />被換行</p>
注釋
注釋標簽用於在HTML5源碼中插入注釋，注釋會被瀏覽器忽略。
<!--這是一個注釋-->
左括號后需要寫一個驚嘆號，右括號前就不需要了。
HTML5格式化標簽
HTML5定義了很多供文本格式化輸出的元素，有確定的語義，通過呈現特殊的樣式加以區分，比如粗體和斜體字。
<tt>呈現類似打字機或者等寬的文本效果
<i>顯示斜體文本效果
<b>呈現粗體文本效果
<big>呈現大號字體效果
<small>呈現小號字體效果元素
<em>把文本定義為強調的內容
<strong>把文本定義為語氣更強的強調的內容
<sub>:下標文本
<sup>:上標文本
<ins>:插入文本
<del>:刪除文本
<pre>:預格式文本
建議使用樣式表設定來取得更加豐富的效果。
HTML5列表
無序列表
無序列表是一個項目的列表，每個項目默認使用粗體圓點進行標記。無序列表用<ul>標簽定義，每個列表項用<li>定義，列表項內容可以使用段落、換行符、圖片、連接以及其他列表等等。
無序列表<ul>有一個可選屬性type，用來規定列表里項目符號的類型。不贊成使用，建議用樣式取代它。
有序列表
有序列表也是項目，列表項目使用數字進行標記。有序列表用<ol>標簽定義，每個列表項用<li>定義，列表項內容可以使用段落、換行符、圖片、連接及其他列表等。
有序列表<ol>常用有二個可選屬性，type用來規定列表里項目編號的類型，start規定起始的序號。
定義列表
定義列表是項目及其注釋的組合，定義列表以<dl>標簽開始，每個定義列表項以<dt>開始，每個定義列表項的描述以<dd>開始，定義列表的列表項內部可以使用段落、換行符、圖片、連接以及其他列表等等。
三、HTML5超連接
超連接即超文本是指從一個網頁的信息節點指向一個目標的連接關系，當瀏覽者單擊信息節點時，連接目標將顯示在瀏覽器上，並且根據目標的類型來打開或運行。
<'a'>標簽
a是錨（anchor）的縮寫，HTML5使用<a>標簽實現信息節點與目標的超連接，連接目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是圖片、電子郵件地址、文件或者應用程序。
在所有瀏覽器中，<a>標簽通過外觀與其他元素相區別，超連接的默認外觀是：
未被訪問的連接帶有下划線而且是藍色的；
已被訪問的連接帶有下划線而且是紫色的；
活動連接帶有下划線而且是紅色的。
<a>標簽常用屬性
href屬性
通過使用href屬性，可以創建指向另外一個文檔的連接。用法如下：
<a href="url">顯示的文本或圖像</a>
<a>用來創建連接，href屬性指定需要連接文檔的目標位置，開始標簽和結束標簽之間的文本或圖像被作為超連接來顯示。
下面定義了指向清華大學的連接：
<a href="http://www.tsinghua.edu.cn/">清華大學</a>
連接的目標文檔可以是任意類型的文件，如果瀏覽器能夠處理，則在瀏覽器上打開顯示，否則瀏覽器提示下載保存文件。
連接是否正確與href屬性值有關，href屬性定義了連接目標的文檔路徑。文檔路徑一共有二種：絕對路徑和相對路徑，其中相對路徑又分為根相對路徑和文檔相對路徑。
如果要連接的文檔在站點之外，必須使用絕對路徑。
絕對路徑是包括通信協議名、服務器名、路徑及文件名的完全路徑。如連接清華大學信息科學技術學院首頁，絕對路徑是：“http://www.sist.tsinghua.edu.cn/docinfo/index.jsp”。如果站點之外的文檔在本地計算機上，比如連接F盤book_store目錄下default.html文件，那么它的路徑就是：“file:///F:/book_store/default.html”，這種完整地描述文件位置的路徑也是絕對路徑。
如果要連接當前站點內的文檔，需要使用相對路徑，相對路徑包括根相對路徑和文檔相對路徑兩種，一般多用文檔相對路徑。
根相對路徑的根是指本站點文件夾（根目錄），根相對路徑以“/”開頭，路徑是從當前站點的根目錄開始計算。比如一個網頁連接或引用站點根目錄下images目錄中的一個圖像文件a.gif，用根相對路徑表示就是：“/images/a.gif”。
文檔相對路徑是指包含當前文檔所在的文件夾，也就是以當前文檔所在的文件夾為基礎開始計算路徑。如當前網頁所在位置為F:\book_store\music，那么“a.html”就表示“F:\book_store\music\a.html”頁面文件，“../b.html”表示“F:\book_store\b.html” 頁面文件，其中“../”表示當前文件夾的上一級文件夾。如果在站點根目錄一個網頁需連接或引用站點根目錄下images目錄中的一個圖像文件a.gif，用文檔相對路徑表示就是：“images/a.gif”。
target屬性
被鏈接頁面通常顯示在當前瀏覽器窗口中，若使用了target屬性，可以在新的窗口中打開。用法如下：
<a href="url" target="_blank">顯示的文本或圖像</a>
HTML5字符集與顏色
HTML5字符實體
HTML5顏色
顏色由紅色、綠色、藍色混合而成。顏色值由一個#號和六位十六進制數表示，六位十六進制數由紅色、綠色和藍色的值組成（RGB），每種顏色的最小值是00（十進制0），最大值是FF（十進制255）。如：黑（#000000）、 紅（#FF0000）、綠（#00FF00）、藍（#0000FF）、黃（#FFFF00）、灰（#C0C0C0）、白（#FFFFFF）。
有16種顏色名被W3C的XHTML標准所支持。它們是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果需要使用其他的顏色，需要使用十六進制的顏色值。
四、HTML5圖像
可以在HTML5中顯示圖像的元素。
<'img'>標簽
在HTML5中，圖像由<img>標簽定義，<img>是空元素。
<img>標簽常用屬性。
1. 源屬性（src）
要在頁面上顯示圖像，必須使用源屬性聲明圖像的URL地址。格式如下：
<img src="url" />
URL指圖像文件的位置，瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。
2. 替換文本屬性（alt）
當瀏覽器不能顯示圖像時（如無法載入圖像或瀏覽器禁止圖像顯示），將在顯示圖像的位置上顯示替換文本屬性定義的文本。為頁面上的每一個圖像加上替換文本屬性有利於更好的顯示信息。如：
<img src="boat.gif" alt="船">
<img>標簽的alt屬性不能省略，否則在https://validator.w3.org/檢驗時會提示錯誤。
由於圖像是獨立文件存在的，如某個HTML文件包含十個圖像，要正確顯示這個頁面，需要加載11個文件，HTTP協議需要11次請求才能完成，加載圖片是需要時間的，所以要合理地在文檔內容中加入圖像，如果過度使用圖像，用戶在瀏覽該頁面時，會增加很多不必要的等待時間。
Web使用的主要圖像格式有：GIF、JPEG和PNG。
五、HTML5表格
表格是組織數據的一種有效方法，表格不僅僅用在文字處理上，在網頁的作用也非常重要，特別是表現列表數據方面。
表格結構和表格標簽
表格結構
表格是由行和列組成的二維表，每個表格均有若干行，每行有若干列，行和列圍成的區域是單元格，單元格的內容是數據，也稱數據單元格，數據單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。
一個典型的HTML5表格結構包括一個標題、頭部、主體和腳部。
表格標簽
表格由<table>來定義，行由<tr>定義，單元格由<td>定義，這三個標簽是表格常用的標簽。
常用表格標簽
<table>標簽
<table>標簽定義表格，簡單的HTML5表格由<table>以及一個或多個<tr>、<th>或<td>元素組成，<tr>定義表格行，<th>定義表頭行，<td>定義表格單元。更復雜的HTML5表格也可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>以及<tbody>元素。
border屬性規定圍繞表格的邊框寬度。border屬性會為每個單元格應用邊框，並用邊框圍繞表格。如果改變border屬性值，只有表格周圍邊框的尺寸發生變化，單元格的邊框還是1像素寬。設置border="0"，可以顯示沒有邊框的表格。
建議通過樣式表的方式設置樣式。
<tr>標簽
<tr>定義HTML5表格中的行，<tr>包含一個或多個<th>或<td>元素。
<td>標簽
<td>定義HTML5表格中的標准單元格。HTML5表格有兩類單元格：表頭單元格，包含頭部信息（由th元素創建）；標准單元格，包含數據（由td元素創建）。
<td>標簽常用屬性。
colspan和rowspan屬性用於建立不規范表格，所謂不規范表格是單元格的個數不等於行乘以列的數值。如3行3列的表格共有9個單元格，左圖所示是一個規范表格，右圖所示是一個不規范表格。
第一行第2、3兩個單元格合並為一個單元格，即第一行第2個單元格橫跨2列。第二行第3個單元格和第三行第3個單元格兩個單元格合並為一個單元格，即第二行第3個單元格橫跨2行。
<col>標簽
<col>標簽為表格中一個或多個列定義屬性值。如果對多個列應用樣式，<col>標簽很有用。只能在<table>或<colgroup>元素中使用<col>標簽。<col>標簽常用屬性。
六、HTML5表單
表單是允許瀏覽者進行輸入的區域，可以使用表單從用戶處收集信息。瀏覽者在表單中輸入信息，然后將這些信息提交給服務器，服務器中的應用程序會對這些信息進行處理，進行響應，這樣就完成了瀏覽者和服務器之間的交互。
什么是表單？
表單是一個包含表單域的容器。表單元素允許用戶在表單中使用表單域（如文本域、下拉列表、單選框和復選框等）輸入信息。
一個表單可以看成有三個組成部分：表單標簽、表單域和表單按鈕。表單標簽包含了處理表單數據所用的程序和數據提交到服務器的方法。表單域包含了文本框、密碼框、多行文本框、復選框、單選框和列表框等輸入元素。表單按鈕主要包括提交按鈕和復位按鈕，用於將數據傳送到服務器或者取消輸入。
表單的基本知識
<form>標簽
<form>標簽用於創建HTML5表單，表單用於向服務器傳輸數據。<form>標簽常用屬性。
action屬性
action屬性定義當提交表單時，向服務器何處發送表單數據，進行處理。也就是將表單的內容提交到action指定的服務器端腳本程序進行處理。
method屬性
method屬性規定如何發送表單數據，表單數據可以作為URL變量（method="get"）或者HTTP POST（method="post"）方式發送，即POST方法和GET方法。
采用POST方法是在HTTP請求中嵌入表單數據。瀏覽器首先與action屬性中指定的服務器建立連接，一旦建立連接之后，瀏覽器按分段傳輸的方法將數據發送給服務器。
采用GET方法時，瀏覽器會與服務器建立連接，然后將表單數據直接附在action URL之后，通過URL在一個傳輸步驟中發送所有的表單數據，URL和表單數據之間用問號進行分隔。如在百度進行搜索，URL為“http://www.baidu.com/”，當輸入關鍵字“HTML5”百度一下時，URL變成如下所示：
http://www.baidu.com/s?wd=HTML5&rsv_spt=1&issp=1&rsv_bp=0&ie=utf-8&tn=baiduhome_pg&inputT=3149
關鍵字“HTML5”作為表單的數據是通過URL傳送給百度服務器的。
使用GET方法不能發送比較多的表單數據。URL的長度限制在8192個字符以內，如果發送的數據量太大，數據將被截斷。
如果要收集用戶名和密碼、信用卡號或其他保密信息，POST方法會比GET方法相對安全，但POST方法發送的信息是未經加密的，容易被黑客獲取。
是選用POST方法還是GET方法發送表單數據呢？可以參考下面一些規律：
如果希望獲得最佳表單傳輸性能，可以采用GET方法發送比較少的數據。對有許多表單或，特別是有很長文本域的表單，應該采用POST方法來發送。如果考慮安全性，建議選用POST方法。GET方法將表單數據直接放在URL中，可以很輕松地捕獲它們，而且還可以從服務器的日志文件中進行摘錄。
autocomplete屬性
autocomplete屬性確定表單是否啟用自動完成功能。自動完成允許瀏覽器偵測字段輸入，當用戶開始鍵入時，瀏覽器會基於以前鍵入過的值，自動列表顯示在字段中填寫的選項。
表單域
表單中常用的表單域標簽。
<input>標簽
<input>標簽用於輸入信息，根據不同的type值，<input>有很多種形式，可以是文本框、復選框、單選按鈕和按鈕等。<input>是空標簽。<input>標簽常用的屬性。
type屬性
text
<input type="text" />
定義單行文本框，文本框的默認寬度是20個字符。
password
<input type="password" />
定義密碼域，密碼域中的字符會被掩碼（顯示為星號或原點）
radio
<input type="radio" />
定義單選按鈕，單選按鈕允許用戶在一定數目的選擇項中必須且僅能選取一個。
checkbox
<input type="checkbox" />
定義復選框，復選框允許用戶在一定數目的選擇項中不選、選取一個或多個。
hidden
<input type="hidden" />
定義隱藏域，隱藏域對於用戶是不可見的，隱藏域通常會存儲一個默認值。
file
<input type="file" />
定義文件域，用於文件上傳時選擇文件。
image
<input type="image" />
定義圖像形式的提交按鈕，必須把src屬性和alt屬性與<input type="image">結合使用。
button
<input type="button" />
定義按鈕，單擊按鈕時需自行定義行為。button常用於在用戶單擊按鈕時啟動JavaScript程序，響應用戶。如：
<input type="button" value="單擊我" onclick="alert('為什么?')" name="button" />
reset
<input type="reset" />
定義重置按鈕，重置按鈕會清除表單中的所有數據。
submit
<input type="submit" />
定義提交按鈕，提交按鈕用於向服務器發送表單數據。數據會發送到表單action屬性中指定的位置。
<input type="email" />
定義包含e-mail地址的輸入域，在提交表單時，會自動驗證email域的值。
url
<input type="url" />
定義包含URL地址的輸入域，在提交表單時，會自動驗證url域的值。
number
<input type="number" />
定義包含數值的輸入域，在瀏覽器可以顯示為微調框，用來改變文本框中的值。可以使用max和min屬性規定輸入數值的最大值和最小值，讓輸入的數據在合法值的范圍內。也可以使用step屬性規定合法的數字間隔，如step="2"，則合法的數是 -2,0,2,4等，每次用微調框上下箭頭調整值時按step值增加或減少。
range
<input type="range" />
定義包含一定范圍內數字值的輸入域，range類型顯示為滑動條，默認值范圍是0~100。同時可以使用max、min和step屬性。
date Pickers
<input type="date pickers" />
定義日期選擇域，顯示為微調框和下拉框的組合。HTML5擁有多個選取日期和時間的輸入類型：
date：選取日、月、年。month：選取月、年。
week：選取周和年。time：選取時間（小時和分鍾）。
datetime：選取時間、日、月、年（UTC 時間）。
datetime-local：選取時間、日、月、年（本地時間）。
search
<input type="search" />
用於搜索域，如站點搜索或Google搜索。search顯示為常規的文本框。
color
<input type="color" />
用於顏色選擇域，輸入時會打開調色板選取顏色。
HTML5(input_type).html中使用了不同的表單輸入元素。
value屬性
value屬性為input元素設定值。對於不同的輸入類型，value屬性值含義不同：
如果type類型是button、reset和submit，value定義按鈕上顯示的文本。
如果type類型是text、password和hidden，value定義域的初始值。
如果type類型是checkbox、radio、image，value定義與輸入相關聯的值。
單選按鈕和復選框必須設置value屬性，文件域不能使用value屬性。
accept屬性
accept屬性只能與<input type="file">配合使用，規定通過文件上傳提交的文件類型，屬性值是MIME列表中定義的。避免使用該屬性，最好在服務器端驗證文件上傳的類型。如下面代碼中文件上傳的類型可以接受GIF和JPEG兩種圖像：
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
如果不限制圖像的格式，可以寫為：accept="image/*"。
autofocus屬性
autofocus屬性規定在頁面加載時，表單域自動獲得焦點，該屬性適用於所有 <input>標簽的類型。
multiple屬性
multiple屬性規定輸入域中可選擇多個值，該屬性適用於以下類型的<input>標簽：email和file。
pattern屬性
pattern屬性規定input輸入域驗證的模式（正則表達式），輸入時必須按照這種模式進行匹配。如pattern="[0-9]"表示輸入值必須是0與9之間的數字。pattern屬性適用於以下類型的<input>標簽：text、search、url、telephone、email和password。
placeholder屬性
placeholder屬性提供輸入域占位符，用於描述所希望輸入的值，placeholder屬性適用於以下類型的<input>標簽：text、search、url、telephone、email和password。占位符在輸入域為空時顯示，在輸入域獲得焦點時消失。
required屬性
required屬性規定必須在提交表單之前填寫（不能為空）。required屬性適用於以下類型：text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file。
<textarea>標簽
<textarea>標簽定義多行文本區域，文本區域中可容納無限數量的文本，其中文本的默認字體是等寬字體（通常是Courier）。
cols和rows屬性
可以通過cols和rows屬性來規定<textarea>的大小，如下面的代碼將<textarea>區域設為5行40列。
<textarea rows="5" cols="40"> 在Web技術基礎課程里，你可以學習你所需要的知識。 </textarea>
wrap屬性
wrap屬性設置多行文本域的換行模式。通常情況下，當用戶在文本區域中輸入文本后，只有在按Enter鍵的地方才會換行。
wrap屬性默認值為"soft"，當表單中提交時，textarea中的文本不換行。
如果希望啟動自動換行功能，將wrap屬性設置為"hard"，當用戶輸入的一行文本長於文本區域的寬度時，瀏覽器會自動將多余的文字挪到下一行。當表單中提交時，textarea中的文本包含換行符。當使用"hard"時，必須使用cols屬性。
<label>標簽
<label>標簽為<input>元素定義標注。<label>標簽的for屬性可把<label>綁定到元素id值和for屬性值相同的元素上，這樣在<label>元素內單擊文本，瀏覽器自動將焦點轉移到和<label>綁定的元素上。
<input type="radio" name="sex" value="男" id="nan" /> <label for="nan">男</label>
<fieldset>標簽
<fieldset>可將表單內的相關元素分組，當一組表單元素放到<fieldset>標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界和3D效果。
<legend>標簽為<fieldset>定義分組標題。
<select>標簽
<select>可創建單選或多選列表，當提交表單時，瀏覽器會提交選定的項目。
<select>標簽常用屬性。
如果size屬性的值大於1，但是小於列表中選項的總數目，瀏覽器會顯示出列表框，表示可以查看更多選項，否則瀏覽器會顯示出下拉列表框。
<option>標簽
<option>定義列表中的一個選項，瀏覽器將<option>中的內容作為<select>標簽列表的一個選項顯示，<option>元素位於<select>內部。<option>標簽常用屬性。
<optgroup>標簽
<optgroup>用於組合選項，當使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易。<optgroup>標簽常用的屬性。
<datalist>標簽
<datalist>標簽定義選項列表，應與<input>元素一起使用來選擇<input>可能的值，需使用<input>元素的list屬性，通過引用<datalist>的id值綁定<datalist>。
列表是通過<option>元素創建的，<option>元素必須要設置value屬性。<datalist>及其選項在網頁上開始不會被顯示，當單擊向下箭頭時才顯示輸入列表值。 
