HTML5新标签

HTML5新标签

1.HTML5特点

增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。

2.布局标签（语义化）

2.1 <header> 页面头部

<header>标签定义文档的页眉，通常是一些引导和导航信息。通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识、搜索表单、<nav>导航等。

<header> 标签不能被放在 <footer>、<address>或者另一个 <header>元素内部，但它不局限于写在网页头部，也可以写在网页内容里面。

2.2 <nav> 导航栏

作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分。在语义化方面更加精确，同时对于屏幕阅读器等设备支持更好（简而言之，就是导航栏）

2.3 <main> 主体内容

在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header>或 <nav>。

2.4 <section> 区块

<section> 标签定义了文档的节。比如章节、头部、底部或者文档的其他区域，它表示一段专题性的内容，通常由内容及其标题组成。区块

2.5 <article> 文章或章节

比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

 

2.6 <aside> 侧边栏

用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。（广告，文章的链接，作者的简介）

2.7 <footer> 页面尾部

眉脚一般会包含作者姓名、文档版权信息、使用条款链接、联系信息等. （可多个）

2.8 <hgroup> 标题

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

2.9 <figure> <figcaption> 描述图片

<figure>用于对元素进行组合。一般用于图片，文字组合。

<figcaption>是 figure的子元素，用于对figure的内容进行说明

2.10语义化标签兼容IE8-6

1.可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题。 

<!--[if lt IE 9]-->

<script src="路径 /html5.js"></script>

<!--[endif]-->

2.HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

<style>

    article, aside, canvas, details, figcaption, figure,main,

     footer, header, hgroup, menu, nav, section, summary{ display: block;}

</style>

插件下载地址：http://www.bootcdn.cn/html5shiv/

 

2.其他标签（了解）

2.1 <time> 用来表现时间或日期

属性：datetime

 

2.2 <datalist> 可输入的下拉列表

与<input>配合,实现类似于拥有输入功能的下拉列表。<input>元素的 list 属性来绑定 <datalist>元素的id。

 

2.3 <details> 用于描述文档细节

 <summary>可以为<details>定义标题。标题可见，用户点击标题时，会显示出details中的内容。任何形式的内容都能被放在 <details>标签里边。

open属性,规定 details中内容是否默认可见。<details open="open"> 

 

2.4 <progress>定义进度条

 

2.5<meter> 度量尺

 

浏览器显示：

 

2.6<ruby>标记定义 注释或音标

 

3.表单新增输入类型

3.1 color  颜色选择器

拾色器：<input type="color" /><br />

3.2 email 邮箱

输入类型用于应该包含电邮地址的输入字段。当提交表单时，会自动地对 email 字段的值进行验证。（正则）

 邮箱：<input type="email"/><br />

3.3 number 只能包含数字的输入框

 

去掉number类型的上下箭头。

数字：<input type="number" /><br />

3.4 tel 电话号码（移动端会弹出数字键盘）

电话：<input type="tel" /><br />

3.5 url  网页（对输入字段进行验证）

网址：<input type="url" /><br />

3.6 search 搜索

搜索：<input type="search"  results="n"/><br />    配合results="n"属性

 

3.7 range（一个范围内的值）

特定范围内的数值选择器，min、max、step(步数 )、value

范围：<input type="range" min="0" max="20" value="5" step="5"/><br />

3.8 date、month、week  显示日期

date日期

<input type="date" />

month 月份

<input type="month" />

10.week 周

<input type="week" />

3.9 time时间

<input type="time" />

 

 

 

4.表单新增属性

4.1 placeholder 占位符

 

4.2 autofocus 自动获取焦点（页面刷新时自动跳转到该输入框中）

 

 

4.3 multiple 文件上传多选或多个邮箱地址  

<!-- file :文件选择表单控件-->

<inputtype="file"name="photo"multiple/>

 

4.4 required 验证条件，必填项

<inputtype="text"name="phone"required >

//表示这个input不能为空