譯者 | 李睿
審校 | 孫淑娟
html5是超文本標(biāo)記語(yǔ)言(HTML)的第五版，網(wǎng)絡(luò)瀏覽器使用它來(lái)可視化代碼。它在網(wǎng)站功能、網(wǎng)頁(yè)內(nèi)容開(kāi)發(fā)等方面有一些改進(jìn)。 ?
HTML的發(fā)展 ?
在萬(wàn)維網(wǎng)的早期，主要的網(wǎng)絡(luò)瀏覽器創(chuàng)造者（例如微軟Inte.NET Explorer和Mosaic Netscape）開(kāi)發(fā)了特定于瀏覽器的元素，以增強(qiáng)其瀏覽器的網(wǎng)頁(yè)外觀(guān)。到上世紀(jì)90年代末，他們?yōu)镮nternet Explorer和Netscape創(chuàng)建了不同版本的網(wǎng)站。 ?
1996年，新成立的萬(wàn)維網(wǎng)聯(lián)盟(W3C)建議創(chuàng)建HTML3.2。這個(gè)標(biāo)準(zhǔn)涵蓋了當(dāng)時(shí)常用的HTML元素。它還包括對(duì)HTML的表示擴(kuò)展，例如在Internet Explorer和Netscape“瀏覽器大戰(zhàn)”期間創(chuàng)建的中心元素和字體。 ?
很快出現(xiàn)了HTML 4.0(1998)和HTML 4.01(1999)，它們強(qiáng)調(diào)表示和結(jié)構(gòu)的分離，同時(shí)增強(qiáng)了可訪(fǎng)問(wèn)性。這些升級(jí)在新創(chuàng)建的級(jí)聯(lián)樣式表(css)標(biāo)準(zhǔn)下轉(zhuǎn)移了表示元素。 ?
HTML5的出現(xiàn) ?
在2000年之后不久，Mozilla、Opera和蘋(píng)果公司聯(lián)合起來(lái)建立了網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組(WHATWG)。這個(gè)實(shí)體的目標(biāo)與W3C不同，其目的是增強(qiáng)HTML開(kāi)發(fā)，使該語(yǔ)言能夠滿(mǎn)足來(lái)自實(shí)際創(chuàng)作實(shí)踐和瀏覽器行為的新需求。WHATWG的最初文檔Web Applications 1.0和Web Forms1.0被結(jié)合起來(lái)建立了HTML5。 ?
如今，WHATWG維持著一個(gè)正在使用的HTML標(biāo)準(zhǔn)，不使用數(shù)字進(jìn)行分類(lèi)。WHATWG的工作也為W3C建立自己的HTML5工作組提供了基礎(chǔ)。HTML5在2014年10月正式獲得“推薦”的地位。 ?
HTML5標(biāo)準(zhǔn)的規(guī)范由兩個(gè)組織共同維護(hù)，這偶爾會(huì)導(dǎo)致輕微的不一致。大多數(shù)瀏覽器開(kāi)發(fā)人員依賴(lài)WHATWG版本作為實(shí)現(xiàn)參考。 ?
HTML 4.01 Strict是HTML5的基礎(chǔ)，該版本沒(méi)有基于表示的元素和其他不推薦的屬性。這導(dǎo)致大多數(shù)HTML5使用多年前使用的瀏覽器兼容元素創(chuàng)建。它還引入了許多新元素和全局屬性，并使HTML 4.01中許多不推薦使用的屬性和元素過(guò)時(shí)。HTML5的一個(gè)關(guān)鍵特性是包含了一個(gè)標(biāo)準(zhǔn)協(xié)議，用于處理瀏覽器遺留和格式錯(cuò)誤的標(biāo)記。?
HTML5的獨(dú)特之處 ?
在這次升級(jí)之前，HTML主要關(guān)注用于標(biāo)記網(wǎng)頁(yè)可視化內(nèi)容的元素。HTML5通過(guò)提供許多完成任務(wù)的新方法走在了前面。在以前的HTML版本中，這些任務(wù)需要特定的編程或?qū)Ｓ胁寮鏢ilverlight或Flash。 ?
HTML5的特性包括標(biāo)記和腳本元素，以及用于在頁(yè)面上添加視頻和音頻、本地?cái)?shù)據(jù)存儲(chǔ)、離線(xiàn)操作和位置數(shù)據(jù)使用等功能的應(yīng)用程序編程接口(API)。HTML5解決了標(biāo)準(zhǔn)的Web開(kāi)發(fā)功能，開(kāi)發(fā)團(tuán)隊(duì)不需要為每個(gè)應(yīng)用從頭開(kāi)始創(chuàng)建功能，而是可以依賴(lài)于內(nèi)置的瀏覽器功能。 ?
HTML5的元素 ?
HTML5引入了許多大多數(shù)主流瀏覽器都支持的新元素。下面列出的是HTML5的關(guān)鍵元素。 ?
（1）<article>?
這個(gè)新的元素用于將特定內(nèi)容標(biāo)記為文章的一部分。這些內(nèi)容將獨(dú)立于網(wǎng)站上的其他內(nèi)容處理，即使其中可能有重疊。 ?
（2）<aside> ?
該元素除了定義包含在其中的內(nèi)容之外，還定義了其他內(nèi)容。它經(jīng)常用于文檔邊欄。雖然該元素在瀏覽器中不以特定形式呈現(xiàn)，但可以使用CSS來(lái)設(shè)置其樣式。?
該元素旨在識(shí)別與頁(yè)面主要內(nèi)容相關(guān)的內(nèi)容，但不是其主要意圖的一部分。例如，可以用它來(lái)概括作者信息和“查看更多”鏈接。 ?
（3）<audio>?
該元素允許用戶(hù)嵌入頁(yè)面的聲音內(nèi)容，例如音樂(lè)或音頻流。<audio>標(biāo)記與一個(gè)或多個(gè)<source>標(biāo)記一起使用，以劃分音頻源。瀏覽器將運(yùn)行第一個(gè)受支持的源。支持的音頻格式包括MP3、OGG和WAV。如果瀏覽器不支持該元素，它將顯示<audio>和</audio>標(biāo)記之間的文本。?
（4）<bdi> ?
該元素的名稱(chēng)表示雙向隔離。它的功能是隔離一個(gè)文本段，該文本段的格式可能與元素外部的文本不同。<bdi>有助于嵌入用戶(hù)生成的內(nèi)容，其中包含具有未知方向格式的文本。?
（5）<canvas>?
該元素使用JAVAScript繪制圖形(方框、路徑、漸變、文本)并向頁(yè)面添加圖像。在默認(rèn)情況下不包括邊框和文本，標(biāo)記是透明的，僅作為繪制圖形的容器。可以使用不同于元素的腳本生成這些圖形。如果元素在瀏覽器中不受支持或JavaScript被禁用，它將在＜canvas＞標(biāo)記中顯示任何文本。?
（6）<data>?
該元素用于向內(nèi)容中添加機(jī)器可讀的信息。機(jī)器可讀的值由數(shù)據(jù)處理器提供，而人類(lèi)可讀的值也提供給web瀏覽器來(lái)呈現(xiàn)。 ?
（7）<datalist> ?
該元素為元素提供了一個(gè)“自動(dòng)完成”功能，它指定了一個(gè)預(yù)設(shè)選項(xiàng)的下拉列表，當(dāng)數(shù)據(jù)輸入時(shí)，瀏覽器將在輸入數(shù)據(jù)時(shí)向用戶(hù)顯示這些選項(xiàng)。<datalist>元素的id屬性必須等于<input>元素的list屬性才能綁定它們。?
（8）和 <summary>?
該元素中包含的內(nèi)容最初是隱藏的，只有在用戶(hù)希望看到它時(shí)才顯示出來(lái)。它可以包含任何內(nèi)容。 ?
為此創(chuàng)建了一個(gè)用戶(hù)可以打開(kāi)或關(guān)閉的交互式小部件。這個(gè)小部件在默認(rèn)情況下是關(guān)閉的，打開(kāi)后展開(kāi)以顯示其中的內(nèi)容。?
＜summary＞標(biāo)記定義了＜details＞小部件的可見(jiàn)標(biāo)題，可以與之交互以查看或隱藏內(nèi)容。?
（9）<dialog>?
這個(gè)元素定義了一個(gè)對(duì)話(huà)框或子窗口，使得在網(wǎng)頁(yè)上很容易生成彈出對(duì)話(huà)框和模態(tài)窗口。 ?
（10） <embed> ?
該元素用于嵌入第三方應(yīng)用程序，這些應(yīng)用程序通常采用視頻或音頻等多媒體內(nèi)容的形式。它充當(dāng)用戶(hù)嵌入插件(如Flash動(dòng)畫(huà))的容器。在HTML5中實(shí)現(xiàn)這個(gè)元素只需要開(kāi)始標(biāo)記。應(yīng)該注意到，許多現(xiàn)代瀏覽器不再支持Java插件和applet、ActiveX控件或Shockwave Flash，從而限制了該元素的可用性。?
（11）<figure> 和<figcaption>?
該元素用于指定自包含的內(nèi)容，如圖表、插圖、代碼列表和照片。其內(nèi)容與主流有關(guān)；然而，它的位置不依賴(lài)于主流，如果元素被移除，頁(yè)面流通常不會(huì)受到影響。＜figcaption＞元素允許用戶(hù)為＜figure＞添加標(biāo)題。?
（12）<footer>?
該元素為節(jié)或頁(yè)定義頁(yè)腳。它通常包含作者、聯(lián)系方式、版權(quán)、“返回頂部”鏈接、網(wǎng)站地圖、相關(guān)閱讀等信息。單個(gè)文檔可以包含幾個(gè)＜footer＞元素。聯(lián)系人詳細(xì)信息通常插入該元素的<address>標(biāo)記中。?
（13）<header> ?
該元素通常包含與頁(yè)面標(biāo)題和標(biāo)題相關(guān)的信息。通常情況下，它概述了介紹信息或?qū)Ш芥溄拥娜萜?。它也有助于可視化一個(gè)或多個(gè)標(biāo)題元素（從＜h1＞到＜h6＞）、徽標(biāo)、圖標(biāo)和作者。該元素甚至可以用于包裝搜索表單或節(jié)的目錄。雖然單個(gè)文檔可以包含許多<header>元素，但<header>標(biāo)記不能放在<address>、<footer>或其他<header>屬性中。?
（14）＜keygen＞?
該元素在表單中用于指定密鑰對(duì)生成器字段。其目的是為用戶(hù)提供一種安全的身份驗(yàn)證方法。提交表單后，將生成公鑰和私鑰。后者存儲(chǔ)在本地，而前者傳輸?shù)椒?wù)器，用于創(chuàng)建客戶(hù)端證書(shū)，以便將來(lái)對(duì)用戶(hù)進(jìn)行身份驗(yàn)證。該元素也有助于創(chuàng)建和驗(yàn)證數(shù)字簽名。?
（15）<main>?
該元素概述了頁(yè)面的主要內(nèi)容，這些內(nèi)容對(duì)于特定文檔來(lái)說(shuō)應(yīng)該是唯一的。在文檔中重復(fù)的內(nèi)容，如導(dǎo)航鏈接、邊欄、網(wǎng)站徽標(biāo)、搜索表單和版權(quán)數(shù)據(jù)，不應(yīng)包含在該元素中。一個(gè)文檔不能有多個(gè)<main>元素，并且該元素不能是<aside>、<article>、<header>、<footer>或<nav>元素的后代。?
（16）<mark>?
該元素定義必須在段落中突出顯示或標(biāo)記的文本。?
（17）<meter> ?
該元素也稱(chēng)為度量，用于在預(yù)定義的范圍和分?jǐn)?shù)值內(nèi)定義標(biāo)量度量。例如，<meter>可以確定硬盤(pán)使用情況或查詢(xún)結(jié)果相關(guān)性。?
（18）<nav>?
該元素概述了網(wǎng)站中通常用于導(dǎo)航鏈接的部分，這些鏈接可以指向當(dāng)前頁(yè)面上的其他位置或其他頁(yè)面。常見(jiàn)的＜nav＞元素包括表、菜單和索引。?
不能將文檔中的每個(gè)鏈接都包含在<nav>元素中；與其相反，它只適用于較大的導(dǎo)航鏈接塊。具有類(lèi)似功能的屏幕閱讀器和瀏覽器可以用來(lái)知道何時(shí)可以跳過(guò)初始內(nèi)容呈現(xiàn)。 ?
（19）<output>?
該元素表示計(jì)算的輸出，例如由JavaScript或其他腳本執(zhí)行的計(jì)算。其屬性包括for（用于指定計(jì)算結(jié)果與計(jì)算期間使用的元素之間的關(guān)系）、form（用于指定輸出元素所屬的形式）和name（用于命名輸出元素）。?
（20）<progress>?
該元素顯示任務(wù)的進(jìn)度，例如完成的工作量或下載的持續(xù)時(shí)間。它通常與JavaScript一起使用。 ?
（21）＜ruby＞、＜rt＞和＜rp＞?
該元素用于指定ruby注釋?zhuān)锤郊拥街魑谋镜男∽煮w的額外文本。ruby文本的目的是指導(dǎo)用戶(hù)理解字符的含義或發(fā)音（通常用于日語(yǔ)內(nèi)容）。?
＜ruby＞通常與＜rt＞和＜rp＞一起使用<ruby>包含需要解釋的字符，＜rt＞包含要給出的信息，可選的＜rp＞標(biāo)記用于定義在瀏覽器不支持常規(guī)ruby注釋的情況下要顯示的內(nèi)容。?
（22）<section> ?
該元素定義了網(wǎng)頁(yè)的特定部分，包括頁(yè)眉和頁(yè)腳。它用于將頁(yè)面劃分為節(jié)和子節(jié)，特別是當(dāng)需要多個(gè)頁(yè)眉、頁(yè)腳或其他節(jié)標(biāo)記時(shí)。它對(duì)相關(guān)內(nèi)容的通用塊進(jìn)行分組。?
（23）<svg>?
該元素為SVG圖形創(chuàng)建一個(gè)容器。它有許多繪制框、路徑、圓、圖形圖像和文本的方法。?
（24）<時(shí)間>?
該元素以人類(lèi)可讀格式顯示日期和時(shí)間，還用于以機(jī)器可讀格式編碼日期和時(shí)間數(shù)據(jù)。它的應(yīng)用包括生日提醒、安排日歷事件和提高搜索引擎結(jié)果的質(zhì)量。?
（25）<video>?
該元素用于在網(wǎng)頁(yè)中嵌入視頻內(nèi)容。它應(yīng)該包含＜source＞標(biāo)記來(lái)概述不同的視頻源，瀏覽器將播放第一個(gè)支持的源。支持的視頻格式包括MP4、OGG和WebM。如果瀏覽器不支持此元素，它將顯示<video>和</video>標(biāo)記之間的文本。?
（26）<wbr>
該元素的名稱(chēng)表示單詞斷開(kāi)機(jī)會(huì)。它指定文本行中可以根據(jù)需要添加換行符的位置。如果使用的單詞太長(zhǎng)，并且瀏覽器可能會(huì)在錯(cuò)誤的位置斷開(kāi)，該元素將很有用。?
HTML5的好處 ?
以上看到了HTML5中引入的元素如何簡(jiǎn)化多媒體內(nèi)容的集成并增強(qiáng)語(yǔ)義價(jià)值?，F(xiàn)在將進(jìn)一步了解HTML5的好處。?
（1）充實(shí)語(yǔ)義?
語(yǔ)義標(biāo)記描述與特定含義相關(guān)聯(lián)的標(biāo)記，而不是簡(jiǎn)單地創(chuàng)建特定的視覺(jué)輸出。例如，＜h1＞標(biāo)記清楚地劃分了網(wǎng)頁(yè)的主要標(biāo)題。雖然可以通過(guò)使用相關(guān)的格式化標(biāo)記而不是＜h1＞標(biāo)記使標(biāo)題文本加粗和變大來(lái)實(shí)現(xiàn)相同的輸出，但語(yǔ)義含義不會(huì)保留。?
以前版本的HTML也有語(yǔ)義標(biāo)記，如標(biāo)題標(biāo)記、鏈接rel和文檔元數(shù)據(jù)。然而，導(dǎo)航菜單、頁(yè)面標(biāo)題和主要內(nèi)容部分等常見(jiàn)結(jié)構(gòu)元素在語(yǔ)義上沒(méi)有區(qū)別。相反，他們都使用了＜div＞標(biāo)記。?
HTML5通過(guò)一系列新的語(yǔ)義元素來(lái)解決這個(gè)問(wèn)題，例如＜header＞、＜main＞、＜section＞、＜nav＞、＜aside＞、＜article＞和＜footer＞。此外，新的內(nèi)聯(lián)語(yǔ)義元素（如＜address＞和＜time＞）幫助在線(xiàn)服務(wù)（如搜索引擎）快速定位頁(yè)面上的相關(guān)數(shù)據(jù)?，F(xiàn)有的內(nèi)聯(lián)標(biāo)記（如粗體、斜體和下劃線(xiàn)）也得到了改進(jìn)，現(xiàn)在與特定的語(yǔ)義相關(guān)聯(lián)。?
（2）無(wú)插件的富媒體體驗(yàn)?
隨著互聯(lián)網(wǎng)速度越來(lái)越快，富媒體已經(jīng)成為在線(xiàn)體驗(yàn)的核心部分。雖然HTML最初作為超文本文檔（可能還有一些圖像）的標(biāo)記語(yǔ)言，但HTML5通過(guò)＜視頻＞和＜音頻＞等元素固有地支持富媒體。?
除了功能強(qiáng)大和方便開(kāi)發(fā)人員之外，這個(gè)特性還有另一個(gè)好處：無(wú)插件。Java和Flash等插件的一些缺點(diǎn)包括性能差、用戶(hù)選項(xiàng)少、安全漏洞和搜索引擎可見(jiàn)性不足。?
此外，HTML5為用戶(hù)提供了新的表單元素以及與CSS和JavaScript的出色集成，簡(jiǎn)化了全面的富媒體Web應(yīng)用程序的創(chuàng)建，而無(wú)需依賴(lài)插件。?
（3）XML的兼容性?
由于HTML5(也稱(chēng)為XHTML5)的XML序列化，可以使用“更嚴(yán)格” 的XML語(yǔ)法編寫(xiě)代碼。這對(duì)于喜歡格式良好的XHTML(包括引號(hào)括起來(lái)的屬性值、小寫(xiě)元素名和所有元素的閉包)提供的整潔性的開(kāi)發(fā)人員非常有用。在期望代碼與其他XML應(yīng)用程序一起工作的情況下，HTML5文檔必須作為XML服務(wù)。?
（4）設(shè)計(jì)和內(nèi)容分離 ?
除了鼓勵(lì)語(yǔ)義標(biāo)記之外，HTML5不鼓勵(lì)那些僅用于幫助瀏覽器可視化內(nèi)容的無(wú)意義標(biāo)記(例如關(guān)于字體、文本顏色、文本對(duì)齊等的聲明)。該標(biāo)準(zhǔn)已經(jīng)棄用了許多支持這種可視化的元素，并且少數(shù)受支持的特性顯示“不推薦實(shí)踐”警告。 ?
分離設(shè)計(jì)和內(nèi)容簡(jiǎn)化了網(wǎng)站的維護(hù)和重新設(shè)計(jì)，因?yàn)镃SS處理樣式聲明。此外，在一個(gè)平臺(tái)上看起來(lái)不錯(cuò)的設(shè)計(jì)決策（比如桌面設(shè)備）在另一個(gè)平臺(tái)（移動(dòng)設(shè)備）上也不一定好看。HTML5通過(guò)提供語(yǔ)義場(chǎng)景并允許內(nèi)容適應(yīng)來(lái)解決這一問(wèn)題。?
（5）可訪(fǎng)問(wèn)性和設(shè)計(jì)響應(yīng)性 ?
HTML早期的迭代不能與現(xiàn)代技術(shù)眾多的屏幕尺寸和縱橫比無(wú)縫兼容。這包括手機(jī)、平板電腦、電子閱讀器、輔助技術(shù)（例如文本到語(yǔ)音轉(zhuǎn)換器）、屏幕閱讀器抑制樣式，同時(shí)提高文本放大和對(duì)比度，盲文翻譯。這些技術(shù)被試圖將樣式和設(shè)計(jì)“硬編碼”到頁(yè)面內(nèi)容中的標(biāo)記所阻礙。 ?
然而，由于語(yǔ)義標(biāo)簽和可訪(fǎng)問(wèn)的豐富互聯(lián)網(wǎng)應(yīng)用程序(ARIA)，使用HTML5創(chuàng)建可訪(fǎng)問(wèn)和響應(yīng)的網(wǎng)站要簡(jiǎn)單得多。例如，屏幕閱讀器可以更容易地解釋HTML5內(nèi)容，使視障人士更容易在線(xiàn)瀏覽。?
（6）應(yīng)用程序編程接口 ?
早期的HTML規(guī)范只記錄了語(yǔ)言中允許的元素、值和屬性。這種方法適用于簡(jiǎn)單的文本網(wǎng)站，但對(duì)創(chuàng)建需要編程和腳本的基于Web的應(yīng)用程序沒(méi)有太大幫助。 ?
HTML5通過(guò)定義大量簡(jiǎn)化與應(yīng)用程序通信的新API實(shí)現(xiàn)了巨大飛躍。它引入了先前需要插件或定制代碼的功能API，包括Web存儲(chǔ)、拖放、地理定位和微數(shù)據(jù)。 ?
這有助于標(biāo)準(zhǔn)化特定機(jī)制，簡(jiǎn)化原本復(fù)雜的編碼任務(wù)，并允許開(kāi)發(fā)者添加跨平臺(tái)瀏覽器無(wú)縫運(yùn)行的功能。 ?
（7）持久本地存儲(chǔ) ?
作為Cookie和客戶(hù)端數(shù)據(jù)庫(kù)的混合體，HTML5支持本地瀏覽器存儲(chǔ)。該特性允許瀏覽器同時(shí)支持跨多個(gè)窗口存儲(chǔ)，增強(qiáng)安全性和性能，并確保即使在瀏覽器關(guān)閉后數(shù)據(jù)也能持久。 ?
持久的本地存儲(chǔ)支持離線(xiàn)操作，并防止Cookie刪除對(duì)瀏覽器操作造成不利影響，因?yàn)榇蠖鄶?shù)現(xiàn)代瀏覽器都支持由HTML5支持的客戶(hù)端數(shù)據(jù)存儲(chǔ)。它還允許使用HTML5功能而不是第三方插件的應(yīng)用程序順利運(yùn)行。 ?
結(jié)語(yǔ) ?
技術(shù)優(yōu)先的企業(yè)已經(jīng)在向HTML5過(guò)渡，很快，HTML5將成為跨垂直行業(yè)的首選標(biāo)記語(yǔ)言。任何在線(xiàn)優(yōu)先的企業(yè)都不能忽視這一標(biāo)準(zhǔn)，如果它希望保持相關(guān)性的話(huà)。使用HTML5，你可以充分利用其前沿的用戶(hù)粘性功能、用戶(hù)友好性和可訪(fǎng)問(wèn)性！ ?
原文標(biāo)題：??What Is HTML5? Meaning, Elements, and Benefits??，作者：Hossein Ashtari
