程序员人生 网站导航

HTML5之浏览器支持、新元素

栏目:htmlcss时间:2015-04-21 08:26:15

HTML5之阅读器支持、新元素


现代的阅读器都支持HTML5。另外,所有阅读器,包括旧的和最新的,对没法辨认的元素会作为内联元素自动处理。正由于如此,你可以 "教会" 阅读器处理 "未知" 的 HTML 元素。乃至你可以教会 IE6 (Windows XP 2001) 阅读器处理未知的 HTML 元素(即让1些较早的阅读器(不支持HTML5)支持 HTML5)。


1、将 HTML5 元素定义为块元素

HTML5 定了8个新的HTML 语义(semantic) 元素。所有这些元素都是块级元素。为了能让旧版本的阅读器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure { display: block; }


2、为 HTML 添加新元素

你可以为 HTML 添加新的元素。该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero> :

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF⑻"> <title>Creating an HTML Element</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>我的第1个标题</h1> <p>我的第1个段落。</p> <myHero>我的第1个新元素</myHero> </body> </html>

运行结果:


注:JavaScript 语句 document.createElement("myHero") 是为了为 IE 阅读器添加新的元素。


3Internet Explorer 阅读器问题

你可使用以上的方法来为 IE阅读器添加 HTML5 元素,但是:Internet Explorer 8 及更早 IE 版本的阅读器不支持以上的方式。荣幸的是, Sjoerd Visscher 创建了 "HTML5 Enabling JavaScript", " shiv":

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

以上代码是1个注释,作用是在 IE 阅读器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

注意:国内用户请使用百度静态资源库(Google 资源库在国内不稳定):

<!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->

针对IE阅读器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6⑻辨认,这些新元素不能作为父节点包裹子元素,并且不能利用CSS样式。


4、完善的 Shiv 解决方案

<!DOCTYPE html> <html> <head> <meta charset="UTF⑻"> <title>Styling HTML5</title> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"> </script> <![endif]--> </head> <body> <h1>我的第1篇文章</h1> <article> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </article> </body> </html>

运行结果:


注:html5shiv.js 援用代码必须放在 <head> 元素中,由于 IE 阅读器在解析 HTML5 新元素时需要先加载该文件。


5HTML5 新元素

1999年以后HTML 4.01 已改变了很多,今天,在HTML 4.01中的几个已被废弃,这些元素在HTML5中已被删除或重新定义。

为了更好地处理今天的互联网利用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的情势处理,和几个api拖放元素,定位,包括网页利用程序缓存,存储,网络工作者等。


6、<canvas> 新元素

标签

描写

<canvas>

标签定义图形,比如图表和其他图象。该标签基于 JavaScript 的绘图 API


7、新多媒体元素

标签

描写

<audio>

定义音频内容

<video>

定义视频(video 或 movie)

<source>

定义多媒体资源 <video> 和 <audio>

<embed>

定义嵌入的内容,比如插件。

<track>

为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。


8、新表单元素

标签

描写

<datalist>

定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

<keygen>

规定用于表单的密钥对生成器字段。

<output>

定义不同类型的输出,比如脚本的输出。


9、新的语义和结构元素

HTML5提供了新的元夙来创建更好的页面结构:

标签

描写

<article>

定义页面的侧边栏内容

<aside>

定义页面内容以外的内容。

<bdi>

允许您设置1段文本,使其脱离其父元素的文本方向设置。

<command>

定义命令按钮,比如单选按钮、复选框或按钮

<details>

用于描写文档或文档某个部份的细节

<dialog>

定义对话框,比如提示框

<summary>

标签包括 details 元素的标题

<figure>

规定独立的流内容(图象、图表、照片、代码等等)。

<figcaption>

定义 <figure> 元素的标题

<footer>

定义 section 或 document 的页脚。

<header>

定义了文档的头部区域

<mark>

定义带有记号的文本。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<nav>

定义运行中的进度(进程)。

<progress>

定义任何类型的任务的进度。

<ruby>

定义 ruby 注释(中文注音或字符)。

<rt>

定义字符(中文注音或字符)的解释或发音。

<rp>

在 ruby 注释中使用,定义不支持 ruby 元素的阅读器所显示的内容。

<section>

定义文档中的节(section、区段)。

<time>

定义日期或时间。

<wbr>

规定在文本中的何处合适添加换行符。


10、已移除的元素

以下的 HTML 4.01 元素在HTML5中已被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>




------分隔线----------------------------
------分隔线----------------------------

最新技术推荐