【3.1语义化标签】

chenshuangzhi

已于 2022-07-31 21:28:29 修改

阅读量397

点赞数

文章标签：前端 html javascript

于 2022-07-30 11:25:28 首次发布

本文链接：https://blog.youkuaiyun.com/chenshuangzhi/article/details/126045068

版权

本文详细介绍了HTML语义化标签的使用，包括标题标签h1~h6、块元素如p和hgroup，行内元素如em和strong，以及布局标签如header、main和footer等。强调了语义化在网页结构中的重要性，有助于提升网页的可读性和可访问性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

3.1语义化标签
3.2语义化标签
3.3语义化标签
3.1语义化标签

在网页中html专门用来负责网页的结构

所以在使用html标签时，应该关注的是标签的语义，而不是他的样式

标题标签：

        h1~h6 一共有6级标题

        从h1~h6重要想递减，h1最重要,h6最不重要

        h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1

        一般情况下标签只会使用到h1~h3,h4~h6很少用

在页面中独占一行的元素称为块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

p标签表示页面中的一个段落

p标签也是块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p标签</title>
</head>
<body>
    <p>在p标签中的内容就表示一个段落</p>
</body>
</html>

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hgroup>
        <h1>回乡偶书</h1>
        <h2>其一</h2>
        <p>少小离家老大回</p>
        <p>乡音无改鬓毛衰</p>
        <p>儿童相见不相识</p>
        <p>笑问客从何处来</p>
    </hgroup>
</body>
</html>

em标签用于表示语音语调的一个加重

在页面中不会独占一行的元素称为行内元素

em是行内元素

strong表示强调，重要内容！（注意区分和 em的区别)

em只是说明语气的变化 strong表示强调内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>今天的天气<em>真</em>不错</p>
    <p>今天你必须<strong>完成作业</strong></p>
</body>
</html>

blockquote 表示一个长引用（这是个块元素）

q表示一个短引用，会出现双引号引起来（是行内元素)

br标签表示页面中的换行，多少个br就换几行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    鲁迅说:<blockquote>这句话我是从来没有说过的!</blockquote>
    子曰<q>学而时习之,不亦说乎</q>
    <p>我说</p>
    <br><br><br>今天的天气真不错
</body>
</html>

3.2语义化标签

块元素(block element)

        -在网页中一般通过块元素来对页面进行布局

行内元素(inline element)

        -行内元素主要用于包裹文字

        -一般情况下会在块元素中放进行内元素，而不会在行内元素中放进块元素

        -块元素中基本上什么都能放

        -p元素中不能放任何的块元素(注意，tips)

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

        比如:

                标签写在根元素的外部

                p元素中嵌套了块元素

                根元素中出现了除head和body以外的子元素

<!-- 错误示范 -->
     <p>
         <h1>哈哈</h1>
     </p>
     <!-- 网页点击鼠标右键 点击检查有个elements可以查看浏览器的内存编码 -->

3.3语义化标签

布局标签(结构化语义标签)

header 表示网页的头部（一个网页可以有多个header）

main 表示网页的主体部分(一个页面中只会有一个main)

footer 表示网页的底部（一个网页中可以有多个footer）

nav 表示网页中的导航

aside 和我们主体相关的其他内容(侧边栏)

article 表示一个独立的文章

section 表示一个独立的区块,上边的标签都不能表示时使用section

div (块元素)没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素

（以上的都是块元素)

span 行内元素，没有任何的语义，一般用于在网页中选中文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <nav></nav>
    <aside></aside>
    <article></article>
    <section></section>
    <div>来咯</div>
    <span></span>
</body>
</html>

此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习