H5-通过语意化标签，实现上中下页面样式

最新推荐文章于 2021-08-10 10:00:37 发布

xqiitan

最新推荐文章于 2021-08-10 10:00:37 发布

阅读量496

点赞数 1

分类专栏： h5

本文链接：https://blog.csdn.net/xqiitan/article/details/87452006

版权

h5 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

HTML5学习：

1- 主流的浏览器，都支持h5。IE9及以上支持h5，但是ie8及以下不支持h5.

ie8中，不认识这些语义标签，所以无法解析这些标签，也就意味着缩写的样式实效。

2- 改变了用户与文档的交互方式：多媒体，video audio。canvas

3- 增加了其他的新特性：语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡，动画）

4- 相对于h4:

抛弃了一些不合理不常用的标记和属性；新增了一些标记和属性—表单

h5的网页结构代码更简洁。

H5新增语义标签：

标签名。作用

nav 表示导航

header 表示页眉

footer 表示页脚

main 文档主要内容

article 文章

aside 主题内容之外

<style>
    header{
        width: 100%;
        height: 100px;
        background-color: #ff0000;
    }
    nav{
        width: 100%;
        height: 28px;
        background-color: #00ffff;
    }
    /*IE9:行级元素在设置宽度的时候失效，IE8完全不支持语义标签（不支持h5）*/
    main{
        /*将行级元素转换成块级元素*/
        display:block;
        width: 100%;
        height: 500px;
        background-color: #00ff0f;
    }
    main > article{
        width: 80%;
        height: 100%;
        background-color: yellow;
        float:left;
    }
    main > aside{
        width: 20%;float:right;
        height: 100%;
        background-color: green;
    }
    footer{
        width: 100%;
        height: 40px;
        background-color: #ccc;
    }
</style>

<body>
<header>头部</header>
<nav>导航</nav>
<main>
    <article>左边</article>
    <aside>右边</aside>
</main>
<footer>底部</footer>

方式1: 手动创建标签

兼容ie8，可以通过手动创建标签的方式。支持H5语义话标签。

document.createElement("header"); // 默认标签是行级元素，需要手动改成块级元素。

document.createElement("nav");

document.createElement("main");

</script>

方式二：引入第三方插件

// html5shiv.min.js: 默认情况下，ie8及以下不支持h5，引入这个文件就可以做到兼容。