本文介绍了HTML5中的一些新特性，包括新的文档类型、语义化的Header和Footer标签、多媒体支持（audio和video标签）、正则表达式用于表单验证、必填项属性required、自动聚焦autofocus等。
今天就和一起学习前端的朋友探讨一下html5的新特性。
1. 新的文档类型<!DOCTYPE html>
在以前需要这么声明：
<div id="header"></div>
<div id="footer"></div>
现在只需要这么声明：
<header></header>
<footer></footer>
注：html5语义化作用？
1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3.audio标签
<audio controls="controls">
<source src="img/1.mp3"/>
</audio>
<audio autoplay="autoplay" src="img/2.mp3">
</audio>
两种不同的写法
Vedio
<video controls="controls" preload>
<source src="../path.ogv" type="video/ogg; codecs='vorbis,theora'"/>
<source src="../path.mp4" type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'"/>
</video>
支持两种不同的格式
4.正则表达式
<form method="post">
<label for="username">输入一个你喜欢的用户名：</label>
<input type="text"
name="username"
id="username"
placeholder="6-10个英文"
pattern="[A-Z|a-z]{6,10}"
autofocus
required>
<button type="submit">提交</button>
</form>
在表单中文本框类型里添加pattern属性，后面就是跟的正则表达式，利用正则表达式可以完成许多验证，不熟悉正则表达式写法的朋友可以看一下我的关于正则表达式的文章。
<form method="post">
<label for="someInput">姓名: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">提交</button>
</form>
当文本框当中没有输入任何值得时候点击提交，文本框会改变颜色提示必须输入值。
<input type="text" name="input" autofocus>
当网页加载之后，自动定位到文本框的输入
比如<link rel="stylesheet" href="../css" />
<script src="../script.js"></script>
figure>
<img src="img/xiaotubiao2.jpg" alt="image" />
<figcaption>
<p>这是一张小图标</p>
</figcaption>
</figure>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
