HTML中常用的标签_html b标签-CSDN博客

本文链接：https://blog.csdn.net/HaoJJJJJ/article/details/132024863

本文介绍了HTML中用于文本格式化的常见标签，如strong和b用于加粗，i和em实现斜体，br进行换行，hr创建水平分隔线，p定义段落，以及sub、sup、pre和span标签的用法。此外，还讲解了hn标题标签和div块级标签的作用。

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

1. strong/b等标签

strong和b标签是加粗字体

i和em标签是斜体

<!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>
    正常的字体
    <strong>我是一个加粗的效果</strong>
    <b>我也是一个加粗的效果</b>
    <i>我是一个斜体</i>
    <em>这也是一个斜体</em>
</body>
</html>

注释：解释说明的文字

<body>
    <!--这是注释-->
    正常的字体
    <!-- <strong>我是一个加粗的效果</strong>
    <b>我也是一个加粗的效果</b>
    <i>我是一个斜体</i>
    <em>这也是一个斜体</em> -->
</body>

2. br标签和hr标签

br标签是用来换行———单标签

hr标签是水平分割线————单标签设置长度with属性 (px %) 设置粗细size属性

<!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>
    <!--这是注释-->
    正常的字体
    <strong>我是一个加粗的效果</strong>
    <b>我也是一个加粗的效果</b>
    <i>我是一个斜体</i>
    <em>这也是一个斜体</em><br>
    <hr width="800px" size="10">
    受芯片供应不足影响，传闻南北大众汽车近期陷入停产。尽管大众汽车集团（中国）已公开解释，这只是短期的供给紧张，情况没有传闻中严重，
    已经与总部、相关供应商展开协调工作，但这并未完全打消公众的疑虑。
</body>
</html>

3. p标签

段落标签

两个相邻的p标签中间会空一行

align属性位置 left center right

font标签———设置字体

color属性：英文单词 red blue green pink

#rrggbb——三原色（red green blue）

<!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>
    <!--这是注释-->
    正常的字体
    <strong>我是一个加粗的效果</strong>
    <b>我也是一个加粗的效果</b>
    <i>我是一个斜体</i>
    <em>这也是一个斜体</em><br>
    <hr width="800px" size="10">

    <p align="center">
        受芯片供应不足影响，传闻南北大众汽车近期陷入停产。
    </p>
    <font color="red">
        受芯片供应不足影响，传闻南北大众汽车近期陷入停产。
    </font>
    <p>
        <font color="#006400">受芯片供应不足影响，传闻南北大众汽车近期陷入停产。</font>
    </p>
</body>
</html>

4. sub、sup、pre、span标签

sub —— 下标标签

sup —— 商标标签

pre —— 用来原样输出内容

span —— 修饰文本的标签 —— 备注的行内标签

<!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>
    <p>
        二的三次方：2 <sup>3</sup><br>
        数组a的下标2：a[<sub>2</sub>]<br>
        <pre>
            白毛浮绿水，
            红掌拨清波。
        </pre>
        <pre>
            受芯片供应不足影响，传闻南北大众汽车近期陷入停产。尽管大众汽车集团（中国）已公开解释，这只是短期的供给紧张，情况没有传闻中严重，
    已经与总部、相关供应商展开协调工作，但这并未完全打消公众的疑虑。
            受芯片供应不足影响，传闻南北大众汽车近期陷入停产。尽管大众汽车集团（中国）已公开解释，这只是短期的供给紧张，情况没有传闻中严重，
    已经与总部、相关供应商展开协调工作，但这并未完全打消公众的疑虑。
        </pre>
        <span style="color:firebrick">
            这是一个标准的行内标签！！！！！
        </span>
    </p>
</body>
</html>

5. hn、div标签

hn标签指的是h1 h2 h3 h4 h5 h6 —— 标题标签n的取值只有1-6字体越来越小加粗的效果

div标准的块级标签 —— 盒子布局

块级标签：独占一行，自动换行 div hn hr p

行内标签：不自动换行，除非这一行的文本内容铺面整个页面才会换行 span

<!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>
    <h1>这是标题</h1>
    <h2>这是标题</h2>
    <h3>这是标题</h3>
    <h4>这是标题</h4>
    <h5>这是标题</h5>
    <h6>这是标题</h6>
    <div>
        这是一个div
    </div>
    <div>这是一个div</div>
    <span>这是一个标准的行内标签</span>
    <span>这是一个标准的行内标签</span>
</body>
</html>