1. 页面基本结构
DOCTYPE 声明 ：
作用：告知浏览器使用哪种 HTML 版本进行解析。 示例： <!DOCTYPE html>
<html> 标签作用：作为整个 HTML 文档的根元素，包含文档的头部和主体。 示例： <html lang="en">
<!-- 文档头部和主体内容 -->
</html>
<head> 标签作用：包含文档的元数据，如标题、字符编码、样式表链接、脚本链接等，这些信息不会在页面中直接显示。 示例： <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> 标签作用：包含文档的可见内容，如文本、图像、链接、表单等。 示例： <body>
<h1>这是一个标题</h1>
<p>这是一段文本。</p>
</body>
2. 文本结构
标题标签（<h1> - <h6>） ：
作用：用于定义文档的标题，从 <h1>（最重要的标题）到 <h6>（最不重要的标题），字号通常依次减小。 示例： <h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>
<p>这是一个段落，包含一些文本信息。</p>
列表标签（<ul>、<ol>、<li>） ：
作用：<ul> 用于创建无序列表，<ol> 用于创建有序列表，<li> 用于定义列表项。 示例： <ul>
<li>无序列表项 1</li>
<li>无序列表项 2</li>
</ul>
<ol>
<li>有序列表项 1</li>
<li>有序列表项 2</li>
</ol>
3. 链接结构
锚标签（<a>） ：
作用：用于创建超链接，可以链接到其他页面、文件或页面内的特定位置。 示例： <a href="https://www.example.com">这是一个链接到外部网站的链接</a>
<a href="#section1">跳转到页面内的特定部分</a>
4. 图像结构
<img src="image.jpg" alt="图像描述">
5. 表单结构
表单标签（<form>） ：
作用：用于创建表单，收集用户输入的数据，并将其提交到服务器进行处理。 示例： <form action="submit.php" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>
输入标签（<input>） ：
作用：用于创建各种类型的输入字段，如文本框、密码框、复选框、单选按钮等。 示例： <input type="text" placeholder="输入文本">
<input type="password" placeholder="输入密码">
<input type="checkbox" id="agree" name="agree">
<label for="agree">同意协议</label>
下拉列表标签（<select>、<option>） ：
作用：用于创建下拉列表，用户可以从多个选项中选择一个。 示例： <select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
</select>
6. 表格结构
表格标签（<table>、<tr>、<td>、<th>） ：
作用：用于创建表格，<table> 是表格的容器，<tr> 定义表格行，<td> 定义表格单元格，<th> 定义表头单元格。 示例： <table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>
7. 语义化结构（HTML5 新增）
<header> 标签作用：用于定义文档或节的页眉，通常包含标题、导航等内容。 示例： <header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<nav> 标签作用：用于定义导航链接的容器。 示例：见上面 <header> 标签示例中的 <nav> 部分。 <main> 标签<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
<article> 标签作用：用于定义独立的、可自包含的文章内容。 示例：见上面 <main> 标签示例中的 <article> 部分。 <section> 标签作用：用于定义文档中的节或区域，通常包含相关的内容。 示例： <section>
<h2>产品介绍</h2>
<p>产品详情...</p>
</section>
<aside> 标签作用：用于定义与主要内容相关的侧边栏或补充信息。 示例： <aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">相关文章 1</a></li>
<li><a href="#">相关文章 2</a></li>
</ul>
</aside>
<footer> 标签作用：用于定义文档或节的页脚，通常包含版权信息、联系方式等。 示例： <footer>
<p>© 2025 公司名称</p>
</footer>
