前端学习---HTML---文本标签

文章目录

1、标题标签
2、段落标签
3、文本格式化标签
引用与缩写标签
5、换行与水平线
6、语义化文本容器
7、其他文本相关标签

1、标题标签

内容：(<h1> 到 <h6>)

作用：定义标题，按重要性分级（<h1> 最大，<h6> 最小）。

示例：

代码加入在body标签中间。

bash 复制代码

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

效果图：

特点：

默认加粗并带有上下边距。

搜索引擎会优先抓取 <h1> 内容。

2、段落标签

内容：(<p>)

示例：

bash 复制代码

    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>

效果图：

特点：

浏览器会自动在段落前后添加空白行。

3、文本格式化标签

3.1、加粗文本

<strong> 或 <b>：加粗文本。

<strong> 表示重要性（语义化），<b> 仅视觉加粗。

示例：

bash 复制代码

<strong>重要内容</strong> 或 <b>加粗文本</b>

效果图：

3.2、斜体文本

<em> 或 <i>：斜体文本。

<em> 表示强调（语义化），<i> 仅视觉斜体。

示例：

bash 复制代码

    <p>字体非斜体1</p>
    <p>字体非斜体2</p>
    <p><i>字体斜体1</i></p>
    <p><em>字体斜体2</em></p>

效果图：

3.3、下划线文本

++：下划线文本++

示例：

bash 复制代码

    <p>非下划线文本</p>
    <p><u>下划线文本</u></p>

效果图：

3.4、删除线文本

<s> 或 <del> 或 <strike>：删除线文本。

<s> 仅视觉效果，<del> 表示文档中已删除的内容。

示例：

bash 复制代码

    <p>非删除线文本</p>
    <p><s>删除线文本1</s></p>
    <p><strike>删除线文本2</strike></p> 
    <p><del>删除线文本3</del></p>

效果图：

3.5、插入线文本

<ins>：插入线文本（表示新增内容）。

示例：

bash 复制代码

    <p>非插入线文本</p> 
    <p><ins>插入线文本</ins></p>

效果图：

3.6、上标和下标

<sup> 和 <sub>：上标和下标。

示例：

bash 复制代码

    <p>非上标、下标文本</p> 
    <p>上标文本<sup>上标</sup></p>
    <p>下标文本<sub>下标</sub> </p>

效果图：

3.7、高亮文本

<mark>：高亮文本（背景黄色）。

示例：

bash 复制代码

    <p>非高亮文本</p>
    <p><mark>高亮文本</mark></p>

效果图：

3.8、小号文本

示例：

bash 复制代码

    <p>非小号文本</p>
    <p><small>小号文本</small></p>

效果图：

3.9、内联代码片段

<code>：内联代码片段。

示例：

bash 复制代码

<p><code>print("Hello, world!")</code></p>

效果图：

3.10、预格式化文本

<pre>：预格式化文本（保留空格和换行）。

示例：

bash 复制代码

    <p><pre>
    function add(a, b) {
        return a + b;
    }
    </pre></p>

引用与缩写标签

1、<blockquote>：块级引用（通常缩进显示）。

2、<q>：行内引用（自动添加引号）。

3、<abbr>：缩写或首字母缩写（配合 title 属性显示全称）。

4、<cite>：引用来源（如书名、文章名）。

代码示例：

bash 复制代码

    <blockquote>这是一段引用内容。</blockquote>
    <q>这是一句引用。</q>
    <abbr title="HyperText Markup Language">HTML</abbr>
    <cite>《HTML5权威指南》</cite>

效果图：

5、换行与水平线

1、<br>：强制换行。

2、<hr>：水平分割线（主题分隔）。

代码示例：

bash 复制代码

    第一行<br>第二行
    <p>第一部分</p>
    <hr>
    <p>第二部分</p>

效果图：

6、语义化文本容器

1、<span>：行内容器（无默认样式，用于CSS或JS操作）。

2、<div>：块级容器（类似，但用于块级元素）。

代码示例：

bash 复制代码

    <span style="color: red;">红色文本</span>
    <div class="header">页眉内容</div>

效果图：

7、其他文本相关标签

1、<time>：定义日期或时间（配合 datetime 属性）。

2、<kbd>：键盘输入（如快捷键）。

3、<var>：定义变量（数学或编程中）。

代码示例：

bash 复制代码

    <time datetime="2023-10-01">国庆节</time>
    按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存。
    <var>x</var> = 10

效果图：