HTML5之浏览器支持、新元素
2015-04-09 08:57
387 查看
HTML5之浏览器支持、新元素
现代的浏览器都支持HTML5。此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。正因为如此,你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素(即让一些较早的浏览器(不支持HTML5)支持 HTML5)。1、将 HTML5 元素定义为块元素
HTML5 定了8个新的HTML 语义(semantic) 元素。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:header, section, footer, aside, nav, main, article, figure { display: block; }
[b]2、为 HTML 添加新元素[/b]
你可以为 HTML 添加新的元素。该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero> :<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <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>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body> </html>
运行结果:
注:JavaScript 语句 document.createElement("myHero") 是为了为 IE 浏览器添加新的元素。
3、Internet 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]-->
以上代码是一个注释,作用是在 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-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
4、完美的 Shiv
解决方案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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>我的第一篇文章</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年以后HTML4.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> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<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> | 规定在文本中的何处适合添加换行符。 |
[b]10、已移除的元素[/b]
以下的 HTML 4.01 元素在HTML5中已经被删除:<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
相关文章推荐
- HTML5 简介、浏览器支持、新元素
- HTML5之浏览器支持、新元素
- 让所有浏览器支持HTML5 video视频标签
- html5对各浏览器的支持情况
- CSS3与HTML5各浏览器支持情况大全
- 不同浏览器对CSS3和HTML5的支持状况
- [笔记]一个测试浏览器对html5支持的网站
- 检测浏览器对HTML5属性的支持度
- 微信内置浏览器对于html5的支持
- js判读浏览器是否支持html5的canvas的代码
- HTML5 API 浏览器支持情况检测
- CSS3&HTML5各浏览器支持情况一览表
- HTML5对浏览器的支持以及创建自己的元素
- 五大主流浏览器对css3和html5的支持情况大比拼
- 如何让浏览器支持HTML5标签
- HTML5 On Windows Phone (1) windows phone 浏览器原生支持
- HTML5, CSS3, ES5新的web标准和浏览器支持一览 转
- html5 检测浏览器是否支持新特性
- 如何让旧浏览器支持HTML5新标签