web前端结构_HTML入门(二)_常用标签之文本标签

本文链接：https://blog.csdn.net/qq_53760978/article/details/121431438

本文深入探讨HTML中的文本标签，包括标题标签（h1-h6）、段落标签（p）、换行标签（br）、加粗标签（strong, b）、倾斜标签（em, i）、删除线标签（del, s）和下划线标签（ins, u）。通过实例解析了这些标签的使用方法和效果，帮助初学者掌握网页文本样式控制。" 105908984,5648178,深入理解回溯算法：从理论到实践,"['回溯法', '前端算法', '组合总和', '全排列', 'javascript']

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

HTML常用标签（二）

文章目录

HTML常用标签（二）

1. 标签

1.1标签的使用方法

一般是使用< >包裹，如：< head >< /head >
一般是成对出现，标志开始标签和标志结束标签成对出现
如(标志开始)< head >< /head >(标志结束)
也有特殊情况的单标签，并不成对存在，如

1.1 标签的基本关系

有包含关系和嵌套关系两种
如下图：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body></body>
</html>

1.1.1 并列关系（兄弟）

简单来说，就是属于同一级别，并列存在，即不能将body标签写入head标签内
上图中 < head >< /head > 和< body >< /body >是并列关系

1.1.2 嵌套关系（父子）

简单来说，就是属于不同级别，A中可以包含B，body可以包含br，即在body里面可以写入br标签
上图中< head >< /head >和< title >< /title >是嵌套关系

2. 对文本进行操作的简单标签

快速阅览：

标题标签< h >< /h >
段落标签
换行标签
加粗标签 、
倾斜文字标签 、
给文字加上删除线标签 < del >< /del >、< s >< /s >
下划线标签 < ins >< /ins >、

2.1 标题标签 h

< h1 >< /h1 > …
不同级别标签重要性不一样 ，h1-h6 中 h1的级别最高
标题标签给标题加粗、且标题级别越高字体越大

<!-- 一共有六级标签
    h1-h6标签重要性依次降低 -->
    <h1>这是一级标签</h1>
    <h2>这是二级标签</h2>
    <h3>这是三级标签</h3>
    <h4>这是四级标签</h4>
    <h5>这是五级标签</h5>
    <h6>这是六级标签</h6>

示例图片

2.2 段落标签 p

html里面的文字不能直接使用换行符，实现文字的段落的换行，需要借助 p 标签实现段落的换行。
实现长段文字的自动换行，分段
段与段间间隙较宽

<p>有个鲁国人擅长编草鞋，他妻子擅长织白绢。
他想迁到越国去。友人对他说：“你到越国去，一定会贫穷的。”
“为什么？”</p>
<p>“草鞋，是用来穿着走路的，但越国人习惯于赤足走路；
白绢，是用来做帽子的，但越国人习惯于披头散发。
凭着你的长处，到用不到你的地方去，
这样，要使自己不贫穷，难道可能吗？”</p>

示例图片

2.3 换行标签 br

br 是一个单标签
换行标签换行与段落标签不一样，换行标签使用过后段与段之间没有较宽间隙

    有个鲁国人擅长编草鞋，他妻子擅长织白绢。<br/>他想迁到越国去。<br/>友人对他说：“你到越国去，一定会贫穷的。”“为什么？”“草鞋，是用来穿着走路的，但越国人习惯于赤足走路；白绢，是用来做帽子的，但越国人习惯于披头散发。<br/>凭着你的长处，到用不到你的地方去，这样，要使自己不贫穷，难道可能吗？”

示例图片

2.4 加粗标签 strong、b

strong标签和 b 标签的作用是一样的，都是对文本进行加粗
strong标签更为常用

<!-- 注<br/>为换行标签 -->
    难道可能吗<br/>
    <strong>难道可能吗</strong><br/>
    <b>难道可能吗</b>

示例图片

2.5 倾斜文字标签 em、i

em标签和 i 标签的作用是一样的，都是将文本倾斜
em标签更为常用

<!-- 注<br/>为换行标签 -->
    <em>你好漂亮</em><br/>
    <i>你好漂亮</i>

示例图片

2.6 给文字加上删除线标签 del、s

del 标签和 s 标签的作用是一样的，都是给文字加上删除线
del 标签更为常用

<!-- 注<br/>为换行标签 -->
   <del>urgly</del><br/>
   <s>urgly</s>

示例图片

2.7 下划线标签 ins、u

ins 标签和 u 标签的作用是一样的，都是给文字加上下划线
ins 标签更为常用

 <!-- 注<br/>为换行标签 -->
    <ins>今天的月亮很美</ins><br/>
    <u>今天的月亮很美</u>

示例图片