HTML5的新变化

来源：cnblogs　　作者：阿飘飘　　时间：2019/8/7 8:47:29　　对本文有异议

1、新的html5文件类型，仅需申明在html的第一行，即 <!DOCTYPE html>

2、图形元素 figure ，将<figure>与<figcaption>相结合，使图片标题与图片相搭配

1 <figure>
2    <img src="img/2.jpg">
3     <figcaption>
4         <p>尝试一下</p>
5     </figcaption>
6 </figure>

3、不需要为链接和脚本标签添加类型的属性

<script src=”script.js”></script>

4、h5中不需要用引号将属性包裹起来

<p class=one></p>

5、使得内容可编辑。"contenteditable"，它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。

6、增加电子邮件的输入类型

<input id=”email” name=”email” type=”email” />

注意：opera只有在指定了name属性的前提下，才可以使用

7、占位符 paceholder=' '

<input name=”email” type=”email” placeholder=”xingyuyu27@163.com” />

8、本地储存 local storage

9、语义性header和footer

在书写代码时可以使用<header>和<footer>标签

注意：使用IE浏览器时，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：

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”);

11、群组标题（hgroup）

将标题之间的关系更好的表达出来，不影响文章整体纲要

    <hgroup>
        <h1>标题</h1>
         <h2>副标题</h2>
    </hgroup>

12、必要（require）属性

两种不同方式来声明这个属性：
<input type=”text” name=”someInput” required>
或者，更严谨：
<input type=”text” name=”someInput” required=”required”>

13、自动对焦（autofocus）属性

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

14、音频支持 <audio>

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

注意：Mozilla和Webkit都还没有完全支持。Firefox支持 .ogg文件，Webkit浏览器只支持最常见的.mp3扩展名。这意味着说，至少目前为止，你应该创建两个版本的音频。当Safari加载页面时，它认不出.ogg格式的文件，将会跳过并移到mp3版本上。请注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。

15、视频支持<video>

Safari和IE9可以支持H.264 格式的视频，Firefox 和Opera却仍然坚持Theora 和Vorbis格式。因此，显示HTML5视频的时候，你必须提供两种格式。

16、视频预加载

设置 preload=”preload”来预先加载视频，或者之间添加preload

17、正则表达式规定新模式的属性 pattern=”[A-Za-z]{4,10}”

18、检测浏览器的属性支持

两种方法：a、使用Modernizr（这是一个Javascript库）检测；

b、创建并剖析这些元素来看看浏览器都有什么能力。

例如，在前面的例子里，如果我们要确定浏览器是否能够执行pattern属性，就可以在页面上添加JavaScript:

alert( ’pattern’ in document.createElement(‘input’) ) // boolean;

19、Mark元素

<mark> 元素的主要功能就是在页面中高亮显示那些需要在视觉上向用户突出其重要性的文字。包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。