HTML5新增和廢棄的標籤

1、廢棄的標籤

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

一、能用CSS代替的元素

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

二、frame框架

這些元素包含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類型替代

2、新增的標籤

一、新增的結構標籤

在HTML4.01中div被普遍用於各類佈局環境在，沒有明確的定義，HTML5爲了SEO將div語義化了，新增長結構標籤以下：

a)、section元素 表示頁面中的一個內容區塊,好比章節、頁眉、頁腳或頁面的其餘部分。能夠和h一、 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.一、meter

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

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

 

能夠用js控制讓它從0變化到100。

2.二、time

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

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

 

由於該標籤是一個語義標籤，在瀏覽器上查看時沒有特別的效果，基本與沒有設置標籤的效果相同。

2.三、progress

用來表示進度條

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

 

max：最大值，完成時的值

value：當前值

2.四、datalist

該標籤訂義可選數據的列表。與 input 元素配合使用，就能夠製做出輸入值的下拉列表。

當與input組合時既能夠完成選擇有能夠輸入。

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

2.五、mark元素

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

2.六、ruby元素

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

2.七、rt元素

定義字符（中文註音或字符）的解釋或發音。

2.八、rp元素

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

2.九、wbr元素

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

2.十、canvas元素

定義圖形，好比圖表和其餘圖像。<canvas> 元素只是圖形容器（畫布），必須使用腳原本繪製圖形。

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

 

2.十一、command元素

表示命令按鈕，好比單選按鈕、複選框或按鈕。只有當 command 元素位於 menu 元素內時，該元素纔是可見的。不然不會顯示這個元素，可是能夠用它規定鍵盤快捷鍵。

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

 

2.十二、details標籤

用於描述文檔或文檔某個部分的細節 。 可與 summary 標籤配合使用，summary能夠爲 details 定義標題。標題是可見的，用戶點擊標題時，會顯示出 details。summary應該是details的第一個子元素。

2.1四、datalist標籤

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

2.1五、output標籤

定義不一樣類型的輸出，好比腳本的輸出。

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

 

2.1六、menu標籤

定義菜單列表。當但願列出表單控件時使用該標籤。注意與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多媒體組件的能力就顯得尤其重要了。

3.一、video視頻標籤

用於在播放視頻，電影

標籤基本格式以下：

<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.addEventListener("click",function(event){
                alert("你點了一下");
            },false);
            
            btnB.addEventListener("click",function(event){
                alert("你又點了一下");
            },false);
        </script>
    </body>
​
</html>

 

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

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

video API的屬性與事件示例：

<!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.getElementById("msg").innerHTML=videoIce.currentTime;
            }
        </script>
    </body>
​
</html>

 

3.二、audio音頻標籤

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子標籤

使用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之間。

3.三、embed元素

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

例：<embed src="flash.swf" /> HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>