（12）H5新增语义化标签布局案例

最新推荐文章于 2023-02-25 16:45:00 发布

泽哥ins

最新推荐文章于 2023-02-25 16:45:00 发布

阅读量1.6k

点赞数 3

分类专栏： HTML5 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/qq_36213140/article/details/121394397

版权

HTML5 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、标签语义化

以前制作网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泽哥ins</title>
</head>
<body>
    <!-- 头部部分 -->
    <div class="header"></div>
    <!-- 导航部分 -->
    <div class="nav"></div>
    <!-- 内容部分 -->
    <div class="content"></div>
    <!-- 底部部分 -->
    <div class="footer"></div>
</body>
</html>

我们使用H5新增的语义化标签更能利于SEO优化，提高我们的搜索排名靠前的优势。

如下案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泽哥ins</title>
    <style>
        /*这样书写的目的是为了节省性能，性能优化，比使用*号性能更加好*/
        body,header,nav,main,article,aside,footer{
            margin: 0;
            padding: 0;
        }
        /*将H5标签转换成块级元素，作用是兼容IE9+浏览器*/
        header,nav,main,article,aside,footer{
            display: block;
        }
        header{
            width: 1000px;
            height: 100px;
            margin: 10px auto;
            background-color: #ff0000;
        }
        nav{
            width: 1000px;
            height: 60px;
            margin: 10px auto;
            background-color: #00ff00;
        }
        main{
            width: 1000px;
            height: 400px;
            margin: 10px auto;
            background-color: #0000ff;
            overflow: hidden;
        }
        main aside:first-child{
            float: left;
            width: 200px;
            height: 300px;
            margin-right: 10px;
            background-color: pink;
        }
        main article{
            float: left;
            width: 580px;
            height: 400px;
            margin-right: 10px;
            background-color: brown;
        }
        main aside:last-child{
            float: left;
            width: 200px;
            height: 300px;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
    <header>头部部分</header>
    <nav>导航栏</nav>
    <main>
        <aside>左侧边栏</aside>
        <article>中间主体部分</article>
        <aside>右侧边栏</aside>
    </main>
</body>
</html>

案例运行结果：