Html5语义化标签详解及其兼容性处理 - catEatBird_H5之家

<header></header> 页眉

主要用于页面的头部的信息介绍，也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题，或者标语的组合

<h2>带您进入富有人情味的IT培训</h2>

</hgroup>

<nav></nav> 导航（包含链接的的一个列表）

<nav>

</nav>

<nav>

</nav>

<nav>

<h2>妙味精品课程</h2>

<ul>

<li><a href=“#”>javascript</a></li>

</ul>

<footer></footer>页脚页面的底部或者版块底部

<section> <section> 页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节

<article></ article > 用来在页面中表示一套结构完整且独立的内容部分可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分 aside 的内容应该与 article 的内容相关。被包含在<article>中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

<figure> < figure > 用于对元素进行组合。一般用于图片或视频

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

<img src=“miaov.png”/>(注意没有alt)

<figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption>

</figure>

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

<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数

<datalist></datalist>选项列表。

与 input 元素配合使用，来定义 input 可能的值。

<option value="javascript">javascript</option>

</datalist>

<details></details>用于描述文档或文档某个部分的细节该元素用于摘录引用等应该与页面的主要内容区分开的其他内容

Open 属性默认展开

< summary></summary> details 元素的标题

<p>国内将知名的IT培训机构</p>

</details>

<dialog></dialog>定义一段对话

</dialog>

<address></address> 定义文章或页面作者的详细联系信息

<mark></mark> 需要标记的词或句子

<keygen>给表单添加一个公钥

用户: <input type="text" />

公钥: <keygen />

</form>

<progress><progress>定义进度条

<span>76</span>%

</progress>

标签

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

在页面的头部加下：

document.createElement(“header”);

document.createElement(“nav”);

document.createElement(“footer”);

……

</script>

样式

HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下它默认的display

新的输入型控件

email : 电子邮箱文本框，跟普通的没什么区别当输入不是邮箱的时候，验证通不过移动端的键盘会有变化

tel : 电话号码

url : 网页的URL

search : 搜索引擎 chrome下输入文字后，会多出一个关闭的X

range : 特定范围内的数值选择器 min、max、step( 步数 ) 例子 : 用JS来显示当前数值

新的输入型控件_2

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

color : 颜色选择器

datetime : 显示完整日期

datetime-local : 显示完整日期，不含时区

time : 显示时间，不含时区

date : 显示日期

week : 显示周

month : 显示月

新的表单特性和函数

placeholder : 输入框提示信息例子 : 微博的密码框提示

autocomplete : 是否保存用户输入值默认为on，关闭提示选择off

autofocus : 指定表单获取输入焦点

list和datalist : 为输入框构造一个选择列表 list值为datalist标签的id

required : 此项必填，不能为空

Pattern : 正则验证 pattern="\d{1,5}“

表单验证

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false

oText.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属性 : 关闭验证

Formaction 在submit里定义提交地址