web前端知識體系之基礎知識 - HTML元素和語言

1. 文檔元信息

元信息，是指描述自身的信息，元信息類標籤，就是 HTML 用於描述文檔自身的一類標籤，它們一般出如今 head 標籤中，通常都不會在頁面被顯示出來（與此相對，其它標籤，如語義類標籤，描述的是業務）。

1.1 head

head 標籤自己並不攜帶任何信息，它主要是做爲盛放其它語義類標籤的容器使用。

head 標籤規定了自身必須是 html 標籤中的第一個標籤，它的內容必須包含一個 title，而且最多隻能包含一個 base。若是文檔做爲 iframe，或者有其餘方式指定了文檔標題時，能夠容許不包含 title 標籤。

1.2 title

title 標籤表示文檔的標題。

1.3 meta

meta 標籤是一組鍵值對，它是一種通用的元信息表示標籤。

在 head 中能夠出現任意多個 meta 標籤。通常的 meta 標籤由 name 和 content 兩個屬性來定義。name 表示元信息的名，content 則用於表示元信息的值。

這裏的 name 是一種比較自由的約定，http 標準規定了一些 name 做爲你們使用的共識，也鼓勵你們發明本身的 name 來使用。

除了基本用法，meta 標籤還有一些變體，主要用於簡化書寫方式或者聲明自動化行爲。

• 具備 charset 屬性的 meta

從 HTML5 開始，爲了簡化寫法，meta 標籤新增了 charset 屬性。添加了 charset 屬性的 meta 標籤無需再有 name 和 content。

<meta charset="UTF-8" />
web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

• 具備 http-equiv 屬性的 meta

具備 http-equiv 屬性的 meta 標籤，表示執行一個命令，這樣的 meta 標籤能夠不須要 name 屬性了。

例如，下面一段代碼，至關於添加了 content-type 這個 http 頭，而且指定了 http 編碼方式。

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

除了 content-type，還有如下幾種命令：

• content-language 指定內容的語言；
• default-style 指定默認樣式表；
• refresh 刷新；
• set-cookie 模擬 http 頭 set-cookie，設置 cookie；
• x-ua-compatible 模擬 http 頭 x-ua-compatible，聲明 ua 兼容性；
• content-security-policy 模擬 http 頭 content-security-policy，聲明內容安全策略。
• name 爲 viewport 的 meta

實際上，meta 標籤能夠被自由定義，只要寫入和讀取的雙方約定好 name 和 content 的格式就能夠了。

name 爲 viewport 的 meta，它沒有在 HTML 標準中定義，倒是移動端開發的事實標準。

這類 meta 的 name 屬性爲 viewport，它的 content 是一個複雜結構，是用逗號分隔的鍵值對，鍵值對的格式是 key=value。

例如：

<meta name="viewport" content="width=500, initial-scale=1" />

這裏只指定了兩個屬性，寬度和縮放，實際上 viewport 能控制的更多，它能表示的所有屬性以下：

• width：頁面寬度，能夠取值具體的數字，也能夠是 device-width，表示跟設備寬度相等。
• height：頁面高度，能夠取值具體的數字，也能夠是 device-height，表示跟設備高度相等。
• initial-scale：初始縮放比例。
• minimum-scale：最小縮放比例。
• maximum-scale：最大縮放比例。
• user-scalable：是否容許用戶縮放。

對於已經作好了移動端適配的網頁，應該把用戶縮放功能禁止掉，寬度設爲設備寬度，一個標準的 meta 以下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

• 其它預約義的 meta

在 HTML 標準中，還定義了一批 meta 標籤的 name，能夠視爲一種有約定的 meta。

• application-name：若是頁面是 Web application，用這個標籤表示應用名稱。
• author: 頁面做者。
• description：頁面描述，這個屬性可能被用於搜索引擎或者其它場合。
• generator: 生成頁面所使用的工具，主要用於可視化編輯器，若是是手寫 HTML 的網頁，不須要加這個 meta。
• keywords: 頁面關鍵字，對於 SEO 場景很是關鍵。
• referrer: 跳轉策略，是一種安全考量。
• theme-color: 頁面風格顏色，實際並不會影響頁面，可是瀏覽器可能據此調整頁面以外的 UI（如窗口邊框或者 tab 的顏色）。

2. 語義相關內容

2.1 語義化標籤優勢

• 語義類標籤對開發者更爲友好，使用語義類標籤加強了可讀性，即使是在沒有 CSS 的時候，開發者也可以清晰地看出網頁的結構，也更爲便於團隊的開發和維護。
• 除了對人類友好以外，語義類標籤也十分適宜機器閱讀。它的文字表現力豐富，更適合搜索引擎檢索（SEO），也可讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提高網頁的搜索量，而且語義類還能夠支持讀屏軟件，根據文章能夠自動生成目錄等等。

2.2 經常使用語義化標籤

• aside：導航性質的工具內容，例如左側側邊欄
• article：文章主體
• hgroup,h1,h2：hgroup 標籤是標題組，h1 標籤是一級標題，h2 標籤是二級標題
• abbr：縮寫內容
• hr：橫向分割線，表示故事走向的轉變或者話題的轉變
• p：普通段落
• strong：黑體加粗，表示這個詞很重要
• blockquote,q,cite：blockquote 標籤表示段落級引述內容，q 標籤表示行內的引述內容，cite 標籤表示引述的做品名
• time：日期內容
• figure,figcaption：figure 標籤用於表示與主文章相關的圖像、照片等流內容，figcaption 標籤表示內容的標題
• dfn：用來包裹被定義的名詞
• nav,ol,ul：nav 標籤是導航、目錄內容，ol 標籤表示有序列表，ul 標籤表示無序列表
• pre,samp,code：pre 標籤表示這部份內容是預先排版過的，不須要瀏覽器進行排版，smap 標籤用於計算機程序的示例輸出展現，code 標籤用來包裹計算機程序代碼。

2.3 適合使用語義化的場景

• 天然語言表達能力的補充；
• 文章標題摘要；
• 適合機器閱讀的總體結構。

3. 連接

連接是 HTML 中的一種機制，它是 HTML 文檔和其它文檔或者資源的鏈接關係，在 HTML 中，連接有兩種類型。一種是超連接型標籤，一種是外部資源連接。

連接的家族中有 a 標籤、area 標籤和 link 標籤。

3.1 link 標籤

link 標籤也是元信息的一種，在不少時候，它也是不會對瀏覽器產生任何效果的，這也是不少人會忽略 link 標籤學習的緣由。

link 標籤會生成一個連接，它可能生成超連接，也可能生成外部資源連接。

一些 link 標籤會生成超連接，這些超連接又不會像 a 標籤那樣顯示在網頁中。這就是超連接型的 link 標籤。

這意味着多數瀏覽器中，這些 link 標籤不產生任何做用。可是，這些 link 標籤可以被搜索引擎和一些瀏覽器插件識別，從而產生關鍵性做用。

好比，到頁面 RSS 的 link 標籤，可以被瀏覽器的 RSS 訂閱插件識別，提示用戶當前頁面是能夠 RSS 訂閱的。

另一些 link 標籤則會把外部的資源連接到文檔中，也就是說，會實際下載這些資源，而且作出一些處理，好比咱們常見的用 link 標籤引入樣式表。

除了元信息的用法以外，多數外部資源型的 link 標籤還可以被放在 body 中使用，從而起到把外部資源連接進文檔的做用。

link 標籤的連接類型主要經過 rel 屬性來區分，其代碼相似下面：

<link rel="xx" ... />

3.1.1 超連接類 link 標籤

超連接型 link 標籤是一種被動型連接，在用戶不操做的狀況下，它們不會被主動下載。

link 標籤具備特定的 rel 屬性，會成爲特定類型的 link 標籤。產生超連接的 link 標籤包括：具備 rel=「canonical」 的 link、具備 rel=「alternate」的 link、具備 rel=「prev」 rel=「next」的 link 等等。

• canonical 型 link

<link rel="canonical" href="..." />

這個標籤提示頁面它的主 URL，在網站中經常有多個 URL 指向同一頁面的狀況，搜索引擎訪問這類頁面時會去掉重複的頁面，這個 link 會提示搜索引擎保留哪個 URL。

• alternate 型 link

<link rel="alternate" href="..." />

這個標籤提示頁面它的變形形式，這個所謂的變形多是當前頁面內容的不一樣格式、不一樣語言或者爲不一樣的設備設計的版本，這種 link 一般也是提供給搜索引擎來使用的。

alternate 型的 link 的一個典型應用場景是，頁面提供 rss 訂閱時，能夠用這樣的 link 來引入：

<link rel="alternate" type="application/rss+xml" title="RSS" href="..." />

除了搜索引擎外，不少瀏覽器插件都能識別這樣的 link。

• prev 型 link 和 next 型 link

在互聯網應用中，不少網頁都屬於一個序列，好比分頁瀏覽的場景，或者圖片展現的場景，每一個網頁是序列中的一個項。

這種時候，就適合使用 prev 和 next 型的 link 標籤，來告訴搜索引擎或者瀏覽器它的前一項和後一項，這有助於頁面的批量展現。

由於 next 型 link 告訴瀏覽器「這是極可能訪問的下一個頁面」，HTML 標準還建議對 next 型 link 作預處理。

• 其它超連接類的 link

其它超連接類 link 標籤都表示一個跟當前文檔相關聯的信息，能夠把這樣的 link 標籤視爲一種帶連接功能的 meta 標籤。

• rel=「author」 連接到本頁面的做者，通常是 mailto: 協議
• rel=「help」 連接到本頁面的幫助頁
• rel=「license」 連接到本頁面的版權信息頁
• rel=「search」 連接到本頁面的搜索頁面（通常是站內提供搜索時使用）

3.1.2 外部資源類 link 標籤

外部資源型 link 標籤會被主動下載，而且根據 rel 類型作不一樣的處理。外部資源型的標籤包括：具備 icon 型的 link、預處理類 link、modulepreload 型的 link、stylesheet、pingback。下面咱們來一一介紹它們。

• icon 型 link

這類連接表示頁面的 icon。多數瀏覽器會讀取 icon 型 link，而且把頁面的 icon 展現出來。

icon 型 link 是惟一一個外部資源類的元信息 link，其它元信息類 link 都是超連接，這意味着，icon 型 link 中的圖標地址默認會被瀏覽器下載和使用。

若是沒有指定這樣的 link，多數瀏覽器會使用域名根目錄下的 favicon.ico，即便它並不存在，因此從性能的角度考慮，建議必定要保證頁面中有 icon 型的 link。

只有 icon 型 link 有有效的 sizes 屬性，HTML 標準容許一個頁面出現多個 icon 型 link，而且用 sizes 指定它適合的 icon 尺寸。

• 預處理類 link

咱們都知道，導航到一個網站須要通過 dns 查詢域名、創建鏈接、傳輸數據、加載進內存和渲染等一系列的步驟。

預處理類 link 標籤就是容許咱們控制瀏覽器，提早針對一些資源去作這些操做，以提升性能（固然若是你亂用的話，性能反而更差）。

下面我來列一下這些 link 類型：

• dns-prefetch 型 link 提早對一個域名作 dns 查詢，這樣的 link 裏面的 href 實際上只有域名有意義。
• preconnect 型 link 提早對一個服務器創建 tcp 鏈接。
• prefetch 型 link 提早取 href 指定的 url 的內容。
• preload 型 link 提早加載 href 指定的 url。
• prerender 型 link 提早渲染 href 指定的 url。
• modulepreload 型的 link

modulepreload 型 link 的做用是預先加載一個 JavaScript 的模塊。這能夠保證 JS 模塊沒必要等到執行時才加載。

這裏的所謂加載，是指完成下載並放入內存，並不會執行對應的 JavaScript。

<link rel="modulepreload" href="app.js">
  <link rel="modulepreload" href="helpers.js">
  <link rel="modulepreload" href="irc.js">
  <link rel="modulepreload" href="fog-machine.js">
  <script type="module" src="app.js">

這個例子來自 HTML 標準，咱們假設 app.js 中有 import 「irc」 和 import 「fog-machine」, 而 irc.js 中有 import 「helpers」。這段代碼使用 moduleload 型 link 來預加載了四個 js 模塊。

儘管，單獨使用 script 標籤引用 app.js 也能夠正常工做，可是咱們經過加入對四個 JS 文件的 link 標籤，使得四個 JS 文件有機會被並行地下載，這樣提升了性能。

• stylesheet 型 link

樣式表大概是全部人最熟悉的 link 標籤用法了。它的樣子是下面這樣的。

<link rel="stylesheet" href="xxx.css" type="text/css" />

基本用法是從一個 CSS 文件建立一個樣式表。這裏 type 屬性能夠沒有，若是有，必須是」text/css」纔會生效。

rel 前能夠加上 alternate，成爲 rel=「alternate stylesheet」，此時必須再指定 title 屬性。

這樣能夠爲頁面建立一份變體樣式，一些瀏覽器，如 Firefox 3.0，支持從瀏覽器菜單中切換這些樣式，固然了，大部分瀏覽器不支持這個功能，因此僅僅從語義的角度瞭解一下這種用法便可。

• pingback 型 link

這樣的 link 表示本網頁被引用時，應該使用的 pingback 地址，這個機制是一份獨立的標準，遵照 pingback 協議的網站在引用本頁面時，會向這個 pingback url 發送一個消息。

3.2 a 標籤

a 標籤其實同時充當了連接和目標點的角色，當 a 標籤有 href 屬性時，它是連接，當它有 name 時，它是連接的目標。

具備 href 的 a 標籤跟一些 link 同樣，會產生超連接，也就是在用戶不操做的狀況下，它們不會被主動下載的被動型連接。

重點的內容是，a 標籤也能夠有 rel 屬性，咱們來簡單瞭解一下，首先是跟 link 相同的一些 rel，包括下面的幾種。

• alternate
• author
• help
• license
• next
• prev
• search

這些跟 link 語義徹底一致，不一樣的是，a 標籤產生的連接是會實際顯示在網頁中的，而 link 標籤僅僅是元信息。

除了這些以外，a 標籤獨有的 rel 類型：

• tag 表示本網頁所屬的標籤；
• bookmark 到上級章節的連接。

a 標籤還有一些輔助的 rel 類型，用於提示瀏覽器或者搜索引擎作一些處理：

• nofollow 此連接不會被搜索引擎索引；
• noopener 此連接打開的網頁沒法使用 opener 來得到當前頁面的窗口；
• noreferrer 此連接打開的網頁沒法使用 referrer 來得到當前頁面的 url；
• opener 打開的網頁可使用 window.opener 來訪問當前頁面的 window 對象，這是 a 標籤的默認行爲。

a 標籤基本解決了在頁面中插入文字型和整張圖片超連接的須要，可是若是咱們想要在圖片的某個區域產生超連接，那麼就要用到另外一種標籤了——area 標籤。

3.3 area 標籤

area 標籤與 a 標籤很是類似，不一樣的是，它不是文本型的連接，而是區域型的連接。

area 標籤支持的 rel 與 a 徹底同樣，這裏就很少說了。

area 是整個 html 規則中惟一支持非矩形熱區的標籤，它的 shape 屬性支持三種類型。

• 圓形：circle 或者 circ，coords 支持三個值，分別表示中心點的 x,y 座標和圓形半徑 r。
• 矩形：rect 或者 rectangle，coords 支持兩個值，分別表示兩個對角頂點 x1，y1 和 x2，y2。
• 多邊形：poly 或者 polygon，coords 至少包括 6 個值，表示多邊形的各個頂點。

由於 area 設計的時間較早，因此不支持含有各類曲線的路徑，可是它也是惟一一個支持了非矩形觸發區域的元素，因此，對於一些效果而言，area 是必不可少的。

area 必須跟 img 和 map 標籤配合使用。使用示例以下（例子來自 html 標準）。

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

這個例子展現了在一張圖片上畫熱區而且產生連接，分別使用了矩形、圓形和多邊形三種 area。

4. 替換型元素

替換型元素是把文件的內容引入，替換掉自身位置的一類標籤。

凡是替換型元素，都是使用 src 屬性來引用文件的，連接型元素是使用 href 標籤的。

script、img、picture、audio、video、iframe 幾個標籤均能產生替換型元素。

4.1 script

咱們之因此選擇先講解 script 標籤，是由於 script 標籤是爲數很少的既能夠做爲替換型標籤，又能夠不做爲替換型標籤的元素。

咱們先來看看 script 標籤的兩種用法：

<script type="text/javascript">
  console.log('Hello world!');
</script>

<script type="text/javascript" src="my.js"></script>
web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

這個例子中，咱們展現了兩種 script 標籤的寫法，一種是直接把腳本代碼寫在 script 標籤之間，另外一種是把代碼放到獨立的 js 文件中，用 src 屬性引入。

這兩種寫法是等效的。我想這種等效性能夠幫助你理解替換型元素的「替換」是怎麼一回事。

4.2 img

img 標籤的做用是引入一張圖片。這個標籤是沒有辦法像 script 標籤那樣做爲非替換型標籤來使用的，它必須有 src 屬性纔有意義。

若是必定不想要引入獨立文件，可使用 data uri，咱們來看個實際的例子：

<img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>' />

這個例子中咱們使用了 data uri 做爲圖片的 src，這樣，並無產生獨立的文件，客觀上作到了和內聯相同的結果，這是一個經常使用的技巧。

img 標籤可使用 width 和 height 指定寬度和高度。也能夠只指定其中之一。當咱們只指定寬度，圖片會被等比例縮放了。這個特性很是重要，適用於那種咱們既要限制圖片尺寸，又要保持圖片比例的場景。若是從性能的角度考慮，建議你同時給出圖片的寬高，由於替換型元素加載完文件後，若是尺寸發生變換，會觸發重排版。

此處要重點提到一個屬性，alt 屬性，這個屬性很難被普通用戶感知，對於視障用戶很是重要，能夠絕不誇張地講，給 img 加上 alt 屬性，已經作完了可訪問性的一半。

img 標籤還有一組重要的屬性，那就是 srcset 和 sizes，它們是 src 屬性的升級版（因此咱們前面講 img 標籤必須有 src 屬性，這是不嚴謹的說法）。

這兩個屬性的做用是在不一樣的屏幕大小和特性下，使用不一樣的圖片源。下面一個例子也來自 MDN，它展現了 srcset 和 sizes 的用法

<img
  srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

srcset 提供了根據屏幕條件選取圖片的能力，可是其實更好的作法，是使用 picture 元素。

4.3 picture

picture 元素能夠根據屏幕的條件爲其中的 img 元素提供不一樣的源，它的基本用法以下：

<picture>
  <source srcset="image-wide.png" media="(min-width: 600px)" />
  <img src="image-narrow.png" />
</picture>

picture 元素的設計跟 audio 和 video 保持了一致（稍後我會爲你講解這兩個元素），它跟 img 搭配 srcset 和 sizes 不一樣，它使用 source 元素來指定圖片源，而且支持多個。

這裏的 media 屬性是 media query，跟 CSS 的 @media 規則一致。

4.4 video

在 HTML5 早期的設計中，video 標籤跟 img 標籤相似，也是使用 src 屬性來引入源文件的，不過，我想應該是考慮到了各家瀏覽器支持的視頻格式不一樣，如今的 video 標籤跟 picture 元素同樣，也是提倡使用 source 的。

下面例子是一個古典的 video 用法：

<video controls="controls" src="movie.ogg"></video>

這個例子中的代碼用 src 來指定視頻的源文件。可是由於一些歷史緣由，瀏覽器對視頻的編碼格式兼容問題分紅了幾個派系，這樣，對於一些兼容性要求高的網站，咱們使用單一的視頻格式是不合適的。

如今的 video 標籤可使用 source 標籤來指定接入多個視頻源。

<video controls="controls">
  <source src="movie.webm" type="video/webm" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  You browser does not support video.
</video>

從這個例子中，咱們能夠看到，source 標籤除了支持 media 以外，還可使用 type 來區分源文件的使用場景。

video 標籤的內容默認會被當作不支持 video 的瀏覽器顯示的內容嗎，所以，若是要支持更古老的瀏覽器，還能夠在其中加入 object 或者 embed 標籤，這裏就不詳細展開了。

4.5 audio

接下來咱們來說講 audio，跟 picture 和 video 兩種標籤同樣，audio 也可使用 source 元素來指定源文件。咱們看一下例子：

<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
  <p>You browser does not support audio.</p>
</audio>

但比起 video，audio 元素的歷史問題並不嚴重，因此使用 src 也是沒有問題的。

4.6 iframe

最後咱們來說一下 iframe，這個標籤可以嵌入一個完整的網頁。

<iframe src="http://time.geekbang.org"></iframe>

這個例子展現了古典的 iframe 用法。

在新標準中，爲 iframe 加入了 sandbox 模式和 srcdoc 屬性，這樣，給 iframe 帶來了必定的新場景。咱們來看看例子：

<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;amp;page=1">in my gallery</a>."></iframe>

這樣，這個 iframe 就不涉及任何跨域問題了。

不過，在移動端，iframe 受到了至關多的限制，它沒法指定大小，裏面的內容會被徹底平鋪到父級頁面上。

同時不少網頁也會經過 http 協議頭禁止本身被放入 iframe 中。

iframe 標籤也是各類安全問題的重災區。opener、window.name、甚至 css 的 opacity 都是黑客能夠利用的漏洞。

所以，在 2019 年，當下這個時間點，任何狀況下我都不推薦在實際開發中用之前的 iframe。

5. 表單

5.1 HTML 表單

HTML 表單用於收集用戶輸入。<form>元素定義 HTML 表單：

<form>
  . form elements .
</form>

5.2 HTML 表單元素

HTML 表單包含表單元素，表單元素指的是不一樣類型的 input 元素、複選框、單選按鈕、提交按鈕等等。

• <input> 元素有不少形態，根據不一樣的 type 屬性。

  • <input type="text">定義用於文本輸入的單行輸入字段；
  • <input type="checkbox">定義複選框；
  • <input type="radio">定義單選按鈕；
  • <input type="submit"> 定義用於向表單處理程序（form-handler）提交表單的按鈕；
  • ……
• <select> 元素定義下拉列表

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

• <textarea> 元素定義多行輸入字段（文本域）

<textarea name="message" rows="10" cols="30">
      The cat was playing in the garden.
  </textarea>

• <button> 元素定義可點擊的按鈕

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 增長了以下表單元素：

• <datalist> 表明提供給其餘控件的一組預約義選項；
• <keygen> 表明一個密鑰對生成器控件；
• <output> 表明計算值；
• <progress> 表明進度條；
• <meter> 表明滑動條。

6. 表格

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成，tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元，更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<table>
  <thead>
    <tr>
      <th colspan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
      <td>with two columns</td>
    </tr>
  </tbody>
</table>

• <table> 定義多維數據；
• <caption> 表明表格的標題；
• <colgroup> 表明表格中一組單列或多列；
• <col> 表明表格中的列 ；
• <tbody> 表明表格中一塊具體數據 （表格主體）；
• <thead> 表明表格中一塊列標籤 （表頭）；
• <tfoot> 表明表格中一塊列摘要 （表尾）;
• <tr> 表明表格中的行 ;
• <td> 表明表格中的單元格;
• <th> 表明表格中的頭部單元格 。

7. 總集

咱們已經提到了大部分的 HTML 標籤，可是爲了突出重點，咱們會忽略一些標籤類型，以及弱化講解一些標籤類型，好比表單類和表格類這類目前使用場景較少的標籤。

剩下的標籤能夠經過查閱 HTML 標準得到，全部標準化的 HTML5 標籤可查閱HTML5 標籤列表。

8. 語言

HTML（HyperText Markup Language，超文本標記語言） 是用來定義網頁結構的一種描述語言。

8.1 基本語法

HTML 語法源自 SGML，包含了五種節點：標籤（元素）、文本、註釋、文檔類型定義（DTD）和處理信息（ProcessingInstruction）。

8.1.1 標籤語法

標籤語法產生元素，咱們從語法的角度講，就用「標籤」這個術語，咱們從運行時的角度講，就用「元素」這個術語。

HTML 中，用於描述一個元素的標籤分爲開始標籤、結束標籤和自閉合標籤。開始標籤和自閉合標籤中，又能夠有屬性。

• 開始標籤：<tagname>

  • 帶屬性的開始標籤： <tagname attributename="attributevalue">
• 結束標籤：</tagname>
• 自閉合標籤：<tagname />

這裏須要重點講一講屬性語法，屬性可使用單引號、雙引號或者徹底不用引號，這三種狀況下，須要轉義的部分都不太同樣。

屬性中可使用文本實體來作轉義，屬性中，必定須要轉義的有：

• 無引號屬性：<tab> <LF> <FF> <SPACE> &五種字符
• 單引號屬性：' &兩種字符
• 雙引號屬性：" &兩種字符

通常來講，靈活運用屬性的形式，是不太用到文本實體轉義的。

8.1.2 文本語法

在 HTML 中，規定了兩種文本語法，一種是普通的文本節點，另外一種是 CDATA 文本節點。

文本節點看似是普通的文本，可是，其中有兩種字符是必須作轉義的：<和&。

若是咱們從某處拷貝了一段文本，裏面包含了大量的 <和&，那麼咱們就有麻煩了，這時候，就輪到咱們的 CDATA 節點出場了。

CDATA 也是一種文本，它存在的意義是語法上的意義：在 CDATA 節點內，不須要考慮多數的轉義狀況。

8.1.3 註釋語法

HTML 註釋語法以<!--開頭，以-->結尾，註釋的內容很是自由，除了-->都沒有問題。

若是註釋的內容必定要出現 -->，咱們能夠拆成多個註釋節點。

8.1.4 DTD 語法（文檔類型定義）

SGML 的 DTD 語法十分複雜，可是對 HTML 來講，其實 DTD 的選項是有限的，瀏覽器在解析 DTD 時，把它當作幾種字符串之一，關於 DTD，在下面會詳細講解。

8.1.5 ProcessingInstruction 語法（處理信息）：

ProcessingInstruction 多數狀況下，是給機器看的。HTML 中規定了能夠有 ProcessingInstruction，可是並無規定它的具體內容，因此能夠把它視爲一種保留的擴展機制。對瀏覽器而言，ProcessingInstruction 的做用相似於註釋。

ProcessingInstruction 包含兩個部分，緊挨着第一個問號後，空格前的部分被稱爲「目標」，這個目標通常表示處理 ProcessingInstruction 的程序名。例如：

<?a 1?>

剩餘部分是它的文本信息，沒有任何格式上的約定，徹底由文檔編寫者和處理程序的編寫者約定。

8.2 DTD

DTD 的全稱是 Document Type Defination，也就是文檔類型定義。SGML 用 DTD 來定義每一種文檔類型，HTML 屬於 SGML，在 HTML5 出現以前，HTML 都是使用符合 SGML 規定的 DTD。

HTML4.01 有三種 DTD。分別是嚴格模式、過渡模式和 frameset 模式。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

嚴格模式的 DTD 規定了 HTML4.01 中須要的標籤。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

過渡模式的 DTD 除了 html4.01，還包含了一些被貶斥的標籤，這些標籤已經再也不推薦使用了，可是過渡模式中仍保留了它們。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

frameset 結構的網頁現在已經不多見到了，它使用 frameset 標籤把幾個網頁組合到一塊兒。

衆所周知，HTML 中容許一些標籤不閉合的用法，實際上這些都是符合 SGML 規定的，而且在 DTD 中規定好了的。可是，一些程序員喜歡嚴格遵照 XML 語法，保證標籤閉合性，因此，HTML4.01 又規定了 XHTML 語法，一樣有三個版本。

版本一

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

版本二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

版本三

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

其實你看看就知道，這些複雜的 DTD 寫法並無什麼實際做用（瀏覽器根本不會用 SGML 引擎解析它們），所以，到了 HTML5，乾脆放棄了 SGML 子集這項堅持，規定了一個簡單的，你們都能記住的 DTD：

<!DOCTYPE html>

可是，HTML5 仍然保留了 HTML 語法和 XHTML 語法。

8.3 文本實體

不知道你注意到沒有，HTML4.01 的 DTD 裏包含了一個長得很像是 URL 的東西，其實它是真的能夠訪問的——可是 W3C 警告說，禁止任何瀏覽器在解析網頁的時候訪問這個 URL，否則 W3C 的服務器會被壓垮。我相信不少好奇的前端工程師都把它下載下來打開過。

這是符合 SGML 規範的 DTD，咱們前面講過，SGML 的規範十分複雜，因此這裏我並不打算講 SGML（其實我也不會），可是這不妨礙咱們瞭解一下 DTD 的內容。這個 DTD 規定了 HTML 包含了哪些標籤、屬性和文本實體。其中文本實體分佈在三個文件中：HTMLsymbol.ent HTMLspecial.ent 和 HTMLlat1.ent。

所謂文本實體定義就是相似如下的代碼：

<   > &

每個文本實體由 & 開頭，由 ; 結束，這屬於基本語法的規定，文本實體能夠用#後跟一個十進制數字，表示字符 Unicode 值。除此以外這兩個符號之間的內容，則由 DTD 決定。

8.4 命名空間

xmlns 屬性能夠在文檔中定義一個或多個可供選擇的命名空間。該屬性能夠放置在文檔內任何元素的開始標籤中。該屬性的值相似於 URL，它定義了一個命名空間，瀏覽器會將此命名空間用於該屬性所在元素內的全部內容。

例如，若是須要使用符合 XML 規範的 XHTML 文檔，則應該在文檔中的<html> 標籤中至少使用一個 xmlns 屬性，以指定整個文檔所使用的主要命名空間：

<html xmlns="http://www.w3.org/1999/xhtml"></html>

若是須要在一個 div 元素中顯示一串數學公式，則能夠爲該 div 元素定義一個數學命名空間。好比這樣：

<div xmlns="http://www.w3.org/1999/Math/MathMl">x3/x</div>
web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

雖然在大多數狀況下，絕大多數 XHTML 做者都不須要定義多個命名空間，可是您仍然有必要理解存在着多個命名空間，以便在須要選擇將基於某個 DTD 的內容嵌入其餘 DTD 定義的內容中時，能夠管理多個命名空間。