HTML5之浏览器支持、新元素

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;
}

2、为 HTML 添加新元素

你可以为 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年以后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>


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


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

时间: 2024-09-28 20:42:27

HTML5之浏览器支持、新元素的相关文章

CSS3&amp;HTML5各浏览器支持情况一览表

CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX OPERA SAFARI IE 版本 5 3.6 10.1 4 4 3.6 3 10 10.5 4 6 7 8 RGBA Y Y Y Y Y Y Y Y Y Y N N N HSLA Y Y Y Y Y Y Y Y Y Y N N N Multiple Backgrounds Y Y N Y Y Y N N Y Y N N N Bor

Html5浏览器支持

HTML5 浏览器支持 把 HTML5 元素定义为块级元素 语义块级displayblock实例 header, section, footer, aside, nav, main, article, figure { display: block; } 向 HTML 添加新元素 <myHero>实例 <!DOCTYPE html> <html> <head> <title>Creating an HTML Element</title&g

HTML5 简介、HTML5 浏览器支持

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 是下一代 HTML 标准. HTML , HTML 4.01的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. HTML5 是如何起步的? HTML5 是 W3C 与 WHATWG 合作的结

(转)让所有浏览器支持HTML5 video视频标签

转自http://www.zhangxinxu.com/wordpress/?p=661 一.前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长FQ的人,到底如何我也不得而知. 与主题不相关的HTML5方面的东西我就不多说了,对于video标签,获取大家都听说了,这个标签的功能如同现在HTML语言中的img标签,就现在,比如要链接并显示一张图片,可以这样子: <img data-src="http://ima

如何让旧浏览器支持HTML5新标签

HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签.自己最近在写响应式布局的范例,里面也使用到了header等标签.还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签. 书写的基本的HTML代码: 1 <!doctype html> 2 <html> 3 <head>

基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转)

效果图:http://code.google.com/p/jquery-placeholder-js/ 演示代码:http://demo.jb51.net/js/2011/jqueryplaceholder/打包下载:http://xiazai.jb51.net/201105/yuanma/jqueryplaceholder.rar 基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转),布布扣,bubuko.com

jquery实现上传图片预览(需要浏览器支持html5)

jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

让 IE9 以下的浏览器支持HTML5标签 和 CSS3选择器

做项目的很多时候,想用 HTML5  CSS3 新的技术,又考虑到低版本的浏览器不支持这些标签和属性,就让人烦恼,不过问题的出现,就有问题的解决方案,那么这里就介绍用 js 插件来让低版本浏览器也兼容吧... 让浏览器支持HTML5标签插件下载地址: http://code.google.com/p/html5shiv/ 让浏览器支持CSS3选择器插件下载地址: http://www.jb51.net/jiaoben/24032.html 使用方法: 下载插件,在下载到的文件中找到下面标着红颜色

让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是: IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下: document.createElement('新标签'); / /新增创建新标签   方式一:Codi