HTML5的結構

時間 2019-11-29

標籤 html5 html 結構欄目 HTML5 简体版

原文原文鏈接

主體結構元素

article：表明文檔、頁面或應用程序中獨立的、完整的、能夠被外部引用的內容。如博客或報刊中的文章，論壇中的帖子等html

除了內容部分外，一般有本身的標題（通常放在header元素裏面）。下面舉例說明數據庫

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <article>
 9         <header>
10             <h1>蘋果</h1>
11             <p>
12                 發表日期:<time pubdate="pubdate">2010/10/09</time>
13             </p>
14         </header>
15         <p><b>蘋果</b>植物類水果,屢次水果...("蘋果"文章正文)</p>
16         <footer>
17             <p><small>著做權歸屬***公司全部</small></p>
18         </footer>
19     </article>
20 </body>
21 </html>

article舉例

效果：ide

此外，article元素是能夠嵌套使用的，內層的內容在原則上須要與外層的內容相關聯。如微博中文章與評論的關係。網站

section：對網站或應用程序中的內容進行分塊。一般由內容及其標題組成。但section並不是一個普通的容器元素，當一個容器須要直接定義樣式或經過腳本定義行爲時，推薦使用div而非section元素。能夠這麼理解：section元素中的內容能夠單獨存儲到數據庫或輸出到word文檔。spa

　　section的做用是對頁面內容進行分塊，不要和表明整片文章的article元素搞混了3d

　　section和article能夠相互嵌套code

nav：用做頁面導航的連接組。導航元素通常連接到其餘頁面或當前頁面的其餘部分htm

1     <nav>
2         <ul>
3             <li><a href="">主頁</a> </li>
4             <li><a href="">開發文檔</a> </li>
5         </ul>
6     </nav>

nav舉例

效果：blog

nav的應用場合：① 傳統導航條 ② 側邊欄導航 ③ 業內導航 ④ 翻頁操做開發

aside：表示當前頁面或文章的附屬信息

新增的非結構元素

header：一種具備引導和導航做用的結構元素

hgroup：將標題及其子標題進行分組

footer：上層父級內容的腳註

address：聯繫信息

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。