HTML5學習第4篇——HTML5元素分類及各元素簡介
阿新 • • 發佈：2018-11-30
HTML5元素分類
html5元素分類圖：
1.結構性元素
- article與section
| 元素名稱 | 元素釋義 | 特點 |
|---|---|---|
| article | 用來表示文件、頁面中獨立的、完整的、可以獨自被外部引用的內容 | article元素是一段獨立完整的內容，通常組成=header+內容+footer，例如：部落格或一篇文章、一篇論壇帖子 |
| section | 用於對網站和應用程式中頁面上的內容進行分割槽 | 組成=內容+標題，常用於對頁面的內容進行分塊處理，如對文章分段等，相鄰的section元素應當是相關的，不像article那樣獨立 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>article和section</title>
</head>
<body>
<article>
<header>
<h1>李小白的個人介紹</h1>
</header>
<p>李小白是一個30歲的女程式設計師，正在拼搏的路上。</p>
</ 事實上article元素可以看做是特殊的section元素，如上面例子中的
<article>
<h3>評論者：張三</h3>
<p>沒有什麼歲月靜好，只是有人在為你砥礪前行。</p>
</article>
<article>
<h3>評論者：李四</h3>
<p>人生，選擇比努力更重要。</p>
</article>
這段程式碼，此處的article實際上用於對評論內容進行分割槽顯示，但因為每個評論是獨立的、完整的，因此此處使用article更確切。
article元素更強調獨立性、完整性，section元素更強調相關性。
section使用Tips：
1、不要將section元素當做設定樣式的頁面容器，對於此類操作應該使用div元素實現
2、如果article、aside或nav元素更符合使用條件，不要使用section。
3、不要為沒有標題的內容使用section元素。可以使用html5輪廓工具(https://gsnedders.html5.org/outliner/)來檢查
注意：article、section不能替代div來佈局網頁。div的用處就是用來佈局網頁的，劃分大的區域，在不同的內容塊中，我們按照需求新增article、section等內容塊，並且顯示其中的內容。div元素關注結構獨立性、section元素關注內容的獨立性。
- nav導航資訊
| 元素名稱 | 元素釋義 | 特點 |
|---|---|---|
| nav | 用於頁面導航的連結組，其中導航元素連結到其他頁面或當前頁面的其他部分 | 只需要將主要的、基本的連結組放進nav元素即可。一個頁面可以擁有多個nav元素，作為頁面整體或不同部分的導航 |
nav元素的使用場合：
- 傳統導航條：用於網站頁面之間的跳轉。
- 側邊欄導航：將頁面從當前文章或商品跳轉到其他文章或商品。
- 頁內導航：本頁面幾個主要組成部分之間進行跳轉。
- 翻頁操作。多個頁面的前後頁或部落格網站的前後篇文章滾動。
導航示例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav導航示例</title>
</head>
<body>
<nav draggable="true">
<a href="index.html">首頁</a>
<a href="book.html">圖書</a>
<a href="bbs.html">論壇</a>
</nav>
</body>
</html>
顯示效果：
導航示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nav示例綜合</title>
</head>
<body>
<h1>技術資料</h1>
<!-- 用於頁面導航 -->
<nav>
<ul>
<li><a href="/">主頁</a></li>
<li><a href="/blog">部落格</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5+CSS3</h1>
<!-- 文章中導航 -->
<nav>
<ul>
<li><a href="#HTML5">HTML5</a></li>
<li><a href="#CSS3">CSS3</a></li>
</ul>
</nav>
</header>
<section id="HTML5">
<h1>HTML5</h1>
<p>HTML5特性說明</p>
</section>
<section id="CSS3">
<h1>CSS3</h1>
<p>CSS3特性說明</p>
</section>
<footer>
<p><a href="?edit">編輯</a>|<a href="?delete">刪除</a>|<a href="?add">新增</a></p>
</footer>
</article>
<footer>
<p><small>版權資訊</small></p>
</footer>
</body>
</html>
顯示效果：
技術資料
HTML5+CSS3
HTML5
HTML5特性說明
CSS3
CSS3特性說明
tip：在HTML5中不要用menu元素代替nav元素。menu元素主要用作一系列互動命令的選單上。
2.級塊元素
- aside
| 元素名稱 | 元素釋義 | 特點 |
|---|---|---|
| aside | 表示當前頁面或文章的附屬資訊部分 | 可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條以及其他類似的有別於主要內容的部分 |
aside元素的使用場合：
- 作為主要內容的附屬資訊部分，包含在article元素中，其中的內容可以是與當前文章有關的參考資料、名詞解釋等。
- 側邊欄導航：作為頁面或站點全域性的附屬資訊部分，在article元素之外使用。最典型的形式是側邊欄，其中的內容可以是友情連結，部落格中其他文章列表、廣告單元等。