HTML5新增標簽

一、什么是HTML5

HTML5HTML 標準的最新演進版本。 這個術(shù)語代表了兩個不同的概念:
它是一個新的 HTML 語言版本包含了新的元素,屬性和行為,同時包含了一系列可以被用來讓 Web 站點和應(yīng)用更加多樣化,功能更強大的技術(shù)。 這套技術(shù)往往被稱作 HTML5 和它的朋友們,通常簡稱為 HTML5
從要對全部所有的 Web 開發(fā)人員有用這一點出發(fā),這個參考頁面鏈接了有關(guān) HTML5 技術(shù)的大量資源,并且基于它們各自的功能,把它們歸類成了若干組。
語義:能夠讓你更恰當?shù)孛枋瞿愕膬?nèi)容是什么。
連通性:能夠讓你和服務(wù)器之間通過創(chuàng)新的新技術(shù)方法進行通信。
離線 & 存儲:能夠讓網(wǎng)頁在客戶端本地存儲數(shù)據(jù)以及更高效地離線運行。
多媒體:使 video 和 audio 成為了在所有 Web 中的一等公民。
2D/3D 繪圖 & 效果:提供了一個更加分化范圍的呈現(xiàn)選擇。
性能 & 集成:提供了非常顯著的性能優(yōu)化和更有效的計算機硬件使用。
設(shè)備訪問 Device Access:能夠處理各種輸入和輸出設(shè)備。
樣式設(shè)計: 讓作者們來創(chuàng)作更加復(fù)雜的主題吧!

二、HTML5新增標簽

腳本:

<template> 通過JavaScript在運行時實例化內(nèi)容的容器

章節(jié):

<section> 定義文檔中的一個章節(jié),一般來說會有包含一個 heading
<nav>定義一個含有多個超鏈接的區(qū)域,這個區(qū)域包含轉(zhuǎn)到其他頁面,或者頁面內(nèi)部其他部分的鏈接列表
<article> 表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨立結(jié)構(gòu),其意在成為可獨立分配的或可復(fù)用的結(jié)構(gòu)
<aside> 定義和頁面內(nèi)容聯(lián)度較低的內(nèi)容--如果被刪除,剩下的內(nèi)容仍然很合理
<header> 定義頁面或章節(jié)的頭部。它經(jīng)常包含logo、頁面標題和導(dǎo)航性的目錄
<footer> 定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址
<main> 定義文檔中主要或重要的獨一無二的內(nèi)容。一個文檔中不能出現(xiàn)一個以上的<main>標簽

組織內(nèi)容:

<figure> 代表一個和文檔有關(guān)的圖例
<figcaption> 代表一個圖例的說明

文字形式:

<data> 將一個指定內(nèi)容和機器可讀的翻譯聯(lián)系在一起。但如果內(nèi)容是與time和date相關(guān)的,一定要使用<time>
<time> 代表日期和時間值;機器可讀的等價形式通過datetime屬性指定
<mark> 代表一段需要被高亮的引用文字,用來表示上下文的關(guān)聯(lián)性
<ruby> 表示被ruby注釋標記的文本,如中文漢字和它的拼音
<rt> 代表ruby注釋,如中文拼音
<rp> 代表ruby注釋兩邊的額外插入文本,用于在不支持ruby注釋顯示的瀏覽器中提供友好的注釋顯示
<bdi> 代表需要脫離父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本
<wbr> 代表建議換行,當文本太長需要換行時將會在此處添加換行符

嵌入內(nèi)容:

<embed> 代表一個嵌入的外部資源,如應(yīng)用程序或交互內(nèi)容,換句話說,就是一個插件。如<embed type="video/quicktime" src="movie.mov" width="640" height="480">
<video> 代表一段視頻及其視頻文件和字幕,并提供了播放視頻的用戶界面
<audio> 代表一段聲音或音頻流。 <audio> 元素可以包含多個音頻資源, 這些音頻資源可以使用 src 屬性或者<source> 元素來進行描述
<source> 為<video>或<audio>這類媒體元素指定媒體源
<track> 為<video>或<audio>這類媒體元素指定文本軌道(字幕)
<canvas> 代表位圖區(qū)域,可以通過腳本在它上面實時呈現(xiàn)圖形,如圖表、游戲繪圖等
<svg> 定義一個嵌入式矢量圖
<math> 定義一段數(shù)學(xué)公式

表單:

<datalist> 代表提供給其他控件的一組預(yù)定義選項
<keygen> 代表一個密鑰對生成器控件
<output> 代表計算值
<meter> 代表滑動條
<progress> 代表進度條,用來顯示一項任務(wù)的完成進度

交互元素:

<details> 代表一個用戶可以(點擊)獲取額外信息或控件的小部件。與summary配合使用
<summary> 代表 <details> 元素的綜述或標題
<menuitem> 代表一個用戶可以點擊的菜單項
<menu> 代表菜單,呈現(xiàn)了一組用戶可執(zhí)行或激活的命令。這既包含了可能出現(xiàn)在屏幕頂端的列表菜單,也包含了那些隱藏在按鈕之下、當點擊按鈕后顯示出來的文本菜單。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,983評論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,772評論 3 422
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,947評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,201評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,960評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,350評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,406評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,549評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,104評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,914評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,089評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,647評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,340評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,753評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,007評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,834評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,106評論 2 375

推薦閱讀更多精彩內(nèi)容

  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,077評論 1 25
  • W3C文檔不可少! 新增全局屬性: data-yourvalue,hidden,Spellcheck,tabind...
    Mandy_jin閱讀 405評論 0 0
  • article : 定義article aside : 定義頁面內(nèi)容之外的內(nèi)容 audio : 定義聲音內(nèi)容 bd...
    一只dororo閱讀 297評論 0 1
  • 一、新增標簽 結(jié)構(gòu)標簽 相當于有意義的div標簽article:用于定義一篇文章header:定義頁面的頭部foo...
    大春春閱讀 2,301評論 0 5
  • H5新增的很多有意思的標簽,其中很多標簽就是對DIV的細化,賦予了DIV很多意義,但它實際還是相當于DIV,使用這...
    林_Han閱讀 597評論 0 0