首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签.
接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.
对于代码位置,我们需要注意,要将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>