淺談HTML5新增與廢棄的標籤

以下的HTML 4.01 元素在HTML5中已經被刪除，雖然瀏覽器為了兼容性考慮都還支持這些標籤，但建議使用新的替代標籤，矛盾的是老瀏覽器對新標籤的支持度又不夠，視項目的受眾對象而定了。

這些元素包含basefont、big、center、font、s、strike、tt、u。這些元素純粹是為頁面展示用的，表現的內容應該由CSS完成。

這些元素包含frameset、frame、noframes。 HTML5中不支援frame框架，只支援iframe框架，或是用伺服器方創建的由多個頁面組成的符合頁面的形式，刪除以上這三個標籤。

這些元素包含applet、bgsound、blink、marquee等標籤。

廢除rb，使用ruby替代廢除acronym使用abbr替代廢除dir使用ul替代廢除isindex使用form與input相結合的方式替代廢除listing使用pre替代廢除xmp使用code替代廢除nextid使用guids廢除plaintex使用text/plian（無格式內文）MIME類型替代

在HTML4.01中div被廣泛用於各種佈局環境在，沒有明確的定義，HTML5為了SEO將div語義化了，新增加結構標籤如下：

a)、section元素表示頁面中的一個內容區塊,例如章節、頁首、頁尾或頁面的其他部分。可以和h1、 h2……等元素結合使用，表示文檔結構。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。

b)、article元素表示頁面中一塊與上下文不相關的獨立內容。例如一篇文章。

c)、aside元素表示article元素內容以外的、與article元素內容相關的輔助資訊。

d)、header元素表示頁面中一個內容區塊或真個頁面的標題。

e)、hgroup元素表示對真個頁面或頁面中的一個內容區塊的標題進行組合。

f)、footer元素表示整個頁面或頁面中一個內容區塊的註腳。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯絡資訊。

g)、nav元素表示頁面中導覽連結的部分。

h)、figure元素表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組新增標題。例如：

 <figure> <figcaption>PRC</figcaption> <p>The People's Republic of China was born in 1949</p></figure>

HTML4中常寫作

 <dl> <h1>prc</h1> <p>The People's Republic of China was born in 1949</p> </dl>

運行結果：

2.1、meter

表示特定範圍內的數值，可用於薪資、數量、百分比等max表示最大值，min表示最小值，value代表目前值。

 <meter max=100 min=0 value=60 style=width: 300px;></meter>

可以用js控制讓它從0變化到100。

time。表示時間值，屬性datetime強調時間大會時間：<time>2015-10-6</time>

 <time>2015-10-6</time>

我們在每天早上<time>8:30</time> 開始上課。 我在<time datetime=2017-02-14>情人節</time>有個約會。

因為該標籤是一個語意標籤，在瀏覽器上查看時沒有特別的效果，基本上與沒有設定標籤的效果相同。

用來表示進度條

 <h3>progress</h3><progress value=75 max=100></progress>

max：最大值，完成式中的值

value：當前值

此標籤定義可選資料的清單。與input 元素搭配使用，就可以製作出輸入值的下拉清單。

與input組合時既可以完成選擇有可以輸入。

 <input type=text list=countries /><datalist id=countries> <option value=中國></option> <option value=美國></option> <option value=日本></option></datalist>

主要用來在視覺上向使用者呈現哪些需要突出顯示或高亮顯示的文字。典型應用程式搜尋結果中高亮顯示搜素關鍵字。 HTML5<mark></mark>;HTML4 <span></span>。

定義ruby 註解（中文注音或字元）。 與<ruby> 以及<rt> 標籤一同使用。 ruby 元素由一個或多個字元（需要一個解釋/發音）和一個提供該資訊的rt 元素組成，還包括可選的rp 元素，定義當瀏覽器不支援ruby 元素時顯示的內容。

定義字元（中文注音或字元）的解釋或發音。

在ruby 註解中使用，以定義不支援ruby 元素的瀏覽器所顯示的內容。

表示軟換行。與br元素的區別：br元素表示此處必須換行；wbr表示瀏覽器視窗或父級元素足弓寬時（沒必要換行時），不換行，而寬度不夠時主動在此處換行。

定義圖形，例如圖表和其他圖像。 <canvas> 元素只是圖形容器（畫布），必須使用腳本來繪製圖形。

 <canvas id=myCanvas></canvas><script type=text/javascript> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF00000' ; ctx.fillRect(0, 0, 80, 100);</script>

表示命令按鈕，例如單選按鈕、複選框或按鈕。只有當command 元素位於menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它來規定鍵盤快速鍵。

 <menu> <command onclick=alert('Hello World')> Click Me!</command> </menu>

用於描述文件或文件某個部分的細節。 可與summary 標籤搭配使用，summary可為details 定義標題。標題是可見的，當使用者點擊標題時，會顯示出details。 summary應該是details的第一個子元素。

定義選項清單。請與input 元素配合使用該元素，來定義input 可能的值。 datalist 及其選項不會被顯示出來，它只是合法的輸入值清單。使用input 元素的list 屬性來綁定datalist。

定義不同類型的輸出，例如腳本的輸出。

 <form action=form_action.asp method=get name=sumform> <output name=sum></output> </form>

定義菜單列表。當希望列出表單控制項時使用該標籤。注意與nav的區別，menu專門用於表單控制項。

如果需要在頁面中播放音訊與視訊我們經常會用使用的方法有：

a)、embed

 <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align=' middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed><embed src=img/iceage4.mp4></embed>

b)、使用flash播放器

如一些三方插件，flowplayer602

html5多媒體元件指的是video(視訊)元件和audio(音訊)元件。 HTML5多媒體元件可以在不借助諸如Flash Player等第三方外掛程式的情況下，直接在你的網頁上嵌入多媒體元件。瀏覽器提供原生支援影片的新能力使得網頁開發人員更易於在不依賴外置插件有效性的情況下，在他們的網站上添加影片元件。由於蘋果公司現階段在iPhone和iPad上使用的Flash技術的局限性，HTML5多媒體元件的能力就顯得尤為重要了。

用於在播放視頻，電影

標籤基本式如下：

 <video width=800 height=600 controls=controls poster=content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video /webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> 目前瀏​​覽器不支援video直接播放，點選這裡下載影片： <a href=a.mp4>下載影片</a></video>

source是視訊來源，可以有多種，當一種失敗時會選擇下一種，主要有如下3種：

Ogg = 帶有Theora 視訊編碼和Vorbis 音訊編碼的Ogg 檔案MPEG4 = 帶有H.264 視訊編碼和AAC 音訊編碼的MPEG 4 檔案WebM = 帶有VP8 視訊編碼和Vorbis 音訊編碼的WebM 文件

注意：

 <video src=img/a.mp4 controls=controls poster=img/1.jpg>您的瀏覽器太老了，請升級，影片下載<a href=#>位址</a></video>

多數的HTML5標籤的innerHTML內容是瀏覽器不支援該標籤時顯示的內容。

事件綁定與監聽的區別：

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>事件綁定與監聽的區別</title> </head> <body> <button id=btnA>按鈕A </button> <button id=btnB>按鈕B</button> <script type=text/javascript> var btnA = document.getElementById(btnA); var btnB = document.getElementById(btnB); btnA.onclick = function() { alert(你點了一下); } btnA.onclick = function() { alert(你又點了一下); } btnB.addEventListenerener(click, function(event){ alert(你點了一下); },false); btnB.addEventListener(click,function(event){ alert(你又點了一下); },false); </script> </body></html>

使用on事件名的形式綁定事件後綁定會覆寫前面綁定的事件，也就是最後一個綁定的事件會生效；

使用addEventListener綁定事件則不會覆寫，可同時在一個元素上綁定多個相同的事件。

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>Video 標籤</title> </head> <body> <video id=videoIce width=800 height=600 controls=controls poster =content/1.jpg> <source src=content/iceage4.mp4 type=video/mp4></source> <source src=content/iceage4.webm type=video/webm></source> <object width= height= type=application/x-shockwave-flash data=myvideo.swf> <param name=movie value=myvideo.swf /> <param name=flashvars value=autostart=true&amp;file=myvideo.swf /> </object> 目前瀏​​覽器不支援video直接播放，點選這裡下載影片： <a href=content/a.mp4>下載影片</a> </video> <h2> <button onclick=play()>播放</button> <button onclick=pause()>暫停</button> <span id=msg></span> </h2> <script type=text/javascript> var videoIce=document.getElementById(videoIce); function play() { videoIce.play(); } function pause() { videoIce.pause(); } videoIce.ontimeupdate = function() { document。 =videoIce.currentTime; } </script> </body></html>

audio可以實現播放聲音，音樂功能。

 <audio src=http://baidu/demo/test.mp3 controls >您的瀏覽器不支援audio元素</autio><audio src=content/a.mp3 controls=controls autoplay=autoplay></audio>

audio標籤的屬性，很多屬性都是與video相同的：

autoplay：true|false，如果是true，則音訊在就緒後馬上播放。 controls：true|false 如果是true，則向使用者顯示控件，例如播放按鈕。 end：numeric value 定義播放器在音訊串流中的何處停止播放。預設地，聲音會播放到結尾。 loopend：numeric value 定義在音訊流中循環播放停止的位置，預設是end 屬性的值。 loopstart： numeric value 定義在音訊流中循環播放的開始位置。預設是start 屬性的值。 playcount： numeric value 定義音訊片段播放多少次。預設是1。 src： url 所播放音訊的url。 start : numeric value 定義播放器在音訊串流中開始播放的位置。預設地，聲音在開頭進行播放。

使用source元素作為多媒體元素的子標籤範例:

 <audio><source src='test.mp3 ' type='audio/mpeg'/><source src='test.ogg ' type='audio/ogg'/><source src='test.spx ' type='audio/ogg'/></audio>

使用source元素，瀏覽器在清單順序找到，直到找到它能播放的檔案格式，找到後，就播放該檔案並忽略隨後的其它元素。

audio的API與video基本上一樣，以下是一個自訂調整音量的範例：

 <!DOCTYPE html><html> <head> <meta charset=UTF-8> <title>audio標籤</title> </head> <body> <h2>audio標籤</h2> <audio src=content/ fcml.mp3 controls=controls autoplay=autoplay id=mp3> <marquee><h2>換個瀏覽器吧，太老了</h2></marquee> </audio> <input type=range min=0 max=100 onchange=setVolume(this) /> <script type=text/javascript> function setVolume(obj){ document.getElementById(mp3).volume=obj.value* 0.01; } </script> </body></html>

音量只在0-1之間。

用來嵌入內容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。

範例：<embed src=flash.swf /> HTML4中程式碼範例<object data=flash.swf type=application/x-shockwave-flash><object>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。