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. 如何解决tomcat中的应用报java.io.IOException: 您的主机中的软件中止了一个已建立的连接

    转载: 施勇: https://blog.csdn.net/shiyong1949/article/details/72845634 这两天突然看到日志文件中有“java.io.IOException ...

  2. 利用百度地图API实现地址和经纬度互换查询

    import json import requests def baiduMap(input_para): headers = { 'User-Agent': 'Mozilla/5.0 (Window ...

  3. 【解决】docker 容器中 consul集群问题处理

    现象描述:   node1 和node2 日志反复出现 add remove node3节点. node3 节点 一直 驳回 node1 和node2 认为node3已经dead的消息  不断重启se ...

  4. JetBrains 全家桶激活码

    原文地址:https://blog.csdn.net/usher_ou/article/details/77970172 RDNJ63FZWD-eyJsaWNlbnNlSWQiOiJSRE5KNjNG ...

  5. Mysql读写分离，主从同步实现

    随着用户量的增多,数据库操作往往会成为一个系统的瓶颈所在,因此我们可以通过实现数据库的读写分离来提高系统的性能. 通过设置主从数据库实现读写分离,主库负责“写”操作,从库负责“读”操作,根据压力情况, ...

  6. admin添加用户时报错：(1452, 'Cannot add or update a child row: a foreign key constraint fails (`mxonline`.`django_admin_l

    在stackoverflow找到答案: DATABASES = { 'default': { ... 'OPTIONS': { "init_command": "SET ...

  7. FZU：1759-Problem 1759 Super A^B mod C （欧拉降幂）

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=1759 欧拉降幂是用来干啥的?例如一个问题AB mod c,当B特别大的时候int或者longlong装不下的时 ...

  8. C 二维指针难点详解。

    关于   指向二维数组的指针. int  a[2][3]; int *p; int (*p_1)[3]; 可以用p_1 = a ,但是不能用p = a : 因为此时数组a的数据类型是  int (* ...

  9. 关于springboot 连接mysql 数据库报错问题

    springboot连接MySQL运行报错: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more ...

  10. FPGA等占空比奇偶分频和半整数分频

    1. 偶数分频比较简单,如果分频系数是N(如果N是偶数,那么N/2是整数),那么在输入时钟的每隔N/2个周期时(计数器从0到N/2-1),改变输出时钟的电平即可得到50%固定占空比的时钟.需要的代码如 ...