5.语义化标签

最新推荐文章于 2022-05-14 13:16:53 发布

Keeling1720

最新推荐文章于 2022-05-14 13:16:53 发布

阅读量180

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113765413

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签</title>
</head>
<body>
    <!--
        在网页中HTML专门用来负责网页的结构
            所以在使用HTML标签时，应该关注的是标签的语义，而不是他的样式

            标题标签：
                h1~h6 一共六级标题
                从h1到h6重要性递减，h1最重要，h6最不重要
                h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
                一般情况下，标题标签只是用h1~h3

            在页面中独占一行的元素成为块元素（block element）

     -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!--
        hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
    -->
    <hgroup>
        <h1>回乡偶书（二首）</h1>
        <h2>其二</h2>
        <h2>贺知章</h2>
    <!--p标签表示页面中的一个段落，p也是一个块元素-->
        <p>少小离家老大回</p>
        <p>乡音无改鬓毛衰</p>
        <p>儿童相见不相识</p>
        <p>笑问客从何处来</p>
    </hgroup>

    <!--
        em标签用于表示语音语调的一个加重（倾斜）,也可以用 <i>
        在页面中不会独占一行的元素称为行内元素(inline element)

    -->
    <p>今天天气<i>真</i>不错</p>

    <!--
        strong标签用于表示强调重要内容（加粗）,也可以用 <b>
    -->
    <p><strong>今天开始减肥!!!</strong></p>
    <p><b>不吃饱哪里有力气减肥</b></p>

    <!--blockquote长引用，独占一行，在前面加一段距离-->
    鲁迅说：
    <blockquote>
        周树人便是本人了。
    </blockquote>

    <!-- q是一个短引用，不独占一行-->
    子曰：<q>君子好成人之美</q>

    <!--br标签表示换行-->
    <br>
    <br>
    这里换了多少行呀？
</body>
</html>

下边的这些可以先看看，后边用到的时候再学就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义化标签2</title>
</head>
<body>
    <!--
        布局标签（结构化语义标签）

        header表示网页的头部（可以有多个）
        main  表示网页的主体部分（一个页面中只能有一个）
        footer表示网页的底部
        nav   表示网页中的导航
        aside 表示和主题相关的其他内容（侧边栏）
        article表示一个独立的文章
        section表示一个独立的分区，上边的标签都无法表示时就用section

        div 没有语义，用来表示一个区块，目前来讲，div是我们主要的布局元素
        span行内元素，没有语义，一般用于在网页中选中文字
    -->
</body>
</html>