十个实用HTML5简单功能

发表于2015-05-01 12:27:54| --次阅读| 来源webkfa| 作者小猪仔

摘要：十个实用HTML5简单功能

HTML5是WEB技术发展的重要的里程碑，对于前端开发来说，如果能够找到一些未来大家开发中可能需要经常重复使用的代码的话，相信大家一定不会拒绝，下面是我们精心收集的10多个HTML5代码片段，相信大家一定喜欢！

HTML5的最简单模板

适配移动所有手机

			html5代码
		

运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="title" content="" />
<meta name="keywords" content="" /> 
<meta name="description" content="" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>
<title>酷我音乐</title>
</head>
<body>
html5主体内容
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="title" content="" />
<meta name="keywords" content="" /> 
<meta name="description" content="" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>
<title>酷我音乐</title>
</head>
<body>
html5主体内容
</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">

<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>

<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&amp;
image=__POSTER__.JPG&amp;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>

<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&amp;
image=__POSTER__.JPG&amp;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>

<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代码或者类库啦！

			html代码
		

运行代码

<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>

<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>

<style>*{position:relative}</style><table><input></table>