绝对应当收藏的10个实用HTML5代码片段(转)
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢!
正确的嵌入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视频和fallback——并且支持flash
实用HTML5的一个好处就是简化了视频和音频的嵌入代码量,不过呢,如何兼容老版本的浏览器绝对是一个令人头疼的问题,特别是在天朝,老版本的浏览器绝对处于优势地位,下面代码或者能够帮你忙:
<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>
表单获取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>
一段非常简单的代码,通过用户输入地点,获取google地图地点,非常适合生成联系人表单
Base64编码的1x1大小的空白GIF文件
个人不推荐使用这个透明的空白gif,但是即使在2013年,很多人仍旧使用。可能你也喜欢使用这种方式。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
HTML5中新的Input类型及其验证
在HTML5出现之前,我们一般使用input来处理email,url,或者其它输入,然后使用Javascript来验证正确性,在HTML5中,我们使用如下代码即可:
输入一个URL地址:<input type="url" value="">
输入一个邮件地址:<input type="email" pattern="[^ @]*@[^ @]*" value="">
注意:这里我们可以使用pattern属性来格式化输入内容
另外我们也可以使用一些HTML5的标签来处理表单验证,省去了javascript,如下:
<input title="至少8位并且至少包含1个数字一个小写字母和一个大写字母" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />
<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="国际,国家和本地电话号码"/>
以上分别定义了输入的内容正确性原则。
如: 正则表单式验证电子邮件 - HTML5中允许使用正则表单式来做输入验证:
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
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直接添加项目到浏览器的右键菜单
使用HTML5可以直接添加菜单选项到你的浏览器右键菜单中,代码如下:
<section contextmenu="mymenu">
<p>右键点击这里</p>
</section>
<menu type="context" id="mymenu">
<menuitem label="极客社区" icon="http://gbtags.com/gb/networks/themes/img/logo_small_hover.jpg"></menuitem>
<menu label="极客应用">
<menuitem label="在线教程" onclick="window.location.href = http://www.gbtags.com/gb/postgroups.htm"> </menuitem>
</menu>
</menu>
右键点击网页中文字处, 可以看到如下的菜单:
HTML5的datalist实现自动补齐功能
自动补齐功能大家应该都很熟悉,包括jQueryUI中,或者第三方的自动补齐插件也很多,在HTML5中我们使用datalist来实现,如下:
<input name="frameworks" list="frameworks" />
<datalist id="frameworks">
<option value="Foundation">
<option value="Bootstrap">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
元素的自动focus
无须使用javascript,代码很简单:
<input autofocus="autofocus" />无须使用javascript,代码很简单:
可直接下载文件
<!-- 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>
装载自:
- http://www.gbtags.com/gb/share/538.htm
- http://www.gbin1.com/technology/html/20131101-html5-snippets/
绝对应当收藏的10个实用HTML5代码片段(转)的更多相关文章
- 转--Android实用的代码片段 常用代码总结
这篇文章主要介绍了Android实用的代码片段 常用代码总结,需要的朋友可以参考下 1:查看是否有存储卡插入 复制代码 代码如下: String status=Environment.getE ...
- 在网站制作中随时可用的10个 HTML5 代码片段
HTML 很容易写,但创建网页时,您经常需要重复做同样的任务,如创建表单.在这篇文章中,我收集了10个超有用的 HTML 代码片段,有 HTML5 启动模板.空白图片.打电话和发短信.自动完成等等,帮 ...
- Html5代码片段收集
HTML5 启动模板 当启动一个新的项目的时候,你需要一个启动模板.这里是一个简洁干净的模板,可以作为 HTML5 项目的基础. <!DOCTYPE html> <html> ...
- JavaScript学习总结(10)——实用JS代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event. ...
- C#程序开发中经常遇到的10条实用的代码
1 读取操作系统和CLR的版本 OperatingSystem os = System.Environment.OSVersion; Console.WriteLine("Platform: ...
- (转)C#程序开发中经常遇到的10条实用的代码
原文地址:http://www.cnblogs.com/JamesLi2015/p/3147986.html 1 读取操作系统和CLR的版本 OperatingSystem os = System.E ...
- 为开发者准备的9个实用PHP代码片段
一.查看邮件是否已被阅读 当你发送邮件时,你肯定很想知道你的邮件是否已被对方查看.下面的代码就能实现记录阅读你邮件的IP地址,还有实际的阅读日期和时间. error_reporting(0);Head ...
- 常用HTML5代码片段
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 实用Javascript代码片段
清除select下拉选项,添加并选择特点选项 $('#mySelect') .find('option') .remove() .end() .append('<option value=&qu ...
随机推荐
- ubuntu14.04换一个更快的源
mirrors.yun-idc.com,这个源可比ubuntu自带的源快多了,我的source.list文件内容如下: deb http://mirrors.yun-idc.com/ubuntu/ t ...
- SAP研究贴之--发票校验提示移动平均价为负
近日,应付岗密集出现发票校验时移动平均价为负值导致过账失败的情况,采购经理又是拍桌子.又是摔杯子的.财务经理安排任务彻底清查,找出问题原因.哎,毫无头绪啊...测试机模拟业务吧流程:合同(系统外)-采 ...
- 使用连接来代替in和not in(使用外连接技巧)
比如:表A里面的一个字段叫做MOBILE 里面存的记录如下 : 123456781 表B里面的一个字段也叫做MOBILE里面存的记录如下 12341910 (1)我们要查询一下A和B里面都有的,以 ...
- Javascript 弱类型:除法结果是小数
由于javascript是弱类型,只有一种var类型,所以在运算时不会自动强制转换,所以计算的结果是多少就是多少,但java中的17/10的结果就是1(强类型与弱类型)比如:console.log(M ...
- c++ char * const p问题
事实上这个概念谁都有,只是三种声明方式非常相似很容易记混. Bjarne在他的The C++ Programming Language里面给出过一个助记的方法: 把一个声明从右向左读. char * ...
- Android控件之RadioGroup与RadioButton(单选控件)
一.RadioGroup与RadioButton 1.什么是RadioGroup: RadioButton的一个集合,提供多选机制 2.什么是RadioButton: RadioButton包裹在Ra ...
- SqlServer_Sql防止注入
注入式攻击的详细解释SQL下面我们将以一个简单的用户登陆为例,结合代码详细解释一下SQL注入式攻击,与及他的防范措施.对于一个简单的用户登陆可能的代码如下:try{ string strUserNam ...
- 删除github账号的方法
如果你不想使用自己的github账号了,github官网允许你删除账号,具体操作步骤为: 1.登录github网站,网站右上角的头像,在下拉菜单中选择"Settings"(设置): ...
- phalcon: Windows 下 Phalcon dev-tools 配置 和 Phpstorm中配置Phalcon 代码提示, phalcon tools的使用
准备: phalcon-devtools包 下载地址: https://github.com/phalcon/phalcon-devtools 解压到wampserver的www目录 (xampp 用 ...
- 双心ping GUI工具1.0
双心ping GUI工具1.0该软件利用WindowsAPI提供了图形界面的ping程序,同时还可以调用DOS下的ping命令.ping成功后自动加入网址列表框及同目录下的列表文件Pinglist.i ...