001



002 


     哈囉~  hi  

     又到了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>

     

    01  

 

     <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>

     

    02  


     <datalist>
     此標籤用來定義選項可能值,要與input配合使用

 

     <input list=”colors” />

     <datalist id=”colors”>

     <option value=”Blue”>

     <option value=”Red”>

     <option value=”Pink”>

     </datalist>

   

    03  

     此標籤目前只有Firefox與Opera有支援


     <embed>
     此標籤用來定義插件的內容
 

     屬性與設定值:

     height:設定嵌入內容的高度

     src:嵌入內容的url

     type:定義嵌入的類型

     width:設定嵌入內容的寬度


     <embed src=”KoKo.swf” height=”150” width=”300” />

   

    04  


     <figure>
     此標籤用來定義獨立的內容,像是圖像、圖表、照片等等


     <figcaption>
     此標籤則是用來定義figure的標題

 

     <figure>

     <figcaption>KoKo的玉照</figcaption>

     <img src=”koko.png” width=”200” height=”223” />

     </figure>

   

    05     


     <hgroup>
     此標籤用來將文章中的h1~h6等標題組成群組

 

     <hgroup>

     <h1>Welcom to KoKo’s blog</h1>

     <h2>KoKo 學 HTML5 </h2>

     </hgroup>

     <p>跟著KoKo一起學習吧!</p>

   

    06  


     <mark>

    此標籤用來進行加亮的動作,可以凸顯部分的內文

 

     <p>歡迎來到<mark>KoKo學HTML5</mark>的單元</p>

   

    07   


     <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>

   
    08  
02.jpg  
     以上,就是KoKo這一回的HTML5介紹!
     同學們!下課囉~!!  啦啦.gif  

    KoKo 發表在 痞客邦 留言(0) 人氣()