HTML 换行

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,你将学习如何使用 HTML <br> 标签在网页上创建换行。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-70715{{"`HTML 换行`"}} html/head_elems -.-> lab-70715{{"`HTML 换行`"}} html/text_head -.-> lab-70715{{"`HTML 换行`"}} html/para_br -.-> lab-70715{{"`HTML 换行`"}} html/doc_flow -.-> lab-70715{{"`HTML 换行`"}} end

创建一个 HTML 文件

创建一个名为 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 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,可以轻松自定义换行创建的间距大小。

您可能感兴趣的其他 HTML 教程