语义化标签:
<header></header> 页眉
<hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题,或者标语的组合
<nav></nav> 导航 (包含链接的的一个列表)
<footer></footer>页脚 页面的底部 或者 版块底部
<section> <section> 页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分,可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等。<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。
aside 的内容应该与 article 的内容相关。被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明 <figure> <img src=“miaov.png”/>(注意没有alt) <figcaption>photo and copy</figcaption> </figure><time></time>用来表现时间或日期
<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数<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><details></details>用于描述文档或文档某个部分的细节
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容Open 属性默认展开< summary></summary> details 元素的标题 <details> <summary>标题</summary> <p>内容细节</p> </details><dialog></dialog>定义一段对话
<dialog> <dt>老师</dt> <dd>2+2 等于?</dd> <dt>学生</dt> <dd>4</dd> <dt>老师</dt> <dd>答对了!</dd></dialog><address></address> 定义文章 或页面作者的详细联系信息
<mark></mark> 需要标记的词或句子<keygen>给表单添加一个公钥<form action="http://www.baidu.com" method="get"> 用户: <input type="text" name="usr_name" /> 公钥: <keygen name="security" /> <input type="submit" /></form><progress><progress>定义进度条
<progress max="100" value="76"> <span>76</span>%</progress>IE下的兼容
标签针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下: 在页面的头部加下: <script> document.createElement(“header”); document.createElement(“nav”); document.createElement(“footer”); …… </script>以上的元素都是块元素(除了<figcaption>).
为了让这些块及元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):
HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里 要对这些标签定义一下 它默认的display
IE8 及更早IE版本无法在这些元素中渲染CSS效果,以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
解决办法:你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址:
下载后,将以下代码放入的网页中:
以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head> 元素中,因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素
form新增控件以及特性
新的输入型控件email : 电子邮箱文本框,跟普通的没什么区别当输入不是邮箱的时候,验证通不过移动端的键盘会有变化tel : 电话号码url : 网页的URLsearch : 搜索引擎chrome下输入文字后,会多出一个关闭的Xrange : 特定范围内的数值选择器min、max、step( 步数 )新的输入型控件_2
number : 只能包含数字的输入框color : 颜色选择器datetime : 显示完整日期datetime-local : 显示完整日期,不含时区time : 显示时间,不含时区date : 显示日期week : 显示周month : 显示月新的表单特性和函数
placeholder : 输入框提示信息例子 : 微博的密码框提示autocomplete : 是否保存用户输入值默认为on,关闭提示选择offautofocus : 指定表单获取输入焦点list和datalist : 为输入框构造一个选择列表list值为datalist标签的idrequired : 此项必填,不能为空Pattern : 正则验证 pattern="\d{1,5}“Formaction 在submit里定义提交地址表单验证
validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回falseoText.addEventListener("invalid",fn1,false);ev.preventDefault()valueMissing : 输入值为空时typeMismatch : 控件值与预期类型不匹配patternMismatch : 输入值不满足pattern正则tooLong : 超过maxLength最大限制rangeUnderflow : 验证的range最小值rangeOverflow:验证的range最大值stepMismatch: 验证range 的当前值 是否符合min、max及step的规则customError 不符合自定义验证setCustomValidity(); 自定义验证表单验证
Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false)阻止默认验证:ev.preventDefault()formnovalidate属性 : 关闭验证