2016年4月13日 星期三

HTML5: HTML5 的新標籤

HTML5 的新標籤
== 語意及結構的新標籤
HTML5 提供新的[標籤], 使文件在語意及結構上更加明確與完整

<header>
頭部,主要是用來放置網站的刊頭,固定會重覆出現的導覽、LOGO、站名等內容。
<footer>
尾部,包括頁尾,如版權聲明等
註:<header>及<footer>也可置於<section>區塊內作為[章節]的標頭與標尾
<hgroup>
用於將標題與副標題群組在一起(<h> Tag 的 Group)

<nav>
導覽列,像是選單之類用來導引使用到網站各個地方的,可以用<nav> 包起來,在裝置上的操作是可以直接跳過、跳是跳到這個段落然後跳選下一個連結。
<aside>
側欄,網頁中非主要區域的地方,常見放廣告及導覽、全站檢索的地方。

<article>
文章,意指一篇完整而可獨立抽出來閱讀的文章。
<section>
章節,表示相關但是不同的段落
註:章節tag內可以包含<article>(文章), 文章tag內也可以包含<section>(章節), 用於表達不同的語意。

== 其他新標籤
在圖片上加入說明文字的標籤
在<figure>內加入<figcaption>標籤, 可於<figure>所指定的圖片下方顯示說明文字

加強[文字]的標籤
<mark> 標籤可產生如螢光筆的效果, 以加強[文字]的顯示

影片與音樂播放的標籤
使用 <video> 標籤可插入 [影片] 檔案
使用 <audio> 標籤可插入 [音樂] 檔案
<video> 與 <audio> 標籤使用方式與屬性均相同, 範例如下
  <video width="640" height="368" preload controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
  </video>
<video> 與 <audio> 標籤的屬性
width  設置視頻(音頻)播放器的寬度。
height 設置視頻(音頻)播放器高度。
autoplay 設定視頻(音頻)就緒後立即播放。
controls 設定顯示播放控制按鈕的控件。
loop 設定重複播放。
muted 設定音頻輸出先設定為靜音。
poster 設定視頻(音頻)下載或無法顯示時所顯示的圖像。
preload 設定視頻(音頻)在頁面下載時即開始預先於背景下載,並預備播放。
註:使用 "autoplay" 屬性時,則忽略 preload 屬性。
src 設定要播放視頻(音頻)的 URL。

繪圖用的標籤
使用 <canvas> 標籤可建立畫布提供繪製各種圖形
<canvas> 標籤主要是建立一塊畫布, 所以單獨使用 <canvas> 標籤是無法呈現圖形的, 還必須配合在 JavaScript 內運用繪圖函數於畫布上繪製, 才可顯現圖形

沒有留言:

張貼留言