1. New Doctype  你还在使用令人讨厌的难记的XHTML文档类型声明吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
如果还在用，为什么呢？如同Douglas Quaid所说，转到新的HTML5这种文档类型吧，它会使你看起来更年轻。实际上，你当真知道XHTML的文档类型声明在HTML5中不再是必须的吗？然而现在在用并且旧的浏览器也需要这样一种特殊的声明。在标准模式下，不能识别这种文档类型声明的浏览器将简单地翻译里面包含的标签。所以，不用担心，去感受将忧虑抛入空气中的轻松吧，去热情拥抱HTML5的新文档类型声明吧。

2.考虑一下下面为一张图片所使用的标签：
<img src="path/to/image" alt="About image" />  
<p>Image of Mars. </p>  
非常不幸的是在包含图片元素自身的一段标记中没有任何简单或者有含义的方法去结合图片与它的说明文字。 HTML5采用了<figure>标签修正了这个问题。现在标签中包含了<figcaption>元素，我们就能够将图片和相关说明文字结合在一起。
  <figure>  
    <img src="path/to/image" alt="About image" />  
    <figcaption>  
        <p>This is an image of something interesting. </p>  
    </figcaption>  
</figure>

3、<small>的重定义
不久以前，我使用<small>元素去建立与logo紧密相关的小标题。它是一个有用的直观表现元素。然而，现在这种用法显得不恰当。<small>元素已经被重定义了，更加适合去表现小字体。想象一下你的网页页脚的版权声明，根据新的HTML5对这个元素的定义，<small>标签更适合做这样的事情。Small元素现在指的是”small print”。

4、Scripts 和 Links 不再用Types属性
你可能仍然向你的link和script标签中添加type属性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> 
<script type="text/javascript" src="path/to/script.js"></script>
现在不必了。这就意味着这两个标签分别指的就是样式表和脚本。如此，我们能够一起去掉他们中的type属性。
<link rel="stylesheet" href="path/to/stylesheet.css" />  
<script src="path/to/script.js"></script>

5、用不用引号
用不用引号成了一个问题，请记住，HTML5不是XHTML。如果你不愿意，可以不必用引号把属性值包装起来。你不必去闭合你的元素。如果你觉得舒服，这种做法没有任何错误。我觉得我自己赞同这样做。
<p class="myClass" id=someId> Start the reactor.  
在这一问题上，仁者见仁智者见智。无论如何，如果你喜欢一种更结构化的文档，那么就坚持用引号。

6、使你的内容可以编辑
新的浏览器拥有一个可以应用于元素中的漂亮的新属性，这就是contenteditable。就像名字所表示的，它允许用户去改变元素中包含的任何文字，包括它的子对象。这个属性的用途很多，包括简单的to-do list应用。
<!DOCTYPE html> 
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>untitled</title>  
</head>  
<body>  
    <h2> To-Do List </h2>  
     <ul contenteditable="true">  
        <li> Break mechanical cab driver. </li>  
        <li> Drive to abandoned factory   
        <li> Watch video of self </li>  
     </ul>  
</body> 
</html>  
下面是把引号去掉的代码写法<ul contenteditable=true>

7、邮件地址的输入
有这样一件事情：我们使用一个“email”类型去格式化输入，就能够告诉浏览器只允许有效邮件地址结构的字符输入。HTML5能做到吗？是的，内置的格式验证器马上实现了。当然，我们不能百分百的依赖于此，原因很明显，在还不能解析email类型的旧浏览器中，他们将被简单地当成普通文本框。现在，我们不能依靠浏览器进行校验，仍然要用服务器/客户端模式解决这个问题。应该指出的是，现在所有的浏览器在对于他们是否支持某种元素和属性的时候都不是十分确定。举个例子，Opera似乎支持邮件地址验证，仅仅需要指定name属性。然而，它不支持我们将在下一条提到的placeholder属性。

8、占位符
以前，我们必须使用JavaScript来为文字框建立占位符。当然，你可以初始化时给value属性赋值。但是，一旦用户删除占位的文字，这个输入框就重新为空了。placeholder属性弥补了这个问题。
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />  
现在不是所有浏览器版本都支持这个元素，但是它们一直在通过发行新版来提供支持，像Firefox和Opera现在不支持placeholder属性，但是这样用也没有危害。

9、本地存储
感谢本地存储功能（不是HTML5官方发布的，为了方便而加入的），我们能够使浏览器“记住”我们的类型，即使浏览器被关闭或刷新。

10、带语义的Header和Footer
以前我们用<div id=”header”></div> ,即使被确定了id，divs也没有语义。现在，HTML5中我们有了<header>和<footer>这两个元素。上面的标签可以被替换成：<header></header>
在项目中有多个header和footer是非常普遍的。要注意不要将这两个元素与网站的“header”和“footer”混淆了。它们仅代表它们的容器。

11、更多的HTML5格式化特性
通过这个视频，我们能够了解更多有用的HTML5格式化特性：Subscribe to our YouTube page to watch all of the video tutorials!

12、IE浏览器与HTML5
不幸的是，为了解析新的HTML5元素，那个可恶的IE浏览器还有点麻烦。
为了确保新的HTMl5元素能够正确的以块级元素显示，现阶段必须使用下面的代码：
header, footer, article, section, nav, menu, hgroup {  
   display: block;  
} 
header, footer, article, section, nav, menu, hgroup {
   display: block;
}
由于IE不知道这些元素，因此仍然会忽略这些格式，所以需要使用下面的代码解决这个问题：
document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu"); 
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
为了在开发的时候减少工作量，Remy Sharp建立了一个脚本文件，你可以使用下面的代码：
<!--[if IE]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

13. hgroup
想象一下网站的标题，网站名称后面紧跟着一个副标题，我们分别用一个<h1>和<h2>标签来标记。在HTML4中还没有一种简单的方法去描述两者之间的语义关系。另外，当使用h2在页面中显示其它标题时，在层级方面问题就更多。而使用群组标题hgroup元素，我们可以将这些标题聚集在一起，而不影响文档的整个纲要。
<header> 
    <hgroup> 
        <h1> Recall Fan Page </h1> 
        <h2> Only for people who want the memory of a lifetime. </h2> 
    </hgroup> 
</header>

14、必填属性
表单新加入一个属性，就是require必填属性。根据你的编码风格，你可以用下面两种方法中的任何一个来声明这个属性：
<input type=”text” name=”someInput” required>
或者用一个更结构化的：
<input type="text" name="someInput" required="required"> 
使用上面的代码，并且浏览器支持这个属性的话，如果这个输入框为空则不能提交。这儿有个简单的例子，我们也添加了placeholder这个属性，因为这两个属性配合起来用时经常的事情。如果输入框为空白，并且表单被提交了，这个文字框就高亮显示。

15、自动获取焦点属性
前面已经提到，HTML5新增了很多元素，以前用javas实现的功能现在用元素就可以简单实现。在这里，我们可以使用autofocus属性使输入字段自动获得焦点。
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> 
可以在代码中仅仅使用autofocus来标明本属性，也可以使用autofocus=autofocus的形式。

16、声音支持
我们不再一定要依赖第三方插件才能使用声音。HTML5现在提供<audio>元素。再也不用担心那些插件了。现如今，只有最新的浏览器才提供对HTML5声音的支持。所以，在使用的时候采取恰当的兼容措施很有必要。
<audio autoplay="autoplay" controls="controls"> 
    <source src="file.ogg" /> 
    <source src="file.mp3" /> 
    <A href="http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/file.mp3">Download this file.</A> 
</audio>
对于音频格式，Mozilla 和 Webkit还没有什么进展。Firefox将关注.ogg类型的音频，而Webkit将仅对普通mp3格式进行扩展。这就意味着，最起码现在你应该使用两个版本的音频格式才能兼顾各种浏览器。Safari在加载页面时无法识别.ogg类型的音频，会自动跳转到mp3类型。但是要注意IE不支持这种操作，Opera10或更低版本仅支持.WAV格式的文件。

17、视频支持
就像<audio>元素，新浏览器也已经支持HTML5视频了。事实上，YouTube刚刚宣布他们为支持HTML5的浏览器做了新的 HTML5技术的视频。不幸的是，HTML标准没有规定特定的视频编码，这就需要浏览器去决定是哪种格式了。Safari和Internet Explorer 9会支持H.264格式的视频（Flash播放器也能够播放），Firefox 和Opera坚持用开源的Theora 和 Vorbis格式。所以，在播放HTML5视频时，你必须提供这两种格式的codecs。
<video controls preload> 
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> 
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> 
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> 
</video> 
Chrome能够正确播放“ogg”和“mp4”格式编码的视频。这儿有几项需要注意的事情。从技术上即讲，没有要求我们指定type属性，但是，如果不指定的话，浏览器会自己去确定。就节省点带宽，自己去声明吧。不是所有的浏览器支持HTML5视频。为此我们可以提供一个下载链接，或者额外嵌入一个flash版本的视频，这都无所谓，看你怎么做了。

18、视频预加载
Preload属性就像你猜的那样。你首先应该决定什么时候需要浏览器预加载视频。预加载是很有必要的，如果访问者读取一个专门为播放视频而做的页面，你肯定会预加载视频而为访问者节省等待时间。通过设定preload=”preload”或者一个简单的preload就可以使视频被预加载。我比较喜欢后面的解决方案，因为它更精简。
<video preload> 
<video preload>
<video preload controls>

19、播放控制
如果你的工作与这些技术密切相关，你可能已经知道了。如果你用上面的代码，视频显示的仅是像一幅图片一样，没有任何控制而言。为了能够解析播放控制功能，我们必须在video元素中指定controls属性。
<video preload controls>
请注意的是每个浏览器对自己的播放器解析法都不同。（译者：提醒我们多测试几个浏览器啊）

二十八个 HTML5 特性与技巧的更多相关文章

  1. 《手把手教你》系列技巧篇（二十八）-java+ selenium自动化测试-处理模态对话框弹窗（详解教程）

    1.简介 在前边的文章中窗口句柄切换宏哥介绍了switchTo方法,这篇继续介绍switchTo中关于处理alert弹窗的问题.很多时候,我们进入一个网站,就会弹窗一个alert框,有些我们直接关闭, ...

  2. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  3. mysql进阶(二十八)MySQL GRANT REVOKE用法

    mysql进阶(二十八)MySQL GRANT REVOKE用法   MySQL的权限系统围绕着两个概念: 认证->确定用户是否允许连接数据库服务器: 授权->确定用户是否拥有足够的权限执 ...

  4. FreeSql （二十八）事务

    FreeSql实现了四种数据库事务的使用方法,脏读等事务相关方法暂时未提供.主要原因系这些方法各大数据库.甚至引擎的事务级别五花八门较难统一. 事务用于处理数据的一致性,处于同一个事务中的操作是一个U ...

  5. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  6. Citrix 服务器虚拟化之二十八 XenApp6.5发布文档内容

    Citrix 服务器虚拟化之二十八  XenApp 6.5发布文档内容 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1)  服务器桌面:发布场中服务器的整个 ...

  7. WCF技术剖析之二十八：自己动手获取元数据[附源代码下载]

    原文:WCF技术剖析之二十八:自己动手获取元数据[附源代码下载] 元数据的发布方式决定了元数据的获取行为,WCF服务元数据架构体系通过ServiceMetadataBehavior实现了基于WS-ME ...

  8. VMware vSphere 服务器虚拟化之二十八 桌面虚拟化之安装View传输服务器

    VMware vSphere 服务器虚拟化之二十八 桌面虚拟化之安装View传输服务器 View 传输服务器用于管理和简化数据中心与在最终用户本地系统上检出使用的 View 桌面之间的数据传输.必须安 ...

  9. Bootstrap入门（二十八）JS插件5：工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

随机推荐

  1. Eclipse引用Library失败的问题

    整个导入流程严格按照guide的内容操作,但是始终无法导入,设置导入后项目中不出现相关的Library project.在设置完library之后重新打开始始终显示关联错误,就是reference那里 ...

  2. HDU 1506 Largest Rectangle in a Histogram

    这个问题姑且也叫做最大子矩阵吧 给一个树状图,求一个最大面积的子矩阵 思路是这样的,对于每个单位矩阵,求出左边连续不比它低的矩阵的下标,放在l数组里 同样,再求出右边连续的不比它低的矩阵的下标 这样, ...

  3. Mysql自定义函数之------------This function has none of DETERMINISTIC, NO SQL解决办法

    This function has none of DETERMINISTIC, NO SQL解决办法 创建存储过程时 出错信息: ERROR 1418 (HY000): This function ...

  4. hibernate不关闭session后果

    (转自:百度知道) 看是怎么获得session的. 方法1: 通过配置监听器后,在Dao中用getCurrentSession获取(内部原理....),此时无需管理session的关闭与否: 方法2: ...

  5. （六）6.12 Neurons Networks from self-taught learning to deep network

    self-taught learning 在特征提取方面完全是用的无监督的方法,对于有标记的数据,可以结合有监督学习来对上述方法得到的参数进行微调,从而得到一个更加准确的参数a. 在self-taug ...

  6. 【自动化测试】PO思路

    http://blog.csdn.net/liubofengpython/article/details/7720078

  7. T-SQL备忘(2)：聚合函数运算和NULL

    我们看表的数据: 而select AVG(Age) from Member1的结果为27.自己算一下就知道136/6 =22.666.而不是27,因此知道实际上Age为NULL的行没有参与运算.即: ...

  8. 中小型数据库 RMAN CATALOG 备份恢复方案(二)

    中小型数据库呈现的是数据库并发少,数据库容量小,版本功能受限以及N多单实例等特点.尽管如此,数据库的损失程度也会存在零丢失的情形.企业不愿意花太多的钱又要保证数据库的可靠稳定,可是苦煞了我这些搞DB的 ...

  9. JBPM4入门——6.流程实例的创建和执行

    本博文只是简要对JBPM4进行介绍,如需更详细内容请自行google 链接: JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流 ...

  10. tilecache2.11在windows apache2.22安装部署

    tilecache2.11在windows apache2.22安装部署 蔡建良 2013-09-03 一．安装环境 操作系统: Windows7 32位 Apache2.22 Python2.5 m ...