语义化标签 

<!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, h4~h6很少用

        在页面中独占一行的元素称为块元素
    -->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>

    <!-- 
        hgroup标签:用来为标题分组,可以将一组相关的标题同时放入到hgroup
    -->
    <hgroup>
        <h1>回乡偶书二首</h1>
        <h2>算一</h2>
    </hgroup>

    <!--
        p标签:表示页面中的一个段落
        p也是一个块元素
    -->
    <p>在p标签中的内容就表示一个段落</p>

    <!--
        em标签:用于表示语气的加重
        在页面中不会独占一行的元素称为行内元素
    -->
    <p>今天的天气<em>真</em>不错</p>

    <!--
        strong标签:表示强调,重要内容,行内元素
    -->
    <p>你今天必须<strong>完成作业</strong></p>

    <!--
        blockquote标签:表示一个长引用,块元素
    -->
    鲁迅说:
    <blockquote>
        这句话我重来没有说过
    </blockquote>

    <!--
        q:表示一个短引用,行内元素
    -->
    子曰:<q>学而时习之,不亦说乎</q>

    <!--
        br:换行
    -->
    <p>你找周树人<br>关我鲁迅什么事</p>
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>布局标签(结构化语义标签)</title>
</head>
<body>
    <!--
        header: 表示网页的头部
        main: 表示网页的主体部分(一个网页中只会有一个main)
        footer: 表示网页的底部
        nav: 表示网页中的导航
        aside: 和主体相关的其他内容(侧边栏)
        article: 表示一个独立的文章
        section: 表示一个独立的区块,上边的标签都不能表示时使用section
        div: 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
        span: 行内元素,没有任何的语义,一般用于在网页中选中元素
    -->
    <header>头部</header>
    <main>主体部分</main>
    <footer>底部</footer>
    <nav>导航</nav>
    <aside>侧边栏</aside>
    <article>独立的文章</article>
    <section></section>
    <div></div>
    <span></span>
</body>
</html>
posted @ 2021-02-01 19:04  博客帅帅  阅读(91)  评论(0)    收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css