HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签.自己最近在写响应式布局的例子的时候也使用了header等标签.还是希望可以兼容低版本的浏览器,再次和大家分享一下,如何让旧浏览器支持HTML5新增标签.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>让旧浏览器支持HTML5新增标签</title>

     <style type="text/css">

     beimeng{color:#F00;}

     </style>

     <script type="text/javascript">

     </script>

 </head>

 <body>

 <beimeng>Hello World!</beimeng>

 <header>顶部内容</header>

 <nav>导航内容</nav>

 <article>文章内容</article>

 <footer>底部内容</footer>

 </body>

 </html>

其实,让旧浏览器支持HTML5新增标签,听上去很难,操作起来很简单,只需要你懂DOM操作就可以了.
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签.
 <script type="text/javascript">

         document.createElement('beimeng');

         document.createElement('header');

         document.createElement('nav');

         document.createElement('article');

         document.createElement('footer');

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

     beimeng{color:#F00;}

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

     </style>
对于代码位置,我们需要注意,要将script标签放到head中,而不是body后面,这是因为,浏览器从上到下进行代码的执行和解析,在已经渲染之后在执行JS就没有任何价值和意义.
全部代码如下:
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>让旧浏览器支持HTML5新增标签</title>

     <style type="text/css">

     beimeng{color:#F00;}

     article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,beimeng{

      display: block;

     }

     </style>

     <script type="text/javascript">

         document.createElement('beimeng');

         document.createElement('header');

         document.createElement('nav');

         document.createElement('article');

         document.createElement('footer');

     </script>

 </head>

 <body>

 <beimeng>Hello World!</beimeng>

 <header>顶部内容</header>

 <nav>导航内容</nav>

 <article>文章内容</article>

 <footer>底部内容</footer>

 </body>

 </html>

如何让旧浏览器支持HTML5新标签的更多相关文章

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

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  2. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  3. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  4. 支持HTML5新标签

    IE8/IE7/IE6支持通过document.createElement方法产生的标签,               可以利用这一特性让这些浏览器支持HTML5新标签,               ...

  5. 怎样让老浏览器兼容html5新标签

    CSS样式设置默认样式: <style> article, aside, canvas, details, figcaption, figure, footer, header, hgro ...

  6. 让低版本浏览器支持html5的标签

    原理就是首先用js的createElement来创建,之后在使用 document.createElement('header'); <header> <hgroup>头部信息 ...

  7. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  8. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？

    HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

  9. 如何处理HTML5新标签的浏览器兼容性问题？

    ① IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签 ② 也可以使用成熟的框架 ex:html5shim &l ...

随机推荐

  1. Flask中异常捕获

    HTTP 异常主动抛出 abort 方法 抛出一个给定状态代码的 HTTPException 或者 指定响应,例如想要用一个页面未找到异常来终止请求,你可以调用 abort(404). 参数: cod ...

  2. mysql的数据操作和内置功能总结

    一.数据的增删改查 1.插入数据 a.插入完整数据(顺序插入) INSERT INTO 表名(字段1,字段2,字段3…字段n) VALUES(值1,值2,值3…值n); INSERT INTO 表名 ...

  3. java程序执行命令行，解锁数据库表

    有些表锁的时间长或其他原因,在plsql中不能解锁,只能用命令行解锁. 有些功能跨平台系统的交互偶尔会锁表,就需要自动解锁. 下面是解锁的代码: package com.lg.BreakOracleU ...

  4. jquery之prop与attr区别。

    一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script ...

  5. WordPress博客插件程序:搜索下拉框openSug

    百度搜索框下拉提示Wordpress组插件. 下载地址:https://www.opensug.org/faq/wp-content/uploads/2018/12/opensug.wordpress ...

  6. [转]Centos7 内核从3.10升级到4.12过程

    [原文地址] http://blog.csdn.net/youshijifen/article/details/73472434 [摘要] 近期,国家互联网应急中心漏洞(CNCERT)公告中提到Lin ...

  7. 《PHP内核探索系列文章》系列分享专栏

    <PHP内核探索系列文章>已整理成PDF文档,点击可直接下载至本地查阅 简介 PHP内核探索系列文章收藏夹收藏有关PHP内核方面的知识的文章,对PHP高级进阶的朋友提供PHP内核方面的知识 ...

  8. Python3爬虫（十） 数据存储之非关系型数据库MongoDB

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.非关系型数据库NoSQL全程是Not Only SQL,非关系型数据库.NoSQL是基于键值对的,不需要经过S ...

  9. C语言运算符优先级和结合性

    运算符优先级和结合性 优先级                                       运算符 结合性                                         ...

  10. 2002: [Hnoi2010]Bounce 弹飞绵羊

    2002: [Hnoi2010]Bounce 弹飞绵羊 https://www.lydsy.com/JudgeOnline/problem.php?id=2002 分析: 绵羊在弹飞的路径中相当于一棵 ...