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. 【原创】如何治疗使用python中re模块group、groups与findall分组匹配后产生的“眩晕反应”

      转载请注明出处:https://www.cnblogs.com/oceanicstar/p/9244783.html   直接先上例子 >>> re.search('(book+ ...

  2. Linux下通过uptime判断负载情况

    [root@localhost ~]# uptime 18:34:12 up 5:30, 1 user, load average: 0.00, 0.01, 0.05 load average后面的三 ...

  3. MySQL Waiting for table metadata lock的解决方法

    最近需要在某一个表中新增字段,使用Sequel Pro 或者Navicat工具都会出现程序没有反应,使用 show processlist 查看,满屏都是 Waiting for table meta ...

  4. SQL命令（二）

    (1)数据库查询 格式: SELECT <列名1,2,3...> FROM <表名> [WHERE子句] [GROUP BY 子句] [HAVING 子句] [ORDER BY ...

  5. 1. tty终端接收数据原理

    1. 串口接收数据原理(以“ls”命令为例) (1) 每个终端设备都有一个接收缓冲区,保存原始数据.shell程序一直在休眠,等待合适的字符: (2) 串口接收到'l'字符,把它保存下来: (3) 串 ...

  6. Leecode刷题之旅-C语言/python-136只出现一次的数字

    /* * @lc app=leetcode.cn id=136 lang=c * * [136] 只出现一次的数字 * * https://leetcode-cn.com/problems/singl ...

  7. hack游戏攻略（梦之光芒黑客小游戏）

    2019.2.11 继续玩~~还是黑客游戏闯关类的 地址:http://monyer.com/game/game1/ 直接查看页面代码: first.php就是了: 查看源代码: 这里尝试输入 两个空 ...

  8. class实现Stack

    基于class实现一个存储string类型的Stack 头文件: //stack.h #include<vector> #include<string> class Stack ...

  9. List集合中的对象比较，取出不同对象

    今天在做金碟系统与我们系统的对接的时候需要做一个客户同步 在同步时,需要比较对象,对查询出的数据库的数据进行比较 for(int i=0;i<list2.size();i++){ if(! li ...

  10. （数据科学学习手札07）R在数据框操作上方法的总结（初级篇）

    上篇我们了解了Python中pandas内封装的关于数据框的常用操作方法,而作为专为数据科学而生的一门语言,R在数据框的操作上则更为丰富精彩,本篇就R处理数据框的常用方法进行总结: 1.数据框的生成 ...