3. 文本与段落

在 HTML 中，文本和段落是构建网页内容的基础元素。理解如何使用这些元素能够帮助你创建结构化和易读的网页内容。本章节将详细介绍段落、标题、换行和水平线等基础知识。

3.1 段落 (<p>)

段落是网页中最基本的文本单元。HTML 使用 <p> 标签来表示段落。

示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>段落示例</title>
  5.   </head>
  6.   <body>
  7.     <p>这是一个段落。</p>
  8.     <p>这是另一个段落。</p>
  9.   </body>
  10. </html>

解释：

  • <p>：表示一个段落的开始。
  • </p>：表示段落的结束。
  • 段落之间会有默认的空行（margin）来区分不同的段落。

3.2 标题 (<h1> - <h6>)

标题用于定义内容的层次结构，从 <h1> 到 <h6> 分别表示从最重要到最不重要的标题。

示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>标题示例</title>
  5.   </head>
  6.   <body>
  7.     <h1>这是一级标题</h1>
  8.     <h2>这是二级标题</h2>
  9.     <h3>这是三级标题</h3>
  10.     <h4>这是四级标题</h4>
  11.     <h5>这是五级标题</h5>
  12.     <h6>这是六级标题</h6>
  13.   </body>
  14. </html>

解释：

  • <h1>：用于最重要的标题，通常一个页面只应该有一个 <h1> 标题。
  • <h2> - <h6>：用于次级标题，层次依次递减。

3.3 换行 (<br>)

<br> 标签用于在文本中插入换行，而不需要开启和关闭标签。

示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>换行示例</title>
  5.   </head>
  6.   <body>
  7.     <p>这是一个段落。<br />这是同一段落中的新一行。</p>
  8.   </body>
  9. </html>

解释：

  • <br>：表示换行，没有结束标签。

3.4 水平线 (<hr>)

<hr> 标签用于在页面中插入水平线，可以用于分割内容。

示例代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>水平线示例</title>
  5.   </head>
  6.   <body>
  7.     <p>这是一个段落。</p>
  8.     <hr />
  9.     <p>这是另一个段落，前面有一条水平线。</p>
  10.   </body>
  11. </html>

解释：

  • <hr>：表示水平线，没有结束标签，常用于视觉上分割内容。

小结

本章节介绍了 HTML 中的段落、标题、换行和水平线的基本用法。掌握这些基础元素能够帮助你构建具有良好结构和易读性的网页内容。在接下来的章节中，我们将进一步探讨列表与链接等内容。

练习题

  1. 创建一个包含三个段落的 HTML 文档，并在每个段落之间插入一个水平线。
  2. 创建一个包含多个标题的 HTML 文档，从 <h1> 到 <h6> 依次递减。
  3. 在同一个段落中使用 <br> 标签进行换行，并观察效果。

请在评论区分享你的练习结果和心得，我们可以一起讨论和改进！

通过这些练习，你可以更好地掌握段落、标题、换行和水平线的使用方法，为后续的学习打下坚实的基础。如果有任何疑问或需要进一步的指导，欢迎随时提出！