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>
