HTML5 基础

最新推荐文章于 2022-05-11 22:17:51 发布

gzlxing

最新推荐文章于 2022-05-11 22:17:51 发布

阅读量193

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/qq_40238154/article/details/78585913

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

语义化标签

语义化标签的优点

 1.具有可读性，2.没有css情况下，页面也能出现很好的内容结构和代码结构，3.搜索引擎可以更好的理解页面中各部分的关系，可以搜索到更快，更准确的信息。

语义化标签的布局

相关代码：
<!DICTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
         *{
             margin:0;
             pading:0;
             text-align:center;
         }
         header,footer{
            width: 100%;
            height: 35px;
            line-height: 35px;
            background-color: gray;
        }
        nav{
            width: 80%;
            height: 40px;
            background-color: #00c3f5;
            margin: 0 auto;
        }
        #content{
            width: 80%;
            height: 400px;
            line-height: 400px;
            margin: 0 auto;
        }
        article{
            width: 75%;
            height: 400px;
            background-color: #6fc749;
            float: left;
        }
        aside{
            width: 25%;
            height: 400px;
            background-color: #eb8f00;
            float: left;
        }
    <style>
</head>
<body>
<header> 头部 </header>
<nav>导航</nav>
<!-- 内容区-->
<section id="content">
   <article>
       <section>左边内容区</section>
   </article>
   <aside>侧边栏</aside>
</section>
<footer>底部</footer>
</body>
</html>