H5新增语义化标签

最新推荐文章于 2022-06-14 17:26:38 发布

CLAM-

最新推荐文章于 2022-06-14 17:26:38 发布

阅读量96

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_42306826/article/details/115048409

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

H5新增语义化标签

< header > 头部标签
< nav > 导航标签
< article >：内容标签
< section >：块级标签
< aside >：侧边栏标签
< footer >：尾部标签
注意：
这种语义化标准针对搜索引擎的
这些新标签可以在页面中多次使用
在 IE9中，需要把这些元素转化为块级元素
移动端更实用
案例：

header,
        nav {
            height: 120px;
            background-color: aquamarine;
            margin-top: 10px;
        }
        
        section {
            background-color: bisque;
        }
        
        article {
            width: 49%;
            height: 200px;
            background-color: aquamarine;
            margin-top: 10px;
            float: left;
        }
        
        aside {
            width: 49%;
            height: 200px;
            background-color: aquamarine;
            margin-top: 10px;
            float: left;
            margin-left: 2%;
        }
        
        .clear {
            clear: both;
        }
        
        footer {
            height: 120px;
            margin-top: 10px;
            background-color: aquamarine;
        }

<body>
    <header> header </header>
    <nav> nav </nav>
    <article> article
        <section> section </section>
    </article>
    <aside> aside </aside>
    <div class="clear"></div>
    <footer> footer </footer>
</body>