如何让旧浏览器支持HTML5新标签
2024-08-24 05:22:32
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>
最新文章
- MicroERP开发技术分享:技术选型
- linux 驱动程序中断号的申请
- 精彩的解释CAP理论的文章
- [C#]二维码(QR Code)生成与解析
- #include<;unistd.h>;存在linux中,含有系统服务的函数
- Java并发,看到了,就记录下呗
- Js中的数据属性和访问器属性
- 体验mssql-cli
- 在echarts3中使用字符云
- Codeforces #541 (Div2) - E. String Multiplication(动态规划)
- 虚拟机配置Linux上网环境
- btcpool之Stratum协议
- 在Html页面中调用ajax代码
- Nancy.Net之旅-探索模块
- SQL中on条件与where条件的区别
- 接口app 接口中上传 图片
- 20169207《linux内核原理与分析》第二周作业
- 玄武短信接口和移动MAS短信接口的API封装
- 1049: 贝贝的车牌问题(car)
- 【Unity】4.7 摄像机