html5新特性（一）

今天就和一起学习前端的朋友探讨一下html5的新特性。

1.  新的文档类型<!DOCTYPEhtml>

2. 语义Header和Footer

在以前需要这么声明：

<divid="header"></div>

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

     现在只需要这么声明：

<header></header>

<footer></footer>

注：html5语义化作用？

1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3.audio标签

<audio controls="controls">

    <sourcesrc="img/1.mp3"/>

</audio>

<audioautoplay="autoplay"src="img/2.mp3">

</audio>

两种不同的写法

Vedio

<videocontrols="controls"preload>

<sourcesrc="../path.ogv"type="video/ogg; codecs='vorbis,theora'"/>

<sourcesrc="../path.mp4"type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'"/>

</video>

支持两种不同的格式

4.正则表达式

<form method="post">

<labelfor="username">输入一个你喜欢的用户名：</label>

    <inputtype="text"

    name="username"

    id="username"

    placeholder="6-10个英文"

    pattern="[A-Z|a-z]{6,10}"

    autofocus

    required>

<buttontype="submit">提交</button>

</form>

在表单中文本框类型里添加pattern属性，后面就是跟的正则表达式，利用正则表达式可以完成许多验证，不熟悉正则表达式写法的朋友可以看一下我的关于正则表达式的文章。

5.必要属性：required

<formmethod="post">

<labelfor="someInput">姓名: </label>

<inputtype="text"id="someInput"name="someInput"placeholder="Douglas Quaid" required>

<buttontype="submit">提交</button>

</form>

当文本框当中没有输入任何值得时候点击提交，文本框会改变颜色提示必须输入值。

6.自动获得焦点autofocus

<inputtype="text"name="input"  autofocus>

当网页加载之后，自动定位到文本框的输入

7.  脚本和链接无需指定type

比如<link rel="stylesheet"  href="../css"  />

<scriptsrc="../script.js"></script>

8.图像元素：将图片与注释结合

figure>

<imgsrc="img/xiaotubiao2.jpg" alt="image" />

<figcaption>

  <p>这是一张小图标</p>

</figcaption>

</figure>