在網站制作中随時可用的10個 HTML5 代碼片段

HTML 很容易寫，但建立網頁時，您經常需要重複做同樣的任務，如建立表單。在這篇文章中，我收集了10個超有用的 HTML 代碼片段，有 HTML5 啟動模闆、空白圖檔、打電話和發短信、自動完成等等，幫助你提高開發速度。

　　當啟動一個新的項目的時候，你需要一個啟動模闆。這裡是一個簡潔幹淨的模闆，可以作為 HTML5 項目的基礎。

<!DOCTYPE html>

<html>

<head>

<meta charset=

"utf-8"

<title>Untitled</title>

<!--[

if

lt IE 9]>

<script src=

"http://html5shim.googlecode.com/svn/trunk/html5.js"

></script>

<![endif]-->

</head>

<body>

</body>

</html>

　　這裡是一個簡單但功能強大的表單代碼，使用者可以輸入他的位置訓示到特定的地方。對于聯系頁面非常有用。

<form action=

"http://maps.google.com/maps"

method=

"get"

target=

"_blank"

<label

for

"saddr"

>Enter your location</label>

<input type=

"text"

name=

"saddr"

/>

<input type=

"hidden"

name=

"daddr"

value=

"350 5th Ave New York, NY 10018 (Empire State Building)"

/>

<input type=

"submit"

value=

"Get directions"

/>

</form>

　　我不推薦使用透明的 GIF，但我知道，即使在2013年，很多人都還在使用他們。如果你是其中之一，你可能會享受這個 Base64 編碼的 1 * 1px的空白 GIF。這種方式比使用的圖像更好。

<img src=

"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

　　HTML5 對表單功能進行了很大的正确，例如允許使用正規表達式模式來驗證電子郵件。

<input type=

"text"

title=

"email"

required pattern=

"[^@]+@[^@]+\.[a-zA-Z]{2,6}"

/>

　　你是否經常需要再 HTML 頁面中嵌入 Flash 檔案？如果是的話，你會更好地儲存下面的 Flash 嵌入代碼以供将來使用。

<object type=

"application/x-shockwave-flash"

data=

"your-flash-file.swf"

width=

"0"

height=

"0"

<param name=

"movie"

value=

"your-flash-file.swf"

/>

<param name=

"quality"

value=

"high"

/>

</object>

　　新的 HTML5 規範的另一大特點是 Video 标簽，讓您輕松嵌入視訊檔案。但不幸的是，一些浏覽器不能處理嵌入式 HTML5 視訊。是以，這裡相容舊的浏覽器的代碼，在不支援 HMTL5 視訊的浏覽器使用 Flash。

<video width=

"640"

height=

"360"

controls>

<source src=

"__VIDEO__.MP4"

type=

"video/mp4"

/>

<source src=

"__VIDEO__.OGV"

type=

"video/ogg"

/>

<object width=

"640"

height=

"360"

type=

"application/x-shockwave-flash"

data=

"__FLASH__.SWF"

<param name=

"movie"

value=

"__FLASH__.SWF"

/>

<param name=

"flashvars"

value=

"controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4"

/>

<img src=

"__VIDEO__.JPG"

width=

"640"

height=

"360"

alt=

"__TITLE__"

title=

"No video playback capabilities, please download the video below"

/>

</object>

</video>

　　在移動網頁中，有一種快速的方法來建立呼叫和短信連結。下面是一個示例代碼，記得收藏在您的代碼片段庫裡。

<a href=

"tel:1-408-555-5555"

>1-408-555-5555</a>

<a href=

"sms:1-408-555-1212"

>New SMS Message</a>

　　使用 dataList 元素，HTML5 允許你建立一個輸入字段自動完成資料的清單。超級有用的！這裡是一個示例代碼。

<input name=

"frameworks"

list=

"frameworks"

/>

<datalist id=

"frameworks"

<option value=

"MooTools"

<option value=

"Moobile"

<option value=

"Dojo Toolkit"

<option value=

"jQuery"

<option value=

"YUI"

</datalist>

　　HTML5 允許使用 download 屬性強制下載下傳檔案。這裡是一個标準連結到一個可下載下傳的檔案。

<!-- will download as

"expenses.pdf"

-->

<a href=

"/files/adlafjlxjewfasd89asd8f.pdf"

download=

"expenses.pdf"

>Download Your Expense Report</a>

　　在 2013 年，帶給前端開發人員惡夢的 Internet Explorer 6 市場佔有率已經降了很多了。但一些人仍然在使用它。如果你想擺脫這種舊的浏覽器，這裡是一個非常有趣的代碼，包括在你的 HTML 頁面，讓 IE6 崩潰。

<style>*{position:relative}</style><table><input></table>

　　英文連結：Hyper useful, ready to use HTML5 snippets