HTML属性是HTML元素的“配置开关”，它们以名称/值对的形式出现在元素的开始标签中，为元素提供额外的信息、定义其行为或控制其样式。下面这张表总结了其核心特征：
| 核心方面 | 说明 |
| --- | --- |
| 本质 | 以 属性名="属性值"的形式存在于开始标签内。 |
| 核心价值 | 配置元素行为（如链接的 href）、控制样式与标识（如 class, id）、增强可访问性（如 alt）等。 |
| 语法特性 | 属性名不区分大小写（推荐小写），值建议用双引号包围。布尔属性（如 disabled）的存在即表示“真”。 |
| 主要分类 | 可分为全局属性（所有元素通用，如 id, class）和元素特定属性（如 img的 src, a的 href）。 |
🧱 常用属性与代码示例
以下是一些最常使用的HTML属性及其示例，可以帮助你快速上手。
核心全局属性
id：为元素指定唯一标识符。
<div id="header">这是页头</div>class：为元素指定一个或多个类名，用于CSS样式或JavaScript操作。
<p class="text-red important">这是一段重要的红色文字。</p>style：用于直接为元素设置内联CSS样式。
<p style="color: blue; font-size: 16px;">这是蓝色文字。</p>资源与链接属性
src 与 alt：src指定图像、脚本等外部资源的路径，alt提供图像的替代文本，对可访问性和SEO至关重要。
<img src="images/logo.jpg" alt="公司Logo">href：定义超链接的目标地址。
<a href="https://www.example.com" target="_blank">访问示例网站（新窗口打开）</a>布尔属性
布尔属性通常没有值，其存在即表示“真”。
<input type="text" disabled> <!-- 输入框被禁用 -->
<input type="checkbox" checked> <!-- 复选框默认被选中 -->
<video controls> <!-- 显示视频控制条 -->
<source src="movie.mp4" type="video/mp4">
</video>数据属性
以 data-开头的属性用于存储自定义数据，可通过JavaScript读取。
<li data-product-id="12345" data-price="29.99">笔记本电脑</li>🚀 实际项目场景与AI实操Prompt
掌握基础后，可以通过以下实际场景加深理解。你可以将下面的Prompt直接用于AI编程助手，让它帮你生成具体的代码。
场景一：创建个人简介页面
这是一个经典的入门项目，能让你实践大部分基础标签和与用户信息展示相关的属性。
AI实操Prompt：
请帮我生成一个个人简介页面的HTML代码。要求如下：
1. 页面结构：使用HTML5语义化标签，如 `<header>`, `<main>`, `<footer>`。
2. 内容模块：
- 页头：包含页面主标题（我的简介）和一个简单的导航菜单（使用`<nav>`和`<a>`标签，链接可设为`#about`, `#skills`, `#contact`）。
- 主体部分包含：
a. “关于我”模块：包含一张个人头像（使用`<img>`标签，请用占位图路径如`avatar.jpg`，并务必添加有意义的`alt`描述）、姓名（使用`<h2>`）、一段简短的自我介绍（使用`<p>`）。
b. “我的技能”模块：用一个无序列表`<ul>`列出3-5项技能，为列表项`<li>`添加`class="skill-item"`。
c. “联系我”模块：创建一个表单（`<form>`），包含姓名（文本框，`name="username"`）、邮箱（邮箱输入框，`name="email"`）、留言（文本域，`name="message"`）和一个提交按钮（`type="submit"`）。
- 页脚：包含版权信息。
3. 属性使用：请确保为图片添加`alt`属性，为导航链接添加`href`属性，为表单元素添加`name`属性。
4. 样式要求：请使用内嵌CSS（`<style>`标签）添加基础样式，例如为`.skill-item`类设置背景色和间距。
5. 备注：代码注释请用中文。
请提供完整的HTML代码。场景二：构建产品展示卡片
组件化开发是现代前端的基础，这个场景练习如何封装一个可复用的UI组件，并动态交互。
AI实操Prompt：
请生成一个展示单个产品信息的HTML结构代码，目标是成为一个可复用的组件。要求如下：
1. 使用`<div>`或`<article>`标签作为容器，并为其设置一个CSS类名，如`.product-card`。
2. 卡片内部结构从上到下依次包含：
- 产品图片（使用`<img>`标签，占位图路径如`product-image.jpg`，必须添加`alt`描述）。
- 产品名称（用`<h3>`标签）。
- 产品描述（用`<p>`标签）。
- 产品价格（用`<p>`标签，并为该标签添加`class="price"`）。
- 一个“加入购物车”按钮（`<button>`）。
3. 数据嵌入：为最外层容器添加自定义数据属性，例如`data-product-id="1001"`和`data-category="electronics"`。
4. 交互体验：请使用内联JavaScript（`onclick`事件）为按钮添加简单交互，点击时弹出提示框，显示“已添加 [产品名称] 到购物车”。
5. 样式要求：请使用内嵌CSS为卡片添加基础样式，例如为`.price`类设置红色字体。
请提供完整的HTML代码，包含CSS和JavaScript部分。