html5+新标签

● html5发展史
○ 超文本标记语言（HTML）的第五次重大修改。
○ HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
○ HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
○ 2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
○ 2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
○ 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
● html5支持的浏览器

○ 不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准，不同的浏览器解析时不一样的，现在还处于一个推广的阶段，但是大部分的时一样的
● html5的特点
○ 更简单
○ 标签的语义化

 

○ 语法更宽松
○ 多设备跨平台
○ 自适应网页设计
● html5新增标签
○ <section></section> 表示内容区块,一般入章节、页眉、页脚或者页面中的其他部分。可以与h1-h6等元素结合起来使用，标示文档的结构 <section></section>
○ <article></article>表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章
○ <aside></aside>表示acticle元素的内容之外的，与article元素的内容相关的辅助信息。
○ <header></header>表示页面中一个内容区块或者整个页面的标题
○ <footer></footer>表示整个页面或者页面中的一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者联系信息。
○ <nav></nav>表示页面中导航链接的部分
○ <figure></figure>表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
■ <figure></figure> 是一种元素的组合，带有可选 标题。用来表示网页上一块独立的内容。
■ <figcaption></figcaption> 表示 figure 的标题。从属于 figure ， 并且， figure 中只能放置一个 figcaption
○ <video></video>定义视频，比如电影片段或其他视频流
■ autoplay果出现该属性，则视频在就绪后马上播放。
■ controls如果出现该属性，则向用户显示控件，比如播放按钮。
■ loop如果出现该属性，则每当音频结束时重新开始播放。
■ muted规定视频输出应该被静音。
■ preload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
■ src要播放的音频的 URL。
■ poster:url;规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
■ 一共支持三种格式： Ogg、MPEG4、WebM。
○ <audio></audio>定义音频，比如音乐或其他音频流
■ autoplay如果出现该属性，则音频在就绪后马上播放。
■ controls如果出现该属性，则向用户显示控件，比如播放按钮。
■ loop如果出现该属性，则每当音频结束时重新开始播放。
■ muted规定视频输出应该被静音。
■ preload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
■ src要播放的音频的 URL。
■ 这个标签支持3中格式，分别是wav、mp3、ogg格式，都是音频格式，
而且在不同的浏览器中还有不同的兼容性。下面是主流的几个浏览器对它的支持性：

○ <mark></mark>高亮显示文字，一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
○ <canvas id=“myCanvas” width=“200” height=“200”></canvas>表示图形，比如图标和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端js，以使脚本能够把想绘制的东西绘制到这块画布上
○ 新增表单元素
■ url：专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允许提交。例：
<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>
■ Number：专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性。 例： <input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />
■ range：是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。例： <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />
■ date - 选取日、月、年
■ month - 选取月、年
■ week - 选取周和年
■ time - 选取时间（小时和分钟）
■ datetime - 选取时间、日、月、年（UTC 时间暂不支持）
■ datetime-local - 选取时间、日、月、年（本地时间暂不支持）
■ Search：输入的是搜索的关键字，与type=“text” 基本上一样。
■ Color：用来选取颜色。
■ datalist提供一个事先定义好的列表，通过id与input的list关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。子元素为<option/>
■ <output for="a b"></output>表示不同类型的输出，比如脚本的输出、注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加form属性。<output for="a b"></output>表示不同类型的输出，比如脚本的输出、注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加form属性。
● <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<p><b>注释：</b>Internet Explorer 不支持 <output> 标签。</p>
■ email：专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。注：但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。
○ html表单新增属性
■ min 最小值 ， max 最大值 ，step 数字间隔
■ required 可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
■ pattern将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。例：^[0-9]*$
■ placeholder属性：文本框处于未输入状态时文本框中显示的输入提示。
■ autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。
■ form 属性规定输入域所属的一个或多个表单，：form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：
■ novalidate属性，取消验证，即使form表单中的input添加了required，也将不进行验证
■ multiple属性规定输入域中可选择多个值。
对新元素样式的使用：
注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果， 等，这些都不可以实现。
扩展
cursor:auto默认/crosshair加号/text文本/wait等待/help帮助/progress过程/inherit继承/move移动/ne-resize向上或向右移动/pointer手形