一、新增結構性元素
| 名稱 | 描述 |
|---|---|
| section | 定義文檔中的節，比如章節、頁眉、頁腳或文檔中的其他部分。一般用於成節的內容，會在文檔流中開始一個新的節。 |
| article | 特殊的section標籤，它比section具有更明確的語義，代表一個獨立的、完整的相關內容塊，可獨立於其他頁面內容使用。 |
| nav | 導航鏈接的部分。 |
| aside | 裝載非正文的內容，內容應該與附近的內容相關。可用作文章的側欄。刪除不會影響到正文內容所要傳達的信息。 |
| footer | 定義文檔或節的頁腳，頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯繫信息等。聯繫信息應該位於address標籤中。 |
| header | 定義文檔的頁眉，通常是一些引導和介紹的信息。位置不侷限於頁面頭部。 |
| figure | 定義媒介內容的分組，以及它們的標題(figcaption)。一般用作文檔中插圖的圖像。 |
hgroup元素：代表一個段的標題，用於解決子標題排版的問題。該元素已經從HTML5（W3C）規範中刪除，但是它仍舊在 WHATWG 的 HTML 版本里。
二、新增input元素的屬性
| 名稱 | 描述 | 值 |
|---|---|---|
| autocomplete | 規定是否使用輸入字段的自動完成功能。如：下次填入時自動填充用戶上次輸入的內容。 | on/off |
| autofocus | 規定輸入字段在頁面加載時是否獲得焦點。 | autofocus |
| form | 規定輸入字段所屬的一個或多個表單。 | formname |
| height/width | 定義input字段的高度/寬度，只適用於 type="image"。 | pixels% |
| max/min | 規定輸入字段的最大值/最小值。 | number |
| pattern | 規定輸入字段的值的模式或格式。 | regexp_pattern |
| placeholder | 幫助用戶填寫輸入字段的提示。 | text |
| required | 指示輸出字段的值是必需的。 | required |
| step | 規定輸入字的合法數字間隔。 | number |
| type | email：email地址，提交表單自動驗證。 | |
| url：輸入url地址這類特殊文本的文本框。 | ||
| number：提供輸入數值的文本框。 | ||
| range：提供輸入包含一定範圍內數字的文本框。顯示爲滾動條。 | ||
| date：日期檢出類型。 | date、month、week、time、datetime | |
| search：用於輸入搜索關鍵詞的文本框。 | ||
| tel：專門輸入電話號碼的文本框。 | ||
| color：專門用於設置顏色的文本框。 | ||
| list | 引用包含輸入字段的預定義選項的 datalist 。 | datalist-id |
| multiple | 允許一個以上的值。 | multiple |
新增的表單重寫屬性
- formaction元素：覆蓋表單的action屬性，規定當表單提交時處理輸入控件的文件URL。
- formmethod元素：覆蓋表單的method屬性，
- formnovalidate元素：覆蓋表單的novalidate屬性。使用該屬性，提交表單時不進行驗證。
- formtarget元素：覆蓋表單target屬性。
三、新增元素按功能分類
音頻/視頻
- video元素：定義視頻，比如電影片段或其他視頻流。
- audio元素：定義音頻，比如音樂或其他音頻流。
- source元素：爲媒介元素（ <video> 和 <audio>）定義媒介資源。
- track元素：爲諸如 video 元素之類的媒介規定外部文本軌道。用於規定字幕文件或其他包含文本的文件，當媒介播放時，這些文件是可見的。
編程
- embed元素：爲外部應用程序（非 HTML）定義容器，比如插件。格式可以是Midi、Wav、AIFF、AU、MP、swf等。
格式
bdi元素：定義文本的文本方向，使其脫離其周圍文本的方向設置。
mark元素：高亮顯示部分文本。場景：在搜索結果中向用戶高亮顯示搜索關鍵詞。
meter元素：定義預定義範圍內的度量。例子：磁盤用量、查詢結果的相關性，等等。如果標記進度條，請使用 <progress> 標籤。
progress元素：定義任何類型的任務的進度。例子：顯示JavaScript中消耗時間的函數的進程。
rp元素：定義若瀏覽器不支持 ruby 元素顯示的內容。
rt元素：定義 ruby 註釋的解釋。
-
ruby元素：定義 ruby 註釋。
<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> time元素：定義日期/時間。
wbr元素：如果單詞太長，或者您擔心瀏覽器會在錯誤的位置換行，可以定義可能的換行符。
圖像
- canvas：定義圖形。元素本身沒有行爲，只提供一塊畫布，但它把一個繪圖API展現給客戶端javascript，使腳本能夠把想繪製的東西繪製到這塊畫布上。
- figcaption元素：定義 figure 元素的標題。
- figure元素：定義媒介內容的分組，以及它們的標題。
列表
- command元素：定義命令按鈕。比如：單選按鈕，複選按鈕。只有IE9支持此標籤。
標籤
- header元素：定義 section 或 page 的頁眉。
- footer元素：定義 section 或 page 的頁腳。
- section元素：定義 section。
- article元素：定義文章。
- aside元素：定義頁面內容之外的內容。
- details元素：表示用戶要求得到並且可以得到的細節信息。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的，用戶點擊標題時，會顯示出細節信息，summary元素應該details元素的第一個元素。
- dialog元素：定義對話框或窗口。目前只有 Chrome 和 Safari 6 支持該標籤。
- summary元素：爲 <details> 元素定義可見的標題。
表單
- datalist元素：定義下拉列表。
- datagrid元素：表示可選數據的列表，以樹形列表的形式顯示。
- keygen元素：定義生成一對密鑰。
- output元素：定義輸出的一些類型。比如：腳本輸出。
四、結構demo
<header>
<h1></h1>
<p><em>learn to code.</em></p>
</header>
<nav>
<h3>navigate this site</h3>
<ul>
<li><a href=“”>首頁</a></li>
<li><a href=“”>個人中心</a></li>
<li><a href=“”>登錄</a></li>
</ul>
</nav>
<article>
<section class=“article-heading”>
<h3>title</h3>
<span>by zhuyue</span>
</section>
<section class=“article-body”>
<p>...</p>
<p>...</p>
<aside>
<h4>That’s how my first in wed design</h4>//順帶一提
<p>…</p>
</aside>
</section>
<section class=“article-footer”>
<div class=“further-reading”>
<h4>If you like this article,you’ll like</h4>
<nav>
<h3>navigate this site</h3>
<ul>
<li><a href=“”>首頁</a></li>
<li><a href=“”>個人中心</a></li>
<li><a href=“”>登錄</a></li>
</ul>
</nav>
</div>
<footer>posted in<strong>Coding</strong></footer>
<div>Post on<time datetime=“23-1-2019”>2019.1.23</time></div>
</section>
</article>
<aside>
<h4>more about this site</h4>
<p>…</p>
</aside>
<footer>
<p>© 2019 - zy</p>
</footer>
五、其他新增
- data自定義屬性
- 全局屬性：
| 屬性 | 描述 |
|---|---|
| accesskey | 規定激活元素的快捷鍵。Windows下是Alt+一個字母按鍵 |
| class | 規定元素的一個或多個類名（引用樣式表中的類）。 |
| contenteditable | 規定元素內容是否可編輯。（新增） |
| contextmenu | 上下文菜單在用戶點擊元素時顯示。尚未被瀏覽器支持 （新增） |
| data-* | 用於存儲頁面或應用程序的私有定製數據。（新增） |
| dir | 規定元素中內容的文本方向。 |
| draggable | 規定元素是否可拖動。（新增） |
| dropzone | 規定在拖動被拖動數據時是否進行復制、移動或鏈接。（新增） |
| hidden | 規定元素仍未或不再相關。（新增） |
| id | 規定元素的唯一 id。 |
| lang | 規定元素內容的語言。 |
| spellcheck | 規定是否對元素進行拼寫和語法檢查。（新增） |
| style | 規定元素的行內 CSS 樣式。 |
| tabindex | 規定元素的 tab 鍵次序。 |
| title | 規定有關元素的額外信息。 |
| translate | 規定是否應該翻譯元素內容。 （新增） |
- 樣式繼承：
- 與元素外觀相關的默認繼承
- 與佈局相關的默認不被繼承
- 不被繼承的可用inherit強制繼承
六、廢除元素
純表現的元素： basefont、big、center、font等
對可用性產生負面影響的元素： frame、frameset、noframes