免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

關(guān)于HTML5的技巧有哪些

本篇文章為大家展示了關(guān)于HTML5的技巧有哪些,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),網(wǎng)站模板,微信公眾號(hào)開發(fā),軟件開發(fā),成都小程序開發(fā),十載建站對(duì)建筑動(dòng)畫等多個(gè)領(lǐng)域,擁有豐富的網(wǎng)站推廣經(jīng)驗(yàn)。

Web技術(shù)的發(fā)展速度太快了,如果你不與時(shí)俱進(jìn),就會(huì)被淘汰。因此,為了應(yīng)對(duì)即將到來(lái)的HTML5,本文總結(jié)了22個(gè)HTML5的初級(jí)技巧,希望能對(duì)你進(jìn)一步學(xué)習(xí)好HTML5會(huì)有所幫助。
1. 新的Doctype聲明
XHTML的聲明太長(zhǎng)了,我相信很少會(huì)有前端開發(fā)人員能手寫出這個(gè)Doctype聲明。

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
HTML5的Doctype聲明很短,看到這個(gè)聲明相信你馬上就能記住,不用浪費(fèi)腦細(xì)胞去記那長(zhǎng)的有點(diǎn)變態(tài)的XHTML的Doctype聲明了。
<!DOCTYPE html>
HTML5的簡(jiǎn)短的DOCTYPE聲明是讓Firefox、Chrome等現(xiàn)代瀏覽器和IE6/7/8等瀏覽器都進(jìn)入(準(zhǔn))標(biāo)準(zhǔn)模式,你可能會(huì)奇怪IE6/7居然也可以支持HTML5 Doctype,事實(shí)上,IE是只要doctype符合 這種格式,都會(huì)進(jìn)入標(biāo)準(zhǔn)模式。
2. <figure>標(biāo)簽
看看下面一段簡(jiǎn)單的代碼:

代碼如下:

<img alt="About image" src="path/to/image"> <h7>image of Mars.</h7>

 
遺憾的是,這里的h7標(biāo)簽和img標(biāo)簽好像沒有什么關(guān)系,語(yǔ)義不夠明確。HTML5意識(shí)到了這一點(diǎn),于是就采用了<figure>標(biāo)簽。當(dāng)<figure>結(jié)合<figcaption>標(biāo)簽的使用,可以讓h7標(biāo)簽和img標(biāo)簽組合起來(lái),代碼就更具語(yǔ)義化了。

代碼如下:

<figure><img alt="about image" src="path/to/image"> <figcaption><h7>This is an image of something interesting. </h7></figcaption></figure>


3. 重新定義<small>
不久前,我使用了<small>標(biāo)簽來(lái)創(chuàng)建與logo相關(guān)的副標(biāo)題。但是在HTML5中重新定義了<small>標(biāo)簽,使之更能表現(xiàn)語(yǔ)義化,在<small>的字號(hào)都會(huì)變小,想想如果這個(gè)標(biāo)簽用于網(wǎng)站的底部的版權(quán)信息還是個(gè)不錯(cuò)的做法。
4. 去掉了Javascript和CSS標(biāo)簽的type屬性
通常你會(huì)在<link>和<script>加上type屬性:

代碼如下:

<link rel="stylesheet" type=text/css href="path/to/stylesheet.css">
 <script type="text/javascript" src="path/to/script.js"></script>



在HTML5中,不再需要type屬性了,因?yàn)檫@顯得有點(diǎn)多余,去掉之后可以讓代碼更為簡(jiǎn)潔。

代碼如下:

<link href="path/to/stylesheet.css">
 <script src="path/to/script.js"></script>



5. 是否使用雙引號(hào)
這有點(diǎn)讓人糾結(jié),HTML5并不是XTHML,你可以省去標(biāo)簽中的雙引號(hào)。相信大多數(shù)同志也包括我都習(xí)慣了加上雙引號(hào),因?yàn)檫@讓代碼看起來(lái)會(huì)更標(biāo)準(zhǔn)。不過,這可以根據(jù)你的個(gè)人喜好來(lái)確定是到底要不要雙引號(hào)。

代碼如下:

<h7 id="someid" class="myclass"> start the reactor. </h7>



6. 使網(wǎng)頁(yè)內(nèi)容可以編輯
關(guān)于HTML5的技巧有哪些
7. 電子郵件輸入框
HMTL5中新增了一個(gè)輸入框的電子郵件屬性,可以檢測(cè)輸入的內(nèi)容是否符合電子郵件的書寫格式,功能越來(lái)越強(qiáng)大了吧,在HTML5之前只能依靠JS來(lái)檢測(cè)。雖然內(nèi)置的表單驗(yàn)證功能很快就會(huì)成為現(xiàn)實(shí),但這個(gè)屬性很多瀏覽器都還不支持,只會(huì)當(dāng)作普通的文本輸入框來(lái)處理。

代碼如下:

<form method=get>   <label for="email">email:</label><input id="email" type="email" name="email">  <button type="submit"> submit form </button></form>


關(guān)于HTML5的技巧有哪些
到目前為止,包括現(xiàn)代瀏覽器在內(nèi)都不支持該屬性,所以這個(gè)屬性暫時(shí)還是靠不住的。
8. 占位符
文本框中的占位符(看看本博的搜索框效果)有利于提升用戶體驗(yàn),之前,我們只能依靠JS來(lái)實(shí)現(xiàn)占位符的效果,在HTML5中新增了占位符屬性placeholder。

代碼如下:

<input type="email" name="email" placeholder="doug@givethesepeopleair.com">



同樣,目前的主流現(xiàn)代瀏覽器對(duì)該屬性的支持不大好,暫時(shí)只有Chrome和Safari支持該屬性,F(xiàn)irefox和Opera不支持該屬性。
關(guān)于HTML5的技巧有哪些
9. 本地存儲(chǔ)
HTML5的本地存儲(chǔ)功能,可以讓現(xiàn)代瀏覽器“記住”我們輸入的,就算瀏覽器關(guān)閉和刷新也不會(huì)受影響。雖然這個(gè)功能有些瀏覽器不支持,但是IE8, Safari 4, 還有 Firefox 3.5還是支持這個(gè)功能的,你可以測(cè)試下。
關(guān)于HTML5的技巧有哪些
10. 更有語(yǔ)義的header和footer
下面的代碼在HTML5中將不復(fù)存在

代碼如下:

<div id=header>
     ...
</div>
<div id=footer>
     ...
</div>



通常我們都會(huì)給header和footer定義一個(gè)div,然后再添加一個(gè)id,但是在HTML5中可以直接使用<header>和<footer>標(biāo)簽,所以可以將上面的代碼改寫成:

代碼如下:

<header>
    ...
</header>
<footer>
    ...
</footer>



要注意不要將這兩個(gè)標(biāo)簽和網(wǎng)站的頭部和頁(yè)腳混淆起來(lái),它們只是代表它們的容器。
11. IE對(duì)HTML5的支持
IE瀏覽器目前對(duì)HTML5的支持并不好,也是阻礙HTML5的更快普及的一大絆腳石,不過,IE9對(duì)HTML5的支持度還是很不錯(cuò)的。
IE把HTML5新增的標(biāo)簽都解析成內(nèi)聯(lián)元素,而實(shí)際上它們是塊級(jí)元素,所以有必要為它們定義一個(gè)樣式:

代碼如下:

header, footer, article, section, nav, menu, hgroup {   display: block;}


盡管如此,IE還是不能解析這些新增的HTML5標(biāo)簽,這個(gè)時(shí)候就需要借助Javascript來(lái)解決這個(gè)問題:

代碼如下:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");



你可以借助這一段Javascript代碼來(lái)修復(fù)IE更好的解析HTML5

代碼如下:

<script mce_src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

12. 標(biāo)題群( hgroup)
這個(gè)類似于第二點(diǎn)技巧。如果用h2和h3標(biāo)簽分別表示網(wǎng)站的名稱和副標(biāo)題,但這會(huì)讓兩個(gè)本義上密切相關(guān)的標(biāo)題并沒有關(guān)聯(lián)起來(lái)。這個(gè)時(shí)候可以使用<hgroup>標(biāo)簽將它們組合起來(lái),這樣代碼會(huì)更有語(yǔ)義。

代碼如下:

<header>
<hgroup>
<h2> Recall Fan Page </h2>
<h3> Only for people who want the memory of a lifetime. </h3>
</hgroup>
</header>



13. 必填項(xiàng)屬性
前端人員肯定做過不少表單驗(yàn)證的項(xiàng)目,其中很重要的一點(diǎn)就是有些輸入框的內(nèi)容是必須填寫的,這里就需要使用Javascript來(lái)檢查。在HTML5中,新增了一個(gè)“必須填寫”的屬性:required。required屬性有兩種使用方法,第二種方法顯得更有結(jié)構(gòu)性,而第一種更簡(jiǎn)潔。

代碼如下:

<input type="text" name="someInput" required>
<input type="text" name="someInput" required="required">



有了這個(gè)屬性,使表單的提交驗(yàn)證變得更簡(jiǎn)單了,看看下面簡(jiǎn)單的例子:

代碼如下:

<form method=post>
    <label for=someInput> your name: </label>
<input id=someInput type=text name=someInput placeholder="Douglas Quaid" required="required">
    <button type="submit">Go</button>
</form>



關(guān)于HTML5的技巧有哪些
如果輸入框?yàn)榭眨韱螌o(wú)法提交成功。
14. 自動(dòng)獲取焦點(diǎn)
同樣的,HTML5也不再需要Javascript來(lái)解決輸入框的自動(dòng)獲取焦點(diǎn),如果某個(gè)輸入框應(yīng)當(dāng)被選擇或是獲取到輸入焦點(diǎn),HTML5新增了自動(dòng)獲取焦點(diǎn)屬性autofocus:

代碼如下:

<input type="text" name="someInput" placeholder="douglas quaid" required="required" autofocus="autofocus">


autofocus也同樣可以寫成”autofocus=autofocus”,這樣看起來(lái)標(biāo)準(zhǔn)些,這個(gè)根據(jù)自己的個(gè)人喜好而定。
15. 音頻播放的支持
HTML5中提供了<audio>標(biāo)簽,解決了以往必須依靠第三方插件才能播放音頻文件的問題。目前為止,還只有少數(shù)的最新瀏覽器支持該標(biāo)簽。

代碼如下:

<audio controls="controls" autoplay="autoplay">
    <source src="file.ogg" _fcksavedurl=""file.ogg"" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>



為什么會(huì)有兩種格式的音頻文件?因?yàn)镕irefox和Webkit瀏覽器所支持的格式存在差異,F(xiàn)irefox只能支持.ogg文件,而Webkit只支持.mp3的文件,解決的辦法就是創(chuàng)建兩個(gè)版本的音頻文件,這樣就可以兼容Firefox和Webkit的瀏覽器了,需要注意的是IE不支持該標(biāo)簽。
16. 視頻播放的支持
和<audio>標(biāo)簽一樣,HTML5也提供了<video>標(biāo)簽對(duì)播放視頻文件的支持。YouTube也宣布了一項(xiàng)新的HTML5的視頻嵌入。不過有點(diǎn)遺憾,HTML5的規(guī)范并沒有指定特定的視頻解碼器,而是讓瀏覽器自己來(lái)決定。這就造成了個(gè)瀏覽器的兼容問題,雖然Safari和IE9都支持還H.264格式的視頻( Flash 播放器可以可以播放),F(xiàn)irefox和Opera則支持開源的Theora和Vorbis格式。因此,當(dāng)顯示HTML5視頻的時(shí)候,也得準(zhǔn)備2種格式。

代碼如下:

<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'" /> 
<div> your browser is old. <a href="cohagenPhoneCall.mp4">download this video instead.</a> </div>
</video>


需要注意的是,type屬性雖然可以省略掉,但是如果加上的話,瀏覽器就可以更快的準(zhǔn)確的解析該視頻文件。并不是所有的瀏覽器都支持HTML5的視頻,所以得做好使用Flash版本來(lái)代替,當(dāng)然,這個(gè)決定權(quán)在于你。
17. 預(yù)加載視頻
預(yù)加載屬性:preload,首先要確定是否需要預(yù)先加載視頻,假如,訪客在訪問一個(gè)有很多視頻展示的頁(yè)面,那么就有必要預(yù)先加載一段視頻,這樣可以節(jié)省訪客的等待時(shí)間,提高用戶體驗(yàn)。你可以給<video>標(biāo)簽添加一個(gè)preload屬性來(lái)實(shí)現(xiàn)預(yù)先加載的功能。

<video preload="preload">
 ...
</video>
[/code]



18. 顯示控件
顯示控件屬性可以給視頻添加一個(gè)播放暫停的控件,需要注意的是每個(gè)瀏覽器顯示的效果可能會(huì)有些差異。

代碼如下:

<video controls="controls" preload="preload">
...
</video>


19. 使用正則表達(dá)式
在HTML5中,我們可以直接使用正則表達(dá)式。

<form method=post action="">
    <label for="username">create a username: </label> 
<input id="username" type="text" name="username" placeholder="4 <> 10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}">
    <button type="submit">Go </button>
</form>




20. 檢測(cè)瀏覽器對(duì)HTML5屬性的支持
由于各瀏覽器對(duì)HTML5屬性的支持度不同,這就造成了一些兼容問題。但是可以使用方法來(lái)檢測(cè)該瀏覽器是否支持這些屬性,上例中的代碼如果要檢測(cè)pattern屬性是否被瀏覽器識(shí)別,可以使用Javascript代碼來(lái)檢測(cè)。

代碼如下:

alert( 'pattern' in document.createElement('input') ) // boolean;



其實(shí)這是確定瀏覽器兼容常用的方法,jQuery庫(kù)就經(jīng)常使用這種方法。上面的代碼中創(chuàng)建了一個(gè)input標(biāo)簽,并檢測(cè)pattern屬性是否被瀏覽器支持,如果能支持的話,瀏覽器就支持這個(gè)功能,否則就不支持。

代碼如下:

<script> 
 if (!'pattern' in document.createElement('input') ) { 
    // do client/server side validation 
 } 
</script>



21. Mark標(biāo)簽
<mark>標(biāo)簽用于高亮顯示那些需要在視覺上向用戶突出其重要性的文字,包裹在此標(biāo)簽里的字符串必須與用戶當(dāng)前的行為相關(guān)。例如,如果我在一些博客中搜索“Open your Mind” ,我可以使用在<mark>標(biāo)簽里使用JavaScript 來(lái)包裹每一次動(dòng)作。

代碼如下:

<h4> search results </h4>
<h7> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h7>


22. 該如何正確的使用div標(biāo)簽
有些人可能會(huì)有疑問,有了<header>和<footer>等這些標(biāo)簽,<div>標(biāo)簽在HTML5中還有用嗎?答案是肯定的,比如你想創(chuàng)建一個(gè)能包裹特殊內(nèi)容的容器自由靈活的<div>肯定是首選,而你要?jiǎng)?chuàng)建一篇文章或者一個(gè)導(dǎo)航菜單,建議你使用更有語(yǔ)義的<article>和<nav>標(biāo)簽。

上述內(nèi)容就是關(guān)于HTML5的技巧有哪些,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題:關(guān)于HTML5的技巧有哪些
分享網(wǎng)址:http://m.newbst.com/article8/pooeip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作ChatGPT電子商務(wù)用戶體驗(yàn)自適應(yīng)網(wǎng)站服務(wù)器托管

廣告

聲明:本網(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)

成都app開發(fā)公司