HTML5代码学习：值得初学者收藏的代码片段！

程序员文章站 2024-03-20 09:24:28

...

HTML5是WEB技术发展中的比较重要的里程碑，对于从事前端开发的大家来说以下这些代码是值得收藏的，可以反复使用的重要代码片段。

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>
               web的主要内容
               </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文件
对于喜欢的人来说这段代码有用，但是就我个人而言并不喜欢这段代码。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRA

正规表单式验证电子邮件
HTML5中允许使用正规表单式来做输入验证。

<input type="text" title="email" required pattern="[^@][email protected][^@]+\.[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>

视频支持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>

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的数据自动补齐功能实现的代码
使用datalist元素，在HTML5中是允许你使用一组数据来生成自动补齐功能，有了这段代码你无需再使用第三方的 js 代码或者类库了！

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

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

以上这些代码段对于HTML5的初学者可能比较实用，希望能够带给大家帮助吧。

HTML5代码学习：值得初学者收藏的代码片段！