1. 程式人生 > >Html5主要新增主體結構元素

Html5主要新增主體結構元素

ole boolean ubd 其他 那不 har utc ade 行為

article

代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或者報刊中的文章,一篇論壇帖子、一段用戶評論或獨立的插件,或其他任何獨立的內容。

article元素是可以嵌套使用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for article</title>
</head>
<body>
    <article>
<header> <h1>這是一個頭部</h1> <p>我是底部的註解</p> </header> <!--嵌套使用的article--> <article> <header> <h1>作者</h1> </header> <p>評論</p>
<footer> time </footer> </article> <footer> 這是底部 </footer> </article> <!--提供插件作用的article--> <!--遞歸顯示頁面--> <article> <h1>這是一個內嵌頁面</h1> <object>
<embed src = "#" width = 600 height = 400></embed> </object> </article> </body> </html>

顯示效果:

技術分享圖片

section

section元素用於對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素並非一個普通的容器元素;當一個容器需要被直接定義樣式或通過腳本定義行為時,推薦使用div而非section元素。

用法有以下幾點需要註意:

  • 不要將section元素作為設置樣式的頁面容器
  • 如果article元素、aside元素、nav元素更符合使用條件,那不要使用section元素
  • 沒有標題內容不要使用section元素

nav元素是一個可以用作頁面導航的連接組,其中的導航元素鏈接到其他頁面或當前頁面的其他部分。並不是所有的連接組都要被放進nav元素,只需要將主要的、基本的連接組放進nav元素即可。

nav元素應用場景:

  • 傳統導航條
  • 側邊欄導航
  • 頁內導航
  • 翻頁操作

html中導航欄

<div>
    <ul>
        <li><a href="#"></a>
        <li><a href="#"></a>
        <li><a href="#"></a>
    </ul>
</div>

html5中導航欄

<nav>
    <ul>
        <li><a href="#"></a>
        <li><a href="#"></a>
        <li><a href="#"></a>
    </ul>
</nav>

另外:不要用menu元素代替nav元素進行使用,加為menu元素更多使用在交互命令菜單之中,而不是導航。

aside

aside元素用來表示當前頁面或文章的附屬信息部分,它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條,以及其他類似的有區別於主要內容的部分。

time元素與微格式

  • 微格式

自用html5元素的class屬性添加附屬信息的格式

附加的信息可以是發布時間,電話號碼等等

微格式並不是html5才出現,在之前的html之中已經有了使用,但是在對時間的編譯上會出現錯誤歧義。而html5新增的time元素改變了這一點·

  • time元素用法如下
<time datetime="2017-07-29">2017-07-29</time>
<time datetime="2017-07-29T20:00">2017-07-29</time> #T代表時間
<time datetime="2017-07-29T20:00Z">2017-07-29</time> #Z代表UTC時間
<time datetime="2017-07-29T20:00+09:00">2017-07-29</time> #'+09:00'代表時差
  • pubdate屬性

boolean類型,用於time元素

代表當前時間為文章的發布時間

Html5主要新增主體結構元素