HTML5的一些新特性学习-优快云博客

HTML5带来了一些新的特性，总结如下：

1. 新的文档类型（New Doctype）

XHTML 1.0的声明方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5的声明方式：

<!DOCTYPE html>

2. 脚本和链接无需type （No more types for scripts and links）

在HTML4和XHTML中，需要用以下几行代码来添加js和css文件：

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css"/>
<script type="text/javascript" src="path/to/script.js"></script>

在HTML5中，不需要再指定类型属性，如下：

<link rel="stylesheet" href="path/to/stylesheet.css"/>
<script src="path/to/scripts.js"></script>

3. 语义化header和footer （The semantic header and footer）

在HTML4或XHTML中，可以用以下方式来声明header和footer域：

<div id="header">...</div>
......
<div id="footer"></div>

在HTML5中可以直接用语义化标签header和footer：

<header>...</header>
......
<footer></footer>

4. Hgroup引入

在HTML5中，新引入了hgroup元素，是用来对页面元素进行分组。如网站名下面紧跟一个子标题时，可以分别用h1和h2来定义，为了说明这两者之间的关系就可以用hgoup将者分为一组，这样当页面上还有其他标题时，不会影响页面的大纲：

<header>
<hgroup>
<h1>Recall Fan Page</h1>
<h2>Only for people who want the memory of a lifetime.</h2>
</hgroup>
</header>

5. 标记元素（Mark element）

Mark元素可以当作高亮标签，被这个标签修饰的字符串应当和用户当前的行动相关，比如，当我在某博客中搜索关键词“Test”时，可以利用JavaScript将出现的词组用<mark>修饰一下：

<h3>Search Results</h3>
<p>They were interrupted, just after Quato said,<mark>"Open your Mind"</mark>.</p>

6. 图形元素（Figure element）

在HTML4或XHTML中，下面的这些代码被用来修饰图片的注释：

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

7. 重新定义small元素（Small element redefined）

在HTML4或XHTML中，small元素已经存在，但是没有如何正确使用这一元素的完整说明，在HTML5中，smal被用来定义小字。如在网站底部的版权状态，根据对此元素新的HTML5定义，small可以正确地诠释这些信息。

8.占位符（placeholder）

在HTML4或XHTML中，你需要用JavaScript来给文本框架添加占位符，比如，可以提前设置好一些提示信息，当用户开始输入时，文本框中的文字就会消失；而在HTML5中，新的placeholder属性很好地解决了这个问题。

9. 必要属性require（Require attribute）

HTML5中的新属性require指定了某一输入是否是必需的，有两种方法声明这一属性：

<input type="text" name="someInput" required/>
<input type="text" name="someInput" required="required"/>

当文本框被指定必须时，空白就不能提交表单。如下是一个使用例子：

<form method="post" action="">
<label for="someInput">Your Name:</label>
<input type="text" id="someInput" name="someInput" placeholder="Your name, please" required/>
<button type="submit">Go</button>
</form>

上面的例子中，如果输入内容为空就不能提交表单，且输入框被高亮显示。

10. Autofocus属性（Autofocus attribute）

HTML5的解决方案消除了对JavaScript的需要，如果一个特定输入应该是选择或聚焦，默认情况下，可以使用自动聚焦属性，如下：

<input type="text" name="someInput" placeholder="something here" required autofocus/>

11. Audio支持（Audio support）

HTML4或XHTML中，我们还需要依靠第三方插件来渲染音频，在HTML5中，引入audio元素来渲染音频：

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg"/>
<source src="file.mp3"/>
<a href="file.mp3">Download this file.</a>
</audio>

这里需要注意的是，audio元素中要包含两种格式的音频，FireFox支持.ogg文件，Webkit浏览器需要.mp3格式的文件，且IE是不支持的，Opera10及以下版本只支持.wav格式。

12. Video支持（Video support）

HTML5中不仅有audio元素，还引入video元素，和audio类似，HTML5并没有指定视频解码器，留给了浏览器来决定。Safaro和IE9支持H.264格式，FireFox和Opera则坚持开源Theora和Vorbis格式，因此，指定HTML5的视频时，必须提供这两种格式：

<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg;codecs='vorbix, 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>

13. 视频预载（Preload attribute in video element）
当用户访问页面时，preload属性可以使得视频得以预载，直接在video元素属性性中加上preload，或是preload="preload"即可。

14. 显示控制条（Display controls）

为了使视频显示出控制条，而不仅仅是一张图片样式，必须在video元素属性内指定controls属性，同样可以直接加controls，或controls="controls"。

15. 正则表达式

在HTML4或XHTML中，需要用一些正则表达式来验证特定文本，而HTML5中的新特性pattern属性可以让我们能够在标签处直接插入一个正则表达式：

<form action="" method="post">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="4<>10" pattern="[A-Za-z]{4,10}" autofocus required/>
<button type="submit">Go</button>
</form>

这样在用户输入后，点击提交时就会对所输入的字符串进行验证，

16. Output元素

output元素是用来显示诸结果，和label一样也有一个for属性

17. Input元素增加了更多的type类型

新的tyoe类型有：email, url, number, range, Date pickers(date, month, week, time, datetime, datetime-local). search, color, telephone.

<input type="email" name="email"/>

在提交表单时会自动验证email的格式，opera浏览器中必须有name属性，否则不起作用。

<input type="url"/>

在提交表单时会自动验证url格式。

<input type="number" max="9" min="0" step="2"/>

可以限制输入的数字，stop为上一个数字与下一个数字的间隔。

<input type="range" min="1" max="10"/>

滑动条。通过选择性的对限制范围内的数值进行设置。

Date time可以将input设置为时间选择器。

<input id="search" type="url" list="searchlist" required />
<datalist id="searchlist">
                <option value="http://www.google.com" label="Google" />
                <option value="http://www.yahoo.com" label="Yahoo" />
                <option value="http://www.bing.com" label="Bing" />
</datalist>

上面的datalist相当于下拉列表。可以进行选择。