久久久久在线观看_又色又爽又黄的免费视频播放_一区中文字幕_日韩电影在线播放

今日頭條 焦點資訊 營銷之道 企業報道 淘寶運營 網站建設 軟件開發 400電話
  當前位置: 首頁 » 資訊 » 網站建設 » 正文

絕對應當收藏的10個實用HTML5代碼片段

放大字體  縮小字體 發布日期:2018-02-18  來源:新格網  作者:新格網  瀏覽次數:432  【去百度看看】
核心提示:HTML5是WEB技術發展的重要的里程碑,對于前端開發來說,如果能夠找到一些未來大家開發中可能需要經常重復使用的代碼的話,相信大家一定不會拒絕,下面是我們精心收集的10多個HTML5代碼片段,相信大家一定會喜歡的!

HTML5是WEB技術發展的重要的里程碑,對于前端開發來說,如果能夠找到一些未來大家開發中可能需要經常重復使用的代碼的話,相信大家一定不會拒絕,下面是我們精心收集的10多個HTML5代碼片段,相信大家一定喜歡!

 

HTML5的最簡單模板

如果你需要開始一個新的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>
web的主要內容
</body>
</html>

表單獲取Google地圖

這里有一段非常簡單的代碼,通過用戶輸入地點,獲取google地圖地點,非常適合生成聯系人表單

<form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">輸入地點</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文件

個人不推薦使用這個透明的空白gif,但是即使在2013年,很多人仍舊使用。可能你也喜歡使用這種方式。

<img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/file/upload/201802/18/202033370.gif">

正則表單式驗證電子郵件

HTML5中允許使用正則表單式來做輸入驗證:

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

正確的嵌入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>

視頻并且支持flash的fallback

另外一個HTML5中最有用的特性是video標簽,允許你很方便的嵌入video文件。但是很多老版本的瀏覽器不支持,所以下面這段代碼將會非常有用

<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&amp;
image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="__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中蘋果介紹了一個非常方便的方式來創建電話和短信鏈接。代碼如下:

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

HTML5的數據自動補齊功能

使用datalist元素,HTML5允許使用一組數據來生成自動補齊功能,現在你不需要使用第三方js代碼或者類庫啦!

<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在國內使用量可不小,如果在你的web應用或者網站中不支持IE6的話,加上這段代碼吧,相信你的用戶都會升級IE6滴,嘿嘿!

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

 

 

 

 
 
[ 資訊搜索 ]  [ 加入收藏 ]  [ 告訴好友 ]  [ 打印本文 ]  [ 違規舉報 ]  [ 關閉窗口 ]

 
0條 [查看全部]  相關評論

 
網站首頁 | 關于我們 | 聯系方式 | 使用協議 | 版權隱私 | 網站地圖 | 排名推廣 | 廣告服務 | 積分換禮 | 網站留言 | RSS訂閱 | 吉ICP備11001726號-6
企業800網 · 提供技術支持