目錄
HTML5內容模型
內容模型列表
HTML5中引入的標記元素，根據內容類型，劃分爲7大類：
- 內聯 Embedded
- 流 Flow
- 標題 Heading
- 交互 Interactive
- 元數據 Metadata
- 短語 Phrasing
- 區段 Sectioning
具體的
| 內容類型 | 簡介 | 列舉 |
| 元數據 Metadata | 通常出現在頁面的head中，設置其他部分頁面的表現和行爲 |
<base> <link> <meta> <noscript> <script> <style> <title> |
| 內聯 Embedded | 在文檔中添加其他類型的內容 |
<audio> <video> <canvas> <iframe> <img> <math> <object> <svg> |
| 交互 Interactive | 與用戶交互的內容 |
<a> <audio> <video> <button> <details> <embed> <iframe> <img> <input> <label> <object> <select> <texearea> |
| 標題 Heading | 定義段落標題 |
<h1> <h2> <h3> <h4> <h5> <h6> <hgroup> |
| 短語 Phrasing | 文本和文本標記元素 |
<img> <span> <strong> <label> <br /> <small> <sub>
|
- 相同元素可以屬於多個內容模型，具體取決於它們的使用方式。
- 流（Flow）內容：包含在文檔正常流中的大多數HTML5元素。
頁面結構圖
header頭部標籤
- <header>定義文檔的頭部區域。
- <header>元素適合在<body>標籤內部使用。
- <header>與<head>完全不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5筆記</title>
</head>
<body>
<header>
<h1>標題1</h1>
<h2>標題2</h2>
</header>
</body>
</html>
footer頁腳標籤
- 在HTML5中，<footer>標籤定義文檔或者文檔的一部分區域的頁腳。
- 在典型情況下，<footer> 元素會包含文檔創作者的姓名、文檔的版權信息、使用條款的鏈接、聯繫信息等等。
<footer>
<p>made by 寫詩的程序員</p>
</footer>
nav導航欄標籤
<nav>定義導航鏈接部分。
<nav>元素只是作爲標註一個導航鏈接的區域。
<nav>元素不是在所有的文檔中都需要使用，看需要。
<nav>
<a href="https://www.baidu.com/">百度</a>
<a href="http://www.gov.cn/">中國政府網</a>
<a href="https://www.xuexi.cn/">學習強國</a>
<a href="http://www.neea.edu.cn/">中國教育考試網</a>
</nav>
article內容標籤
<article>定義獨立的內容。
<article>定義的內容本身必須是有實際意義的且必須是獨立於文檔的其餘部分。
<article>的潛在來源：
- 論壇帖子
- 博客文章
- 新聞故事
- 評論
section區域標籤
<section> 標籤定義了文檔的某個區域。比如章節、頭部、底部或者文檔的其他區域。
aside側欄標籤
- <aside>標籤定義<article>標籤外的內容。
- aside 的內容應該與附近的內容相關。
- <aside> 的內容可用作文章的側欄。