哈囉~
又到了KoKo學 HTML5的時間了!
這一次要向大家介紹HTML5新增加的一些標籤給大家做參考!
<audio>
此標籤用來定義聲音
屬性及設定值:
autoplay:聲音會在就緒後馬上播放,其設定值為autoplay
controls:畫面會顯示控制元件,像是播放及暫停的按鈕,
其設定值為controls
loop:每當聲音播放完畢後會重新開始播放,其設定值為loop
preload:聲音會在頁面加載時同時進行加載,並預定為播放,
若已使用autoplay屬性,則會自動忽略這個屬性
src:要播放之聲音的url,其設定值為url
<audio src=”test.mp3” autoplay=”autoplay” controls=”controls” loop=”loop”>
</audio>
<convas>
此標籤用來定義圖形,但他只是圖形的容器
屬性及設定值:
height:設定convas的高度
width:設定convas的寬度
<convas id=”NewCanvas” height =”80” width=”80” ></convas>
<script type=”text/javascript”>
var convas=documant.getElmentById(‘NewCanvas’);
var ctx=cavas.getContext(‘2d’);
ctx.fillStyle=’#FF93CB’;
ctx.fillRect(0,0,80,80);
</script>
<datalist>
此標籤用來定義選項可能值,要與input配合使用
<input list=”colors” />
<datalist id=”colors”>
<option value=”Blue”>
<option value=”Red”>
<option value=”Pink”>
</datalist>
此標籤目前只有Firefox與Opera有支援
<embed>
此標籤用來定義插件的內容
屬性與設定值:
height:設定嵌入內容的高度
src:嵌入內容的url
type:定義嵌入的類型
width:設定嵌入內容的寬度
<embed src=”KoKo.swf” height=”150” width=”300” />
<figure>
此標籤用來定義獨立的內容,像是圖像、圖表、照片等等
<figcaption>
此標籤則是用來定義figure的標題
<figure>
<figcaption>KoKo的玉照</figcaption>
<img src=”koko.png” width=”200” height=”223” />
</figure>
<hgroup>
此標籤用來將文章中的h1~h6等標題組成群組
<hgroup>
<h1>Welcom to KoKo’s blog</h1>
<h2>KoKo 學 HTML5 </h2>
</hgroup>
<p>跟著KoKo一起學習吧!</p>
<mark>
此標籤用來進行加亮的動作,可以凸顯部分的內文
<p>歡迎來到<mark>KoKo學HTML5</mark>的單元</p>
<video>
此標籤用來定義影像
屬性及設定值:
autoplay:影像會在就緒後馬上播放,其設定值為autoplay
controls:畫面會顯示控制元件,像是播放及暫停的按鈕,
其設定值為controls
loop:每當影像播放完畢後會重新開始播放,其設定值為loop
preload:影像會在頁面加載時同時進行加載,並預定為播放,
若已使用autoplay屬性,則會自動忽略這個屬性
src:表示要播放之影像的url,其設定值為url
height:設定影像播放器的高度
width:設定影像播放器的寬度
<video src=”test.mov” autoplay=”autoplay” controls=”controls” loop=”loop”>
</video>


