一些常用的HTML结构

1. 页面基本结构

DOCTYPE 声明 ：
- 作用：告知浏览器使用哪种 HTML 版本进行解析。
- 示例：

html 复制代码

<!DOCTYPE html>

<html> 标签 ：
- 作用：作为整个 HTML 文档的根元素，包含文档的头部和主体。
- 示例：

html 复制代码

<html lang="en">
  <!-- 文档头部和主体内容 -->
</html>

<head> 标签 ：
- 作用：包含文档的元数据，如标题、字符编码、样式表链接、脚本链接等，这些信息不会在页面中直接显示。
- 示例：

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body> 标签 ：
- 作用：包含文档的可见内容，如文本、图像、链接、表单等。
- 示例：

html 复制代码

<body>
  <h1>这是一个标题</h1>
  <p>这是一段文本。</p>
</body>

2. 文本结构

标题标签（<h1> - <h6>） ：
- 作用：用于定义文档的标题，从 <h1>（最重要的标题）到 <h6>（最不重要的标题），字号通常依次减小。
- 示例：

html 复制代码

<h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>

段落标签（<p>） ：
- 作用：用于定义段落文本。
- 示例：

html 复制代码

<p>这是一个段落，包含一些文本信息。</p>

列表标签（<ul>、<ol>、<li>） ：
- 作用：<ul> 用于创建无序列表，<ol> 用于创建有序列表，<li> 用于定义列表项。
- 示例：

html 复制代码

<ul>
  <li>无序列表项 1</li>
  <li>无序列表项 2</li>
</ul>
<ol>
  <li>有序列表项 1</li>
  <li>有序列表项 2</li>
</ol>

3. 链接结构

锚标签（<a>） ：
- 作用：用于创建超链接，可以链接到其他页面、文件或页面内的特定位置。
- 示例：

html 复制代码

<a href="https://www.example.com">这是一个链接到外部网站的链接</a>
<a href="#section1">跳转到页面内的特定部分</a>

4. 图像结构

图像标签（<img>） ：
- 作用：用于在页面中插入图像。
- 示例：

html 复制代码

<img src="image.jpg" alt="图像描述">

5. 表单结构

表单标签（<form>） ：
- 作用：用于创建表单，收集用户输入的数据，并将其提交到服务器进行处理。
- 示例：

html 复制代码

<form action="submit.php" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="提交">
</form>

输入标签（<input>） ：
- 作用：用于创建各种类型的输入字段，如文本框、密码框、复选框、单选按钮等。
- 示例：

html 复制代码

<input type="text" placeholder="输入文本">
<input type="password" placeholder="输入密码">
<input type="checkbox" id="agree" name="agree">
<label for="agree">同意协议</label>

下拉列表标签（<select>、<option>） ：
- 作用：用于创建下拉列表，用户可以从多个选项中选择一个。
- 示例：

html 复制代码

<select name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
</select>

6. 表格结构

表格标签（<table>、<tr>、<td>、<th>） ：
- 作用：用于创建表格，<table> 是表格的容器，<tr> 定义表格行，<td> 定义表格单元格，<th> 定义表头单元格。
- 示例：

html 复制代码

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
</table>

7. 语义化结构（HTML5 新增）

<header> 标签 ：
- 作用：用于定义文档或节的页眉，通常包含标题、导航等内容。
- 示例：

html 复制代码

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>

<nav> 标签 ：
- 作用：用于定义导航链接的容器。
- 示例：见上面 <header> 标签示例中的 <nav> 部分。
<main> 标签 ：
- 作用：用于定义文档的主要内容区域。
- 示例：

html 复制代码

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
</main>

<article> 标签 ：
- 作用：用于定义独立的、可自包含的文章内容。
- 示例：见上面 <main> 标签示例中的 <article> 部分。
<section> 标签 ：
- 作用：用于定义文档中的节或区域，通常包含相关的内容。
- 示例：

html 复制代码

<section>
  <h2>产品介绍</h2>
  <p>产品详情...</p>
</section>

<aside> 标签 ：
- 作用：用于定义与主要内容相关的侧边栏或补充信息。
- 示例：

html 复制代码

<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="#">相关文章 1</a></li>
    <li><a href="#">相关文章 2</a></li>
  </ul>
</aside>

<footer> 标签 ：
- 作用：用于定义文档或节的页脚，通常包含版权信息、联系方式等。
- 示例：

html 复制代码

<footer>
  <p>&copy; 2025 公司名称</p>
</footer>