HTML超文本标记语言是构建网页和应用界面的基石，它通过一系列预定义的元素（Elements） 来组织和描述网页的内容与结构。下面这张表可以帮助你快速理解HTML元素的核心组成部分：
| 组成部分 | 说明 | 代码示例 |
| --- | --- | --- |
| 开始标签 | 表示元素的开始，由尖括号包围。 | <p> |
| 结束标签 | 表示元素的结束，在元素名前有斜杠。 | </p> |
| 内容 | 开始标签和结束标签之间的部分。 | 这是段落内容 |
| 元素 | 开始标签、结束标签和内容的整体。 | <p>这是段落内容</p> |
| 属性 | 为元素提供额外信息，位于开始标签内。 | <p class="intro">这是一个段落</p> |
💡 HTML 元素的核心概念
一个标准的HTML文档就像一座房子，需要稳固的结构。以下是一个最基本的HTML5文档框架，所有网页内容都构建在这个骨架之上：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<!-- 所有可见的网页内容都放在body标签里 -->
<h1>这是一个一级标题</h1>
<p>这是一个段落。</p>
</body>
</html>🧱 常用的HTML元素示例
根据它们在页面中的作用，常用的HTML元素可以分为以下几类：
| 类别 | 元素示例 | 说明 |
| --- | --- | --- |
| 文本与结构 | <h1>-<h6>, <p>, <br>, <hr> | 用于定义标题、段落、换行和分割线。 |
| 内容强调 | <strong>, <em> | 用于表示重要和强调的文本。 |
| 媒体与链接 | <a>, <img> | 用于创建超链接和嵌入图像。 |
| 列表 | <ul>, <ol>, <li> | 用于创建无序列表（项目符号）和有序列表（数字序号）。 |
| 语义化容器 | <header>, <nav>, <main>, <article>, <section>, <footer> | HTML5引入的语义标签，用于更清晰地描述页面结构，有助于SEO和无障碍访问。 |
| 表单与交互 | <form>, <input>, <textarea>, <button>, <label> | 用于创建表单，收集用户输入。 |
🚀 实际项目开发场景与AI实操Prompt
掌握基础后，关键在于应用。以下是两个典型的开发场景，并提供了可以直接用于AI编程助手的详细Prompt，让AI帮你生成代码框架。
场景一：创建个人简介页面
这是一个经典的入门项目，能让你实践大部分基础标签和页面结构。
AI实操Prompt：
请帮我生成一个个人简介页面的HTML代码。要求如下：
1. 页面结构：使用HTML5语义化标签，如 `<header>`, `<main>`, `<footer>`。
2. 内容模块：
- 页头：包含页面主标题（我的简介）和一个简单的导航菜单（链接可设为#about, #skills, #contact）。
- 主体部分包含：
a. “关于我”模块：包含一张个人头像（请用占位图路径，如avatar.jpg）、姓名、一段简短的自我介绍。
b. “我的技能”模块：用一个无序列表列出3-5项技能。
c. “联系我”模块：创建一个表单，包含姓名（文本框）、邮箱（邮箱输入框）、留言（文本域）和一个提交按钮。
- 页脚：包含版权信息。
3. 样式要求：请使用内嵌CSS（`<style>`标签）添加基础样式，例如：
- 设置全局字体和背景色。
- 让头像呈圆形。
- 为技能列表项添加背景色和间距。
- 设置表单输入框和按钮的基本样式。
4. 备注：代码注释请用中文。
请提供完整的HTML代码。场景二：构建产品展示卡片
组件化开发是现代前端的基础，这个场景练习如何封装一个可复用的UI组件。
AI实操Prompt：
请生成一个展示单个产品信息的HTML结构代码，目标是成为一个可复用的组件。要求如下：
1. 使用`<div>`或`<article>`标签作为容器，并为其设置一个CSS类名，如`.product-card`。
2. 卡片内部结构从上到下依次包含：
- 产品图片（使用占位图路径，如product-image.jpg），并设置合适的宽度和高度。
- 产品名称（用标题标签，如`<h3>`）。
- 产品描述（用段落标签`<p>`）。
- 产品价格（用段落标签，并希望价格数字的字体颜色为红色）。
- 一个“加入购物车”按钮。
3. 交互体验：请使用内联JavaScript（`onclick`事件）为按钮添加简单交互，点击时弹出提示框，显示“已添加 [产品名称] 到购物车”。
4. 样式要求：请使用内嵌CSS为卡片添加基础样式，例如：
- 设置卡片宽度、边框、圆角、内边距。
- 让图片宽度100%适应卡片宽度。
- 设置按钮的背景色、文字颜色、无边框和圆角。
- 当鼠标悬停在按钮上时，改变其背景色。
5. 备注：代码注释请用中文。
请提供完整的HTML代码，包含CSS和JavaScript部分。