HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 在网站制作中随时可用的10个 HTML5 代码片段

在网站制作中随时可用的10个 HTML5 代码片段

 HTML 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单。在这篇文章中,我收集了10个超有用的 HTML 代码片段,有 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> </body></html>  
获取方位的表单 (Google Maps)
       这里是一个简单但功能强大的表单代码,用户可以输入他的位置指示到特定的地方。对于联系页面非常有用。
<form action="http://maps.google.com/maps" method="get" target="_blank">   <label for="saddr">Enter your location</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 编码的空白 GIF 图片
       我不推荐使用透明的 GIF,但我知道,即使在2013年,很多人都还在使用他们。如果你是其中之一,你可能会享受这个 Base64 编码的 1 * 1px的空白 GIF。这种方式比使用的图像更好。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">  
Email 校验的正则表达式
HTML5 对表单功能进行了很大的正确,例如允许使用正则表达式模式来验证电子邮件。
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />  
嵌入 Flash
        你是否经常需要再 HTML 页面中嵌入 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 video with Flash fallback
       新的 HTML5 规范的另一大特点是 Video 标签,让您轻松嵌入视频文件。但不幸的是,一些浏览器不能处理嵌入式 HTML5 视频。因此,这里兼容旧的浏览器的代码,在不支持 HMTL5 视频的浏览器使用 Flash。
<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>  
打电话和发短信
       在移动网页中,有一种快速的方法来建立呼叫和短信链接。下面是一个示例代码,记得收藏在您的代码片段库里。
<a href="tel:1-408-555-5555">1-408-555-5555</a><a href="sms:1-408-555-1212">New SMS Message</a>  
自动完成功能
       使用 dataList 元素,HTML5 允许你创建一个输入字段自动完成数据的列表。超级有用的!这里是一个示例代码。
<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>  
可下载的文件
HTML5 允许使用 download 属性强制下载文件。这里是一个标准链接到一个可下载的文件。
<!-- will download as "expenses.pdf" --><a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a> 
Crash IE6
        在 2013 年,带给前端开发人员恶梦的 Internet Explorer 6 市场份额已经降了很多了。但一些人仍然在使用它。如果你想摆脱这种旧的浏览器,这里是一个非常有趣的代码,包括在你的 HTML 页面,让 IE6 崩溃。
<style>*{position:relative}</style><table><input></table>

【在网站制作中随时可用的10个 HTML5 代码片段】相关文章

1. 在网站制作中随时可用的10个 HTML5 代码片段

2. 绝对应当收藏的10个实用HTML5代码片段

3. 分享10个超实用的jQuery代码片段

4. 可以直接拿来用的15个jQuery代码片段

5. 每位设计师都应该拥有的50个CSS代码片段

6. 分享5个最棒的代码片段资源网站

7. 15 个响应式的 jQuery UI 组件的代码片段和模块

8. 使用 GistBox 轻松组织和管理你的代码片段

9. 在网站开中很有用的8个 jQuery 效果【附源码】

10. 学习网页制作中如何在正确选取和使用 CSS 单位

本文来源:https://www.51html5.com/a3472.html

点击展开全部

﹝在网站制作中随时可用的10个 HTML5 代码片段﹞相关内容

「在网站制作中随时可用的10个 HTML5 代码片段」相关专题

其它栏目

也许您还喜欢