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. 导入项目后，js文件报错解决方法

    导入项目后,发现 js文件报错,但是js文件是从官网下载的.解决办法: 选中报错的js文件, 右键选择 MyEclipse-->Exclude From Validation : 然后继续右键执 ...

  2. JAVA | 学生选课系统

    这里使用JAVA语言编写的简易的学生选课系统,展现的都是这个系统核心代码. 其中有不足欢迎批评和指正! 链接数据库的代码 package connection;//连接数据库student impor ...

  3. 【vlan之四种方式链路认证组网]

    ---恢复内容开始--- 根据项目需求,搭建好如下拓扑图: 在[sysname]下配置给予协议的vlan vlan 1#vlan 10 protocol-vlan 0 ipv4#vlan 20 pro ...

  4. Java小功能大杂烩

    生成UUID: import java.util.UUID; public class ProductUUID { // 随机返回前十位的UUID public static String getUU ...

  5. 《python编程从入门到实践》第六章笔记

    1.字典 字典:一系列键-值对,每一个键都与每一个值相关联.与键相关联的值可以是数字.字符串.列表和字典. 最简单的字典只有一个键值对. eg: alien = {'color':'green','p ...

  6. POJ1985 树的直径(BFS

    Cow Marathon   Description After hearing about the epidemic of obesity in the USA, Farmer John wants ...

  7. WPF DateTimePicker 和 TimeSpanPicker 控件发布

    原文:WPF DateTimePicker 和 TimeSpanPicker 控件发布 根据http://datetimepickerwpf.codeplex.com/ 这个项目重构了一下代码设计了我 ...

  8. docker windows container的一些注意点

    1.在阿里云esc的ws2016里装docker只能使用windows container,因为官方也说了主机也是虚拟机所以不能开启Hyper-v. 2.默认使用nat模式运行network,该模式在 ...

  9. golang select 退出结束goroutine

    开启了多个协程 其中一个协程满足条件后终止select, 原以为其他的协程会在后台系统中继续悄悄运行 直到主进程关闭而关闭 . 做一实验发现select 监听退出 会关闭所有监听的goroutine ...

  10. OpenCV入门：（四：混合两张图片）

    1. 原理 对两张图片使用如下公式可以得到两张图片的混合图片, 其中f0(x),f1(x)分别是图片1和图片2同一位置的像素点. 2. OpenCV中的AddWeight函数 函数和参数说明: ) s ...