第二节：HTML常见标签和结构

在上一节课中，我们了解了HTML文档的基本结构和语法规则。本节课将继续深入，学习一些常见的HTML标签和元素，它们是构建网页内容的基础。我们将通过具体的实例来学习如何使用这些标签。

1. HTML基础结

HTML文档的结构是所有网页的基础，了解HTML文档的结构化写法对于后续的学习至关重要。每个HTML文档都由以下几个主要部分组成：

<!DOCTYPE html> <!-- 定义HTML5文档类型 -->
<html> <!-- 开始HTML文档 -->
  <head>
    <meta charset="UTF-8"> <!-- 设置字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口 -->
    <title>文档标题</title> <!-- 网页标题 -->
  </head>
  <body>
    <!-- 网页主体内容 -->
  </body>
</html>

在这个结构中：

  • <!DOCTYPE html>：定义文档类型，告诉浏览器这个页面是一个HTML5页面。

  • <html>：HTML文档的根元素。

  • <head>：包含文档的元数据（如标题、字符集、外部资源链接等）。

  • <body>：网页的主体部分，包含网页的可见内容。

2. 文本相关标签

HTML提供了多种文本标签来格式化文本内容。我们将介绍常用的几个文本标签。

 

  • 标题标签（<h1> - <h6>）：

    HTML有六个不同级别的标题标签，<h1>表示最高级别的标题，<h6>表示最低级别的标题。

    <h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
​

    段落标签（<p>）：

     

    <p>标签用于表示段落，它将文本分隔成块级内容。

    <p>这是一个段落。</p>
​

  • 强调标签（<strong> 和 <em>）：

    <strong>用于强调文字，通常表现为加粗，<em>用于突出强调，通常表现为斜体。

    <strong>这是加粗的文字</strong>
<em>这是斜体的文字</em>
​
  • 换行标签（<br>）：
这是第一行<br>
这是第二行

 

HTML+CSS