HTML知識點總結（二）

時間 2019-11-11

標籤 html 知識總結欄目 HTML 简体版

原文原文鏈接

本文轉載自 http://blog.csdn.net/zghekuiwu/article/details/53615865javascript

一、HTML 簡介css

　　W3C（World Wide Web Consortium），W3C 組織，萬維網聯盟，這個組織制訂網頁標準。W3C 標準不是一個標準，而是一系列的標準的集合，包含三部分的標準：結構標準，表現標準和動做標準，與結構標準對應的是 HTML，與表現標準對應的是 CSS，與動做標準對應的是 JavaScript。html

　　HTML 是一種在 Web 上使用的通用標記語言，容許你格式化文本，添加圖片，建立連接、輸入表單、框架和表格等等，並可將之存爲文本文件，瀏覽器便可讀取和顯示。HTML 的關鍵是標籤，其做用是呈現內容。瀏覽器用於讀取 HTML 文件，並將其做爲網頁顯示，他並非直接顯示的 HTML 標籤，可是可使用標籤來決定如何展示 HTML 頁面的內容給用戶。html5

　　HTML 指的是超文本標記語言：Hyper Text Markup Language。HTML 不是一種編程語言，而是一種標記語言，標記語言是一套標記標籤 (markup tag)。HTML 使用標記標籤來描述網頁。HTML 文檔包含了 HTML 標籤及文本內容，HTML文檔也叫作 web 頁面。java

　　HTML 標記標籤一般被稱爲 HTML 標籤 (HTML tag)。HTML 標籤一般是成對出現的，好比 <p> 和 </p>，標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤，開始和結束標籤也被稱爲開放標籤和閉合標籤。mysql

　　HTML標籤和 HTML元素一般都是描述一樣的意思，可是嚴格來說，一個 HTML 元素包含了開始標籤與結束標籤，如：<p> 我是一個段落。</p> 。web

二、HTML 標籤正則表達式

　　HTML 文檔由 HTML 元素定義。開始標籤常被稱爲起始標籤（opening tag），結束標籤常稱爲閉合標籤（closing tag）。元素的內容是開始標籤與結束標籤之間的內容，某些 HTML 元素具備空內容，空元素在開始標籤中進行關閉，以開始標籤的結束而結束，大多數 HTML 元素可擁有屬性。算法

　　HTML 文檔由嵌套的 HTML 元素構成：<html><head><body><p>我是一個段落。</p></body></head></html>sql

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>示例</title>
 </head>
 <body>
 <p style="color:red">我是一個段落。</p>
 </body>
 </html>

　　HTML 元素能夠設置屬性，屬性是 HTML 元素提供的附加信息，屬性通常描述於開始標籤，屬性老是以名稱/值對的形式出現，好比：name="value"。屬性值應該始終被包括在引號內。雙引號是最經常使用的，不過使用單引號也沒有問題。在某些個別的狀況下，好比屬性值自己就含有雙引號，那麼你必須使用單引號。

　　適用於大多數 HTML 元素的屬性：

　　　　①：id　　定義元素的惟一 id
　　　　②：class　　爲 html 元素定義一個或多個類名(classname)
　　　　③：style　　規定元素的行內樣式（inline style 內聯樣式）
　　　　④：title　　描述了元素的額外信息 (做爲工具條使用)

　　(1)、基礎標籤

　　HTML5 聲明：<!DOCTYPE html> 聲明有助於瀏覽器正確顯示網頁，也是在告訴瀏覽器這是一個 Html5 的網頁。<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前，<!DOCTYPE> 標籤沒有結束標籤，聲明不區分大小寫。

　　<html> 標籤告知瀏覽器這是一個 HTML 文檔。<html> 標籤是 HTML 文檔中最外層的元素，也是文檔的根元素，可是不包含 doctype 元素，也就是聲明 <!DOCTYPE html>，doctype 元素必須位於 html 元素以前，<html> 標籤是全部其餘 HTML 元素的容器。HTML5 中增長了一個新屬性：manifest，值爲 URL 用於定義一個 URL，在這個 URL 上描述了文檔的緩存信息。

　　<html> 與 </html> 標籤限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體，文檔的頭部由 <head> 標籤訂義，而主體由 <body> 標籤訂義。

　　<head> 元素包含了全部的頭部標籤元素。在 <head>元素中你能夠插入腳本(scripts)，樣式文件(CSS)，及各類 meta 信息。能夠添加在頭部區域的元素標籤有 7 個：<title>，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。

　　<meta>標籤描述了一些基本的元數據。元數據也不顯示在頁面上，但會被瀏覽器解析。<meta>元素一般用於指定網頁的描述，關鍵詞，文件的最後修改時間，做者，和其餘元數據。元數據可使用於瀏覽器(如何顯示內容或從新加載頁面)，搜索引擎(關鍵詞)，或其餘Web服務。注意：<meta> 一般位於 <head> 區域內，在 HTML 中 <meta> 標籤沒有結束標籤。

　　元數據（Metadata）是數據的數據信息，<meta> 標籤提供了 HTML 文檔的元數據。注意：元數據一般以名稱/值對出現。注意：若是沒有提供 name 屬性，那麼名稱/值對中的名稱會採用 http-equiv 屬性的值。在 HTML5 中，有一個新的 charset 屬性，它使字符集的定義更加容易：HTML4： <meta http-equiv="content-type" content="text/html; charset=UTF-8">，HTML5： <meta charset="UTF-8">。

　　<meta> 標籤使用實例：

 定義編碼格式：<meta charset="UTF-8">
 爲搜索引擎定義關鍵詞：<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
 爲網頁定義描述內容：<meta name="description" content="HTML基礎">
 定義網頁做者：<meta name="author" content="Mr mo"> 每30秒中刷新當前頁面：<meta http-equiv="refresh" content="30">
 經常使用的針對移動網頁優化過 viewport 的 meta：<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

　　上面實例最後一項代碼解析：

　　width：控制 viewport(可視區) 的大小，能夠是指定的一個值，如 600，或者特殊的值，如 device-width 爲設備的寬度，單位爲縮放爲 100% 時的 CSS 的像素。

　　height：和 width 相對應，指定高度。

　　initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。

　　maximum-scale/minimum-scale：容許用戶縮放到的最大/最小比例。

　　user-scalable：用戶是否能夠手動縮放。

　　<title> 標籤訂義HTML文檔的標題。使用 <meta> 元素來描述HTML文檔的描述，關鍵詞，做者，字符集等。

　　<title> 標籤在全部 HTML 文檔中是必需的。<title>元素：

　　　　①：定義瀏覽器工具欄中的標題。

　　　　②：提供頁面被添加到收藏夾時的標題。

　　　　③：顯示在搜索引擎結果中的頁面標題。

　　注意：一個 HTML 文檔中不能有一個以上的 <title> 元素。若是你遺漏了 <title> 標籤，文檔做爲 HTML 是無效的。<title> 標籤訂義了不一樣文檔的標題。定義了瀏覽器工具欄的標題。當網頁添加到收藏夾時，顯示在收藏夾中的標題。顯示在搜索引擎結果頁面的標題。因此選擇標題的時候，必定要簡短，有說明性，採用關鍵詞，與頁面內容相關。

　　<style> 標籤訂義了 HTML 文檔的樣式信息。在 <style> 元素中，你能夠規定在瀏覽器中如何呈現 HTML 文檔，每一個 HTML 文檔能包含多個 <style> 標籤。注意：若是沒有使用 "scoped" 屬性，則每個 <style> 標籤必須位於 head 頭部區域。"scoped" 屬性是 HTML5 中的新屬性，它容許咱們爲文檔的指定部分定義樣式，而不是整個文檔。若是使用 "scoped" 屬性，那麼所規定的樣式只能應用到 style 元素的父元素及其子元素。在 HTML5 中能夠不定義類型（type）屬性，默認值爲 "text/css"。如需連接外部樣式表，就使用 <link> 標籤。<style>定義文本樣式，<link> 定義資源引用地址。

　　<link> 標籤訂義了文檔與外部資源之間的關係。<link> 標籤一般用於連接到樣式表：<link rel="stylesheet" type="text/css" href="mystyle.css">。注意： link 元素是空元素，它僅包含屬性，此元素只能存在於 head 部分，不過它可出現任何次數。

　　JavaScript 使 HTML 頁面具備更強的動態和交互性。HTML 腳本標籤 <script> 用於定義客戶端腳本。<noscript> 標籤訂義了不支持腳本瀏覽器輸出的文本，對於那些在瀏覽器中禁用腳本或者其瀏覽器不支持客戶端腳本的用戶來講，該元素很是有用。

　　<script> 標籤訂義客戶端腳本，好比 JavaScript。<script> 元素既可包含腳本語句，也可經過 src 屬性指向外部腳本文件。JavaScript 最經常使用於圖片操做、表單驗證以及內容動態更改。注意：若是使用 "src" 屬性，則 <script> 元素必須是空的。

　　有多種執行外部腳本的方法：

　　　　①：若是 async="async"：腳本相對於頁面的其他部分異步地執行（當頁面繼續進行解析時，腳本將被執行）。

　　　　② ：若是不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行。

　　　　③：若是既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面以前，當即讀取並執行腳本。

　　在 HTML5 中 "type" 屬性是能夠省略的。src 屬性規定外部腳本的 URL。defer 屬性用於規定當頁面已完成解析後，執行腳本，僅適用於外部腳本。charset 屬性用於規定在腳本中使用的字符編碼，僅適用於外部腳本。"async" 屬性是 HTML5 中的新屬性，用於規定異步執行腳本，僅適用於外部腳本。

　　引用外部腳本的語法：<script src="URL"></script> 其中 src="RUL" 中填寫同級目錄下的外部腳本文件名。

　　注意：

　　　　①：外部腳本文件能夠是任意擴展名，一般開發者會將 JavaScript 外部腳本的擴展名寫爲 script.js。

　　　　②：在外部腳本文件中，只能包含腳本語言代碼，不能包含其餘代碼，如HTML代碼等，也不能包含 <script> 標籤，由於 <script>元素屬於 HTML 語言中的元素。

　　　　③：在引用外部腳本文件時，<script> 標籤與 </script> 標籤之間不能有其餘代碼，包括腳本語言代碼。

　　　　④：雖然在引用外部腳本文件時，<script> 標籤與 </script>標籤之間不能有其餘代碼，但 </script> 標籤也不能被省略。

　　<noscript> 標籤提供沒法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。<noscript> 元素可包含普通 HTML 頁面的 body 元素中可以找到的全部元素。只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 <noscript> 元素中的內容。<noscript> 標籤用來定義在腳本未被執行時的替代內容（文本）。此標籤可被用於可識別 <noscript> 標籤但沒法支持其中的腳本的瀏覽器，若是瀏覽器支持腳本，那麼它不會顯示出 noscript 元素中的文本。在 HTML4 中，<noscript> 標籤只容許插入到 <body> 元素中，而在 HTML5 中，<noscript> 標籤能夠插入到 <head> 和 <body> 區域中。

　　<body> 標籤訂義文檔的主體。<body> 元素包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等等）。在 HTML4 中，全部 body 元素的"呈現屬性" 已廢棄。在 HTML 5 中，刪除了全部 body 元素的"呈現屬性"，可使用樣式定義。

　　HTML 標題是經過 <h1> - <h6> 標籤來定義的。<h1> 定義最大的標題，<h6> 定義最小的標題。要確保將 HTML 標題標籤只用於標題，不要僅僅是爲了生成粗體或大號的文本而使用標題。搜索引擎使用標題爲你的網頁的結構和內容編制索引。應該將 h1 用做主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。<h1> 定義重要等級最高的標題。<h6> 定義重要等級最低的標題。

　　HTML 段落是經過 <p> 標籤來定義的，HTML 能夠將文檔分割爲若干段落，瀏覽器會自動地在段落的先後添加空行。<p> 元素是塊級元素，該元素會自動在其先後建立一些空白。若是但願在不產生一個新段落的狀況下進行換行，就使用 <br/> 標籤。咱們沒法肯定 HTML 被顯示的確切效果，屏幕的大小，以及對窗口的調整均可能致使不一樣的結果，對於 HTML，沒法經過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行，全部連續的空格或空行都會被算做一個空格。每一個段落前空 2 個字，可用 CSS 樣式定義：<p style="text-indent:2em"></p>

　　<br/> 標籤插入一個簡單的換行符。沒有內容的 HTML 元素被稱爲空元素，空元素是在開始標籤中關閉的，<br/> 就是一個空元素，全部空元素都必須被關閉 <br/>。在寫地址信息或者寫詩詞時 <br/> 標籤很是有用。注意：請使用 <br/> 標籤來輸入空行，而不是分割段落。

　　<hr/> 標籤在 HTML 頁面中建立水平線，用於分隔內容。<hr/> 標籤訂義 HTML 頁面中的主題變化（好比話題的轉移），並顯示爲一條水平線，該元素被用來分隔 HTML 頁面中的內容（或者定義一個變化）。在 HTML5 中，<hr/> 定義內容中的主題變化，並顯示爲一條水平線，而在 HTML4 中，<hr/> 標籤僅僅顯示爲一條水平線。可以使用 CSS 來爲 <hr/> 元素定義樣式。

HTML 註釋  。註釋標籤用來在源文檔中插入註釋，註釋不會在瀏覽器中顯示。可使用註釋對你的代碼進行解釋，這樣作有助於在之後的時間對代碼的編輯，特別是代碼量很大的狀況下頗有用，也能夠在註釋內容存儲針對程序所定製的信息，在這種狀況下，這些信息對用戶是不可見的，可是對程序來講是可用的。除了在源文檔中有很是明顯的做用外，許多 Web 服務器也利用註釋來實現文檔服務端軟件特有的特性。這些服務器能夠掃描文檔，從傳統的 HTML/XHTML 註釋中找到特定的字符序列，而後再根據嵌在註釋中的命令採起相應的動做，這些動做多是簡單的包括其餘文件中的文本（即所謂的服務器端包含，server-inside include），也多是複雜地執行其餘命令去動態生成文檔的內容。

　　(2)、樣式標籤

　　<article> (H5) 標籤訂義一個文章區域。<article> 標籤訂義獨立的內容，他定義的內容自己必須是有意義的且必須是獨立於文檔的其他部分。<article> 的潛在來源：論壇帖子、博客文章、新聞故事、評論。

　　<aside> (H5) 標籤訂義頁面的側邊欄內容。<aside> 標籤訂義 <article> 標籤外的內容，<aside> 的內容應該與附近的內容相關。<aside> 的的內容可用做文章的側欄。

　　<section> (H5) 標籤訂義了文檔的某個區域。好比章節、頭部、底部或者文檔的其餘區域。

　　<header> (H5) 標籤訂義文檔或者文檔的一部分區域的頁眉。<header> 元素應該做爲介紹內容或者導航連接欄的容器。在一個文檔中，你能夠定義多個 <header> 元素。注意：<header> 標籤不能被放在 <footer>、<address> 或者另外一個 <header> 元素內部。

　　<footer> (H5) 標籤訂義 <section> 或 document 的頁腳，也就是用於定義文檔或者文檔的一部分區域的頁腳。<footer> 元素應該包含它所包含的元素的信息，在典型狀況下，該元素會包含文檔創做者的姓名、文檔的版權信息、使用條款的連接、聯繫信息等等。在一個文檔中，能夠定義多個 <footer> 元素。假如你使用 <footer> 元素來插入聯繫信息，應該在 <footer> 元素內使用 <address> 標籤。

　　<hgroup> (H5) 標籤被用來對標題元素進行分組。當標題有多個層級（副標題）時，<hgroup> 元素被用來對一系列 <h1> - <h6> 元素進行分組。

　　<details> (H5) 標籤規定了用戶可見的或者隱藏的需求的補充細節。<details> 標籤用來供用戶開啓關閉的交互式控件，任何形式的內容都能被放在 <details> 標籤裏邊。<details> 元素的內容對用戶是不可見的，除非設置了 open 屬性。該標籤與 <summary> 標籤配合使用能夠爲 details 定義標題，標題是可見的，用戶點擊標題時，會顯示出 details。屬性 open 用於規定 details 是否可見。

　　<summary> (H5) 標籤爲 <details> 元素定義一個可見的標題，當用戶點擊標題時會顯示出詳細信息。注意：<summary> 元素應該是 <details> 元素的第一個子元素。

　　<dialog> (H5) 標籤訂義一個對話框、確認框或窗口。open 屬性規定 dialog 元素是有效的，用戶能夠與它進行交互。

　　<div> 標籤訂義 HTML 文檔中的一個分隔區塊或者一個區域部分，該元素沒有特定的含義，他是可用於組合其餘 HTML 元素的容器，經常使用於組合塊級元素，以便經過 CSS 來對這些元素進行格式化。<div> 元素是塊級元素，因此瀏覽器會默認在他先後添加一個換行符，若是與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性，常被用來佈局網頁。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法，該元素的做用就是用於顯示錶格化的數據。

　　<span> 標籤用於對文檔中的行內元素進行組合，該標籤沒有固定的格式表現，也沒有特定的含義，當對它應用樣式時，它纔會產生視覺上的變化，若是不對 <span> 應用樣式，那麼 <span> 元素中的文本與其餘文本不會任何視覺上的差別。<span> 標籤提供了一種將文本的一部分或者文檔的一部分獨立出來的方式，當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。被 <span> 元素包含的文本，可使用 CSS 對它定義樣式，或者使用 JavaScript 對它進行操做。

　　(3)、格式標籤

　　<wbr> (H5) (Word Break Opportunity) 標籤規定在文本中的何處適合添加換行符。若是單詞太長，或者擔憂瀏覽器會在錯誤的位置換行，那麼就可使用 <wbr> 元素來添加 Word Break Opportunity（單詞換行時機），他的做用就是告訴瀏覽器在這個標記處能夠斷行，但只是建議而不是一定會在此處斷行，由於要根據整行文字長度而定，所以只要在連續的文本中間適當的插入若干 <wbr> 標籤就能解決斷行問題。

　　<meter> (H5) 標籤訂義度量衡。僅用於已知最大和最小值的度量。好比：磁盤使用狀況，查詢結果的相關性等。注意： <meter> 不能做爲一個進度條來使用，進度條請使用 <progress> 標籤。

　　<progress> (H5) 標籤訂義運行中的任務進度（進程）。請將 <progress> 標籤與 JavaScript 一塊兒使用來顯示任務的進度。注意：<progress> 標籤不適合用來表示度量衡（例如，磁盤空間使用狀況或相關的查詢結果）。表示度量衡，請使用 <meter> 標籤代替。

　　<time> (H5) 標籤訂義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的，在該元素的內容中未指定日期或時間時，使用該屬性。該元素可以以瀏覽器可讀的方式對日期和時間進行編碼，好比，用戶代理可以把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也可以生成更智能的搜索結果。datetime 屬性規定日期/時間。另外一種方式，則是由元素的內容給定日期/時間，該屬性在全部瀏覽器中不會渲染任何特殊的效果。

　　<mark> (H5) 標籤訂義帶有記號的文本，請在須要突出顯示文本時使用 <mark> 標籤。

　　HTML 使用 <b> 與 <i> 標籤對輸出的文本進行格式定義，如：b粗體或 i斜體。一般標籤 <strong> 替換加粗標籤 <b> 來使用，<em> 替換 <i>標籤使用。然而，這些標籤的含義是不一樣的：<b> 與 <i> 定義粗體或斜體文本。<strong> 或者 <em> 意味着你要呈現的文本是重要的，因此要突出顯示。現今全部主要瀏覽器都能渲染各類效果的字體，不過，將來瀏覽器可能會支持更好的渲染效果。

　　<b> 標籤訂義粗體的文本。注意：根據 HTML5 的規範，<b> 標籤應該作爲最後的選擇，只有在沒有其餘標記比較合適時才使用它。HTML5 規範聲明：標題應該用 <h1> - <h6> 標籤表示，被強調的文本應該用 <em> 標籤表示，重要的文本應該用 <strong> 標籤表示，被標記的或者高亮顯示的文本應該用 <mark> 標籤表示。也可使用 CSS 的 "font-weight" 屬性設置粗體文本。

　　<i> 標籤訂義與文本中其他部分不一樣的部分，並把這部分文本呈現爲斜體文本。<i> 標籤被用來表示科技術語、其餘語種的成語俗語、想法、宇宙飛船的名字等等。在沒有其餘適當語義的元素可使用時，就使用 <i> 元素。其餘語義的元素以下：<em> 元素定義被強調的文本，<strong> 元素定義重要的文本，<mark> 元素定義被標記的/高亮顯示的文本，<cite> 元素定義做品的標題，<dfn> 元素定義一個定義項目。在 HTML4 中，<i> 標籤呈現斜體的文本，然而，在 HTML5 中沒有必要這麼作，可使用樣式表來格式化 <i> 元素中的文本。

　　<strong> 標籤是一個短語標籤，用來定義計算機程序的樣本重要的文本。注意：並不反對使用這個標籤，可是若是隻是爲了達到某種視覺效果而使用這個標籤的話，建議使用 CSS，這樣可能會取得更豐富的效果。全部短語標籤：<em> 呈現爲被強調的文本，<strong> 定義重要的文本，<dfn> 定義一個定義項目，<code> 定義計算機代碼文本，<samp> 定義樣本文本。<var> 定義變量，能夠將此標籤與 <pre> 及 <code> 標籤配合使用。在 HTML4 中，<strong> 標籤訂義加粗的被強調的文本，而在 HTML5 中，<strong> 標籤訂義重要的文本。

　　<em> 標籤是一個短語標籤，用來呈現爲被強調的文本。注意：並不反對使用這個標籤，可是若是隻是爲了達到某種視覺效果而使用這個標籤的話，建議使用 CSS ，這樣可能會取得更豐富的效果。

　　<dfn> 標籤是一個短語標籤，用來定義一個定義項目。<code> 標籤是一個短語標籤，用來定義計算機代碼文本。<samp> 標籤是一個短語標籤，用來定義計算機程序的樣本文本。<var> 標籤是一個短語標籤，用來定義變量。提示：咱們並不反對使用這些標籤，可是若是你只是爲了達到某種視覺效果而使用這些標籤的話，咱們建議你使用 CSS ，這樣可能會取得更豐富的效果。

　　<cite> 標籤訂義做品（好比書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題。注意：人名不屬於做品的標題。在 HTML4 中，<cite> 標籤訂義一個引用，而在 HTML5 中，<cite> 標籤訂義做品的標題。

　　<big> 標籤訂義大號文本，HTML5 再也不支持，可使用 CSS 代替。

　　<small> 標籤訂義小號文本，主要用於定義小型文本和旁註。

　　<pre> 標籤訂義預格式文本，也就是在 HTML 代碼中的文本編寫什麼樣，就會在 HTML 頁面顯示什麼樣，對空行和空格可進行控制，也就是被包圍在 <pre> 標籤中的文本一般會保留空格和換行符，而文本也會呈現爲等寬字體。<pre> 標籤的一個常見應用就是用來表示計算機的源代碼。

　　<bdo> 標籤訂義文本方向。bdo 指的是 bidi 覆蓋(Bi-Directional Override)，用來覆蓋默認的文本方向。<p><bdo dir="rtl">我會反着顯示。</bdo></p> dir 爲 <bdo>標籤的屬性，rtl 是值，定義反向顯示，該屬性另外一個值是 ltr，是默認值，文本方向是正常顯示的。

　　<bdi> (H5) 標籤容許設置一段文本，使其脫離其父元素的文本方向設置。bdi 指的是 bidi 隔離（Bi-directional Isolation）。在發佈用戶評論或其餘你沒法徹底控制的內容時，該標籤頗有用。

　　<q> 標籤訂義短的引用。瀏覽器常常會在這種引用的周圍插入引號，該元素有一個屬性 cite，值爲 URL 用於規定引用的源 URL。請使用 <blockquote> 來標記摘自另外一個源的塊引用。

　　<blockquote> 標籤訂義摘自另外一個源的塊引用。瀏覽器一般會對 <blockquote> 元素進行縮進。該元素也有一個屬性 cite，值爲 URL 用於規定引用的來源。若是標記是不須要段落分隔的短引用，請使用 <q>。在 HTML4 中，<blockquote> 標籤訂義一段長引用，而在 HTML5 中，<blockquote> 標籤訂義摘自另外一個源的塊引用。

　　<del> 標籤訂義被刪除文字。<ins> 標籤訂義被插入文本。提示：<del> 和 <ins> 一塊兒使用，描述文檔中的更新和修正，瀏覽器一般會在已刪除文本上添加一條刪除線，在新插入文本下添加一條下劃線。<del> 和 <ins> 擁有相同的兩個屬性：cite 和 datetime，cite 的值都爲 URL ，<del> 的 cite 屬性規定一個文檔的 URL，該文檔解釋了文本被刪除的緣由，<ins> 的 cite 屬性規定一個文檔的 URL，該文檔解釋了文本被插入的緣由。datetime 的值表示爲：YYYY-MM-DDThh:mm:ssTZD，<del> 規定文本被刪除/被插入的日期和時間。

　　<s> 標籤對那些不正確、不許確或者沒有用的文本進行標識。<s> 標籤不該該用來定義替換的或者刪除的文本，若是要定義替換的或者刪除的文本，請使用 <del> 和 <ins> 標籤。在 HTML4 中，<s> 標籤已被廢棄，而且被用來給文本加刪除線，而 HTML5 從新定義了 <s> 標籤，如今是被用來定義那些再也不正確的文本。

　　<u> 標籤訂義與常規文本風格不一樣的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。在 HTML 中，<u> 元素已廢棄，原被用來定義下劃線，而在 HTML5 中從新定義了 <u> 元素。請儘可能避免使用 <u> 爲文本加下劃線，用戶會把它混淆爲一個超連接。注意：HTML5 規範建議開發者儘可能使用其餘元素替代 <u> 元素。

　　<sup> 標籤訂義上標。上標文本將會顯示在當前文本流中字符高度的一半爲基準線的上方，可是與當前文本流中文字的字體和字號都是同樣的。上標文本能用來添加腳註。

　　<sub> 標籤訂義下標文本。下標文本將會顯示在當前文本流中字符高度的一半爲基準線的下方，可是與當前文本流中文字的字體和字號都是同樣的。下標文本能用來表示化學公式。

　　<abbr> 標籤訂義縮寫。當把鼠標移至帶有 <abbr> 標籤的縮寫詞/首字母縮略詞上時，<abbr> 標籤的 title 屬性可被用來展現縮寫詞/首字母縮略詞的完整版本。<abbr> 標籤用來表示一個縮寫詞或者首字母縮略詞。經過對縮寫詞語進行標記，就可以爲瀏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。

　　<address> 標籤訂義文檔做者或擁有者的聯繫信息。若是 <address> 元素位於 <body> 元素內部，則它表示該文檔做者/全部者的聯繫信息，若是 <address> 元素位於 <article> 元素內部，則它表示該文章做者/全部者的聯繫信息。<address> 元素的文本一般呈現爲斜體，大多數瀏覽器會在該元素的先後添加換行，或可用 <br/> 換行顯示。不該該使用 <address> 標籤來描述郵政地址，除非這些信息是聯繫信息的組成部分。<address> 元素一般被包含在 <footer> 元素的其餘信息中。

　　(4)、連接標籤

　　<a> 標籤訂義超連接，用於從一個頁面連接到另外一個頁面。<a> 元素最重要的屬性是 href 屬性，它指定連接的目標。若是沒有使用 href 屬性，則不能使用 hreflang、media、rel、target 以及 type 屬性。一般在當前瀏覽器窗口中顯示被連接頁面，除非規定了其餘 Target 屬性。可使用 CSS 來改變連接的樣式。

　　HTML 使用超級連接與網絡上的另外一個文檔相連，幾乎能夠在全部的網頁中找到連接，點擊連接能夠從一張頁面跳轉到另外一張頁面，超連接能夠是一個字，一個詞，或者一組詞，也能夠是一幅圖像，能夠點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當你把鼠標指針移動到網頁中的某個連接上時，箭頭會變爲一隻小手。在 <a> 標籤中使用 href 屬性來描述連接的地址，默認狀況下，連接將以如下形式出如今瀏覽器中：一個未訪問過的連接顯示爲藍色字體並帶有下劃線；訪問過的連接顯示爲紫色並帶上下劃線；點擊連接時，連接顯示爲紅色並帶上下劃線。<a href="url">跳轉</a> "連接文本" 沒必要必定是文本，圖片或其餘 HTML 元素均可以成爲連接，使用 Target 屬性，能夠定義被連接的文檔在何處顯示。

　　<a> 標籤的 target 屬性，target="_blank" 定義在新窗口顯示目標網頁。target="_self" 定義在當前窗體打開目標網頁，此爲默認值，這個目標是多餘且沒必要要的，除非和文檔標題 <base> 標籤中的 target 屬性一塊兒使用。target="_top" 定義在當前窗體打開連接，並替換當前的整個窗體(框架頁)。假如你的頁面被固定在框架以內，可用 _top 值跳出框架，用 top 目標將會清除全部被包含的框架並將文檔載入整個瀏覽器窗口，框架網頁中在上部窗口中顯示目標網頁。target="_parent" 這個目標使得文檔載入父窗口或者包含超連接引用的框架的框架集，若是這個引用是在窗口或者在頂級框架中，那麼它與目標 self 等效，框架網頁中當前整個窗口位置顯示目標網頁。

　　去掉超連接的下劃線，並定義顏色（默認定義爲黑色）：a{color:#000;text-decoration:none}　　定義鼠標移動到超連接上的顏色，a:hover{color:red}

　　圖像超連接：<a href="http://baidu.com"><img src="images/demo.jpg"></a>

　　本文本連接：<p><a href="/index.html">本文本</a> 指向本網站中的一個頁面的連接。</p>。相對路徑，如 htef="/abc/"，表明本站內超文本。

　　HTML 連接的 id 屬性。也可用class，id 是表明惟一的，而 class 是一個集，也就是全部 class 名稱同樣的均可被定義。id 屬性可用於建立在一個 HTML 文檔書籤標記。用 id 命名那麼這個書籤就是惟一的。在 HTML 文檔中插入ID：<a id="tips">超連接</a>。在 HTML 文檔中建立一個連接到 "超連接(id="tips"）"：<a href="#tips">跳轉</a>。或者，從另外一個頁面建立一個連接到 "超連接(id="tips"）部分"：<a href="index.html#tips">點我跳轉</a>。

　　電子郵件連接：<a href="mailto:123456@qq.com">電子郵件</a> 當前系統須要安裝 EMAIL 客戶端程序才能使用，可用火狐/IE 測試，會跳轉連接到一個郵件。

　　<base> 標籤訂義頁面中全部連接的默認地址或默認目標。該標籤做爲 HTML 文檔中全部的連接標籤的默認連接。在 HTML 中，<base> 標籤沒有結束標籤，且爲爲元信息標籤。在一個文檔中，最多能使用一個 <base> 元素。<base> 標籤必須位於 <head> 元素內部，並且 <base> 標籤須要排在 <head> 元素中第一個元素的位置，這樣 head 區域中其餘元素就可使用 <base> 元素中的信息了。若是使用了 <base> 標籤，則必須具有 href 屬性或者 target 屬性或者兩個屬性都具有。<base target="_blank"> 可定義頁面中全部的超連接都重新窗口打開，如其中有不須要在新窗口打開的，可在 <a> 標籤內自行定義：<a href="url" target="_self">連接</a>。

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>示例</title>
     <base href="http://www.demo.com/images/" target="_blank">
 </head>
 <body>
 <img src="images.gif"><br/>
 <a href="http://www.demo.com">跳轉</a>
 </body>
 </html>

　　上面代碼中，圖像是默認連接的 demo.com 中一張名爲 images 的圖片，點擊超連接跳轉到該網站，而且在新窗口打開目標頁面。

　　<nav> (H5) 標籤訂義導航連接的部分，並非全部的 HTML 文檔都要使用到 <nav> 元素。<nav> 元素只是做爲標註一個導航連接的區域，在不一樣設備上(手機或者PC)能夠制定導航連接是否顯示，以適應不一樣屏幕的需求。

　　(5)、圖像標籤

　　HTML 圖像是經過<img> 標籤來定義的。圖像的名稱和尺寸是以屬性的形式提供的，添加動態圖片和添加靜態圖片格式是同樣的，只是圖像文件格式可能會有所不一樣。注意：從技術上講，圖像並不會插入 HTML 頁面中，而是連接到 HTML 頁面上。<img> 標籤的做用是爲被引用的圖像建立佔位符。經過在 <a> 標籤中嵌套 <img> 標籤，能夠給圖像添加到另外一個文檔的連接，瀏覽器將圖像顯示在文檔中圖像標籤出現的地方。若是你將圖像標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，而後顯示圖片，最後顯示第二段。在 HTML 中，<img> 標籤沒有結束標籤。

<img src="images/head.gif" width="90" height="90" alt="替代文本" title="圖片描述">

　　<img> 標籤有兩個必需的屬性：src 和 alt。要在頁面上顯示圖像，就須要使用源屬性(src)，src 指 "source（來源）"，源屬性的值是圖像的 URL 地址，URL 指存儲圖像的位置。若是從另外一個文件夾中添加圖像，須要選擇圖片的路徑：<img src="D/images/logo.jpg">。若是從另外一個網站中添加圖像，須要選擇網站圖片的路徑，假如名爲 "head.gif" 的圖像位於 www.demo.com 的 images 目錄中，那麼其 URL 爲 http://www.demo.com/images/head.gif。alt 屬性用來爲圖像定義一串預備的可替換的文本。在瀏覽器沒法載入圖像時，替換文本屬性告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，而且對於那些使用純文本瀏覽器的人來講是很是有用的。

　　注意：title 屬性用於把鼠標移動到圖片上時顯示文字信息，只有在重要的圖片或者網站標誌 LOGO 上加此屬性。width 和 height 屬性用於設置圖像的高度與寬度。屬性值默認單位爲像素：px。指定圖像的高度和寬度的一個很好的習慣。若是圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。若是沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的總體佈局。注意：假如某個 HTML 文件包含十個圖像，那麼爲了正確顯示這個頁面，須要加載 11 個文件，加載圖片是須要時間的，在加載頁面時，要注意插入頁面圖像的路徑，若是不能正確設置圖像的位置，瀏覽器沒法加載圖片，圖像標籤就會顯示一個破碎的圖片。

　　ismap 屬性是一個布爾屬性，可直接使用，用於將圖像規定爲服務器端圖像映射，圖像映射指的是帶有可點擊區域的圖像。usemap 屬性值爲 #mapname 用於將圖像定義爲客戶器端圖像映射。HTML5 中增長了一個新屬性 crossorigin 值爲 anonymous、use-credentials 用於設置圖像的跨域屬性。

　　在文字中插入圖像，須要使用 CSS 定義，圖像須要與文字底部對齊則定義爲：.img{vertical-align:bottom}，若是這裏不設置的話圖像會與文字底部會有一點距離。圖像須要與文字中間對齊則設置爲：.img{vertical-align:middle}。圖像須要與文字頂部對齊則設置爲-：.img{vertical-align:top}。

　　vertical-align 這個屬性的默認值是 baseline（基線），插入的 img 元素會放置在父元素的基線上，因爲圖片撐起了高度，因此文字下移。其實並非文字下移，而是圖像的高度與文字不一樣，就像鶴立雞羣。vertical-align 是「垂直的」+「對齊」的意思，用於設置元素的垂直排列的，多用在表格中，用來定義行內元素的基線相對於該元素所在行的基線的垂直對齊，全部瀏覽器都支持 vertical-align 屬性。

　　它的值比較多：
　　　　baseline：基線，默認值。元素放置在父元素的基線上。
　　　　sub：垂直對齊文本的下標。
　　　　sup：垂直對齊文本的上標。
　　　　top：把元素的頂端與行中最高元素的頂端對齊。
　　　　text-top：把元素的頂端與父元素字體的頂端對齊。
　　　　middle：把此元素放置在父元素的中部。
　　　　bottom：把元素的頂端與行中最低的元素的頂端對齊。
　　　　text-bottom：將支持valign特性的對象的文本與對象底端對齊。
　　　　length：用長度值指定由基線算起的偏移量，能夠爲負值。基線對於數值來講爲 0。
　　　　percentage(%)：用百分比指定由基線算起的偏移量，能夠爲負值，基線對於百分數來講就是 0%。

　　vertical-align 屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值，這會使元素下降而不是升高。在表格單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。valign 用來定義表格的對齊方式，valign 表明行的垂直對齊方式，(top(頂部對齊) | middle(中部對齊) | bottom(下部對齊) | baseline(基線對齊))。valign 能夠通俗的理解爲上中下，而和 align 的區別是： align 爲左中右，用於設置文本的對齊方式，text-align:center 居中，text-align:left 居左，text-align:right 居右。

　　定義圖像在文字中的位置也能夠將底外邊距設置爲負值，強行設置，假如圖像的高度爲 90px，則可定義爲：.img1{margin-bottom:-45px;}，也就是圖像距離底部縮進45像素。像素不一樣能夠定義其處在不一樣的位置，可是這樣設置會增長本行的高度。不建議這樣定義，但可用在特殊地方。

　　<map> 標籤訂義圖像地圖。<area> 標籤訂義圖像地圖中的可點擊區域。可用於建立圖像映射，使其帶有可供點擊區域的圖像地圖，其中的每一個區域都是一個超級連接。

　　<map> 標籤用於客戶端圖像映射。圖像映射指帶有可點擊區域的一幅圖像。<img> 標籤中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決於瀏覽器)，因此應同時向 <map> 添加 id 和 name 屬性。注意: 在 HTML5 中, 若是 id 屬性在 <map> 標籤中指定, 則必須一樣指定 name 屬性。name 屬性用於爲 image-map 規定名稱，必需的屬性。

　　<area> 標籤訂義圖像映射內部的區域。注意：<area> 元素永遠嵌套在 <map> 元素內部。<img> 標籤中的 usemap 屬性與 <map> 元素中的 name 相關聯，以建立圖像與映射之間的關係。在 HTML 中，<area> 標籤沒有結束標籤。

　　<area> 標籤屬性，href 屬性規定區域的目標 URL。alt 屬性規定區域的替代文本，若是使用 href 屬性，則該屬性是必需的。coords 屬性值爲 coordinates 規定區域的座標。shape 屬性值爲（default(默認)、circle、rect、poly）規定區域的形狀。target 屬性規定在何處打開目標 URL。media 屬性規定目標 URL 是爲什麼種媒介/設備優化的，默認爲：all。在 HTML5 中增長了一個新屬性 rel ，他的值爲（alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag)）規定當前文檔與目標 URL 之間的關係。

　　圖像映像的語法：

 <img src="images/demo.jpg" alt="太陽系" usemap="#sun">
 <map name="sun">
     <area shape="circle" coords="132,570,122" alt="太陽" href="index.html" target="_blank">
 </map>

　　<area> 標籤的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的座標。座標的數字及其含義取決於 shape 屬性中決定的區域形狀。能夠將客戶端圖像映射中的超連接區域定義爲矩形、圓形或多邊形等：rect : 矩形，coords 對應的座標爲左上角和右下角。circle : 圓，coords 對應的是圓心(x，y)，和半徑 r。poly：多邊形，coords 對應的是每一個點的座標。

　　下面列出了每種形狀的適當值：

　　圓形：shape="circle"，coords="x,y,r" 這裏的 x 和 y 定義了圓心的位置（"0,0" 是圖像左上角的座標），r 是以像素爲單位的圓形半徑。

　　矩形：shape="rectangle"，coords="x1,y1,x2,y2" 第一對座標是矩形的左上角的頂點座標，另外一對座標是對角的頂點座標(右下角)，("0,0" 是圖像左上角的座標)，請注意，定義矩形其實是定義帶有四個頂點的多邊形的一種簡化方法。

　　多邊形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..." 每一對 "x,y" 座標都定義了多邊形的一個頂點("0,0" 是圖像左上角的座標)。定義三角形至少須要三組座標；定義多邊形則須要更多數量的頂點。

　　用 HTML 語言建立圖像映射時，咱們須要肯定圖像區域中的點座標，用如下幾種方法能夠實現：

　　　　①：能夠利用系統自帶的畫圖工具肯定座標。

　　　　②：能夠用 PS 肯定座標。按 Ctrl+r 快捷鍵，右鍵選定顯示距離爲像素，默認是釐米。

　　　　③：採用逆向思惟把圖像轉換成圖像映射，能夠利用如下代碼實現：

 <p>
     <a href="http://baidu.com/" target="_blank"><img src="images/demo.jpg" ismap alt="太陽系"></a>
 </p>

　　之因此圖片代碼前引用一段 url 是爲了鼠標停留在圖片上時，能夠在瀏覽器窗口的狀態欄中看到返回值出現的點座標，小手指點在哪裏，對應的就是像素點的縱橫座標值，記下這個值，把它應用到建立圖像映射的語法中，就能實現區域取值了。注意：某些瀏覽器不支持此功能不能查看座標返回值，好比 360瀏覽器，可使用 IE 瀏覽器記錄。

　　<canvas> (H5) 標籤訂義圖形，好比圖表和其餘圖像，標籤只是圖形容器，你必須使用腳原本繪製圖形。<canvas> 標籤經過腳本(一般是 JavaScript)來繪製圖形(好比圖表和其餘圖像)。注意：<canvas> 標籤只是圖形容器，必須使用腳原本繪製圖形。<canvas> 元素中的任何文本將會被顯示在不支持 <canvas> 的瀏覽器中。width 和 height 屬性規定畫布的寬度和高度。

　　<figure> (H5) 標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。<figure> 元素的內容應該與主內容相關，同時元素的位置相對於主內容是獨立的，若是被刪除，則不該對文檔流產生影響。

　　<figcaption> (H5) 標籤爲 <figure> 元素定義標題。<figcaption> 元素應該被置於 <figure> 元素的第一個或最後一個子元素的位置。

　　<picture> (H5) 標籤能夠設置多張圖片，主要被用來處理響應式圖片。<picture> 元素相似於 <video> 和 <audio> 元素。<picture> 元素自己沒有屬性，被用來當作 <source> 元素的容器。<source> 元素是用來加載多媒體的好比視頻和音頻，已經被更新用到圖片的加載而且一些新的屬性已經被添加，srcset 屬性的必需的，定義了圖片資源。<picture> 元素能夠設置不一樣的資源，第一個設置的資源爲首選使用的：

 <picture>
     <source srcset="smallflower.jpg" media="(max-width:400px)">
     <source srcset="flowers.jpg">
     <img src="imges/flowers.jpg" alt="Flowers">
 </picture>

　　注意：火狐瀏覽器支持 picture 標籤。360 和 IE 不支持 picture 標籤，須要搭載 JS 環境讓 IE 瀏覽器識別 picture 標籤。

　　(6)、多媒體標籤

　　<audio> (H5) 標籤訂義音頻內容，也就是定義聲音，好比音樂或其餘音頻流。目前，HTML5 標準支持的3種文件格式：MP三、WAV、Ogg。有些瀏覽器不支持某種格式，建議採起兩種格式寫。音頻格式的 MIME 類型：MP3-MIME-type：audio/mpeg 。Wav-MIME-type：audio/wav 。Ogg-MIME-type：audio/ogg 。能夠在 <audio> 和 </audio> 之間放置文本內容，這些文本信息將會被顯示在那些不支持 <audio> 標籤的瀏覽器中。

　　<audio> 是 HTML5 新增長的標籤，src 屬性用於規定音頻文件的 URL。autoplay 屬性：若是出現該屬性，則音頻在就緒後立刻播放。controls 屬性：若是出現該屬性，則向用戶顯示音頻控件(好比播放/暫停按鈕)。loop 屬性：若是出現該屬性，則每當音頻結束時從新開始播放。muted 屬性：若是出現該屬性，則音頻輸出爲靜音。preload 屬性值爲（auto、metadata、none），用於規定當網頁加載時，音頻是否默認被加載以及如何被加載。

　　<video> (H5) 標籤訂義視頻，好比電影片斷或其餘視頻流。目前，HTML5 標準支持三種視頻格式：MP四、WebM、Ogg。MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器。WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器。Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis 音頻編解碼器。視頻格式的 MIME 類型：MP4：video/mp4。WebM：video/webm。Ogg：video/ogg。能夠在 <video> 和 </video> 標籤之間放置文本內容，這樣不支持 <video> 元素的瀏覽器就能夠顯示出該標籤的信息。

　　<video> 是 HTML5 新增長的標籤，src 屬性定義要播放的視頻的 URL。width 和 height 屬性用於設置視頻播放器的寬度/高度。autoplay 屬性值：若是出現該屬性，則視頻在就緒後立刻播放。controls 屬性：若是出現該屬性，則向用戶顯示控件，好比播放按鈕。loop 屬性：若是出現該屬性，則當媒介文件完成播放後再次開始播放。muted 屬性：若是出現該屬性，視頻的音頻輸出爲靜音。poster 屬性值爲 URL 用於規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。preload 屬性值爲（auto、metadata、none）：若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放，若是使用 "autoplay"，則忽略該屬性。

　　<source> (H5) 標籤爲媒介元素（好比 <video> 和 <audio>）定義媒介資源。<source> 標籤容許規定兩個視頻/音頻文件共瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。src 屬性用於規定媒體文件的 URL。type 屬性規定媒體資源的 MIME 類型。

　　<track> (H5) 標籤爲媒體元素（好比 <audio> and <video>）規定外部文本軌道。該元素用於規定字幕文件或其餘包含文本的文件，當媒體播放時，這些文件是可見的。src 屬性是必需的，用於規定軌道文件的 URL。default 屬性規定該軌道是默認的。若是用戶沒有選擇任何軌道，則使用默認軌道。kind 屬性值爲（captions、chapters、descriptions、metadata、subtitles）用於規定文本軌道的文本類型。srclang 屬性用於規定軌道文本數據的語言，若是 kind 屬性值是 "subtitles"，則該屬性是必需的。label 屬性規定文本軌道的標籤和標題。

　　(7)、表單標籤

　　HTML 表單用於蒐集不一樣類型的用戶輸入，表單是一個包含表單元素的區域，表單元素是容許用戶在表單中輸入內容，如：文本域、下拉列表、單選框、複選框等等。

　　表單使用表單標籤 <form>來設置，多數狀況下被用到的表單標籤是輸入標籤<input>。輸入類型是由類型屬性(type)定義的。大多數常常被用到的輸入類型以下：

　　　　①：文本字段經過 <input type="text"> 標籤來定義，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本字段輸入。

　　　　②：密碼字段經過 <input type="password"> 來定義。注意：密碼字段字符不會明文顯示，而是以星號或圓點替代。

　　　　③：單選框經過 <input type="radio"> 來定義。當用戶從若干給定的的選擇中選取其一時，就會用到單選框。

　　　　④：複選框經過<input type="checkbox"> 來定義。用戶須要從若干給定的選擇中選取一個或若干選項。

　　　　⑤：提交按鈕經過<input type="submit"> 來定義。

　　　　⑥：下拉列表框經過 <form> 標籤下的 <select> 標籤來定義。<option value="bmw">BMW（寶馬）</option> 標籤則是定義下拉列表框中的內容。

　　其餘：①：預選下拉列表框和下拉列表框格式是同樣的，只需在做爲預選值的標籤中添加 selected(選擇)：<option value="audi" selected>Audi（奧迪）</option>。

　　②：多行文本輸入使用標籤 <textarea rows="5" cols="30">定義，其中 rows 爲行，cols 爲列，可用於設定文本框的大小，也能夠不設定，這不影響文本框輸入文本的多少，只是會影響文本框顯示的大小。更好的方法是經過 CSS 來定義文本域的寬和高。

　　<form> 標籤用於建立供用戶輸入的 HTML 表單。<form> 元素包含一個或多個以下的表單元素：<input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label>。注意：表單自己並不可見。HTML5 新增了兩個新的屬性：autocomplete 和 novalidate，同時再也不支持 HTML4 中的某些屬性。該標籤的屬性 action 是必需的，規定當提交表單時，向何處發送表單數據，其值爲服務器地址，可能的值：絕對 RUL，指向其餘站點，如：action="www.demo.com/index.html"，相對 URL，指向站點內的文件，如：action="index.html"。

　　<form> 屬性兩個最重要的屬性：action 和 method， action 用於規定當提交表單時向何處發送表單數據。而 method 規定用於發送表單數據的 HTTP 方法，默認使用 GET 方式。accept-charset 屬性規定服務器可處理的表單數據字符集。name 屬性規定表單的名稱，可用於在 JS 中引用元素，或者在表單提交以後引用表單數據。enctype 屬性規定在向服務器發送表單數據以前如何對其進行編碼，適用於 method="post" 的狀況。target 屬性可用於規定在何處打開 action URL。autocomplete 屬性值爲（on、off）用於規定是否啓用表單的自動完成功能。novalidate 屬性：若是使用該屬性，則提交表單時不進行驗證。

　　<input> 標籤訂義一個輸入控件，規定了用戶能夠在其中輸入數據的輸入字段。<input> 元素在 <form> 元素中使用，用來聲明容許用戶輸入數據的 input 控件，輸入字段可經過多種方式改變，取決於 type 屬性。注意：<input> 元素是空的，它只包含標籤屬性。可使用 <label> 元素來定義 <input> 元素的標註。可使用 CSS 來定義 <input> 元素的對齊方式。在 HTML5 中, <input> 添加了幾個新屬性，而且添加了對應的值。在 HTML 中，<input> 標籤沒有結束標籤。

　　<input> 元素屬性：type 屬性規定要顯示的 <input> 元素的類型，他的類型有：text（默認，單行的文本字段，寬度爲20個字符）、button(按鈕)、radio(單選按鈕)、checkbox(複選框)、password(密碼)、submit(提交按鈕)、image(圖像做爲提交按鈕)、reset(重置按鈕)、hidden(隱藏輸入字段)、file（定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳）。如下都爲 HTML5 新增長的 type 屬性值：search(用於輸入搜索字符串)、url(用於輸入 URL 的字段)、email(用於 e-mail 地址)、tel(用於輸入電話號碼)、color(拾色器)、number(用於輸入數字的字段)、range(用於精確值不重要的輸入數字的控件，好比 slider 控件)、time(用於輸入時間的控件，不帶時區)、month(month 和 year 控件，不帶時區)、week(week 和 year 控件，不帶時區)、date(date 控件，包括年、月、日，不包括時間)、 datetime(date 和 time 控件，包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區)、 datetime-local(date 和 time 控件，包括年、月、日、時、分、秒、幾分之一秒，不帶時區)。　　value 屬性規定 <input> 元素的值。　　name 屬性規定 <input> 元素的名稱。　　src 屬性規定顯示爲提交按鈕的圖像的 URL，只針對 type="image"。　　alt 屬性定義圖像輸入的替代文本，只針對 type="image"。　　checked 屬性規定在頁面加載時應該被預先選定的 <input> 元素，只針對 type="checkbox" 或者 type="radio"。　　readonly 屬性規定輸入字段是隻讀的。　　disabled 屬性規定應該禁用的 <input> 元素。　　size 屬性規定以字符數計的 <input> 元素的可見寬度。　　maxlength 屬性規定 <input> 元素中容許的最大字符數。　　accept 屬性值爲(audio/* video/* image/* MIME_type)用於規定經過文件上傳來提交的文件的類型，只針對 type="file"。

　　下面是 HTML5 爲 <input> 元素新添加的屬性：placeholder 屬性規定可描述輸入 <input> 字段預期值的簡短的提示信息。required 屬性規定必需在提交表單以前填寫輸入字段。autocomplete 屬性值爲（on、off）用於規定 <input> 元素輸入字段是否應該啓用自動完成功能。autofocus 屬性規定當頁面加載時 <input> 元素應該自動得到焦點。multiple 屬性規定容許用戶輸入到 <input> 元素的多個值。pattern 屬性規定用於驗證 <input> 元素的值的正則表達式。step 屬性規定 <input> 元素的合法數字間隔。list 屬性值爲 datalist_id，該屬性引用 <datalist> 元素，其中包含 <input> 元素的預約義選項。width 和 height 屬性用於規定 <input>元素的寬度/高度，只針對 type="image"。max 和 min 屬性規定 <input> 元素的最大/最小值。form 屬性值爲 form_id 用於規定 <input> 元素所屬的一個或多個表單。formaction 屬性規定當表單提交時處理輸入控件的文件的 URL，只針對 type="submit" 和 type="image"。formenctype 屬性規定當表單數據提交到服務器時如何編碼，只適合 type="submit" 和 type="image"。formmethod 屬性值爲（get、post）用於定義發送表單數據到 action URL 的 HTTP 方法，只適合 type="submit" 和 type="image"。formtarget 屬性值爲（_blank、_self、_parent、_top、framename）用於規定表示提交表單後在哪裏顯示接收到響應的名稱或關鍵詞，只適合 type="submit" 和 type="image"。formnovalidate 屬性覆蓋 form 元素的 novalidate 屬性，當表單提交時 <input> 元素不進行驗證，該屬性可與 type="submit" 配合使用。

　　複選框中默認選擇一個選項（預選項）是這樣定義的：<input type="checkbox" name="vehicle" value="Rocket" checked>。 checked 屬性是預選，複選框中的預選項是能夠取消的，單選框中默認選擇一個選項（預選項）和複選框的預選項格式是同樣的，不一樣的是單選按鈕中的預選項不能夠取消掉，只能換一個選擇。

　　表單中發送電子郵件，能夠在表單標籤 <form> 的 action 屬性中定義，<form action="mailto:123456@qq.com" method="post" enctype="text/plain">。method 屬性是傳輸方法，POST 是一種隱祕的傳送方式，傳送數據無限制，安全級別高。GET 是直接傳送方式，傳送數據有限制，安全級別不高。enctype 屬性是內容類型，enctype=text/plain 也就表示普通的文本。

　　<datalist> (H5) 標籤規定了 <input> 元素可能的選項列表。<datalist> 標籤被用來爲 <input> 元素提供"自動完成"的特性，用戶能看到一個下拉列表，裏邊的選項是預先定義好的，將做爲用戶的輸入數據，可使用 <input> 元素的 list 屬性來綁定 <datalist> 元素。

　　<label> 標籤爲 <input> 元素定義標註（標記）。label 元素不會向用戶呈現任何特殊效果，不過，它爲鼠標用戶改進了可用性。若是在 label 元素內點擊文本，就會觸發此控件，也就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。提示："for" 屬性可把 label 綁定到另一個元素，須要把 "for" 屬性的值設置爲相關元素的 id 屬性的值。for 屬性值爲 element_id 用於規定 label 與哪一個表單元素綁定。form 是 HTML5 一個新屬性用於規定 label 字段所屬的一個或多個表單。

　　<textarea> 標籤訂義一個多行的文本輸入控件。文本區域中可容納無限數量的文本，其中的文本的默認字體是等寬字體，一般是 Courier，該字體是一種常見的計算機字體。

　　能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。name 屬性規定了文本區域的名稱。readonly 屬性規定文本區域爲只讀。disabled 規定禁用文本區域。HTML5 還增長了一些新的屬性：placeholder 屬性規定一個簡短的提示，描述文本區域指望的輸入值。required 屬性規定文本區域是必需的/必填的。autofocus 屬性規定當頁面加載時，文本區域自動得到焦點。maxlength 屬性規定文本區域容許的最大字符數。wrap 屬性值爲（hard、soft）用於規定當提交表單時，文本區域中的文本應該怎樣換行。form 屬性定義文本區域所屬的一個或多個表單。

　　<button> 標籤訂義一個按鈕。在 <button> 元素內部，能夠放置內容，好比文本或圖像。這是該元素與使用 <input> 元素建立的按鈕之間的不一樣之處。始終要爲 <button> 元素規定 type 屬性。不一樣的瀏覽器對 <button> 元素的 type 屬性使用不一樣的默認值。注意：若是在 HTML 表單中使用 <button> 元素，不一樣的瀏覽器可能會提交不一樣的按鈕值。因此要使用 <input> 在 HTML 表單中建立按鈕。name 屬性規定按鈕的名稱。type 屬性值爲（button、submit、reset）用於規定按鈕的類型。value 屬性規定按鈕的初始值，可由 JS 進行修改。disabled 屬性規定應該禁用該按鈕。HTML5 中的新屬性：autofocus(自動得到焦點)、form(按鈕屬於一個或多個表單)、formaction（向何處發送數據，覆蓋 form 元素的 action 屬性，與 type="submit" 配合使用）、formenctype（發送表單以前如何編碼，覆蓋 form 元素的 enctype 屬性，與 type="submit" 配合使用）、formmethod（發送表單的方法，覆蓋 form 元素的 method 屬性，與 type="submit" 配合使用）、formnovalidate（提交表單時不進行驗證，覆蓋 form 元素的 novalidate 屬性，與 type="submit" 配合使用）以及 formtarget（在何處打開 action URL，覆蓋 form 元素的 target 屬性，與 type="submit" 配合使用）。

　　<select> 元素用來建立下拉列表。<select> 元素中的 <option> 標籤訂義了列表中的可用選項。<select> 元素是一種表單控件，可用於在表單中接受用戶輸入。name 屬性定義下拉列表的名稱。size 屬性規定下拉列表中可見選項的數目。multiple 屬性：當該屬性爲 true 時，可選擇多個選項。disabled 屬性：當該屬性爲 true 時，會禁用下拉列表。HTML5 增長了一些新的屬性：autofocus 屬性規定在頁面加載時下拉列表自動得到焦點。form 屬性定義 select 字段所屬的一個或多個表單。required 屬性規定用戶在提交表單前必須選擇一個下拉列表中的選項。

　　<option> 標籤訂義下拉列表中的一個選項，也就是一個條目。<option> 標籤中的內容做爲 <select> 或者 <datalist> 一個元素使用。<option> 標籤能夠在不帶有任何屬性的狀況下使用，可是一般須要使用 value 屬性，此屬性會指示出被送往服務器的內容。注意：請與 select 元素配合使用此標籤，不然這個標籤是沒有意義的。若是列表選項不少，可使用 <optgroup> 標籤對相關選項進行組合。value 屬性定義送往服務器的選項值。disabled 屬性規定此選項應在首次加載時被禁用。label 屬性定義當使用 <optgroup> 時所使用的標註。selected 屬性規定選項（在首次顯示在列表中時）表現爲選中狀態。

　　<optgroup> 標籤常常用於把相關的選項組合在一塊兒。若是你有不少的選項組合, 你可使用<optgroup> 標籤可以很簡單的將相關選項組合在一塊兒。label 屬性爲選項組規定描述。disabled 屬性規定禁用該選項組。

　　<fieldset> 標籤訂義了一組相關的表單元素，並使用外框包含起來。該標籤能夠將表單內的相關元素分組，並且會在相關表單元素周圍繪製邊框。提示：<legend> 標籤爲 <fieldset> 元素定義標題。HTML5 給 <fieldset> 元素新增長了屬性：name（規定 fieldset 的名稱）。disabled（規定該組中的相關表單元素應該被禁用）、form（規定 fieldset 所屬的一個或多個表單）。

　　<legend> 元素爲 <fieldset> 元素定義標題。可使用 CSS 來設置 <legend> 元素的對齊方式。

　　<keygen> (H5) 標籤規定用於表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。keytype 屬性值爲（rsa、dsa、ec）用於定義密鑰的安全算法，默認值爲 rsa，規定 RSA 安全算法，RSA 密鑰強度可由用戶選擇。dsa 規定 DSA 安全算法，DSA 密鑰長度可由用戶選擇。ec 規定 EC 安全算法，EC 密鑰強度可由用戶選擇。autofocus 屬性使 <keygen> 字段在頁面加載時得到焦點。challenge 屬性：若是使用該屬性，則將 <keygen> 的值設置爲在提交時詢問。name 屬性定義 <keygen> 元素的惟一名稱，用於在提交表單時蒐集字段的值。disabled 屬性禁用 <keygen> 元素字段。form 屬性定義該 <keygen> 字段所屬的一個或多個表單。

　　<output> (H5) 標籤做爲計算結果輸出顯示，好比執行腳本的輸出。name 屬性定義對象的惟一名稱，在表單提交時使用。for 屬性值爲 element_id 用於描述計算中使用的元素與計算結果之間的關係。form 屬性定義輸入字段所屬的一個或多個表單。

　　(8)、列表標籤

　　列表形式在網站設計中佔有比較大的比重，內容顯示很是整齊直觀，便於理解。HTML 的列表元素是一個有列表標籤封裝的結構，包含的列表項由 <li> 標籤組成。

　　<li> 標籤訂義列表項目。可用在有序列表 <ol>、無序列表 <ul> 和菜單列表 <menu> 中。可使用 CSS 來定義列表和列表項目的類型。

　　<ul> 標籤訂義無序列表。將 <ul> 標籤與 <li> 標籤一塊兒使用，建立無序列表。可使用 CSS 爲列表定義樣式。

　　<ol> 標籤訂義了一個有序列表。列表排序以數字來顯示，使用 <li> 標籤訂義列表選項。可使用 CSS 來定義列表樣式。在 HTML5 中增長了一個新屬性，reversed 屬性用於指定列表倒序（9,8,7...）。

　　有序列表是編號列表，用於對網頁中的某些內容進行編號排列，以便使讀者清晰的瞭解每行的順序。一樣，有序列表也是一列項目，列表項目默認使用數字進行標記。有序列表始於 <ol> 標籤，每一個列表項始於 <li> 標籤。<ol> 標籤可用 CSS 樣式進行定義：type 和 start ，type 用於指定編號的樣式，如：1.A.a.I.i。start 用於指定起始編號，如不定義 start，默認使用阿拉伯數字。

　　無序列表是項目列表，列表的內容能夠按任意順序排列，列表項目不是連續編號而是一個特定的符號默認來標記，也就是使用粗體圓點（典型的小黑圓圈）進行標記。無序列表使用 <ul>標籤，<li> 標籤是列表項。<ul> 標籤可用 CSS 樣式定義項目編號的顯示，disc 默認的實體圓點，circle 空心圓圈，square 實心方塊。

　　將一個列表嵌入到另外一個列表中，做爲另外一個列表的一部分，叫作嵌套列表，不管是有序列表的嵌套仍是無序列表的嵌套，瀏覽器均可以自動的分行排列。HTML嵌套列表使用的標籤：<ol> <ul> <li>。

　　有時候無序列表不須要 <li> 標籤前邊默認的圓點，好比在 HTML 頁面佈局時，可使用無序列表建立導航欄選項，那麼這時候須要清除他的默認樣式，則用 CSS 樣式定義：list-style:none。

　　自定義列表用於對清單條目進行簡短的說明，一個列表能夠對應一個或多個說明項，因每一個列表項有一個縮進的說明項，與字典的編排有相同的格式，因此有稱爲「字典列表」。自定義列表不只僅是一列項目，而是項目及其註釋的組合。首標籤 <dl> 和尾標籤 </dl> 之間爲列表內容，列表項目標籤用 <dt>，列表項目的說明用標籤 <dd>，一般 <dt> 和 <dd> 是一塊兒出現的。

　　<dl> 標籤訂義一個描述列表。<dl> 標籤與 <dt> 和 <dd> 一塊兒使用。在 HTML4 中，<dl> 標籤訂義一個定義列表，而在 HTML5 中，<dl> 標籤訂義一個描述列表。

　　<dt> 標籤訂義一個描述列表的項目/名字。在 HTML4 中，<dt> 標籤訂義一個定義列表的條目，而在 HTML5 中，<dt> 標籤訂義一個描述列表的項目/名字。

　　<dd> 標籤被用來對一個描述列表中的項目/名字進行描述。在 <dd> 標籤內，能夠放置段落、換行、圖片、連接以及其餘列表等等。在 HTML4 中，<dd> 標籤被用來描述一個定義列表中的條目，而在 HTML5 中，<dd> 標籤被用來描述一個描述列表的項目/名字。

　　<menu> 標籤訂義了一個命令列表或菜單。<menu> 標籤一般用於文本菜單，工具條和命令列表選項，可使用 CSS 來定義菜單列表樣式。HTML4 的 <menu> 元素已廢棄，而在 HTML5 中 <menu> 元素被從新定義，而且新增長了2個屬性：type 屬性值爲（list、context、toolbar）用於描述顯示菜單的類型，默認值爲 "list"，規定一個用戶可執行或激活的命令列表（li 元素）。context：規定一個上下文菜單，菜單必須在用戶與命令進行交互以前被激活。toolbar：規定一個工具欄菜單，主動式命令，容許用戶當即與命令進行交互。label 屬性用於描述菜單項的標記。目前幾乎沒有主流瀏覽器支持這2個屬性。

　　<command> (H5) 定義命令按鈕，好比單選按鈕、複選框或按鈕。<command> 標籤能夠定義用戶可能調用的命令，當使用 <menu> 元素時，command 元素將做爲菜單或者工具欄的一部分顯示出來。可是，用 command 規定鍵盤快捷鍵時，command 元素能被放置在頁面的任何位置，但元素不可見。注意：目前，主流瀏覽器都不支持 <command> 標籤。label 屬性是必需的屬性，規定 command 的名字，對用戶可見。type 屬性用於定義 command 的類型，該屬性的值爲：command 默認值，規定帶有 action 的普通命令。checkbox：使用複選框規定可切換的命令。radio：使用單選按鈕規定可切換的命令。disabled 屬性規定 command 是否可用。checked 屬性規定當頁面加載時，command 是否被選中，僅用於 radio 或 checkbox 類型。icon 屬性值爲 URL 用於規定做爲 command 來顯示的圖像的 URL。radiogroup 屬性規定可進行切換且將被切換的 command 所屬的組名，僅在類型爲 radio 時使用。

　　(9)、表格標籤

　　表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由 <td> 標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。若是不定義邊框屬性，表格將不顯示邊框。有時這頗有用，可是大多數時候，仍是須要顯示邊框。可使用邊框屬性來顯示一個帶有邊框的表格：<table border="1"><tr><td>100噸</td></tr></table>，若 border=""，則表示無邊框。在 HTML5 中，border 屬性僅用於指示表格是否用於佈局目的，且只容許屬性值爲 "" 或 "1"，並且只支持該屬性。

　　一個 HTML 表格包括 <table> 元素，一個或多個 <tr>、<th> 以及 <td> 元素。<tr> 元素定義表格行，<th> 元素定義表頭，<td> 元素定義表格單元。更復雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。水平顯示的表頭，是把全部表頭 <th> 標籤添加到一個表格 <tr> 標籤內，豎直顯示的表頭，就是把每一個表頭 <th> 標籤添加到每一個表格 <tr> 標籤內。

　　<tr> 標籤訂義 HTML 表格中的行。一個 <tr> 元素包含一個或多個 <th> 或 <td> 元素。在 HTML5 中，不支持 <tr> 標籤在 HTML4 中的任何屬性。

　　<th> 標籤訂義 HTML 表格中的表頭單元格。大多數瀏覽器會把表頭顯示爲粗體居中的文本。<td> 標籤訂義 HTML 表格中的標準單元格。HTML 表格有兩種單元格類型：表頭單元格，即包含頭部信息（由 <th> 元素建立）。標準單元格，即包含數據（由 <td> 元素建立）。<th> 元素中的文本一般呈現爲粗體而且居中，而 <td> 元素中的文本一般是普通的左對齊文本。HTML 5 中再也不支持 HTML4 中的某些屬性。若是須要將內容橫跨多個行或列，可使用 colspan 和 rowspan 屬性！colspan 屬性規定表頭單元格可橫跨的列數。rowspan 屬性規定表頭單元格可橫跨的行數。headers 屬性值爲 header_id 用於規定與表頭單元格相關聯的一個或多個表頭單元格。scope 屬性值爲（col、colgroup、row、rowgroup）用於規定表頭單元格是不是行、列、行組或列組的頭部。<td> 元素除了不支持 <th> 元素的 scope 屬性外，其他3個都支持。

　　可使用 CSS 樣式 vertical-align 定義表頭單元格內容的垂直排列方式。他的默認值爲：baseline 基線對齊。vertical-align:top 頂部對齊。vertical-align:middle 中間對齊。vertical-align:bottom 底部對齊。

　　<caption> 標籤訂義表格的標題。<caption> 標籤必須直接放置到 <table> 標籤以後，而且只能對每一個表格定義一個標題，一般這個標題會被居中於表格之上。然而，CSS 屬性 "text-align" 和 "caption-side" 可用來設置標題的對齊方式和顯示位置。caption-side 主要用來規定表格標題的放置方式，默認值爲 top，即把表格標題定位在表格之上。caption-side:bottom 規定把把表格標題定位在表格之下。

　　<thead> 標籤用於組合 HTML 表格的表頭內容。<thead> 元素應該與 <tbody> 和 <tfoot> 元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）。經過使用這些元素，使瀏覽器有能力支持獨立於表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。<thead> 標籤必須被用在如下情境中：做爲 <table> 元素的子元素，出如今 <caption>、<colgroup> 元素以後，<tbody>、 <tfoot> 和 <tr> 元素以前。注意：<thead> <tbody> <tfoot>元素內部必須包含一個或者多個 <tr> 標籤。<thead>、<tbody> 和 <tfoot> 元素默認不會影響表格的佈局。不過，可使用 CSS 來爲這些元素定義樣式，從而改變表格的外觀。在 HTML5 中，再也不支持 HTML4 中這3個標籤的任何屬性。

　　<tbody> 標籤用於組合 HTML 表格的主體內容。<tbody> 元素應該與 <thead> 和 <tfoot> 元素結合起來使用，用來規定表格的各個部分（主體、表頭、頁腳）。<tbody> 標籤必須被用在如下情境中：做爲 <table> 元素的子元素，出如今 <caption>、<colgroup> 和 <thead> 元素以後。

　　<tfoot> 標籤用於組合 HTML 表格的頁腳內容。<tfoot> 元素應該與 <thead> 和 <tbody> 元素結合起來使用，用來規定表格的各個部分（頁腳、表頭、主體）。<tfoot> 標籤必須被用在如下情境中：做爲 <table> 元素的子元素，出如今 <caption>、<colgroup> 和 <thead> 元素以後，<tbody> 和 <tr> 元素以前。

　　<colgroup> 標籤用於對錶格中的列進行組合，以便對其進行格式化。經過使用 <colgroup> 標籤，能夠向整個列應用樣式，而不須要重複爲每一個單元格或每一行設置樣式。注意：只能在 <table> 元素以內，在任何一個 <caption> 元素以後，在任何一個 <thead>、<tbody>、<tfoot>、<tr> 元素以前使用 <colgroup> 標籤。若是想對 <colgroup> 中的某列定義不一樣的屬性，請在 <colgroup> 標籤內使用 <col> 標籤。HTML5 只支持 span 屬性用於規定列組應該橫跨的列數。

　　<col> 標籤規定了 <colgroup> 元素內部的每一列的列屬性。經過使用 <col> 標籤，能夠向整個列應用樣式，而不須要重複爲每一個單元格或每一行設置樣式。在 HTML 中，<col> 標籤沒有結束標籤。HTML5 只支持 span 屬性用於規定 <col> 元素應該橫跨的列數。

　　(10)、插件標籤

　　<embed> (H5) 標籤訂義了一個容器，用來嵌入外部應用或者互動程序（插件）。src 屬性規定被嵌入內容的 URL。type 屬性規定嵌入內容的 MIME 類型。width 和 height 屬性規定嵌入內容的寬度/高度。

　　<object> 標籤訂義一個嵌入的對象。此元素容許你規定插入 HTML 文檔中的對象的數據和參數，以及可用來顯示和操做數據的代碼。<object> 標籤用於包含對象，好比圖像、音頻、視頻、Java applets（用 Java 編寫的可包含在網頁中的小應用程序）、ActiveX、PDF 以及 Flash。

　　object 的初衷是取代 img 和 applet 元素，<applet> 元素已被廢棄，從其字面來理解就是小程序，主要被用於定義嵌入的小程序。不過因爲漏洞以及缺少瀏覽器支持，這一點並未實現，瀏覽器的對象支持有賴於對象類型，不幸的是，主流瀏覽器都使用不一樣的代碼來加載相同的對象類型而幸運的是，object 對象提供瞭解決方案。若是未顯示 object 元素，就會執行位於 <object> 和 </object> 之間的代碼。經過這種方式，咱們可以嵌套多個 object 元素，每一個對應一個瀏覽器。

　　name 屬性爲對象規定名稱，type 屬性規定對象的 MIME 類型。usemap 屬性值爲（#加上要使用的 map 元素的名稱）用於規定與對象一塊兒使用的圖像映射的名稱，該屬性與 <map> 元素的 name 屬性相關聯，建立對象和映射之間的關係。width 和 height 屬性規定對象的寬度/高度。其他在 HTML4 中定義的屬性在 HTML5 中都不被支持，可是新增長了一個屬性：form 屬性規定對象所屬的一個或多個表單。在 HTML5 中，object 能夠在 form 表單中提交，而且再也不出如今 <head> 元素區域內。

　　<param> 標籤訂義對象的參數。<param> 元素容許爲插入文檔的對象規定 run-time 設置，也就是說，此標籤可爲包含它的 <object> 標籤提供參數。run-time 是運行電腦的時間，簡稱運行時，就是系統在運行的時候的一些機制，其中最主要的是消息機制。name 屬性定義參數的名稱，該屬性一般與 value 屬性一塊兒使用來規定由 <object> 標籤規定的插件的參數，name 屬性的值能夠是指定對象支持的任何名稱。value 屬性描述參數值。在 HTML 中，<param> 標籤沒有結束標籤。大部分主流瀏覽器都支持 <param> 標籤，可是 <object> 定義的文件格式並非全部的瀏覽器都支持。

　　(11)、框架標籤

　　經過使用框架，你能夠在同一個瀏覽器窗口中顯示不止一個頁面。HTML 框架經過 <iframe> 標籤來實現。定義一個內聯的 iframe(內聯框架/內嵌框架)。

　　語法：<iframe src="URL"></iframe> 該 URL 指向不一樣的網頁。

　　<iframe> 標籤規定一個內聯框架。一個內聯框架被用來在當前 HTML 文檔中嵌入另外一個文檔，包括滾動條。你能夠把須要的文本放置在 <iframe> 和 </iframe> 之間，這樣就能夠應對不支持 <iframe> 的瀏覽器。可使用 CSS 爲 <iframe> 定義樣式，包括滾動條和移除邊框等。src 屬性規定在 <iframe> 中顯示的文檔的 URL。width 和 height 屬性規定 <iframe> 的寬度/高度，默認單位爲像素，也能夠指定其按比例顯示（如："80%"）。name 屬性規定 <iframe> 的名稱。HTML5 廢棄了其他在 HTML4 中的一些屬性，並增長了新的屬性，seamless 屬性規定 <iframe> 看起來像是父文檔中的一部分。srcdoc 屬性值爲 HTML_code 用於規定頁面中的 HTML 內容顯示在 <iframe> 中，即要顯示在 iframe 中的 HTML 內容，值必需是有效的 HTML 語法。sandbox 屬性用於對 <iframe> 的內容定義一系列額外的限制，它的值爲：""(啓用全部限制條件)、allow-forms(容許表單提交)、allow-scripts(容許執行腳本)、allow-same-origin（容許將內容做爲普通來源對待，若是未使用該關鍵字，嵌入的內容將被視爲一個獨立的源）、allow-top-navigation（嵌入的頁面的上下文能夠導航（加載）內容到頂級的瀏覽上下文環境，若是未使用該關鍵字，這個操做將不可用）。

　　若是指定了空字符串：sandbox=""，那麼該屬性對呈如今 iframe 框架中的內容將啓用一些額外的限制條件。sandbox 屬性的值既能夠是一個空字符串，將會啓用全部的限制，也能夠是用空格分隔的一系列指定的字符串。HTML5 經過 sandbox 屬性提高 iFrame 的安全性，該屬性能夠防止不信任的 Web 頁面執行某些操做，還能夠防止以下操做：①、防止訪問父頁面的 DOM。從技術角度來講，這是由於相對於父頁面 iframe 已經成爲不一樣的源了。②、防止執行腳本。③、防止經過腳本嵌入本身的表單或是操控表單。④、防止對 Cookie、本地存儲或本地 SQL 數據庫的讀寫。

　　<iframe> 能夠顯示一個目標連接的頁面，目標連接的屬性必須使用 iframe 的屬性，以下實例：

 <iframe src="index.html" name="iframeA"></iframe>
 <p>
     <a href="https://keleyi.com" target="iframeA">百度知道</a>
 </p>

　　上面的代碼中，由於 <a> 標籤的 Target 屬性是名爲 iframeA 的 iframe 框架，因此在點擊連接時頁面會顯示在 iframe 框架中。可自定義一個頁面保存爲 index.html 用於演示。

三、HTML 知識

　　(1)、佈局

　　網頁佈局對改善網站的外觀很是重要，須要慎重設計網頁佈局，常使用 DIV+CSS 的方式進行頁面佈局，大多數網站會把內容安排到多個列中，就像雜誌或報紙那樣。

　　HTML 頁面佈局主要使用 <div> 元素，該元素是用於分組 HTML 元素的塊級元素。<div> 標籤訂義文檔的區塊，<span> 標籤訂義文檔中的節，可用於組合文檔中的行內元素。

　　CSS 用於對元素進行定位，或者爲頁面建立背景以及色彩豐富的外觀。使用 CSS 最大的好處是，若是把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護，經過編輯單一的文件，就能夠改變全部頁面的佈局。因爲建立高級的佈局很是耗時，使用模板是一個快速的選項，經過搜索引擎能夠找到不少免費的網站模板，也可使用這些預先構建好的網站佈局，而後對其進行優化。

　　(2)、統一資源定位器

　　統一資源定位器即 URL(Uniform Resource Locators)， Web 瀏覽器經過 URL 從 Web 服務器請求頁面，URL 編碼會將字符轉換爲可經過因特網傳輸的格式，URL 是一個網頁地址，能夠由字母組成，如"baidu.com"，或互聯網協議(IP)地址： 202.108.22.5。大多數人進入網站使用網站域名來訪問，由於名字比數字更容易記住。當你點擊 HTML 頁面中的某個連接時，對應的 <a> 標籤指向萬維網上的一個地址，一個統一資源定位器(URL) 用於定位萬維網上的文檔。

　　一個網頁地址例子：http://run.zghekuiwu.com/html/index.html　　語法規則：scheme://host.domain:port/path/filename。說明：

　　　　scheme(方案)：定義因特網服務的類型，最多見的類型是 http。

　　　　host(主機)：定義域主機（http 的默認主機是 www）。

　　　　domain(域)：定義因特網域名，好比 baidu.com。

　　　　:port(端口)：定義主機上的端口號（http 的默認端口號是 80）。

　　　　path(路徑)：定義服務器上的路徑（若是省略，則文檔必須位於網站的根目錄中）。

　　　　filename(文件名)：定義文檔/資源的名稱。

　　常見的 URL Schemes(方案)：http，超文本傳輸協議，用於以 http:// 開頭的普通網頁，不加密。https，安全超文本傳輸協議，用於安全網頁，解密全部信息交換。ftp，文件傳輸協議，用於將文件下載或上傳至網站。file，本地計算機上的文件。

　　URL 只能使用 ASCII 字符集來經過因特網進行發送，因爲 URL 經常會包含 ASCII 集合以外的字符，URL 必須轉換爲有效的 ASCII 格式，URL 編碼使用 "%" 其後跟隨兩位的十六進制數來替換非 ASCII 字符。URL 不能包含空格，URL 編碼一般使用 +(%2B) 來替換空格。

　　(3)、HTTP 方法

　　什麼是 HTTP？HTTP 即超文本傳輸協議，他被設計目的是保證客戶端與服務器之間的通訊。HTTP 的工做方式是客戶端與服務器之間的請求 - 響應協議，即客戶端(瀏覽器)向服務器提交 HTTP 請求，服務器向客戶端返回響應，響應包含關於請求的狀態信息以及可能被請求的內容。

　　在客戶端和服務器端進行數據交互時，有不少種方法，最常被用到的兩種方法是：GET 和 POST，GET 是從指定的資源請求數據，而 POST 是向指定的資源提交要被處理的數據。

　　GET 與 POST 的區別：

比較項	GET	POST
後退按鈕/刷新	不影響	數據會被從新提交（瀏覽器應該告知用戶數據會被從新提交）。
對數據長度的限制	當發送數據時，GET 方法向 URL 添加數據，URL 的長度是受限制的，URL 的最大長度是 2048 個字符。	無限制。
書籤	可收藏爲書籤	不可收藏爲書籤
緩存	能被緩存	不能緩存
歷史	參數保留在瀏覽器歷史中	參數不能保留在瀏覽器歷史中
可見性	數據在 URL 中對全部人都是可見的	數據不會顯示在 URL 中
安全性	與 POST 相比，GET 的安全性較差，由於所發送的數據是 URL 的一部分。	POST 比 GET 更安全，由於參數不會被保存在瀏覽器歷史或 web 服務器日誌中。

　　注意：在發送密碼或其餘敏感信息時毫不能使用 GET 請求！

　　(4)、HTTP 消息

　　當瀏覽器從 web 服務器請求服務時，可能會發生錯誤，最多見的就是 404：服務器沒法找到被請求的頁面。

　　(5)、HTML 字符集

　　字符集用於規定瀏覽器正確的顯示 HTML 頁面，萬維網早期使用的字符集是 ASCII。ASCII 支持 0-9 的數字，大寫和小寫英文字母表，以及一些特殊字符。因爲不少國家使用的字符並不屬於 ASCII，現代瀏覽器的默認字符集是 ISO-8859-1，若是網頁使用不一樣於 ISO-8859-1 的字符集，就應該在 <meta> 標籤進行指定。

　　ISO 字符集是國際標準組織 (ISO) 針對不一樣的字母表/語言定義的標準字符集，可是這些符集都有容量限制，並且不兼容多語言環境，Unicode 聯盟開發了 Unicode 標準，該標準涵蓋了世界上的全部字符、標點和符號，不管是何種平臺、程序或語言，Unicode 都可以進行文本數據的處理、存儲和交換。

　　Unicode 聯盟開發了該標準的目標是用標準的 Unicode 轉換格式 (UTF) 來取代現有的字符集，許多操做系統以及全部的現代瀏覽器都支持 Unicode 標準，Unicode 能夠被不一樣的字符集兼容，最經常使用的編碼方式是 UTF-8，也是國際編碼格式，還有 UTF-16，而 GB2312 是由中國國家標準總局發佈的漢字編碼字符集，適用於漢字處理、漢字通訊等系統之間的信息交換，通行於中國大陸，中國大陸幾乎全部的中文系統和國際化的軟件也都支持 GB2312。

　　(6)、字符實體

　　在 HTML 中，某些字符是預留的。HTML 中的預留字符必須被替換爲字符實體，一些在鍵盤上找不到的字符也可使用字符實體來替換。在 HTML 中不能使用小於號（<）和大於號（>），由於瀏覽器會誤認爲它們是標籤，若是但願正確地顯示預留字符，必須在 HTML 源代碼中使用字符實體。如需顯示小於號，必須這樣寫：< 或 < ，如需顯示大於號，必須這樣寫：> 或 >，使用實體名而不是數字的好處是，名稱易於記憶，不過壞處是，瀏覽器也許並不支持全部實體名稱，但對實體數字的支持卻很好。

　　HTML 中的經常使用字符實體是不間斷空格( )。瀏覽器老是會截短 HTML 頁面中的空格。若是在文本中寫 10 個空格，在顯示該頁面以前，瀏覽器會刪除它們中的 9 個，如需在頁面中增長空格的數量，必須使用：  或   。

　　下面是五種特殊字符，也是 HTML 的預留字符：