| 标题 | 值得收藏的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" 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" 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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。