HTML5
2015-11-11 17:38
666 查看
1.HTML5 启动模板
当启动一个新的项目的时候,你需要一个启动模板。这里是一个简洁干净的模板,可以作为 HTML5 项目的基础。
2.获取方位的表单 (Google Maps)
这里是一个简单但功能强大的表单代码,用户可以输入他的位置指示到特定的地方。对于联系页面非常有用。
3.Base64 编码的空白 GIF 图片
我不推荐使用透明的 GIF,但我知道,即使在2013年,很多人都还在使用他们。如果你是其中之一,你可能会享受这个 Base64 编码的 1 * 1px的空白 GIF。这种方式比使用的图像更好。
4.Email 校验的正则表达式
HTML5 对表单功能进行了很大的正确,例如允许使用正则表达式模式来验证电子邮件。
5.嵌入 Flash
你是否经常需要再 HTML 页面中嵌入 Flash 文件?如果是的话,你会更好地保存下面的 Flash 嵌入代码以供将来使用。
6.HTML5 video with Flash fallback
新的 HTML5 规范的另一大特点是 Video 标签,让您轻松嵌入视频文件。但不幸的是,一些浏览器不能处理嵌入式 HTML5 视频。因此,这里兼容旧的浏览器的代码,在不支持 HMTL5 视频的浏览器使用 Flash。
7.打电话和发短信
在移动网页中,有一种快速的方法来建立呼叫和短信链接。下面是一个示例代码,记得收藏在您的代码片段库里。
8.自动完成功能
使用 dataList 元素,HTML5 允许你创建一个输入字段自动完成数据的列表。超级有用的!这里是一个示例代码。
9.可下载的文件
HTML5 允许使用 download 属性强制下载文件。这里是一个标准链接到一个可下载的文件。
10.Crash IE6
在 2013 年,带给前端开发人员恶梦的 Internet Explorer 6 市场份额已经降了很多了。但一些人仍然在使用它。如果你想摆脱这种旧的浏览器,这里是一个非常有趣的代码,包括在你的 HTML 页面,让 IE6 崩溃。
当启动一个新的项目的时候,你需要一个启动模板。这里是一个简洁干净的模板,可以作为 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>
2.获取方位的表单 (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>
3.Base64 编码的空白 GIF 图片
我不推荐使用透明的 GIF,但我知道,即使在2013年,很多人都还在使用他们。如果你是其中之一,你可能会享受这个 Base64 编码的 1 * 1px的空白 GIF。这种方式比使用的图像更好。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
4.Email 校验的正则表达式
HTML5 对表单功能进行了很大的正确,例如允许使用正则表达式模式来验证电子邮件。
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
5.嵌入 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>
6.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>
7.打电话和发短信
在移动网页中,有一种快速的方法来建立呼叫和短信链接。下面是一个示例代码,记得收藏在您的代码片段库里。
<a href="tel:1-408-555-5555">1-408-555-5555</a> <a href="sms:1-408-555-1212">New SMS Message</a>
8.自动完成功能
使用 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>
9.可下载的文件
HTML5 允许使用 download 属性强制下载文件。这里是一个标准链接到一个可下载的文件。
<!-- will download as "expenses.pdf" --> <a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
10.Crash IE6
在 2013 年,带给前端开发人员恶梦的 Internet Explorer 6 市场份额已经降了很多了。但一些人仍然在使用它。如果你想摆脱这种旧的浏览器,这里是一个非常有趣的代码,包括在你的 HTML 页面,让 IE6 崩溃。
<style>*{position:relative}</style><table><input></table>
相关文章推荐
- 五个2015 年最佳HTML5 框架
- 使用html5 canvas 画时钟代码实例分享
- HTML5 乱记
- html5手机 input file 上传图片 调用API
- H5地理定位
- cdh5.4.7 sqoop使用
- Html5_移动前端不得不了解的html5 head 头标签
- html5视频播放解决方案
- HTML5上传图片预览
- HTML5 Web Worker深入浅出教程
- html5 hash
- HTML5中custom data-*特性与asp.net mvc 3 表单验证
- html5
- 基于HTML5树组件延迟加载技术实现
- 基于HTML5树组件延迟加载技术实现
- HTML5音乐播放器效果非常漂亮
- HTML5 Canvas画线技巧
- 移动前端头部标签(HTML5 head meta)
- 可以用来开发h5的软件小结
- HTML5 Viewport Meta Tag