咨詢(xún)電話(huà)： 0592-5506201
HTML5是WEB技術(shù)發(fā)展的重要的里程碑，對于前端開(kāi)發(fā)來(lái)說(shuō)，如果能夠找到一些未來(lái)大家開(kāi)發(fā)中可能需要經(jīng)常重復使用的代碼的話(huà)，相信大家一定不會(huì )拒絕，下面是我們精心收集的10多個(gè)HTML5代碼片段，相信大家一定喜歡！
如果你需要開(kāi)始一個(gè)新的HTML5項目的話(huà)，大家肯定會(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的主要內容
</body>
</html>
這里有一段非常簡(jiǎn)單的代碼，通過(guò)用戶(hù)輸入地點(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>
個(gè)人不推薦使用這個(gè)透明的空白gif，但是即使在2013年，很多人仍舊使用?？赡苣阋蚕矚g使用這種方式。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
HTML5中允許使用正則表單式來(lái)做輸入驗證：
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
如果你經(jīng)常需要在網(wǎng)頁(yè)中插入flash的話(huà)，這段代碼你應該用的上：
<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>
另外一個(gè)HTML5中最有用的特性是video標簽，允許你很方便的嵌入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中蘋(píng)果介紹了一個(gè)非常方便的方式來(lái)創(chuàng )建電話(huà)和短信鏈接。代碼如下：
<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允許使用一組數據來(lái)生成自動(dòng)補齊功能，現在你不需要使用第三方j(luò )s代碼或者類(lèi)庫啦！
<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>
要知道IE6在國內使用量可不小，如果在你的web應用或者網(wǎng)站中不支持IE6的話(huà)，加上這段代碼吧，相信你的用戶(hù)都會(huì )升級IE6滴，嘿嘿！
<style>*{position:relative}</style><table><input></table>
網(wǎng)站建設與互動(dòng)創(chuàng )意設計
品牌形象平面設計
網(wǎng)絡(luò )整合營(yíng)銷(xiāo)與傳播
企業(yè)整合托管服務(wù)