心雨在线科技

以规范的流程和专注的态度,为您提供全方位的设计服务

HTML5代码学习:值得收藏的HTML5代码片段

发布时间:2019-04-13   浏览次数:236

网页制作Webjx文章简介:绝对应当收藏的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=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7>

正则表单式验证电子邮件

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=__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>
批注:(深圳市心雨在线科技开发有限公司 www.xyzxkj.com 是一家专业从事互联网品牌网站建设,APP客户端,微信定制开发,O2O商城开发,响应式网站,,营销型PC网站,系统软件定制开发,美工形象设计,在线印刷事务等,上千家企业客户的成功选择,专业品质,服务至上,联系电话:郑先生 13148852471  在线QQ:113454847)
 
返回列表
上一篇:网页制作基础知识:全面学习掌握字符编码
下一篇:CSS经典教程:CSS选择器的优先级

在线
客服

在线客服
尊敬的客户,我们24小时竭诚为您服务 公司总机:0755-89808693(32条线)

客服
热线

0755-89808693
7*24小时客服服务热线

关注
微信

关注官方微信

返回
顶部