你可以学会如何使用旧的浏览器正确处理新的HTML5.

HTML5 浏览器支持

HTML5 支持所有现代浏览器.

此外，所有的浏览器，旧的和新的，自动处理未被识别的元素作为内联元素.

因为这样，你可以“告诉”的旧的浏览器来处理“未知”的HTML元素.

甚至可以教IE6（XP 2001）如何处理未知的HTML元素.

定义语义元素作为块元素

HTML5定义八个新的语义元素。所有这些都是块级元素。.

在旧浏览器中确保正确的行为,你可设置元素的 display属性为block:

header, section, footer, aside, nav, main, article, figure {

    display: block;

}

加入新的元素到HTML

你也能添加新的元素到HTML页面.

这个实例添加一个新的元素叫做 <myHero> 到HTML页面, 并且定义了一个样式:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>享学课堂</title>

  <script>document.createElement("myHero")</script>

  <style>

    myHero {

        display: block;

        background-color: #dddddd;

        padding: 50px;

        font-size: 30px;

    }

  </style>

</head>

<body>

  <h1>一个标题</h1>

  <myHero>我的英雄元素</myHero>

</body>

</html>

让我试试

JavaScript 语句 document.createElement("myHero") 需要创建在IE 9或更早的版本中.

使用IE8的问题

你可以使用上面描述的解决方案为所有新的HTML5元素.

然而, IE8 (和更早的版本) 不允许未知元素的样式!

幸运的是, Sjoerd Visscher 创建了 HTML5Shiv! HTML5Shiv 是一个JavaScript类库，可以使IE9或者更早的版本识别新的HTML5元素。

为了兼容IE9或者更早的版本，你将需要html5shiv.

HTML5Shiv 语法

HTML5Shiv 被放在<head> 标签里面.

HTML5Shiv 是一个javascript文件，通过<script>标签引用.

当你使用新的HTML5元素，例如: <article>, <section>, <aside>, <nav>, <footer>时，你可以使用HTML5Shiv来兼容旧的IE浏览器。

你可以从github下载最新的HTML5shiv版本或者使用CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

语法

<head>

  <!--[if lt IE 9]>

    <script src="/js/html5shiv.js"></script>

  <![endif]-->

</head>

HTML5Shiv 实例

如果你不想下载和存储html5shiv在您的网站上，你可以参考在CDN网站的版本.

HTML5Shiv 脚本必须放在<head>元素里面, 样式如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <!--[if lt IE 9]>

    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

  <![endif]-->

  <title>享学课堂</title>

</head>

<body>

  <section>

  <h1>著名城市</h1>

  <article>

    <h2>伦敦</h2>

    <p>伦敦是英国的首都。它是英国人口最多的城市，拥有超过1300万居民的大都市.</p>

  </article>

  <article>

    <h2>巴黎</h2>

    <p>巴黎是法国首都和人口最多的城市.</p>

  </article>

  <article>

    <h2>东京</h2>

    <p>东京是日本的首都，东京大区的中心，也是世界上人口最多的大都市区.</p>

  </article>

  </section>

</body>

</html>

让我试试

本文转自：http://codingdict.com/article/1450

HTML5浏览器的更多相关文章

  1. HTML5 简介、HTML5 浏览器支持

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 ...

  2. Html5浏览器支持

    HTML5 浏览器支持 把 HTML5 元素定义为块级元素 语义块级displayblock实例 header, section, footer, aside, nav, main, article, ...

  3. HTML5 浏览器支持

    css重置 header, section, footer, aside, nav, main, article, figure { display: block; } 为HTML添加新的元素 < ...

  4. [转载]HTML5浏览器测试网站汇总

    http://www.cnblogs.com/javawebsoa/archive/2012/04/19/2458224.html 浏览器支持情况统计 When Can IUse:图表经常更新,展示了 ...

  5. HTML5 浏览器返回按钮/手机返回按钮事件监听

    1.HTML5  History对象 支持使用pushState()方法修改地址栏地址,而不刷新页面. popstate事件 当history实体被改变时,popstate事件将会发生.调用pushS ...

  6. HTML5浏览器嵌入窗口程序解决方案

    浏览器嵌入窗口程序一直以来就是WEB应用程序的首选方案,这种方案只需要实现一个主窗口,并提供一些接口供脚本调用,内部的界面和逻辑处理全部用html,css,javascript去实现.我最早看到的相关 ...

  7. HTML5浏览器支持及兼容性处理

    1.现代的浏览器都支持HTML5. 2.所有浏览器不管是新的还是旧的对无法识别的元素会作为内联元素自动处理. 3.HTML5定义了8个HTML语义元素,所有这些元素都是块级元素,为了能让旧版本的浏览器 ...

  8. Html5浏览器缓存 sessionStorage 与 localStorage

    一.sessionStorage: 浏览关闭会话结束就被清除:(不能跨页面) localStorage:永久保存: 二.使用 var storage = window.sessionStorage; ...

  9. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

随机推荐

  1. sqlalchemy.exc.NoForeignKeysError：Can't find any foreign key relationships between

    这句话的意思是,两张表之间的外键找不到,首先看看外键设置正确了没,如果外键没问题,看看是不是_tablename_设置了没,就是再model中,定义类的时候,表格名称要_tablename_设置一下, ...

  2. nginx配置-Rewrite

    rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向.rewrite只能放在server{},location{},if{}中,并且只能 ...

  3. Vue-数据绑定原理

    VueJS 使用 ES5 提供的 Object.defineProperty() 方法实现数据绑定. 感觉实现时主要是在 defineProperty 的 set 和 get 上做了很多文章,在 ge ...

  4. JS-让浏览器兼容ES6特性

    babel:将 ES6 翻译为 ES5 PS:ie 还不支持 import 和 export 还是用 gulp 打包一下吧

  5. 微软手写识别模块sdk及delphi接口例子

    http://download.csdn.net/download/coolstar1204/2008061 微软手写识别模块sdk及delphi接口例子

  6. 【ABAP系列】SAP ABAP常用函数总结第一篇

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP常用函数总结第一 ...

  7. C# 文件、byte相互转换

    文件转byte数组: /// <summary> /// 将文件转换为byte数组 /// </summary> /// <param name="path&q ...

  8. 20190820 On Java8 第十章 接口

    第十章 接口 接口和抽象类提供了一种将接口与实现分离的更加结构化的方法. 抽象类和方法 包含抽象方法的类叫做抽象类.如果一个类包含一个或多个抽象方法,那么类本身也必须限定为抽象的,否则,编译器会报错. ...

  9. Jmeter中Bean shell脚本格式修改为utf-8

    遇到的问题: 在做 一个发贴的接口测试时发现,发送数字+纯字母贴子时,可以正常请求成功.但当贴内容为中文时,服务端编码为乱码??. 原因: jmeter中,shell脚本的默认的格式为GBK,所以我在 ...

  10. 点分治题单(来自XZY)

    点分治题单(来自XZY) 静态点分治 [x] 洛谷 P3806 [模板]点分治1 [x] 洛谷 P4178 Tree [x] 洛谷 P2634 [国家集训队]聪聪可可 [x] 洛谷 P4149 [IO ...