在技術(shù)的不斷迭代和更替中會(huì)逐漸的淘汰比較不好的一下屬性和標(biāo)簽，那么今天我們就來(lái)一同探討有關(guān)于“對(duì)于html5新增與廢棄標(biāo)簽的詳細(xì)說(shuō)明！ ”這方面的相關(guān)內(nèi)容分享吧！
一、廢棄的標(biāo)簽
以下的 HTML 4.01 元素在HTML5中已經(jīng)被刪除，雖然瀏覽器為了兼容性考慮都還支持這些標(biāo)簽，但建議使用新的替代標(biāo)簽，矛盾的是老瀏覽器對(duì)新標(biāo)簽的支持度又不夠，視項(xiàng)目的受眾對(duì)象而定了。
1、能用CSS代替的元素
這些元素包含basefont、big、center、font、s、strike、tt、u。這些元素純粹是為頁(yè)面展示用的，表現(xiàn)的內(nèi)容應(yīng)該由CSS完成。
2、frame框架
這些元素包含frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個(gè)頁(yè)面組成的符合頁(yè)面的形式，刪除以上這三個(gè)標(biāo)簽。
3、只有部分瀏覽器支持的元素
這些元素包含applet、bgsound、blink、marquee等標(biāo)簽。
4、其他被廢除的元素
廢除rb，使用ruby替代廢除acronym使用abbr替代廢除dir使用ul替代廢除isindex使用form與input相結(jié)合的方式替代廢除listing使用pre替代廢除xmp使用code替代廢除nextid使用guids廢除plaintex使用“text/plian”（無(wú)格式正文）MIME類(lèi)型替代
二、新增的標(biāo)簽
1、新增的結(jié)構(gòu)標(biāo)簽
在HTML4.01中div被廣泛用于各種布局環(huán)境在，沒(méi)有明確的定義，HTML5為了SEO將div語(yǔ)義化了，新增加結(jié)構(gòu)標(biāo)簽如下：
a)、section元素 表示頁(yè)面中的一個(gè)內(nèi)容區(qū)塊,比如章節(jié)、頁(yè)眉、頁(yè)腳或頁(yè)面的其他部分。可以和h1、 h2……等元素結(jié)合起來(lái)使用，表示文檔結(jié)構(gòu)。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。
b)、article元素 表示頁(yè)面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容。比如一篇文章。
c)、aside元素 表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。
d)、header元素 表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或真?zhèn)€頁(yè)面的標(biāo)題。
e)、hgroup元素 表示對(duì)真?zhèn)€頁(yè)面或頁(yè)面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。
f)、footer元素 表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō)，他會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。
g)、nav元素 表示頁(yè)面中導(dǎo)航鏈接的部分。
h)、figure元素 表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。例如：
<figure>
?<figcaption>PRC</figcaption>
?<p>The People's Republic of China was born in 1949</p>
</figure>HTML4中常寫(xiě)作 ：
<dl> ?
<h1>prc</h1>
?<p>The People's Republic of China was born in 1949</p>
?</dl>運(yùn)行結(jié)果：
2、新增加其它元素
2.1、meter
表示特定范圍內(nèi)的數(shù)值，可用于工資、數(shù)量、百分比等 max表示最大值，min表示最小值，value代表當(dāng)前值。
<meter max="100" min="0" value="60" style="width: 300px;"></meter>可以用js控制讓它從0變化到100。
2.2、time
time。表示時(shí)間值，屬性datetime強(qiáng)調(diào)時(shí)間大會(huì)時(shí)間：<time>2015-10-6</time>
<time>2015-10-6</time>我們?cè)诿刻煸缟?<time>8:30</time> 開(kāi)始上課。 我在<time datetime="2017-02-14">情人節(jié)</time>有個(gè)約會(huì)。
因?yàn)樵摌?biāo)簽是一個(gè)語(yǔ)義標(biāo)簽，在瀏覽器上查看時(shí)沒(méi)有特別的效果，基本與沒(méi)有設(shè)置標(biāo)簽的效果相同。
2.3、progress
用來(lái)表示進(jìn)度條：
<h3>progress</h3>
<progress value="75" max="100"></progress>max：最大值，完成時(shí)的值
value：當(dāng)前值
2.4、datalist
該標(biāo)簽定義可選數(shù)據(jù)的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。
當(dāng)與input組合時(shí)既可以完成選擇有可以輸入。
<input type="text" list="countries" />
<datalist id="countries">
<option value="中國(guó)"></option>
<option value="美國(guó)"></option>
<option value="日本"></option>
</datalist>2.5、mark元素
主要用來(lái)在視覺(jué)上向用戶(hù)呈現(xiàn)哪些需要突出顯示或高亮顯示的文字。典型應(yīng)用搜索結(jié)果中高亮顯示搜素關(guān)鍵字。 HTML5<mark></mark>;HTML4 <span></span>。
2.6、ruby元素
定義 ruby 注釋?zhuān)ㄖ形淖⒁艋蜃址?與 <ruby> 以及 <rt> 標(biāo)簽一同使用。ruby 元素由一個(gè)或多個(gè)字符（需要一個(gè)解釋/發(fā)音）和一個(gè)提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當(dāng)瀏覽器不支持 "ruby" 元素時(shí)顯示的內(nèi)容。
2.7、rt元素
定義字符（中文注音或字符）的解釋或發(fā)音。
2.8、rp元素
在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。
2.9、wbr元素
表示軟換行。與br元素的區(qū)別：br元素表示此處必須換行；wbr表示瀏覽器窗口或父級(jí)元素足弓寬時(shí)（沒(méi)必要換行時(shí)），不換行，而寬度不夠時(shí)主動(dòng)在此處換行。
2.10、canvas元素
定義圖形，比如圖表和其他圖像。<canvas> 元素只是圖形容器（畫(huà)布），必須使用腳本來(lái)繪制圖形。
<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.11、command元素
表示命令按鈕，比如單選按鈕、復(fù)選框或按鈕。只有當(dāng) command 元素位于 menu 元素內(nèi)時(shí)，該元素才是可見(jiàn)的。否則不會(huì)顯示這個(gè)元素，但是可以用它規(guī)定鍵盤(pán)快捷鍵。
<menu> ?
<command onclick="alert('Hello World')"> ?
Click Me!</command>
?</menu>2.12、details標(biāo)簽
用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) 。 可與 summary 標(biāo)簽配合使用，summary可以為 details 定義標(biāo)題。標(biāo)題是可見(jiàn)的，用戶(hù)點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出 details。summary應(yīng)該是details的第一個(gè)子元素。
2.14、datalist標(biāo)簽
定義選項(xiàng)列表。請(qǐng)與 input 元素配合使用該元素，來(lái)定義 input 可能的值。datalist 及其選項(xiàng)不會(huì)被顯示出來(lái)，它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來(lái)綁定 datalist。
2.15、output標(biāo)簽
定義不同類(lèi)型的輸出，比如腳本的輸出。
<form action="form_action.asp" method="get" name="sumform">
?<output name="sum"></output>
?</form>2.16、menu標(biāo)簽
定義菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。注意與nav的區(qū)別，menu專(zhuān)門(mén)用于表單控件。
3、多媒體標(biāo)簽
如果需要在頁(yè)面中播放音頻與視頻我們經(jīng)常會(huì)用使用的方法有：
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等第三方插件的情況下，直接在你的網(wǎng)頁(yè)上嵌入多媒體組件。瀏覽器提供原生支持視頻的新能力使得網(wǎng)頁(yè)開(kāi)發(fā)人員更易于在不依賴(lài)于外置插件有效性的情況下，在他們的網(wǎng)站上添加視頻組件。由于蘋(píng)果公司現(xiàn)階段在iPhone和iPad上使用的Flash技術(shù)的局限性，HTML5多媒體組件的能力就顯得尤為重要了。
3.1、video視頻標(biāo)簽
用于在播放視頻，電影
標(biāo)簽基本式如下：
<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&file=myvideo.swf" />
</object>
當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻： <a href="a.mp4">下載視頻</a>
</video>source是視頻源，可以有多種，當(dāng)一種失敗時(shí)將選擇下一種，主要有如下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">
您的瀏覽器太老了，請(qǐng)升級(jí)，視頻下載<a href="#">地址</a>
</video>多數(shù)的HTML5標(biāo)簽的innerHTML內(nèi)容是瀏覽器不支持該標(biāo)簽時(shí)顯示的內(nèi)容。
事件綁定與監(jiān)聽(tīng)的區(qū)別：
<!DOCTYPE html>
<html>
?
<head>
<meta charset="UTF-8">
<title>事件綁定與監(jiān)聽(tīng)的區(qū)別</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("你點(diǎn)了一下");
}
btnA.onclick = function() {
alert("你又點(diǎn)了一下");
}
btnB.addEventListener("click",function(event){
alert("你點(diǎn)了一下");
},false);
btnB.addEventListener("click",function(event){
alert("你又點(diǎn)了一下");
},false);
</script>
</body>
?
</html>使用on事件名的形式綁定事件后綁定會(huì)覆蓋前面綁定的事件，也就是最后一個(gè)綁定的事件會(huì)生效；
使用addEventListener綁定事件則不會(huì)覆蓋，可同時(shí)在一個(gè)元素上綁定多個(gè)相同的事件。
video API的屬性與事件示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video 標(biāo)簽</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&file=myvideo.swf" />
</object> 當(dāng)前瀏覽器不支持 video直接播放，點(diǎn)擊這里下載視頻：
<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.2、audio音頻標(biāo)簽
audio可以實(shí)現(xiàn)播放聲音，音樂(lè)功能。
<audio src=http://baidu/demo/test.mp3 controls >您的瀏覽器不支持audio元素</autio>
<audio src="content/a.mp3" controls="controls" autoplay="autoplay"></audio>audio標(biāo)簽的屬性，很多屬性都是與video相同的：
autoplay：true|false，如果是 true，則音頻在就緒后馬上播放。 controls：true|false 如果是true，則向用戶(hù)顯示控件，比如播放按鈕。 end：numeric value 定義播放器在音頻流中的何處停止播放。默認(rèn)地，聲音會(huì)播放到結(jié)尾。 loopend：numeric value 定義在音頻流中循環(huán)播放停止的位置，默認(rèn)是 end 屬性的值。 loopstart： numeric value 定義在音頻流中循環(huán)播放的開(kāi)始位置。默認(rèn)是 start 屬性的值。 playcount： numeric value 定義音頻片斷播放多少次。默認(rèn)是 1。 src： url 所播放音頻的 url。 start : numeric value 定義播放器在音頻流中開(kāi)始播放的位置。默認(rèn)地，聲音在開(kāi)頭進(jìn)行播放。
source子標(biāo)簽
使用source元素作為多媒體元素的子標(biāo)簽例:
<audio>
?<source src='test.mp3’ type='audio/mpeg'/>
?<source src='test.ogg’ type='audio/ogg'/>
?<source src='test.spx’ type='audio/ogg'/>
?</audio>使用source元素，瀏覽器在列表順序查找，直到找到一個(gè)它能播放的文件格式，找到后，就播放該文件并忽略隨后的其它元素。
audio的API與video基本一樣，下面是一個(gè)自定義調(diào)整音量的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio標(biāo)簽</title>
</head>
<body>
<h2>audio標(biāo)簽</h2>
<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay" id="mp3">
<marquee><h2>換個(gè)瀏覽器吧，太老了</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.3、embed元素
用來(lái)嵌入內(nèi)容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。
例：<embed src="flash.swf" /> HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>
通過(guò)以上的文章我們大概對(duì)于“對(duì)于html5新增與廢棄標(biāo)簽的詳細(xì)說(shuō)明！ ”這個(gè)內(nèi)容有了不少的了解，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，有喜歡html5的小伙伴們可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。
