HTML5新增和刪除的標簽有哪些

這篇文章主要介紹“HTML5新增和刪除的標簽有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5新增和刪除的標簽有哪些”文章能幫助大家解決問題。

　　HTML5增強了瀏覽器的原生功能，符合HTML5規范的瀏覽器功能將更加強大，減少了Web應用對插件的依賴，讓用戶體驗更好，讓開發更加方便，另外W3C從推出HTML4.0到5.0之間共經歷了17年，HTML的變化很小，這并不符合一個好產品的演進規則。

　　以下的 HTML 4.01 元素在HTML5中已經被刪除：

　　<acronym>

　　<applet>

　　<basefont>

　　<big>

　　<center>

　　<dir>

　　<font>

　　<frame>

　　<frameset>

　　<noframes>

　　<strike>

　　<article>標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。

　　HTML5:<article></article>

　　HTML4:<div></div>

　　<aside>標簽定義 article 以外的內容。aside 的內容應該與 article 的內容相關。

　　HTML5:<aside>Aside 的內容是獨立的內容，但應與文檔內容相關。</aside>

　　HTML4:<div>Aside 的內容是獨立的內容，但應與文檔內容相關。</div>

　　<audio> 標簽定義聲音，比如音樂或其他音頻流。

　　HTML5:<audio src="">您的瀏覽器不支持 audio 標簽。</audio>

　　HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

　　<canvas> 標簽定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

　　HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>

　　HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

　　<command> 標簽定義命令按鈕，比如單選按鈕、復選框或按鈕。

　　HTML5: <command onclick=cut（）" label="cut">

　　HTML4: none

　　<datalist> 標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。

　　HTML5: <datalist></datalist>

　　HTML4: see combobox.

　　<details> 標簽定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。與 <legend> 一起使用，來制作 detail 的標題。該標題對用戶是可見的，當在其上點擊時可打開或關閉 detail。

　　HTML5: <details></details>

　　HTML4: <dl style="display:hidden"></dl>

　　<embed> 標簽定義嵌入的內容，比如插件。

　　HTML5: <embed src="" />

　　HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>

　　<figcaption> 標簽定義 figure 元素的標題。”figcaption” 元素應該被置于 “figure” 元素的第一個或最后一個子元素的位置。

　　HTML5: <figure><figcaption>PRC</figcaption></figure>

　　HTML4: none

　　<figure> 標簽用于對元素進行組合。使用 <figcaption> 元素為元素組添加標題。

　　HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949&hellip;</p></figure>

　　HTML4: <dl><h2>PRC</h2><p>The People's Republic of China was born in 1949&hellip;</p></dl>

　　<footer> 標簽定義 section 或 document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。

　　HTML5: <footer></footer>

　　HTML4: <div></div>

　　<header> 標簽定義 section 或 document 的頁眉。

　　HTML5: <header></header>

　　HTML4: <div></div>

　　<hgroup> 標簽用于對網頁或區段（section）的標題進行組合。

　　HTML5: <hgroup></hgroup>

　　HTML4: <div></div>

　　<keygen> 標簽定義生成密鑰。

　　HTML5: <keygen>

　　HTML4: none

　　<mark>主要用來在視覺上向用戶呈現那些需要突出的文字。<mark>標簽的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。

　　HTML5: <mark></mark>

　　HTML4: <span></span>

　　<meter> 標簽定義度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。

　　HTML5: <meter></meter>

　　HTML4: none

　　<nav> 標簽定義導航鏈接的部分。

　　HTML5: <nav></nav>

　　HTML4:<ul></ul>

　　<output> 標簽定義不同類型的輸出，比如腳本的輸出。

　　HTML5: <output></output>

　　HTML4: <span></span>

　　<progress> 標簽運行中的進程。可以使用 <progress> 標簽來顯示 JavaScript 中耗費時間的函數的進程。

　　HTML5: <progress></progress>

　　HTML4: none

　　<rp> 標簽在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。

　　HTML5: <ruby>漢 <rt><rp>（</rp>ㄏㄢˋ<rp>）</rp></rt></ruby>

　　HTML4: none

　　<rt> 標簽定義字符（中文注音或字符）的解釋或發音。

　　HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>

　　HTML4: none

　　<ruby> 標簽定義 ruby 注釋（中文注音或字符）。

　　HTML5: <ruby>漢 <rt><rp>（</rp>ㄏㄢˋ<rp>）</rp></rt></ruby>

　　HTML4: none

　　<section> 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。

　　HTML5: <section></section>

　　HTML4: <div></div>

　　<source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。

　　HTML5: <source>

　　HTML4: <param>

　　<summary> 標簽包含 details 元素的標題，”details” 元素用于描述有關文檔或文檔片段的詳細信息。”summary” 元素應該是 “details” 元素的第一個子元素。

　　HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

　　HTML4: none

　　<time> 標簽定義日期或時間，或者兩者。

　　HTML5: <time></time>

　　HTML4: <span></span>

　　<video> 標簽定義視頻，比如電影片段或其他視頻流。

　　HTML5: <video src="" controls="controls">您的瀏覽器不支持 video 標簽。</video>

　　HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

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

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

　　time。表示時間值，屬性datetime強調時間

　　大會時間：<time>2015-10-6</time>

　　運行效果：

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

　　用來表示進度條

　　max：最大值，完成時的值

　　value：當前值

　　firefox運行結果：

　　chrome運行結果：

　　該標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。

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

　　在沒有使用HTML5時如果要在頁面中播放音頻與視頻，則可以使用的方法有：

　　a）、embed

　　<embed src=""></embed>

　　如一些三方插件，flowplayer602

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

　　用于在播放視頻，電影

　　標簽基本格式如下：

　　運行效果：

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

　　Ogg=帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

　　MPEG4=帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

　　WebM=帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

　　格式支持情況：

　　標簽屬性：

　　source子標簽屬性：

　　video API方法

　　video API屬性

　　video API事件

　　注意：

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

　　事件綁定與監聽的區別：

　　運行結果：

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

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

　　video API的屬性與事件示例：

　　運行結果：

　　練習：

　　練習代碼：

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

　　<audio src= controls >

　　您的瀏覽器不支持audio元素

　　</autio>

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

　　autoplay：true|false，如果是 true，則音頻在就緒后馬上播放。

　　controls：true|false 如果是true，則向用戶顯示控件，比如播放按鈕。

　　end：numeric value 定義播放器在音頻流中的何處停止播放。默認地，聲音會播放到結尾。

　　loopend：numeric value 定義在音頻流中循環播放停止的位置，默認是 end 屬性的值。

　　loopstart： numeric value 定義在音頻流中循環播放的開始位置。默認是 start 屬性的值。

關于“HTML5新增和刪除的標簽有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。