HTML5的最简单模板

HTML5的最简单模板

如果你需要开始一个新的HTML5项目的话,大家肯定会需要一个最简单的模板,这里是一个非常简单并且清晰的HTML5模板,相信大家会喜欢!

 
  
  1. charset="utf-8">
  2. </span><span class="pln">Untitled</span><span class="tag">
  3. web的主要内容

表单获取Google地图

这里有一段非常简单的代码,通过用户输入地点,获取google地图地点,非常适合生成联系人表单

 
  
  1. action="http://maps.google.com/maps" method="get" target="_blank">
  2. for="saddr">输入地点
  3. type="text" name="saddr" />
  4. type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
  5. type="submit" value="Get directions" />

Base64编码的1x1大小的空白GIF文件

个人不推荐使用这个透明的空白gif,但是即使在2013年,很多人仍旧使用。可能你也喜欢使用这种方式。

 
  
  1. src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

正则表单式验证电子邮件

HTML5中允许使用正则表单式来做输入验证:

 
  
  1. type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

正确的嵌入flash

如果你经常需要在网页中插入flash的话,这段代码你应该用的上:

 
  
  1. type="application/x-shockwave-flash"
  2. data="your-flash-file.swf"
  3. width="0" height="0">
  4. name="movie" value="your-flash-file.swf" />
  5. name="quality" value="high"/>

视频并且支持flash的fallback

另外一个HTML5中最有用的特性是video标签,允许你很方便的嵌入video文件。但是很多老版本的浏览器不支持,所以下面这段代码将会非常有用

 
  
  1. width="640" height="360" controls>
  2. src="__VIDEO__.MP4" type="video/mp4" />
  3. src="__VIDEO__.OGV" type="video/ogg" />
  4. width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
  5. name="movie" value="__FLASH__.SWF" />
  6. name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
  7. src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
  8. title="No video playback capabilities, please download the video below" />

iPhone call & sms links

iphone中苹果介绍了一个非常方便的方式来创建电话和短信链接。代码如下:

 
  
  1. href="tel:1-408-555-5555">1-408-555-5555
  2. href="sms:1-408-555-1212">New SMS Message

HTML5的数据自动补齐功能

使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦!

 
  
  1. name="frameworks" list="frameworks" />
  2.  
  3. id="frameworks">
  4. value="MooTools">
  5. value="Moobile">
  6. value="Dojo Toolkit">
  7. value="jQuery">
  8. value="YUI">

可直接下载文件

 
  
  1. href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report

Crash老版本浏览器IE6

要知道IE6在国内使用量可不小,如果在你的web应用或者网站中不支持IE6的话,加上这段代码吧,相信你的用户都会升级IE6滴,嘿嘿!

 
  

你可能感兴趣的:(HTML5)