HTML段落标签、换行标签、文本格式化标签与水平线标签

news2024/11/24 19:51:33

HTML段落标签

HTML换行标签

HTML格式化标签

加粗标签

倾斜标签

删除线标签

下划线标签

HTML水平线标签

HTML段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，标签用于定义段落，它可以将整个网页分为若干个段落。

为文本分段可以使用段落标签 包裹需要放在一段的文字

<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/>已经换行

示例代码：

<!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中，可以使用下面的标签实现对应的属性，并且这些标签可以嵌套使用

加粗:  标签和  标签
倾斜:  标签和  标签
删除线: <del> 标签和 <s> 标签
下划线: <ins> 标签和  标签

📌

在四个格式化标签中虽然每一类的第一个标签和第二个标签实现的效果相同，但是为了更加强调文本效果，提高代码可读性，推荐用第一种标签

加粗标签

<!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>

效果如下：