Html5新增标签

1.新增语义化标签

（1）

<header></header> 页眉 主要用于页面的头部的信息介绍，也可用于板块头部<hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题，或者标语的组合<hgroup>    <h1>妙味课堂</h1>    <h2>带您进入富有人情味的IT培训</h2></hgroup>

（2）

<nav></nav> 导航 （包含链接的的一个列表）<nav>    <p><a href=“#”>妙味课堂</a></p>    <p><a href=“#”>妙味课堂</a></p></nav>

（3）可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

<footer></footer>页脚  页面的底部 或者 版块底部<section> <section> 页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节<article></ article > 用来在页面中表示一套结构完整且独立的内容部分<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分aside 的内容应该与 article 的内容相关。被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

（4）

<figure> < figure > 用于对元素进行组合。一般用于图片或视频<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明<figure>    <img src=“miaov.png”/>(注意没有alt)    <figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption></figure>

（5）

<time></time>用来表现时间或日期<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数<p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>

（6）

<datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。<input type="text" list="valList" /> <datalist id="valList">     <option value="javascript">javascript</option>     <option value="html">html</option>     <option value="css">css</option> </datalist>

（7）

<details></details>用于描述文档或文档某个部分的细节该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容 Open 属性默认展开< summary></summary> details 元素的标题    <details>        <summary>妙味课堂</summary>        <p>国内将知名的IT培训机构</p>    </details>

（8）

<dialog></dialog>定义一段对话<dialog open>//open属性写上能显示出来  <dt>老师</dt>  <dd>2+2 等于？</dd>  <dt>学生</dt>  <dd>4</dd>  <dt>老师</dt>  <dd>答对了！</dd></dialog>

（9）

<keygen>给表单添加一个公钥，对前端鸡肋<form action="http://www.baidu.com" method="get">用户: <input type="text" name="usr_name" />公钥: <keygen name="security" /><input type="submit" /></form>

（10）

<address></address> 定义文章 或页面作者的详细联系信息<mark></mark> 需要标记的词或句子<progress><progress>定义进度条<progress max="100" value="76">      <span>76</span>%</progress>

2.IE下的兼容
（方法一）针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下：

标签：    在页面的头部加下：    <script>            document.createElement(“header”);            document.createElement(“nav”);            document.createElement(“footer”);    ……    </script>样式：HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里 要对这些标签定义一下，display=block

（方法二）可以导入一个插件，直接解决问题html5shiv.js

3.Form表单新增
（1）输入型控件

email  :  电子邮箱文本框，跟普通的没什么区别当输入不是邮箱的时候，验证通不过移动端的键盘会有变化tel   :   电话号码url   :   网页的URLsearch  :  搜索引擎chrome下输入文字后，会多出一个关闭的Xrange  :  特定范围内的数值选择器min、max、step( 步数 )number  :  只能包含数字的输入框color  :  颜色选择器datetime  :  显示完整日期datetime-local  :  显示完整日期，不含时区time  :  显示时间，不含时区date  :    显示日期week  :  显示周month  :  显示月

（2）表单特性和函数

placeholder  :  输入框提示信息例子 :  微博的密码框提示autocomplete  :  是否保存用户输入值默认为on，关闭提示选择offautofocus  :  指定表单获取输入焦点list和datalist  :  为输入框构造一个选择列表list值为datalist标签的idrequired  :  此项必填，不能为空   //前端代码可被修改，鸡肋Pattern : 正则验证  pattern=“\d{1,5}”Formaction 在submit里定义提交地址

（3）表单验证

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回falseoText.addEventListener("invalid",fn1,false);ev.preventDefault()valueMissing  :  输入值为空时返回truetypeMismatch :  控件值与预期类型不匹配返回truepatternMismatch  :  输入值不满足pattern正则返回truetooLong  :  超过maxLength最大限制rangeUnderflow : 验证的range最小值rangeOverflow：验证的range最大值stepMismatch: 验证range 的当前值 是否符合min、max及step的规则customError 不符合自定义验证返回truesetCustomValidity(); 自定义验证Invalid事件  :  验证反馈 input.addEventListener('invalid',fn,false)阻止默认验证：ev.preventDefault()formnovalidate属性  :  关闭验证