HTML5

最新推荐文章于 2023-12-28 22:56:18 发布

Silent Land

最新推荐文章于 2023-12-28 22:56:18 发布

阅读量612

点赞数

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.csdn.net/weixin_44757417/article/details/105571940

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

了解HTML5

h5并不是新的语言，而是HTML语言的第五次重大修改一版本。
支持：所有的浏览器都支持h5(chrom、firfox、safari…)。IE9及以上支持h5（有选择的支持，并不是全部支持），但是IE8及以下不支持h5。
改变了用户与文档的交互方式：多媒体：video,audio,canvas。
增加了其他的新特性：语义特性本地储存特性，网页多媒体，二维三维，特效（过滤，动画）。
相对于h4:
1. 进步：抛弃了一些不合理不常用的标记和属性
2. 新增了一些标记和属性–表单
3. 从代码的角度而言，h5的网页结构代码更简洁


<!--html:5+tab-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
hello
</body>
</html>
<!--html:4s+tab-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>
<!--html:xs+tab-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

H5语义标签

标签提升了可访问性和SEO的优化，还有利于维护性，对于一些机器的解析也有很大优点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        nav{
            width: 100%;
            height: 36px;
            background-color: green;
        }
       
        main{
       
            width: 100%;
            height: 500px;
            background-color: #ccc;
        }
        article{
            width: 80%;
            height: 100%;
            background-color: antiquewhite;
            float: left;
        }
        aside{
            width: 20%;
            height: 100%;
            background-color: brown;
            float: right;
        }
        footer{
            width:100% ;
            height: 80px;
            background-color: blue;
        }
    </style>
</head>
<body>

<!--</html><div class="header"></div>
<div class="nav"></div>
<div class="mainContent">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>-->
<header>头部</header>
<nav>导航</nav>
<main>
    <article>左边</article>
    <aside>右边</aside>
</main>
<footer>底部</footer>
</body>

html5语义兼容问题

 main{
            width: 100%;
            height: 500px;
            background-color: #ccc;
        }
        article{
            width: 80%;
            height: 100%;
            background-color: antiquewhite;
            float: left;
        }
        aside{
            width: 20%;
            height: 100%;
            background-color: brown;
            float: right;
        }

IE运行结果
在这里插入图片描述

/*行级元素在设置宽度的时候是失效的*/
        main{
            /*IE9:将行级元素转换为块级元素
              IE8:完全不支持语义标签（不支持h5）
*/
            display: block;
            width: 100%;
            height: 500px;
            background-color: #ccc;
        }
        article{
            width: 80%;
            height: 100%;
            background-color: antiquewhite;
            float: left;
        }
        main>aside{
            width: 20%;
            height: 100%;
            background-color: brown;
            float: right;
        }

在这里插入图片描述

IE8完全不支持语义标签（不支持h5）：在IE8中，它不认识语义标签，所以无法解析这些标签，也就意味着所写的标签无效

解决方法

方法一：
手动创建标签，将行级元素转换为块级元素


<script>
        document.createElement("header");
        document.createElement("nav");
        document.createElement("main");
        document.createElement("article");
        document.createElement("aside");
        document.createElement("footer");

    </script>
   display: block;//转换为块级元素

方法二：引入第三方插件

<script src="js/html5shiv.min.js"></script>

Silent Land

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录