HTML&CSS基础学习笔记1.21-语义化标签

本文链接：https://blog.csdn.net/octopole/article/details/52116454

语义化标签

“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。

HTML 标签语义化是让大家直观的认识标签和属性的用途和作用，很明显<hx>看起来很像标题，因为拥有粗体和较大的字号。<strong>，<em>用来区别于其他文字，起到了强调的作用。

HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签，这样一来，不管是谁都能看懂这块内容是什么。

例如:

<main>标签：表示文档中的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

查看下面这两段html和css代码，体会下里面的许多语义化的标签吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>语义化标签</title>
</head>
<body>
<!--页眉-->
<header>
    <!-- 导航 -->
    <nav><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li></ul></nav>
</header>
<!-- 主体 -->
<main>
    <!-- 文章 -->
    <article>
        <h1>大标题</h1>
        <!-- 节 -->
        <section>
            <h3>标题1</h3>
            <p>文章正文</p>
        </section>
        <!-- 节 -->
        <section>
            <h3>标题2</h3>
            <p>文章正文</p>
        </section>
        <!-- 节 -->
        <section>
            <h3>标题3</h3>
            <p>文章正文</p>
        </section>
    </article>
</main>
<!-- 与页面主体无关的内容 -->
<aside>
    可显示广告、引用、侧边栏
</aside>
<!-- 页脚 -->
<footer>
    <!-- 地址 -->
    <address>
        显示底部地址
    </address>
</footer>
</body>
</html>

body {
    text-align: center;
}

ul {
    list-style-type: none;
}

ul li {
    display: inline-block;
    margin-right: 20px;
}

article {
    margin-top: 50px;
}

section {
    margin: 30px 0 50px;
}

aside {
    position: fixed;
    top: 30%;
    width: 30%;
    padding: 10px;
    color: white;
    background-color: rgba(0, 0, 0, .3);
}

footer {
    height: 10%;
}

更多学习内容，就在码芽网http://www.mayacoder.com/lesson/index

部分页面显示的结果如下：