HTML段落标签、换行标签、文本格式化标签与水平线标签
目录
HTML段落标签
HTML换行标签
HTML格式化标签
加粗标签
倾斜标签
删除线标签
下划线标签
HTML水平线标签
HTML段落标签
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
为文本分段可以使用段落标签<p> </p>包裹需要放在一段的文字
<p>这是第一个段落</p>
<p>这是第二个段落</p>注意：
- 在网页界面显示时，段落和段落之间存在一个较大的空隙
- 当前的
<p>标签描述的段落，前面还没有缩进 - 文本在一个段落中会根据浏览器窗口的大小自动换行
- HTML 内容首尾处的换行, 空格均无效
- 在 HTML 中文字之间输入的多个空格只相当于一个空格.
- HTML中直接输入换行不会真的换行，而是相当于一个空格
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>段落标签</title>
</head>
<body><p>这是第一个段落</p>当前段落内容第二行内容<p>这是第二个段落</p>当前段落内容第二行内容
</body>
</html>效果如下：
HTML换行标签
在HTML中，常见用<br/>标签表示换行，也可以用<br>标签，但是不规范
📌
注意<br/>标签为单标签
这是第一句话，接下来需要换行<br/>已经换行示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>段落标签</title>
</head>
<body>这是第一句话，接下来需要换行<br/>已经换行
</body>
</html>效果如下：
HTML格式化标签
在HTML中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用
- 加粗:
<strong>标签 和<b>标签 - 倾斜:
<em>标签 和<i>标签 - 删除线:
<del>标签 和<s>标签 - 下划线:
<ins>标签 和<u>标签
📌
在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签
加粗标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>粗体测试</title>
</head>
<body><h1>下面是加粗文本和非加粗文本的对比</h1><strong>这是一个加粗文本</strong><br>这是一个普通文本
</body>
</html>效果如下：
倾斜标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>倾斜标签测试</title>
</head>
<body><h1>下面是倾斜文本和非倾斜文本对比</h1><em>这是一个倾斜的文本</em><br>这是一个普通文本
</body>
</html>效果如下：
删除线标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>删除线标签测试</title>
</head>
<body><h1>下面是有删除线和没有删除线的文本对比</h1><del>这是有删除线的文本</del><br>这是一个普通文本
</body>
</html>效果如下：
下划线标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下划线标签测试</title>
</head>
<body><h1>下面是有下划线的文本和无下划线的文本对比</h1><ins>这是一个有下划线的文本</ins><br/>这是一个普通文本
</body>
</html>效果如下：
HTML水平线标签
在HTML中，使用<hr>标签可以在网页上实现水平分割线的效果
📌
注意，水平分割线标签为单标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平线标签测试</title>
</head>
<body><h1>当前标签下面的横线为水平线</h1><hr>这是分割线下方的测试文本
</body>
</html>效果如下：
