前端——语义化标签（一）

最新推荐文章于 2024-03-06 18:22:38 发布

翊小宸

最新推荐文章于 2024-03-06 18:22:38 发布

阅读量131

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45058912/article/details/118342566

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在网页中HTML专门用来负责网页的结构
        所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

        标题标签：
            h1~h6 一共有六级标题
            从h1~h6重要性递减，h1最重要，h6最不重要
            h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
            一般情况下标题标签只会使用到h1~h3，h4~h6很少用
            标题标签都是块元素
        在页面中独占一行的叫做块元素（block element） 
    -->

    <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>
    <p>在p标签中的内容就表示一个段落</p>

    <!-- 
        em标签用于表示语音语调的加重
        
        在页面中不会独占一行的元素称为行内元素（inline element，内联元素）
     -->
    <p>今天天气<em>真</em>不错！</p>
    今天天气<p>真</p>不错

    <!-- 
        strong表示强调，重要内容！
     -->
     <p>你今天必须要<strong>完成作业</strong>！</p>

    鲁迅说：
    <!-- blockquote表示一个长引用 -->
    <blockquote>
        这路上本没有路，走的多了便成了路。
    </blockquote>

    <!-- 
        q标签表示一个短引用 
        q标签为行内元素
    -->
    子曰：<q>学而时习之，不亦说乎？</q>
    
    <!-- br标签表示页面中的换行 -->
    <br>
    今天天气真不错
</body>
</html>