一、前言                            

本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

目录一坨:

二、语义化标签:articleasidetimemarksectionheaderfooterhgroupprogressfigurefigcaptionnavmeteroutputdetailssummaryrubymain

  三、让IE5.5~9支持HTML5新标签

1. IE5.5~8下对于不支持的标签会遇到以下问题

    2. 解决方案

       2.1. html5-els.js——最简单的解决方案

            IE下的条件编译

      2.2. html5shiv.js——更全面的解决方案

二、语义化标签                         

  1. article标签

W3C草案:

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.W3C specification

语义化<article>元素:用于表示内容与当前文档或网页关联不大的外部资讯,如杂志、报纸或博客等的外部内容。

  2. aside标签

  W3C草案:

The aside element represents content that is tangentially related to the content that forms the main textual flow of a document.W3C specification

语义化<aside>元素:表示与正文内容关系不大的内容。如侧栏内容、注解或页脚等内容。

  3. time标签

W3C草案:

The time element represents a date and/or time.W3C specification

语义化<time>元素:表示内容日期/时间,或者通过datetime特性标识出内容关联的日期/时间。datetime特性格式如下:

YYYY-MM-DDThh:mm:ssTZD

日期或时间。下面解释了其中的成分:
YYYY - 年 (例如 )
MM - 月 (例如 表示 January)
DD - 天 (例如 )
T - 必需的分隔符,若规定时间的话
hh - 时 (例如 表示 .00pm)
mm - 分 (例如 )
ss - 秒 (例如 )
TZD - 时区标识符 (Z 表示祖鲁,也称为格林威治时间)

  4. mark标签

W3C草案:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.W3C specification

语义化<mark>元素:突出与特定主题(上下文)关联的内容。

 5. section标签

W3C草案:

The section element represents a section of a document, typically with a title or heading.W3C specification

语义化<section>元素:定义文档中的节(section、区段),一般包含标题或页眉。

6. header标签

  W3C草案:

The header element represents the header of a section.W3C specification

  语义化<header>元素:定义section或document的页眉,包含一些内容介绍等信息。

 7. footer标签

  W3C草案:

The footer element represents the footer for the section it applies to.W3C specification

语义化<footer>元素:定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

 8. hgroup标签

W3C草案:

The hgroup element represents a group of headings.W3C specification

语义化<hgroup>元素:对h1-h6标签进行分组。内含一个或多个h1-h6标签。示例:文章主标题和副标题

<section>
<hgroup>
<h2>滑板速成秘诀</h2>
<h3>——从Ollie开始</h3>
</hgroup>
<p>
....................
</p>
</section>

9. progress标签

W3C草案:

The progress element represents the completion progress of a task.W3C specification

语义化<progress>元素:表示某项任务的执行进度,通过max特性设置任务完成时的值,通过value特性设置任务当前的执行进度。样式效果为进度条。

  10. figure标签

W3C草案:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.W3C specification

  语义化<figure>元素:表示一个自包含内容单元(含可选的标题),重点是即使将该内容移除也不会影响文档整体的含义。

  11. figcaption标签

W3C草案:

The figcaption element represents a caption or legend for a figure.W3C specification

  语义化<figcaption>元素:表示figure元素的标题,作为figure元素的子元素。

  12. nav标签

  W3C草案:

The nav element represents a section of a document that links to other documents or to parts within the document itself; that is, a section of navigation links.W3C specification

  语义化<nav>元素:表示导航栏。示例:

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

   13. meter标签

  W3C草案:

The meter element represents a scalar gauge providing a measurement within a known range, or a fractional value.W3C specification

  语义化<meter>元素:定义已知范围或分数值内的标量测量,也被称为 gauge(尺度)。如磁盘使用量等,而不是定义任务执行进度,虽然样式上也是进度条的形式。该标签含如下特性:

form    form_id    规定 <meter> 元素所属的一个或多个表单。
high number 规定被视作高的值的范围。
low number 规定被视作低的值的范围。
max number 规定范围的最大值。
min number 规定范围的最小值。
optimum number 规定度量的优化值。
value number 必需。规定度量的当前值。

 14. output标签

  W3C草案:

The output element represents the result of a calculation.W3C specification

  语义化<output>元素:定义内容为计算结果,可在form元素提交时向服务端发送其内容。for特性用于设置与计算结果相关的表单元素id,多个id时使用空格分隔。示例:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="">
+<input type="number" id="b" value="">
=<output name="x" for="a b"></output>
</form>

    15. details标签

  W3C草案:

The details element represents a control from which the user can obtain additional information or controls on-demand.W3C specification

  语义化<details>元素:标签用于描述文档或文档某个部分的细节。默认不显示详细信息,通过open特性可修改为显示详细信息。通过点击标题可实现展开/收缩详细信息的效果。结合<summary>元素可自定义标题的内容。

16. summary标签

  W3C草案:

The summary element represents a summary, caption, or legend for a details element.W3C specification

  语义化<summary>元素:作为details标签的概要、标题。

    17. ruby标签

  W3C草案:

The ruby element allows spans of phrasing content to be marked with ruby annotations.W3C specification

  语义化<ruby>元素:显示的是东亚字符的发音。需要结合<rt>元素和可选的<rp>元素使用。示例:

 <ruby>漢 <rt>ㄏㄢˋ</rt><rp>(ㄏㄢˋ)</rp></ruby>

在支持ruby元素的浏览器中效果为,在不支持的浏览器中效果为 漢(ㄏㄢˋ) 。<rt>元素标识注音,仅当浏览器支持时显示;<rp>元素标识当浏览器不支持时显示的内容。

18. main标签W3C specification

  语义化<main>元素:表示文档的主要内容,一个文档仅能出现一个<main>元素,并且不能作为以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。

三、让IE5.5~9支持HTML5的新标签                

1. IE5.5~8下对于不支持的标签会遇到以下问题

①. 无法通过元素选择器选择匹配相应的标签并应用样式规则;

②. 通过ID、类名等方式匹配相应的标签并应用样式规则,或使用style特性嵌入样式规则,均有效。但效果与正常效果相距甚远;

③. 标签的默认样式与W3C草案的不同;

④. 对于如<progress>、<meter>、<details>和<canvas>等自带特定UI形式和编程接口API的元素,无法渲染出相同的UI形式和向外提供编程接口API;

⑤. 对于如<output>、<keygen>等通过form特性指向所属表单元素的API不给予支持。

注意:

    ①. IE5.5~8下使用document.getElementsByTagName或document.getElementById等方法可获取DOM树中的所有标签元素,即使浏览器不支持这些标签元素(通过Object.prototype.toString.call方法获取不支持的标签元素类型,得到结果为[object HTMLUnknownElement])

②. IE9和其他现代浏览器对于不支持的标签,也可以通过元素选择器匹配相应的标签,同时样式规则的应用也与正常的无异。

 2. 解决方案

注意,这里的解决方案仅仅只能解决上一小节所罗列问题的①、②和③。

 2.1. html5-el.js——最简单的解决方案
将下面的JS和CSS放在head元素中且所有样式元素之前。
/*@cc_on'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary subline time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

是否觉得这段代码有点奇怪呢?(初看之下会觉得这不是被整段注释掉了吗?)其实这里利用了IE5.5~10中支持的条件编译(Conditional Compile)功能。

对于C#工程师而言条件编译并不是什么新鲜词,就是通过#define、#if...#endif等关键字来让编译器根据条件编译代码, 常用在代码测试和作为功能特性开关使用。而JS下的条件编译又有何用呢?毕竟现在的JS还是解析型语言(在TypeScript、CoffeeScript、ClojureScript等JS超集上使用还情有可原),微软的解释是:“利用条件编译,可以使用新的 JavaScript 语言功能,同时又保留与不支持这些功能的旧版本之间的兼容性。”,也就是说条件编译实际上就是根据条件执行代码,因此我们可以通过JS语法中的作业控制流(if、while等)实现相同的功能,于是IE下这个特性自然就无人问津了。当想在我们可以利用这一特性来识别当前浏览器是否为IE5.5~10。下面我们看看具体如何使用吧!

语法格式: /*内容 @*/

关键字: @cc_on 、 @if()...@else...@end 和 @set

内置属性: @_jscript_version ——jscript版本号、 @_win32 和 @_win16 ——系统位数

   示例:

/*@cc_on @*/
/*@if (@_jscript_version >= 4)
alert("JavaScript version 4 or better");
@else @*/
alert("Conditional compilation not supported by this scripting engine.");
/*@end @*/

上述内容对于IE11和其他浏览器而言会将条件编译的内容视作多行注释。若打算利用条件编译特性来限定代码仅在IE5.5~10下执行,则建议使用如下形式:

/*@cc_on 需要执行的代码@*/
/*@cc_on
需要执行的代码
@*/

现在我们应该理解html5-els.js中代码是什么意思了!当然我们可以通过这句来判断当前的浏览器版本: var isLteIE10 = /*@cc_on!@*/

2.2. html5shiv——更全面的解决方案(html5shiv@github
2.1.中的解决方案无法解决通过innerHTML属性设置HTML5标签时出现的问题,而html5shiv则完美解决了!示例:
// IE5.5~8下
document.body.innerHTML = '<section>test</section>'
console.log(document.body.innerHTML) //显示test</SECTION>
console.log(document.body.innerHTML.childNodes.length) // 显示2 // IE9+下
console.log(document.body.innerHTML) //显示<section>test</section>
console.log(document.body.innerHTML.childNodes.length) // 显示1

jQuery1.7开始可增加了对HTML5标签的兼容性处理,而Modernizr也提供相关支持(与html5shiv项目同一批人做出来的哦!)。

四、总结                              

由于dialog、template、video、canvas等标签内容较多,本文并未对它们继续记录,日后分别学习并记录吧!另外html5shiv的实现也玩味十足,又有必须拜读的冲动了。以后补上源码分析咯!

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4174812.html ^_^肥子John


五、参考                              

http://www.cnblogs.com/yuzhongwusan/archive/2011/11/17/2252208.html

http://www.daqianduan.com/2831.html

HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案的更多相关文章

  1. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  2. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  3. HTML5的新标签之一的Canvas

    一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas>  英 ['kænvəs]  美 [ ...

  4. 标签语义化之常用HTML标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...

  5. html5的新标签

    header,section,footer,aside,nav,main,article,figure 在使用的时候,需要先把这个元素变为块级元素,确保在老的浏览器里面可以使用.因为在浏览器检测到未知 ...

  6. 每天学一点儿HTML5的新标签

    sections部分 (http://www.w3.org/TR/html5/sections.html) 标签:article article标签用来表示页面中一段完整的可以自我包含的片段,具有可重 ...

  7. html5shiv主要解决IE6-8 无法识别HTML5的新标签,父节点不能包裹子元素,以及应用CSS样式

    html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...

  8. HTML5的新标签-整体布局

    过去:<div class="header"> <div class="hgroup"> <h1>....</h1&g ...

  9. HTML5学习笔记(三):语义化和新增结构元素

    在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...

随机推荐

  1. Python札记 -- 文件压缩

    在日常工作当中免不了要对文件进行压缩,Python标准库里也提供了实现压缩功能的模块. 一.简单的例子 首先了解一下压缩单个文件在Python中怎么实现.竹风建了个测试文件夹zip_text,里面有t ...

  2. 深入理解openstack网络架构(1)

    原文地址: https://blogs.oracle.com/ronen/entry/diving_into_openstack_network_architecture 译文转载自:http://b ...

  3. 示例篇-购物车的简单示例和自定义JS

    简介: 支持平台: Android4.0,iOS7.0,Windows 10, Windows 10 mobile 说明:主要是演示listview所在的ui和模板cell所在的ui之间数据的交互,点 ...

  4. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  5. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  6. python 实现web框架simfish

    python 实现web框架simfish 本文主要记录本人利用python实现web框架simfish的过程.源码github地址:simfish WSGI HTTP Server wsgi模块提供 ...

  7. 继续SecureString

    上回写了关于SecureString的特征和为什么我们要使用它,这篇继续研究研究这个SecureString. **主要内容:** - SecureString与String之间的转换 - Secur ...

  8. 谈谈c#中异步编程模型的变迁

    大家在编程过程中都会用到一些异步编程的情况.在c#的BCL中,很多api都提供了异步方法,初学者可能对各种不同异步方法的使用感到迷惑,本文主要为大家梳理一下异步方法的变迁以及如何使用异步方法. Beg ...

  9. C++函数指针

    然后,我在想C++函数指针到底有啥用呢.想了又想,我想出来一种,就是将函数地址(函数n)作为函数(函数1)的参数时,便可以在访问函数1的时候就决定了,在函数1里面调用的是哪一个函数(函数1,2,3,4 ...

  10. Android消息机制

    每一个Android应用在启动的时候都会创建一个线程,这个线程被称为主线程或者UI线程,Android应用的所有操作默认都会运行在这个线程中. 但是当我们想要进行数据请求,图片下载,或者其他耗时操作时 ...