溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5相關(guān)常用技巧有哪些

發(fā)布時(shí)間：2022-03-09 15:00:04 來源：億速云 閱讀：88 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“html5相關(guān)常用技巧有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html5相關(guān)常用技巧有哪些”吧!

　　1. 新的Doctype聲明

　　XHTML的聲明太長了，我相信很少會(huì)有前端開發(fā)人員能手寫出這個(gè)Doctype聲明。

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

　　HTML5的Doctype聲明很短，看到這個(gè)聲明相信你馬上就能記住，不用浪費(fèi)腦細(xì)胞去記那長的有點(diǎn)變態(tài)的XHTML的Doctype聲明了。

　　<!DOCTYPE html>

　　HTML5的簡短的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)簽

　　復(fù)制代碼

　　代碼如下：

　　<img alt="About image" src="path/to/image">

　　<h7>Image of Mars.</h7>

　　看看下面一段簡單的代碼：

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

　　復(fù)制代碼

　　代碼如下：

　　<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)簽來創(chuàng)建與logo相關(guān)的副標(biāo)題。但是在HTML5中重新定義了<small>標(biāo)簽，使之更能表現(xiàn)語義化，在<small>的字號(hào)都會(huì)變小，想想如果這個(gè)標(biāo)簽用于網(wǎng)站的底部的版權(quán)信息還是個(gè)不錯(cuò)的做法。
 

　　4. 去掉了Javascript和CSS標(biāo)簽的type屬性

　　通常你會(huì)在<link>和<script>加上type屬性：

　　復(fù)制代碼

　　代碼如下：

　　<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)多余，去掉之后可以讓代碼更為簡潔。

　　復(fù)制代碼

　　代碼如下：

　　<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)檫@讓代碼看起來會(huì)更標(biāo)準(zhǔn)。不過，這可以根據(jù)你的個(gè)人喜好來確定是到底要不要雙引號(hào)。

　　復(fù)制代碼

　　代碼如下：

　　<h7 id=someId class=myClass> Start the reactor.</h7>

　　6. 使網(wǎng)頁內(nèi)容可以編輯

　　復(fù)制代碼

　　代碼如下：

　　<h3>To-D0 List</h3>

　　<ul contenteditable>

　　<li>Break mechanical cab driver</li>

　　<li>Drive to abandoned factory</li>

　　<li>Watc</li>

　　</ul>

　　7. 電子郵件輸入框

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

　　復(fù)制代碼

　　代碼如下：

　　<FORM method=get>

　　<LABEL for=email>Email:</LABEL>

　　<INPUT id=email type=email name=email>

　　<BUTTON type=submit> Submit Form </BUTTON>

　　</FORM>

　　到目前為止，包括現(xiàn)代瀏覽器在內(nèi)都不支持該屬性，所以這個(gè)屬性暫時(shí)還是靠不住的。

　　8. 占位符

　　文本框中的占位符（看看本博的搜索框效果）有利于提升用戶體驗(yàn)，之前，我們只能依靠JS來實(shí)現(xiàn)占位符的效果，在HTML5中新增了占位符屬性placeholder,關(guān)于此屬性的詳細(xì)介紹你可以點(diǎn)擊這里：HTML5表單placeholder屬性。

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

　　同樣，目前的主流現(xiàn)代瀏覽器對(duì)該屬性的支持不大好，暫時(shí)只有Chrome和Safari支持該屬性，F(xiàn)irefox和Opera不支持該屬性。

到此，相信大家對(duì)“html5相關(guān)常用技巧有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手