HTML元素和列表使用指南

# 1. HTML基础知识回顾

## 1.1 HTML概述
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它使用标签来描述网页的结构和内容，并通过浏览器渲染成可视化页面。本节将回顾HTML的基本概念和作用。

## 1.2 HTML元素和标签
HTML文档由一系列HTML元素组成。每个HTML元素由开始标签、内容和结束标签组成，标签是元素的主要标识符。本节将介绍HTML的元素和标签的使用规则。

## 1.3 HTML文档结构
HTML文档包括以下几个主要部分：`<!DOCTYPE>`声明、`html`标签、`head`标签和`body`标签。本节将详细介绍HTML文档的结构和每个部分的作用。

该章节包含了HTML基础知识的回顾内容，并介绍了HTML元素和标签的使用规则以及HTML文档的结构。下一章节将进一步介绍HTML元素类型及常用元素。

# 2. HTML元素类型及常用元素介绍

### 2.1 块级元素

在HTML中，块级元素以块的形式显示在页面上，默认情况下会独占一行。常见的块级元素包括：

- `<div>`: 用于定义文档中的一个区块，可以用于布局和样式的控制。
- `<p>`: 用于定义段落，会在段落前后添加相应的空白。
- `<h1>` to `<h6>`: 用于定义标题，数字越小，字号越大。
- `<ul>`: 用于创建无序列表。
- `<ol>`: 用于创建有序列表。
- `<table>`: 用于创建表格。

示例代码：

<div>
  <h1>Welcome to my website!</h1>
  <p>This is the homepage.</p>
</div>

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

### 2.2 行内元素

行内元素不会独占一行，可以与其他元素在同一行显示。常见的行内元素包括：

- `<span>`: 用于对文本的部分内容进行样式上的控制。
- `<a>`: 用于创建链接。
- `<strong>`: 用于呈现粗体文本。
- `<em>`: 用于呈现斜体文本。
- `<img>`: 用于插入图像。

示例代码：

<p>Visit our <a href="https://example.com">website</a> for more information.</p>

<p>Remember to <strong>save</strong> your changes.</p>

<p><span style="color: red;">Attention!</span> This is an important message.</p>

<p><em>Italicized text</em> is often used for emphasis.</p>

<img src="image.jpg" alt="Description of the image">

### 2.3 嵌套元素

在HTML中，元素可以相互嵌套，形成更复杂的结构。例如，可以将一个块级元素嵌套在另一个块级元素中，或将一个行内元素嵌套在另一个行内元素中。

示例代码：

<div>
  <h1>Welcome to my <em>awesome</em> website</h1>
  <p>Here you can find <a href="https://example.com">useful information</a>.</p>
</div>

<span>
  This is a <strong>bold</strong> and <em>italicized</em> text.
</span>

### 2.4 常用元素示例

除了上述介绍的元素外，还有许多其他常用的HTML元素。下面是其中一些示例：

- `<form>`: 用于创建表单，常见的表单元素包括输入字段（`<input>`）、按钮（`<button>`）和文本区域（`<textarea>`）等。
- `<nav>`: 用于定义导航链接的容器。
- `<header>`: 用于定义页面或区块的头部。
- `<footer>`: 用于定义页面或区块的底部。
- `<article>`: 用于定义文章或独立的内容块。
- `<section>`: 用于定义文档中的节或区域。

示例代码：