HTML5新增的標簽怎么使用

這篇文章主要介紹了HTML5新增的標簽怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML5新增的標簽怎么使用文章都會有所收獲，下面我們一起來看看吧。

　　概念：

　　HTML5 是繼 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一個重要版本，

　　旨在消除富 Internet 程序（RIA）對 Flash， Silverlight， JavaFX 一類瀏覽器插件的依賴。

　　1991年HTML1.0標準出現

　　1997年HTML4.0發布，4.0標準下的瀏覽器局限性

　　Flash （安全與穩定堪憂、耗電、觸摸、不開放）

　　Silverlight

　　JavaApplet

　　2008年HTML5出現， W3C2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規范終于制定完成。

　　HTML5增強了瀏覽器的原生功能，符合HTML5規范的瀏覽器功能將更加強大，減少了Web應用對插件的依賴，

　　讓用戶體驗更好，讓開發更加方便，另外W3C從推出HTML4.0到5.0之間共經歷了17年，HTML的變化很小，這并不符合一個好產品的演進規則。

　　3）、在結構語義上

　　html: 沒有體現結構語義化的標簽，通常都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。

　　html5: 在語義上卻有很大的優勢。提供了一些新的標簽，比如：<header><article><footer>。

　　支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera；

　　1、語義特性（Class：Semantic）

　　HTML5會賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa、微數據、微格式、等方面的支持，構建對程序、對用戶更有價值的數據驅動Web。

　　2、本地存儲特性（Class: OFFLINE & STORAGE）

　　基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這全得益于HTML5 APP Cache、本地存儲功能、Indexed DB（HTML5本地存儲最重要的技術之一）和API說明文檔。

　　3、設備兼容特性 （Class: DEVICE ACCESS）

　　從Geolocation功能的API文檔公開以來，HTML5為網頁應用開發者提供了更多功能上的優化選擇，帶來了更多體驗功能。HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可直接與瀏覽器內部的數據直接相連，譬如：視頻影音可直接與microphones及攝像頭相聯。

　　4、連接特性（Class: CONNECTIVITY）

　　更有效的連接效率，使得基于頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能幫助我們實現服務器將數據“推送”到客戶端的功能。

　　5、網頁多媒體特性（Class: MULTIMEDIA）

　　支持網頁端的Audio、Video等多媒體功能，與網站自帶的APPS、攝像頭、影音功能相得益彰。

　　6、三維、圖形、特效特性（Class: 3D, Graphics & Effects）

　　基于SVG、Canvas、WebGL、CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現的驚人視覺效果。

　　7、性能、集成特性（Class: Performance & Integration）

　　沒有用戶會永遠等待你的Loading&mdash;&mdash;HTML5會通過XML Http Request 2等技術，解決以前的跨域問題，幫Web應用和網站在多樣化的環境中更快速工作。

　　8、CSS3特性（Class: CSS3）

　　在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格、更強的效果。此外，較以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

　　1、提高可用性和改進用戶的友好體驗；

　　2、有幾個新標簽，有助于開發人員定義重要內容；

　　3、可給站點帶來更多多媒體元素（視頻和音頻）；

　　4、可很好的替代FLASH和Silverlight；

　　5、當涉及網站抓取和索引時，SEO很友好；

　　6、可大量應用于移動應用程序和游戲；

　　7、可移植性好。

　　以下的 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 元素的標題?！眆igcaption” 元素應該被置于 “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” 元素用于描述有關文檔或文檔片段的詳細信息?！眘ummary” 元素應該是 “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>

關于“HTML5新增的標簽怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5新增的標簽怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。