HTML5的文檔結構

HTML5的文件結構

　　HTML5簡化了許多,它的設計遵循了3個原則:1.相容性、2.實用性、3.通用存取性

    1. header > 標籤定義文件或文件的一部分區域的頁眉，又可用於設定文章標題。

   

元素應該作為介紹內容或導覽連結列的容器。

    在一個文件中，您可以定義多個

元素。

    註：

標籤不能被放在

、

或另一個

元素內部。

    文法說明:

標記對之間可以包含 h1~h6 六個標題元素，以及p、span等元素。

    hgroup 元素

   

標籤定義文件的主標題及副標題，標記對之間通常只使用 h1~h6 六個標題元素。

    2. footer 元素

    footer 元素主要用於為頁面或某篇文章定義腳註內容，包括文章的版權資訊、作者聯絡等內容，一個頁面可以包含多個 footer 元素。

    舉例:

<footer>
   <ul>
     <li>Copyright © 2000-2013 华软 All Rights Reserved</li>
     <li>学院地址：广州.从化.广从大道13号 电话：020-87818918</li>
   </ul>
</footer>　

    3. article 元素

  例如一個貼文、一篇部落格文章等。

   

標籤定義的內容本身必須是有意義的且必須是獨立於文件的其餘部分。

   

的潛在來源：論壇貼文、部落格文章、新聞故事、留言等。

    文法說明:

標記對之間可以包含h​​eader、footer、section以及嵌套的article等元素。

    舉例:

<article>
　　<header>
　　　　<h2>写给IT职场新人的六个“关于”</h2>
　　</header>
　　<p>
　　　　<b>关于工作地点</b> ...
　　</p>
　　...
</article>

    4. section 元素

 幾部分。

    文法說明：

標記對之間可以包含 h1~h6 六個標題元素、p元素以及多個article元

              素以表示該分塊文章中包含多篇文章。此外，還可以嵌套section元素。

    舉例:

<article>
　　<header>
　　　　<h2>写给IT职场新人的六个“关于”</h2>
　　</header>
　　<section> 
　　　　<h3>关于工作地点</h3>
　　　　<p>...</p>
　　</section>
　　<section> <h3>关于企业</h3> <p>...</p> </section>
　　...
</article>

    5. nav 元素

    集的導航。

    nav 唯一不可能出現的位置是address 元素內

    基本文法:

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

   6. aside side 的元素訊息，

    它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他類似的有別於主要內容的部分。

    7. audio 音訊標籤

    audio 標籤定義聲音，例如音樂或其他音訊串流。

    目前，audio 元素支援的3種文件格式：MP3、Wav、Ogg。

<audio src="薛之谦 - 认真的雪.mp3" controls="controls"></audio>

    URL

    autoplay   音訊在就緒後馬上播放

    controls   向使用者顯示音訊控件，例如播放/暫停按鈕

    loop       每當音訊結束時重新開始播放

    preload    音訊在頁面載入時進行載入，並預備播放

    8. video 影片標籤與影片串流與影片標籤。

    目前，video 元素支援三種影片格式：MP4、WebM、Ogg。

<video src="火星情报局.mp4" width="320" controls muted poster="images/logo.png" preload></video>

    屬性        說明
     設定視訊播放器的寬度

    height     設定視訊播放器的高度

    autoplay   視訊在就緒後馬上播放

    controls   向使用者顯示視訊控制，例如播放/暫停按鈕

    loop       當媒介檔案完成播放後再次開始播放

    muted      规定视频的音频输出应该被静音

    poster     规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

    preload    视频在页面加载时进行加载并预备播放，属性值(none:只有单击了Play按钮才加载视频;metadata:仅加载元数据,例如视频长度、作者、版权)

    9. 图形中的 figure 及 figcaption

    元素figure及figcaption实际上不能算作结构性元素，但在组织独立图片、图像、图表及编码列表时仍然很受欢迎。

    每一个figure元素中只能包括一个figcaption元素。图片排列一起可用。百度文库里有篇“绚丽的HTML5 Figure图片字幕标题特效”

    常常用到一种图片列表，图片+标题或者图片+标题+简单描述。

    实例代码：

   

黄浦江上的的卢浦大桥

    figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption

    w3c赋予的定义：figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    那么上面的代码就变成了：

    <figure>
    <figcaption style="color: red">黄浦江上的的卢浦大桥</figcaption>
    <img src="images/黄浦江上的的卢浦大桥.jpg" width="350" height="234" />
    </figure>

    效果图如下：

黄浦江上的的卢浦大桥

更多HTML5的文档结构 - 不报错才可怕相关文章请关注PHP中文网！