溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“html5相關常用技巧有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5相關常用技巧有哪些”吧!
1. 新的Doctype聲明
XHTML的聲明太長了，我相信很少會有前端開發人員能手寫出這個Doctype聲明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
HTML5的Doctype聲明很短，看到這個聲明相信你馬上就能記住，不用浪費腦細胞去記那長的有點變態的XHTML的Doctype聲明了。
<!DOCTYPE html>
HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代瀏覽器和IE6/7/8等瀏覽器都進入（準）標準模式，你可能會奇怪IE6/7居然也可以支持HTML5 Doctype,事實上，IE是只要doctype符合 這種格式，都會進入標準模式。
2. <figure>標簽
復制代碼
代碼如下：
<img alt="About image" src="path/to/image">
<h7>Image of Mars.</h7>
看看下面一段簡單的代碼：
遺憾的是，這里的h7標簽和img標簽好像沒有什么關系，語義不夠明確。HTML5意識到了這一點，于是就采用了<figure>標 簽。當<figure>結合<figcaption>標簽的使用，可以讓h7標簽和img標簽組合起來，代碼就更具語義化了。
復制代碼
代碼如下：
<figure>
<img alt="About image" src="path/to/image">
<figcaption>
<h7>This is an image of something interesting. </h7>
</figcaption>
</figure>
3. 重新定義<small>
不久前，我使用了<small>標簽來創建與logo相關的副標題。但是在HTML5中重新定義了<small>標簽，使之更能表現語義化，在<small>的字號都會變小，想想如果這個標簽用于網站的底部的版權信息還是個不錯的做法。
4. 去掉了Javascript和CSS標簽的type屬性
通常你會在<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屬性了，因為這顯得有點多余，去掉之后可以讓代碼更為簡潔。
復制代碼
代碼如下：
<link href="path/to/stylesheet.css">
<script src="path/to/script.js"></script>
5. 是否使用雙引號
這有點讓人糾結，HTML5并不是XTHML,你可以省去標簽中的雙引號。相信大多數同志也包括我都習慣了加上雙引號，因為這讓代碼看起來會更標準。不過，這可以根據你的個人喜好來確定是到底要不要雙引號。
復制代碼
代碼如下：
<h7 id=someId class=myClass> Start the reactor.</h7>
6. 使網頁內容可以編輯
復制代碼
代碼如下：
<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中新增了一個輸入框的電子郵件屬性，可以檢測輸入的內容是否符合電子郵件的書寫格式，功能越來越強大了吧，在HTML5之前只能依靠JS來檢測。雖然內置的表單驗證功能很快就會成為現實，但這個屬性很多瀏覽器都還不支持，只會當作普通的文本輸入框來處理。
復制代碼
代碼如下：
<FORM method=get>
<LABEL for=email>Email:</LABEL>
<INPUT id=email type=email name=email>
<BUTTON type=submit> Submit Form </BUTTON>
</FORM>
到目前為止，包括現代瀏覽器在內都不支持該屬性，所以這個屬性暫時還是靠不住的。
8. 占位符
文本框中的占位符（看看本博的搜索框效果）有利于提升用戶體驗，之前，我們只能依靠JS來實現占位符的效果，在HTML5中新增了占位符屬性placeholder,關于此屬性的詳細介紹你可以點擊這里：HTML5表單placeholder屬性。
<INPUT type=email name=email placeholder="doug@givethesepeopleair.com">
同樣，目前的主流現代瀏覽器對該屬性的支持不大好，暫時只有Chrome和Safari支持該屬性，Firefox和Opera不支持該屬性。
到此，相信大家對“html5相關常用技巧有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
