HTML5代码学习:值得收藏的HTML5代码片段
作者:一网学   最后更新时间:2014-04-17 10:40:36

HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与OracleJavaFX的需求,并且提供更多能有效增强网络应用的标准集。

HTML5是WEB技术发展的重要的里程碑,对于前端开发来说,如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话,相信大家一定不会拒绝,下面是我们精心收集的10多个HTML5代码片段,相信大家一定喜欢!


Base64编码的1x1大小的空白GIF文件


个人不推荐使用这个透明的空白gif,但是即使在2013年,很多人仍旧使用。可能你也喜欢使用这种方式。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">


视频并且支持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="__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的最简单模板

如果你需要开始一个新的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>


正则表单式验证电子邮件

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>

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滴,嘿嘿

上一篇:常见网页文本特效代码汇总:变色文字特效和字符的背景特效

下一篇:Frontpage排版中的三种回车符

其它免费教程

网页重设计的7个常见误区与解决方案【网页设计培训】

时间:2016-05-17 点击:984

小编:绝大多数的网站会随着内容的增加、需求的改变和产品的演进而进行重新设计。但是,不可避免的,网站重...

网页版面设计步骤和布局技巧指南

时间:2014-04-21 点击:48540

版面设计也可以理解为布局设计,就是我们在浏览器上说看的一个完整的页面。设计师们如何将所有要体现的内容...

为什么越来越多的公司需要动效设计?【UI设计】

时间:2015-08-21 点击:1406

最近越来越多的国内公司开始关注动效设计了,越来越多的团队意识到动效在产品用户体验中的重要性。但是为什...

如何制作GIF动图【摄影后期培训】

时间:2014-11-07 点击:1915

GIF动图在摄影作品里的出现频率越来越高,一张符合作品风格的动图除了能吸引大众的注意力之外,还能让整...

九种常见的人像后期处理方法【PS教程】

时间:2015-06-29 点击:1462

人像摄影的后期处理有哪些方法呢?相信很多童鞋知道一些方法但是却无法全部列出。没关系,今天这篇文章穷尽...

更多设计教程>>


在家就能免费试听
多了解下对你最终选择总是有帮助的
姓名:
电话:
Q Q:
答案:
邮箱:
留言:
提交试听申请