HTML5的特性實(shí)例分析
這篇文章主要介紹“HTML5的特性實(shí)例分析”，在日常操作中，相信很多人在HTML5的特性實(shí)例分析問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML5的特性實(shí)例分析”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
曾都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),曾都網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為曾都成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的曾都做網(wǎng)站的公司定做！
HTML5特性
語(yǔ)義特性（Class：Semantic）
HTML5賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。
本地存儲(chǔ)特性（Class: OFFLINE & STORAGE）
基于HTML5開發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和API說(shuō)明文檔。
設(shè)備兼容特性 (Class: DEVICE ACCESS)
從Geolocation功能的API文檔公開以來(lái)，HTML5為網(wǎng)頁(yè)應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。
連接特性（Class: CONNECTIVITY）
更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
網(wǎng)頁(yè)多媒體特性(Class: MULTIMEDIA)
支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
三維、圖形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。
性能與集成特性（Class: Performance & Integration）
沒有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過(guò)XMLHttpRequest2等技術(shù)，解決以前的跨域等問(wèn)題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
CSS3特性(Class: CSS3)
在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。
HTML5在網(wǎng)站開發(fā)中常用的元素
1.新的文檔類型 (New Doctype)
目前許多網(wǎng)頁(yè)還在使用XHTML 1.0 并且要在第一行像這樣聲明文檔類型：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
在HTML5中，上面那種聲明方式將失效。下面是HTML5中的聲明方式：
<!DOCTYPE html>
2.腳本和鏈接無(wú)需type (No More Types for Scripts and Links)
在HTML4或XHTML中，你需要用下面的幾行代碼來(lái)給你的網(wǎng)頁(yè)添加CSS和JavaScript文件。
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>
而在HTML5中，你不再需要指定類型屬性。因此，代碼可以簡(jiǎn)化如下：
<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>
3.語(yǔ)義Header和Footer (The Semantic Header and Footer)
在HTML4或XHTML中，你需要用下面的代碼來(lái)聲明”Header”和”Footer”。
<div id=”header”>
…
</div>
……….
<div id=”footer”>
…
</div>
在HTML5中，有兩個(gè)可以替代上述聲明的元素，這可以使代碼更簡(jiǎn)潔。
<header>
…
</header>
<footer>
…
</footer>
4.Hgroup
在HTML5中，有許多新引入的元素，hgroup就是其中之一。假設(shè)我的網(wǎng)站名下面緊跟著一個(gè)子標(biāo)題，我可以用<h1>和<h2>標(biāo)簽來(lái)分別定義。然而，這種定義沒有說(shuō)明這兩者之間的關(guān)系。而且，h2標(biāo)簽的使用會(huì)帶來(lái)更多問(wèn)題，比如該頁(yè)面上還有其他標(biāo)題的時(shí)候。
在HTML5中，我們可以用hgroup元素來(lái)將它們分組，這樣就不會(huì)影響文件的大綱。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
5.標(biāo)記元素 (Mark Element)
你可以把它當(dāng)做高亮標(biāo)簽。被這個(gè)標(biāo)簽修飾的字符串應(yīng)當(dāng)和用戶當(dāng)前的行動(dòng)相關(guān)。比如說(shuō)，當(dāng)我在某博客中搜索“Open your Mind”時(shí)，我可以利用一些JavaScript將出現(xiàn)的詞組用<mark>修飾一下。
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>”O(jiān)pen your Mind”</mark>. </p>
6.圖形元素 (Figure Element)
在HTML4或XHTML中，下面的這些代碼被用來(lái)修飾圖片的注釋。
<img src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>
然而，上述代碼沒有將文字和圖片內(nèi)在聯(lián)系起來(lái)。因此，HTML5引入了<figure>元素。當(dāng)和<figcaption>結(jié)合起來(lái)后，我們可以語(yǔ)義化地將注釋和相應(yīng)的圖片聯(lián)系起來(lái)。
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
7.重新定義<small> (Small Element redefined)
在HTML4或XHTML中，<small>元素已經(jīng)存在。然而，卻沒有如何正確使用這一元素的完整說(shuō)明。在HTML5中，<small>被用來(lái)定義小字。試想下你網(wǎng)站底部的版權(quán)狀態(tài)，根據(jù)對(duì)此元素新的HTML5定義，<small>可以正確地詮釋這些信息。
8.占位符 (Placeholder)
在HTML4或XHTML中，你需要用JavaScript來(lái)給文本框添加占位符。比如，你可以提前設(shè)置好一些信息，當(dāng)用戶開始輸入時(shí)，文本框中的文字就消失。
而在HTML5中，新的“placeholder”就簡(jiǎn)化了這個(gè)問(wèn)題。
9.必要屬性 (Required Attribute)
HTML5中的新屬性“required”指定了某一輸入是否必需。有兩種方法聲明這一屬性。
<input type=”text” name=”someInput” required>
<input type=”text” name=”someInput” required=”required”>
當(dāng)文本框被指定必需時(shí)，如果空白的話表格就不能提交。下面是一個(gè)如何使用的例子。
<form method=”post” action=””>
<label for=”someInput”> Your Name: </label>
<input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
<button type=”submit”>Go</button>
</form>
在上面那個(gè)例子中，如果輸入內(nèi)容空且表格被提交，輸入框?qū)⒈桓吡溜@示。
10.Autofocus 屬性 (Autofocus Attribute)
同樣，HTML5的解決方案消除了對(duì)JavaScript的需要。如果一個(gè)特定的輸入應(yīng)該是“選擇”或聚焦，默認(rèn)情況下，我們現(xiàn)在可以利用自動(dòng)聚焦屬性。
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
11.Audio 支持 (Audio Support)
目前我們需要依靠第三方插件來(lái)渲染音頻。然而在HTML5中，<audio>元素被引進(jìn)來(lái)了。
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>
當(dāng)使用<audio>元素時(shí)請(qǐng)記得包含兩種音頻格式。FireFox想要.ogg格式的文件，而Webkit瀏覽器則需要.mp3格式的。和往常一樣，IE是不支持的，且Opera 10及以下版本只支持.wav格式。
12.Video 支持 (Video Support)
HTML5中不僅有<audio>元素，而且還有<video>。然而，和<audio>類似，HTML5中并沒有指定視頻解碼器，它留給了瀏覽器來(lái)決定。雖然Safari和Internet Explorer9可以支持H.264格式的視頻，F(xiàn)irefox和Opera是堅(jiān)持開源Theora 和Vorbis格式。因此，指定HTML5的視頻時(shí)，你必須提供這兩種格式。
<video controls preload>
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora'” />
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” />
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>
13.視頻預(yù)載 (Preload attribute in Videos element)
當(dāng)用戶訪問(wèn)頁(yè)面時(shí)這一屬性使得視頻得以預(yù)載。為了實(shí)現(xiàn)這個(gè)功能，可以在<video>元素中加上preload=”preload”或者只是preload。
<video preload>
14.顯示控制條 (Display Controls)
如果你使用過(guò)上面的每一個(gè)提到的技術(shù)點(diǎn)，你可能已經(jīng)注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內(nèi)指定controls屬性。
<video preload controls>
15.正規(guī)表達(dá)式 (Regular Expressions)
在HTML4或XHTML中，你需要用一些正規(guī)表達(dá)式來(lái)驗(yàn)證特定的文本。而HTML5中新的pattern屬性讓我們能夠在標(biāo)簽處直接插入一個(gè)正規(guī)表達(dá)式。
<form action=”” method=”post”>
<label for=”username”>Create a Username: </label>
<input type=”text”
name=”username”
id=”username”
placeholder=”4 <> 10″
pattern=”[A-Za-z]{4,10}”
autofocus
required>
<button type=”submit”>Go </button>
</form>
到此，關(guān)于“HTML5的特性實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
新聞名稱：HTML5的特性實(shí)例分析
網(wǎng)頁(yè)鏈接：http://bm7419.com/article30/jdjoso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站排名、微信小程序、云服務(wù)器、做網(wǎng)站、網(wǎng)站營(yíng)銷
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
