| 标题 | 值得收藏的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& 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中苹果介绍了一个非常方便的方式来创建电话和短信链接。代码如下： <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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。