如何让旧浏览器支持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 条评论
登录 后参与评论

相关文章

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

2.2 HTML5基础入门

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

1042
来自专栏lonelydawn的前端猿区

keyframes在不同浏览器中的表现性

一、keyframes的使用方法 keyframes是css3实现动画的一种方式。 简单的使用规则如下: 先定义元素的动画样式,并设置动画的名称 selecto...

2206
来自专栏前端小作坊

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

591
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

1422
来自专栏进击的君君的前端之路

CSS理解之border

1243
来自专栏张善友的专栏

Caliburn Micro for Windows Phone 7

Caliburn Micro (caliburnmicro.codeplex.com) 是一个小巧但功能强大的 Caliburn (caliburn.codep...

1548
来自专栏前端桃园

用CSS让你的文字更有文艺范

1272
来自专栏42度空间

【基础】这15种CSS居中的方式,你都用过哪几种?

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有...

3617
来自专栏陈仁松博客

【译】在 ASP.NET Core 中使用 SignalR

近日,微软发布了.NET Core 2.0,但是开发人员中间仍然存在一些疑惑,就是.NET Core、.NET Standard、Xamarin和.NET Fr...

3754
来自专栏小巫技术博客

A019-布局之GridLayout

网格布局,是Android4.0之后的API才提供的,算是一个相对新的布局容器,它的用法也很简单,类似LinearLayout可以指定方向,也可以指定控件占用多...

683

扫描关注云+社区