面试总结（2）:H5新标签的兼容写法

最新推荐文章于 2022-05-21 17:34:43 发布

小仙女儿

最新推荐文章于 2022-05-21 17:34:43 发布

阅读量406

点赞数

分类专栏：面试总结文章标签：面试 h5 兼容

本文链接：https://blog.csdn.net/zula1994/article/details/76150883

版权

面试总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前段时间面试。。被问到了H5新标签的兼容写法。。一脸懵逼。。现在做个笔记。。避免下次被问到同样的问题！！

方法一：

自己创建标签。。把H5新标签创建出来。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script>
        document.createElement(‘header‘);
        document.createElement(‘footer‘);
    </script>
    <style>
        header, footer{display: block; width:50px; height: 50px; background-color: #f00; display:block;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>

</body>
</html>

创建出来的元素是内联元素，所以要在样式文件里面写上‘display:block;’

方法二：

引用js库 - - - html5shiv.js

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
    $('#header').css('color','#f00');
    $('#footer').css({'width':'100px','height':'100px',
                      'border':'1px solid #ddd',
                      'backgroundColor':'#f00'});
    $('#header').html('我是一只小小鸟');
</script>

</body>
</html>

面试总结第二弹完成~~ 撒花 O(∩_∩)O~~

小仙女儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试总结（2）:H5新标签的兼容写法

HTML5新的语义标签尽管有很多的好处，但是在低版本的老IE浏览器中还是存在兼容性问题的，常常让人感到头疼，到底是大胆的使用新标签还是使用传统的大量的DIV无义标签？今天就简单的看看H5新标签的兼容性处理方式。
复制链接

扫一扫