[初三驚喜]HTML 5網站架構表

1 / 25, 2012 HTML , HTML5 , 架站技巧 , 網站優化

雖然HTML 5要到2022年才會普及,但是早點做預習總是比較好,所以很多網站都開始使用HTML 5架構的佈景(包含本站),而且有發現對SEO有幫助呢,這招當然要學起來

HTML 5新增功能:

影片功能

<video width="寬" height="高" controls="controls">
<source src="檔案位置" type="video/mp4" />
<source src="檔案位置" type="video/ogg" />
此瀏覽器不支援影片功能
</video>

解釋:source是指影片位置,但是要注意檔名喔(video/mp4=mp4檔,以此類推)

檔案支援表

Browser MP4 WebM Ogg
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6

音樂功能

<audio width="300" height="32" controls="controls">
<source src="檔案位置" type="audio/ogg" />
<source src="檔案位置" type="audio/mpeg" />
此瀏覽器不支援音樂功能 </audio>

介紹:基本上設定和影片一樣,請注意:audio/mpeg是指.mp3檔

Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES

標題

<header>標題</header>

文章

<article>文章</article>

區域

<section>要包含區域</section>

標註

<figure>要註解的內容</figure>

底部

<footer>通常放版權資訊</footer>

導覽列

<nav>導覽列</nav>

詳細內容請看原文:http://www.w3schools.com/html5/default.asp