2.1 語義 · 前端筆記

[TOC] ## HTML5 中的節段和提綱 > **HTML5大綱算法**在用戶代理中還**沒有實現**，因此，使用標題語義的用戶暴露在HTML4的文檔結構下。HTML5對問題的描述還僅僅是理論上的。 HTML5新增了幾個新元素使得開發者可以用標準語義去描述web文檔的結構。 ### HTML4的文檔結構文檔結構，即，<body>標記之間內容的語義結構，對呈現頁面給用戶是重要的。HTML4用文檔中章節和子章節的概念去描述文檔結構。一個章節由一個包含著標題元素（h1-h6）的div元素表示。這些html劃分元素（HTML Dividing Elements）和標題元素（HTML Heading Elements）形成了文檔的結構和綱要。 ``` <div class="section" id="forest-elephants" > <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <div class="subsection" id="forest-habitat" > <h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... </div> </div> ``` 形成的大綱 ``` 1. Forest elephants 1.1 Habitat ``` ### HTML5解決的問題 HTML 4 的文檔結構定義和其隱含的大綱算法非常粗糙而且造成了很多問題： 1. 定義語義性章節的`<div>`元素的用法,如果沒有為class屬性賦以特殊的值，使生成自動生成大綱的算法變得不可能。換句話說, HTML4規范在章節的定義和章節的范圍都不精確。自動生成大綱是重要的,尤其是在傾向于通過根據文檔大綱內容去展示內容的輔助技術（ assistive technology）。 HTML5 在自動生成大綱算法的過程中去掉了div元素（`<div>`），并新增了一個元素，section元素（`<section>`）。 2. 合并多個文檔是困難的：主文檔中包含子文檔意味著改變HTML標題元素的級別，以使得文檔大綱能夠保持下來。這個已經被HTML5的新的章節元素解決了，因為新引入的元素\(`<article>`,`<section>`,`<nav>`和`<aside>`\) 總是距離其最近的祖先章節的子章節, 與子文檔章節內部的標題沒有關系. 3. HTML4中，所有的章節都是文檔大綱中的一部分。但是文檔并不總是這樣。文檔可以包含那些不是大綱的特殊章節, 但是與文檔有關的, 就像廣告塊和解釋區域。 HTML5 引入aside元素`<aside>`使得這樣的節點不會插入到主綱要中。 4. 另外, 因為在 HTML4中任何的部分都是文檔大綱的一部分, 沒有辦法產生與網站相關而不是與文檔相關的節段，比如logos,menus,目錄或版權信息和法律聲明。為了這個目的, HTML5 引入了三個特殊的節段元素：包含鏈接集合的nav元素`<nav>`, 例如目錄, 包含網站相關信息的footer元素`<footer>`和header元素`<header>`。更具有普遍意義的是HTML5使得章節和標題特性更精確。使得文檔大綱變的可預測，瀏覽器使用后也可以提高用戶體驗。 ### HTML5的大綱算法 #### 定義節段 `<body><body>`元素中的所有內容都是節段中的一部分。節段在HTML5中是可以嵌套的。`<body><section>`元素定義了主節段，基于主節段，可以顯式或隱式定義各個子節段的劃分。顯式定義的節段是通過`<article><aside>`,`<nav>`, , 和這些標記中的內容。 #### 定義標題當 HTML 節段元素定義文檔結構時，文檔大綱也需要有用的標題。基本規則是簡單的：第一個 HTML 標題元素（`<h1>，<h2>`,`<h3><h4>`,`<h5>，<h6>`之一）定義了當前節段的標題標題元素通過在元素里的名字加上數字來分級標題元素，`<h1><h6>`元素有最高級別，有最低級別。相關的級別只在節段中起作用；節段的結構定義了大綱，而不是節段的標題。 #### 分節根分節根是一個HTML元素，這個元素可以擁有自己的大綱，但是元素內部的節段和標題對其祖先的大綱沒有貢獻。除了文檔的邏輯分節根`<body><blockquote>`元素，這些元素經常在頁面中引入外部內容：`<details><fieldset>`,`<figure><td>`,,和。 #### 大綱之外的節段 HTML5引入了2個新的元素，用來定義那些不屬于web文檔主要大綱中的節段。 1. HTML 側邊分節元素 \(`<aside>`\) 定義了這樣的節段, 雖然是主要的分節元素, 但并不屬于主要的文檔流, 就像解釋欄或廣告欄. aside元素內部有自己的大綱，但并不計入文檔大綱中 2. HTML 導航分節元素 \(`<nav>`\) 定義的節段包含了很多導航links。文檔中可以有好幾個這樣的元素，比如文檔內部的鏈接，就像目錄，和鏈接到其他站點的導航links。這些鏈接并不是主文檔流和文檔大綱中的一部分，并且能夠特別讓屏幕瀏覽器和類似的輔助技術從一開始就不渲染該標記里的內容。 #### 頁眉和頁腳 HTML5引入了兩個可以用于標記節段的頁眉和頁腳的新元素。 1. HTML 頭部分節元素 \(`<header><article>`\) 定義了頁面的頁眉,通常會包含logo和站點名稱以及水平菜單（如果有的話）。或是一個節段的頭部，可能包含了節段的標題和作者名字等。`<section><aside>`,`<nav><header>`, and可以擁有它們自己的。雖然名字是header，但是不一定是在頁面的開始。 2. HTML 頁腳元素 \(`<footer><article>`\) 定義了頁腳, 通常會包含版權信息和法律聲明以及一些其他鏈接。或是節段的頁腳，可能包含了節段的發布數據、許可聲明等。同樣，其不一定是在頁面的底部出現。 ### 分節元素中的地址和發表時間文檔的作者想要發布一些聯系信息，例如作者的名字和地址。HTML4通過`<address>`元素來表示，HTML5則拓展了這個元素。一個文檔可以由不同作者的不同節段組成。一個從其他作者而不是文檔作者寫的節段用`<article><address>`元素定義。因此，`<body><article>`元素連接到距離最近的或祖先元素。同樣的，新的HTML5標記`<time>pubdate`元素，使用`<body><article>`布爾值，表示整個文檔的發布時間，分別給文章，與其最近的元素或元素的祖先元素相關。 ### 元素 #### <section> HTML Section 元素 \(<section>\) 表示文檔中的一個區域（或節），比如，內容中的一個專題組，一般來說會有包含一個標題（heading）。一般通過是否包含一個標題 \(<h1>-<h6> element\) 作為子節點來辨識每一個<section>。 > * 如果元素內容可以分為幾個部分的話，應該使用 <article> 而不是 <section>。 > * 不要把 <section> 元素作為一個普通的容器來使用，這是本應該是<div>的用法（特別是當片段（the sectioning ）僅僅是為了美化樣式的時候）。一般來說，一個 <section>應該出現在文檔大綱中。 #### <article> `<article>`元素表示文檔、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目。當 > * `<article>`元素嵌套使用時，則該元素代表與外層元素有關的文章。例如，代表博客評論的`<article>`元素可嵌套在代表博客文章的`<article>`元素中。 > * `<article>`元素的作者信息可通過`<address>`元素提供，但是不適用于嵌套的`<article>`元素。 > * `<article>`元素的發布日期和時間可通過`<time>pubdate`元素的屬性表示。 ``` <article class="film_review"> <header> <h2>Jurassic Park</h2> </header> <section class="main_review"> <p>Dinos were great!</p> </section> <section class="user_reviews"> <article class="user_review"> <p>Way too scary for me.</p> <footer> <p> Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa. </p> </footer> </article> <article class="user_review"> <p>I agree, dinos are my favorite.</p> <footer> <p> Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom. </p> </footer> </article> </section> <footer> <p> Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff. </p> </footer> </article> ``` #### <nav> HTML導航欄\(`<nav>`\) 描繪一個含有多個超鏈接的區域，這個區域包含轉到其他頁面，或者頁面內部其他部分的鏈接列表。 > * 不是所有的鏈接都必須使用`<nav>`元素,它只用來將一些熱門的鏈接放入導航欄,例如`<footer>`元素就常用來在頁面底部包含一個不常用到,沒必要加入`<nav>`的鏈接列表。 > * 一個網頁也可能含有多個`<nav>`元素,例如一個是網站內的導航列表,另一個是本頁面內的導航列表。 > > * 對于屏幕閱讀障礙的人,可以使用這個元素來確定是否忽略初始內容。 #### <header> `<header>`元素表示一組引導性的幫助，可能包含標題元素，也可以包含其他元素，像logo、分節頭部、搜索表單等。 > `<header>`元素不是分節內容，所以不會引入新的分節到大綱中。 #### <footer> <footer>元素表示最近一個章節內容根節點或者（sectioning root ）元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。 > `<footer>`元素內的作者信息應包含在`<address>`元素中。 > > `<footer>`元素不是章節內容，因此在outline中不能包含新的章節。 #### <aside> `<aside>`元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。其通常表現為側邊欄或者嵌入內容。他們通常包含在工具條，例如來自詞匯表的定義。也可能有其他類型的信息，例如相關的廣告、筆者的傳記、web 應用程序、個人資料信息，或在博客上的相關鏈接。 > 不要將`<aside>`元素去標記括號內的文本，因為這種類型的文本（即括號內的文本）被認為是其內容流的一部分。 #### <hgroup> `<hgroup>`代表一個段的標題。它規定了在文檔輪廓里的單一標題是它所屬的隱式或顯式部分的標題。 > 元素已經從HTML5（W3C）規范中刪除，但是它仍舊在 WHATWG 的 HTML 版本里。大多數瀏覽器都部分地實現，所以它不太可能消失。但是其輪廓算法\(outline algorithm\)未在任何瀏覽器中實現，因此`<hgroup>語義仍舊是理論的。` ## HTML 5中的表單 HTML5中的表單元素和屬性提供了比HTML4更多的語義標記，并取消了大量的在HTML4不可缺少的腳本和樣式。HTML5中的表單功能為用戶提供了更好的體驗，使表單在不同網站之間更一致，并向用戶提供有關數據輸入的即時反饋。它們還為使用禁用腳本的瀏覽器的用戶提供相同的用戶體驗。 ### `<input>`元素 `<input>type`的`<input>`特性擁有更多的值。（請觀看[`<input>`](https://www.gitbook.com/book/surahe/front-end-book/edit#)獲得完整列表） * `search`: 這個元素呈現為一個搜索框。除了換行符會自動從輸入中移除，無其他強制性語法。 * `tel`: 這個元素可現為一個編輯電話號碼的輸入控件。因為電話號碼國際化差異非常明顯，所以除了換行符會自動從輸入中移除，無其他強制性語法。你可以使用如`patternmaxlength`與等屬性來限制輸入到控件中的值。 * `url`: 這個元素呈現為一個編輯URL的輸入控件。換行符與首尾的空格將會被自動去除。 * `email`: 這個元素呈現為一個郵件地址。換行符會被自動去除。可以設置一個無效的郵件地址，但若滿足輸入框的限制，必須遵守在擴展的巴科斯范式\(ABNF\)中的規范：`1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )`其中`atext`在規范RFC 5322 section 3.2.3RFC 1034 section 3.5 中被定義,而`ldh-str在規范`中被定義。. > **注意:**若設置`multiple<input>`屬性，`<input>`區域中可以用逗號分割的方式，輸入多個email, 但 Firefox不支持 `<input>`元素也擁有一些新的特性。 * list：`<datalist>`元素的 ID，該元素的內容，`<option>`元素被用作提示信息，會在 input 的建議區域作為提議顯示出來。 * `patterntype`：一個正則表達式，用于檢查控件的值，能夠作用于值是`text，tel，search，url，`和`email 的 input 元素。` * `form`：一個字符串，用于表明該 input 屬于哪個元素。一個 input 只能存在于一個表單中。 * `formmethod`：一個字符串，用于表明表單提交時會使用哪個 HTTP 方法 \(GET 或 POST\)；如果定義了它，則可蓋`<form>method`元素上的`typeform`特性。只有當`formmethod`值為`image`或`submit，并且`特性被設置的情況下，才能生效。 * `x-moz-errormessage`：一個字符串，當表單字段驗證失敗后顯示錯誤信息。該值為 Mozilla 擴展，并非標準。 ### `<form>`元素 `<form>`元素有了一個新特性： * `novalidate`：設置了該特性不會在表單提交之前對其進行驗證。 ### `<datalist>`元素 `<datalist>`元素會在填寫`<option>`字段時，顯示一列作為提示。你可以使用`<input>`元素上的`list`特性來將一個特定的 input 與特定的`<datalist>`元素做關聯。 ``` <label>Choose a browser from this list:<input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist> ``` ![](blob:https://www.gitbook.com/06aac404-b92e-4d6a-93fb-032f205ed6fc) ### `<output>`元素 `<output>`元素表示計算的結果。你可以使用`for<output>`特性來在`for`元素與文檔內其他能夠影響運算的元素\(例如，input 或參數\)建立關聯。特性的值是以空格做分隔的其他元素的 ID 列表。 ``` <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" name="b" value="50" />+ <input type="number" name="a" value="10" /> =<output name="result"> </output> </form> ``` ### 約束驗證的 HTML 語法約束驗證的 HTML 語法下列 HTML5 語法中的條目用于為表單數據指定約束。 * <input>, <select>，和 <textarea> 元素上的 required 特性，指定必須提供該元素的值。\(在 <input> 元素上， required 只能與特定的 type 特性值結合起來生效。\) * <input> 元素上的 pattern 特性用于限定元素值必須匹配一個特定的正則表達式。 * <input> 元素上的 min 與 max 特性限定了能夠輸入元素的最大與最小值。 * <input> 元素的 step 特性\(與 min 與 max 特性結合使用\) 限定了輸入值的間隔。如果一個值與允許值的梯級不相符，則它無法通過驗證。 * <input> 與 <textarea> 元素的 maxlength 特性限制了用戶能夠輸入的最大字符數\(在 Unicode 代碼點內\)。 * type 的 url 與 email 值分別用于限制輸入值是否為有效的 URL 或電子郵件地址。此外，若要阻止對表單進行約束驗證，你可以在 <form> 上設置 novalidate 特性，或在 <button> 與 <input> 元素\(當 type 是 submit 或 image\)上設置 formnovalidate 特性。這些特性指定了當表單提交時不做驗證。