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

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,那么如果在高端浏览器中使用了新元素,应当如何让低端浏览器兼容呢?

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

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

书写的基本的HML代码:

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>让旧浏览器支持HTML5新增标签-独行冰海</title>
</head>
<body>
   <header>顶部内容</header>
   <nav>导航内容</nav>
   <article>文章内容</article>
   <footer>底部内容</footer>
</body>
</html>

Google等新浏览器中的表现:

IE6中的表现:

具体步骤

其实,让旧浏览器支持HTML5新增标签,听上去很难,操作起来很简单,只需要你懂DOM操作就足够了。

首先我们使用js进行标签的创建,为HTML文件创建我们需要的这几个HTML5标签。

<script>
   document.createElement('header');
   document.createElement('nav');
   document.createElement('article');
   document.createElement('footer');
</script>

接下来,我们需要使用css进行这几个HTML5标签的样式控制。这是因为,通过这种方法创建的新标签,默认是行内元素。因此需要添加如下代码:

<style>
   article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
       display: block;
   }
</style>

对于代码位置,我们需要注意,要将script标签放置到head中,而不是body的后面,这是因为,浏览器从上到下进行代码的执行与解析,在已经渲染之后再执行js就没有任何意义和价值了。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

Web--CSS控制页面(link与import方式区别)

【1】         “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构

641
来自专栏青枫的专栏

浏览器内核(理解)

  浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

792
来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

2208
来自专栏lonelydawn的前端猿区

秒懂 javascript 拖拽上传文件

代码 直接贴代码了,复制到本地 .html 文件中即可实现以上演示效果: <!DOCTYPE html> <html> <head> <meta chars...

2577
来自专栏deepcc

js判断手机浏览器

3218
来自专栏WebHub

可视化讲解 DOM 的构建过程

最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程.

492
来自专栏WebDeveloper

css的高级用法

1053
来自专栏程序你好

提高JavaScript动画的性能

772
来自专栏Android-薛之涛

Android 软键盘遮挡解决

        链接:https://www.jianshu.com/p/9eb57a8ff5e5

1064
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

800

扫码关注云+社区