介绍
在本实验中,你将学习如何使用 HTML <br>
标签在网页上创建换行。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在本实验中,你将学习如何使用 HTML <br>
标签在网页上创建换行。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
创建一个名为 index.html
的新文件,并添加基本的 HTML 结构。
<!doctype html>
<html>
<head>
<title>Line Breaks with HTML</title>
</head>
<body></body>
</html>
在你的 HTML 文档的 body 部分添加一些文本。
<body>
<h1>Welcome to my webpage!</h1>
<p>This is some text on my webpage. I want to create a line break here:</p>
<p>But how do I do it?</p>
</body>
<br>
标签实现换行为了在两段文本之间添加换行,可以在第一个段落标签后添加 <br>
标签。
<body>
<h1>Welcome to my webpage!</h1>
<p>This is some text on my webpage. I want to create a line break here:</p>
<br />
<p>But how do I do it?</p>
</body>
为了自定义换行创建的间距大小,你可以使用 CSS margin。将以下 CSS 代码添加到你的 HTML 文件中,以在每个换行上方和下方创建 30px 的间距。
<head>
<title>Line Breaks with HTML</title>
<style>
br {
margin-top: 30px;
margin-bottom: 30px;
}
</style>
</head>
保存你的 index.html
文件并在浏览器中打开,查看你创建的换行效果。
HTML 的 <br>
标签是一种在网页上创建换行的简单方法。你可以用它来在文本段落之间添加间距,或者在任何需要换行的地方使用。通过 CSS margin,可以轻松自定义换行创建的间距大小。