html5是web技術(shù)發(fā)展的重要的里程碑，對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，如果能夠找到一些未來(lái)大家開(kāi)發(fā)中可能需要經(jīng)常重復(fù)使用的代碼的話，相信大家一定不會(huì)拒絕，下面是我們精心收集的10多個(gè)html5代碼片段，相信大家一定喜歡！
html5的最簡(jiǎn)單模板
如果你需要開(kāi)始一個(gè)新的html5項(xiàng)目的話，大家肯定會(huì)需要一個(gè)最簡(jiǎn)單的模板，這里是一個(gè)非常簡(jiǎn)單并且清晰的html5模板，相信大家會(huì)喜歡！
<!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>
web的主要內(nèi)容
</body>
</html>
表單獲取google地圖
這里有一段非常簡(jiǎn)單的代碼，通過(guò)用戶輸入地點(diǎn)，獲取google地圖地點(diǎn)，非常適合生成聯(lián)系人表單
<form action=http://maps.google.com/maps method=get target=_blank>
<label for=saddr>輸入地點(diǎn)</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>
base64編碼的1x1大小的空白gif文件
個(gè)人不推薦使用這個(gè)透明的空白gif，但是即使在2013年，很多人仍舊使用。可能你也喜歡使用這種方式。
<img src=data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///yh5baeaaaaalaaaaaabaaeaaaibraa7>
正則表單式驗(yàn)證電子郵件
html5中允許使用正則表單式來(lái)做輸入驗(yàn)證：
<input type=text title=email required pattern=[^@]+@[^@]+\.[a-za-z]{2,6} />
正確的嵌入flash
如果你經(jīng)常需要在網(wǎng)頁(yè)中插入flash的話，這段代碼你應(yīng)該用的上：
<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>
視頻并且支持flash的fallback
另外一個(gè)html5中最有用的特性是video標(biāo)簽，允許你很方便的嵌入video文件。但是很多老版本的瀏覽器不支持，所以下面這段代碼將會(huì)非常有用
<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>
iphone call & sms links
iphone中蘋(píng)果介紹了一個(gè)非常方便的方式來(lái)創(chuàng)建電話和短信鏈接。代碼如下：
<a href=tel:1-408-555-5555>1-408-555-5555</a>
<a href=sms:1-408-555-1212>new sms message</a>
html5的數(shù)據(jù)自動(dòng)補(bǔ)齊功能
使用datalist元素，html5允許使用一組數(shù)據(jù)來(lái)生成自動(dòng)補(bǔ)齊功能，現(xiàn)在你不需要使用第三方j(luò)s代碼或者類(lèi)庫(kù)啦！
<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>
可直接下載文件
<!-- will download as expenses.pdf -->
<a href=/files/adlafjlxjewfasd89asd8f.pdf
download=expenses.pdf>download your expense report</a>
crash老版本瀏覽器ie6
要知道ie6在國(guó)內(nèi)使用量可不小，如果在你的web應(yīng)用或者網(wǎng)站中不支持ie6的話，加上這段代碼吧，相信你的用戶都會(huì)升級(jí)ie6滴，嘿嘿！
<style>*{position:relative}</style><table><input></table>
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：