HTML语义标签和结构标签详解

文章目录

实体标签
meta标签
语义化标签
结构化语义化标签
列表标签

在学习标签时我们应该注意的是他的语义，而不是他的显示效果，因为显示效果是在css中进行编写的，我们一定要做到分工明确清晰

实体标签

在网页中编写代码时，我们有时会使用一些特殊的符号，如多个连续的空格、大于号和小于号，但他们同时也代表着一些其他的意思，如果不加以区分就会产生错误，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    a<b>c
</body>
</html>

在这里插入图片描述

我们本意是想要在网页中输出a<b>c这个语句，却发现只输出了ac，其中c被加粗了，这是因为浏览器蒋<b>看成了一个标签，他的作用是加粗，所以不会输出<b>这个语句，于是我们引入了实体标签的概念。为了能够打出‘<’符号和‘>’符号，我们用>代表‘>’符号，用<代表‘<’符号。
另外，在我们写多个空格时，浏览器最多只会显示出一个空格，这时我们就需要用 来代替空格，以显示出多个空格，除了以上介绍的实体标签外还有很多的实体标签，例如版权符号©等等，这就需要读者自己去学习了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a&lt;b&gt;c
</body>
</html>

在这里插入图片描述

meta标签

meta标签主要用于设置网页中的一些元数据，元数据用户是看不到的
meta标签的属性包括：

charset	指定网页的字符集（编码）
name	指定数据的名称
content	指定的数据内容
http-equiv	将页面重新定向到另一个网站

其中charset属性的值为各种编码：utf-8、GBK等

其中name属性的值可为：

keywords	表示网站的关键字，可以指定多个关键字
description	用于指定网站的描述

keywords是搜索引擎主要的搜索对象
description中的内容会出现在超链接上的文字显示

content属性的值为各种相应的内容

http-equiv的属性值有refresh，同时他的content中第一个数字代表过去多少时间进行网页的跳转（单位为秒），url后的内容为跳转网页的地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <meta name="keywords" content="网站,建站,前端">
    <meta name="description" content="这是一个分享前端学习经验的网站">
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</body>
</html>

此效果为过三秒后自动跳转到百度首页

语义化标签

语义化标签有很多，这里我们随便讲几个。
<em>标签，他的作用是起到语调加重的作用，他是一个行内元素
<strong>标签，他的作用是表示强调，为重要内容
<blockquote>标签，他的作用是长引用
<q>标签，他的作用是短引用
<br>标签，他的作用是表示页面中的换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>今天天气<em>真</em>不错</p>
    <br>
    <br>
    <p>鲁迅曾经说过：<blockquote>世上本没有路，走的人多了也就成了路</blockquote></p>
    <p>子曰：<q>三人行则必有我师焉</q></p>
    <p>你是<strong>我的神</strong></p>
</body>
</html>

在这里插入图片描述

结构化语义化标签

<header>表示网页的头部
<main>表示网页的主体部分（一个页面只会有一个main）
<footer>表示网页的底部
<nav>表示网页中的导航
<aside>和主体相关的其他内容（侧边栏）
<article>表示一个独立的文章
<section>表示一个独立的区块
一般上面的都不怎么用，主要使用下面两个标签
<div>没有语义，表示一个区块，现在主要的布局元素
<span>行内元素，没有语义，用于在网页中选中文字

列表标签

我们的列表分为三类：
无序列表：使用ul标签创建无序列表，使用li表示列表项
有序列表：使用ol标签创建有序列表，使用li表示列表项
定义列表：使用dl标签创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释
注意：列表之间可以相互嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>
    
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构</dd>
    </dl>

    <ul>
        <li>a</li>
        <ul>
            <li>aa</li>
        </ul>
    </ul>
</body>
</html>

在这里插入图片描述