如何让旧版浏览器支持新的 HTML5 标记

最编程 2024-05-05 22:50:23

...

HTML5学堂：开发永远和理论不相同，一旦考虑IE低端浏览器，所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说，是有利于网站SEO的，那么如果在高端浏览器中使用了新元素，应当如何让低端浏览器兼容呢？

如何让旧浏览器支持HTML5新增标签

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

书写的基本的HML代码：

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>让旧浏览器支持HTML5新增标签-独行冰海</title>
</head>
<body>
   <header>顶部内容</header>
   <nav>导航内容</nav>
   <article>文章内容</article>
   <footer>底部内容</footer>
</body>
</html>

Google等新浏览器中的表现：

IE6中的表现：

具体步骤

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

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

<script>
   document.createElement('header');
   document.createElement('nav');
   document.createElement('article');
   document.createElement('footer');
</script>

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

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

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

上一篇：网络安全工程师可以获得哪些证书？有哪些要求？

下一篇：软考中级网络工程师备考分享