zoukankan      html  css  js  c++  java
  • 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签。自己最近在写响应式布局的范例,里面也使用到了header等标签。还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签。

    书写的基本的HTML代码:

     1 <!doctype html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>让旧浏览器支持HTML5新增标签-独行冰海</title>
     6 </head>
     7 <body>
     8     <header>顶部内容</header>
     9     <nav>导航内容</nav>
    10     <article>文章内容</article>
    11     <footer>底部内容</footer>
    12 </body>
    13 </html>

    Google等新浏览器中的表现:

    如何让旧浏览器支持HTML5新标签 - 独行冰海 - 独行冰海

     IE6中的表现:

    如何让旧浏览器支持HTML5新标签 - 独行冰海 - 独行冰海

     

    其实,让旧浏览器支持HTML5新增标签,听上去很难,操作起来很简单,只需要你懂DOM操作就足够了。

    首先我们使用js进行标签的创建,为HTML文件创建我们需要的这几个HTML5标签。

    1 <script>
    2     document.createElement('header');
    3     document.createElement('nav');
    4     document.createElement('article');
    5     document.createElement('footer');
    6 </script>

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

    1 <style>
    2     article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
    3      display: block;
    4     }
    5 </style>

    对于代码位置,我们需要注意,要将script标签放置到head中,而不是body的后面,这是因为,浏览器从上到下进行代码的执行与解析,在已经渲染之后再执行js就没有任何意义和价值了。

    简而言之,就是自己创建一个标签,标签名字为html5的新标签,再对创建的标签添加样式。

    (article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary)

  • 相关阅读:
    Java学习第一周汇报
    Java暑期学习第八天日报
    Java暑期学习第十天日报
    Java暑期学习第十二天日报
    Java学习第二周汇报
    Java暑期学习第九天日报
    0006 列表(ul、ol、dl)
    0015 行高那些事:lineheight
    0016 CSS 背景:background
    HTTP中GET与POST的区别 99%的错误认识
  • 原文地址:https://www.cnblogs.com/pm-dongjian/p/5022119.html
Copyright © 2011-2022 走看看