您当前位置：首页 > web前端 > htmlcss > HTML5之浏览器支持、新元素

HTML5之浏览器支持、新元素

来源：程序员人生发布时间：2015-04-21 08:26:15 阅读次数：4679次

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 阅读器添加新的元素。

3、Internet Explorer 阅读器问题

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

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

注意：国内用户请使用百度静态资源库（Google 资源库在国内不稳定）：

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

4、完善的 Shiv 解决方案

<!DOCTYPE html> <html> <head> <meta charset="UTF⑻"> <title>Styling HTML5</title>  </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 新元素时需要先加载该文件。

5、HTML5 新元素

自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>

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

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

上一篇 高亮显示搜索到的关键字-jquery.highlight.js的用法！

下一篇 【万里征程――Windows App开发】SemanticZoom视图切换

分享到:

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

为码而活

积分：4237

15粉丝

7关注

栏目热点