HTML属性为元素提供附加信息，它们总是写在开始标签中，以"名称/值"对的形式出现。
东巴文（db-w.cn） 认为：属性就像元素的"身份证"，它们描述了元素的特征和行为。
<标签名 属性名="属性值">内容</标签名>
<!-- 单个属性 -->
<a href="https://db-w.cn">东巴文</a>
<!-- 多个属性 -->
<img src="image.jpg" alt="示例图片" width="300" height="200">
<!-- 布尔属性 -->
<input type="text" disabled>
东巴文说明：
全局属性是所有HTML元素都可以使用的属性。
id属性为元素指定唯一的标识符。
<div id="header">页头</div>
<p id="intro">介绍段落</p>
东巴文规则：
使用场景：
<!-- CSS样式 -->
<style>
#header {
background-color: #f0f0f0;
}
</style>
<!-- JavaScript操作 -->
<script>
const header = document.getElementById('header');
</script>
<!-- 锚点链接 -->
<a href="#intro">跳转到介绍</a>
class属性为元素指定一个或多个类名。
<!-- 单个类名 -->
<div class="container">容器</div>
<!-- 多个类名 -->
<div class="container main-content">主内容</div>
东巴文说明：
使用场景：
<style>
.container {
max-width: 1200px;
margin: 0 auto;
}
.main-content {
padding: 20px;
}
</style>
<script>
const containers = document.getElementsByClassName('container');
const mainContent = document.querySelector('.main-content');
</script>
style属性用于添加内联CSS样式。
<div style="color: red; font-size: 16px;">
这是红色文本
</div>
东巴文建议：
title属性提供元素的额外信息，鼠标悬停时显示提示文本。
<a href="https://db-w.cn" title="东巴文官网">东巴文</a>
<abbr title="HyperText Markup Language">HTML</abbr>
lang属性指定元素内容的语言。
<html lang="zh-CN">
<body>
<p lang="zh-CN">这是中文</p>
<p lang="en">This is English</p>
<p lang="ja">これは日本語です</p>
</body>
</html>
东巴文说明：
dir属性指定元素中文本的方向。
<p dir="ltr">从左到右（Left to Right）</p>
<p dir="rtl">从右到左（Right to Left）</p>
<p dir="auto">自动检测</p>
东巴文说明：
ltr：从左到右（默认）rtl：从右到左（阿拉伯语、希伯来语等）auto：浏览器自动检测hidden属性隐藏元素。
<div hidden>这个元素被隐藏了</div>
<div hidden="hidden">这个元素也被隐藏了</div>
东巴文说明：
display: nonetabindex属性指定元素的Tab键顺序。
<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">
东巴文说明：
accesskey属性为元素指定快捷键。
<a href="https://db-w.cn" accesskey="d">东巴文（Alt+D）</a>
<button accesskey="s">保存（Alt+S）</button>
东巴文说明：
data-*属性用于存储自定义数据。
<div
id="user"
data-id="123"
data-name="张三"
data-age="25"
data-role="admin">
用户信息
</div>
使用JavaScript访问：
const user = document.getElementById('user');
// 读取数据
console.log(user.dataset.id); // "123"
console.log(user.dataset.name); // "张三"
console.log(user.dataset.age); // "25"
console.log(user.dataset.role); // "admin"
// 修改数据
user.dataset.age = "26";
// 删除数据
delete user.dataset.role;
东巴文应用场景：
contenteditable属性指定元素内容是否可编辑。
<div contenteditable="true">这段文字可以编辑</div>
<div contenteditable="false">这段文字不可编辑</div>
<div contenteditable>这段文字也可以编辑</div>
东巴文说明：
true或空字符串：可编辑false：不可编辑draggable属性指定元素是否可拖动。
<div draggable="true">这个元素可以拖动</div>
<div draggable="false">这个元素不可拖动</div>
<div draggable>这个元素也可以拖动</div>
spellcheck属性指定是否对元素内容进行拼写检查。
<textarea spellcheck="true">拼写检查开启</textarea>
<textarea spellcheck="false">拼写检查关闭</textarea>
除了全局属性，每个HTML元素还有自己特有的属性。
<a
href="https://db-w.cn"
target="_blank"
rel="noopener noreferrer"
download="filename.html"
hreflang="zh-CN"
type="text/html">
东巴文
</a>
东巴文说明：
| 属性 | 说明 | 值 |
|---|---|---|
| href | 链接地址 | URL |
| target | 打开方式 | _blank, _self, _parent, _top |
| rel | 关系 | nofollow, noopener, noreferrer |
| download | 下载文件名 | 文件名 |
| hreflang | 链接文档语言 | 语言代码 |
| type | MIME类型 | MIME类型 |
<img
src="image.jpg"
alt="示例图片"
width="300"
height="200"
loading="lazy"
decoding="async">
东巴文说明：
| 属性 | 说明 | 东巴文建议 |
|---|---|---|
| src | 图片路径 | ✅ 必需 |
| alt | 替代文本 | ✅ 必需，提升可访问性 |
| width | 宽度 | ✅ 避免布局偏移 |
| height | 高度 | ✅ 避免布局偏移 |
| loading | 加载方式 | lazy（懒加载）、eager（立即加载） |
| decoding | 解码方式 | async（异步）、sync（同步）、auto |
<form
action="submit.php"
method="POST"
enctype="multipart/form-data"
target="_blank"
autocomplete="on"
novalidate>
<!-- 表单控件 -->
</form>
东巴文说明：
| 属性 | 说明 | 值 |
|---|---|---|
| action | 提交地址 | URL |
| method | 提交方式 | GET、POST |
| enctype | 编码类型 | application/x-www-form-urlencoded、multipart/form-data、text/plain |
| target | 提交目标 | _blank、_self、_parent、_top |
| autocomplete | 自动完成 | on、off |
| novalidate | 不验证 | 布尔属性 |
<input
type="text"
name="username"
value="张三"
placeholder="请输入用户名"
required
disabled
readonly
maxlength="20"
minlength="3"
pattern="[A-Za-z]{3,}"
autocomplete="username"
autofocus>
东巴文说明：
| 属性 | 说明 | 东巴文建议 |
|---|---|---|
| type | 输入类型 | text、password、email、number等 |
| name | 名称 | ✅ 表单提交时必需 |
| value | 默认值 | 初始值 |
| placeholder | 占位符 | 提示文本 |
| required | 必填 | 布尔属性 |
| disabled | 禁用 | 布尔属性 |
| readonly | 只读 | 布尔属性 |
| maxlength | 最大长度 | 字符数 |
| minlength | 最小长度 | 字符数 |
| pattern | 正则验证 | 正则表达式 |
| autocomplete | 自动完成 | on、off或特定值 |
| autofocus | 自动聚焦 | 布尔属性 |
<video
src="video.mp4"
controls
autoplay
muted
loop
poster="poster.jpg"
width="640"
height="360"
preload="metadata">
您的浏览器不支持视频标签
</video>
东巴文说明：
| 属性 | 说明 | 东巴文建议 |
|---|---|---|
| src | 视频路径 | URL |
| controls | 显示控件 | 布尔属性 |
| autoplay | 自动播放 | 需配合muted |
| muted | 静音 | 布尔属性 |
| loop | 循环播放 | 布尔属性 |
| poster | 封面图 | URL |
| width | 宽度 | 像素值 |
| height | 高度 | 像素值 |
| preload | 预加载 | none、metadata、auto |
布尔属性只有两种状态：存在（true）或不存在（false）。
<!-- disabled：禁用 -->
<input type="text" disabled>
<button disabled>禁用按钮</button>
<!-- checked：选中 -->
<input type="checkbox" checked>
<input type="radio" checked>
<!-- selected：选中 -->
<option selected>选中项</option>
<!-- readonly：只读 -->
<input type="text" readonly>
<!-- required：必填 -->
<input type="text" required>
<!-- multiple：多选 -->
<input type="file" multiple>
<select multiple></select>
<!-- autofocus：自动聚焦 -->
<input type="text" autofocus>
<!-- autoplay：自动播放 -->
<video autoplay></video>
<!-- controls：显示控件 -->
<video controls></video>
<!-- loop：循环 -->
<video loop></video>
<!-- muted：静音 -->
<video muted></video>
东巴文说明：
disabled="disabled"，但推荐简写为disabled<!-- ✅ 推荐 -->
<div class="container" id="main"></div>
<!-- ❌ 不推荐 -->
<div class=container id=main></div>
<!-- ✅ 推荐 -->
<div class="container"></div>
<!-- ❌ 不推荐 -->
<div CLASS="container"></div>
<!-- ✅ 推荐：id唯一，class可重复 -->
<div id="header" class="section"></div>
<div id="main" class="section"></div>
<div id="footer" class="section"></div>
<!-- ❌ 不推荐：id重复 -->
<div id="section" class="header"></div>
<div id="section" class="main"></div>
<!-- ✅ 推荐：使用合适的属性 -->
<img src="image.jpg" alt="图片描述">
<a href="https://db-w.cn" title="东巴文官网">东巴文</a>
<!-- ❌ 不推荐：缺少必要属性 -->
<img src="image.jpg">
<a href="https://db-w.cn">东巴文</a>
<!-- ❌ 不推荐：内联样式 -->
<div style="color: red; font-size: 16px;">内容</div>
<!-- ✅ 推荐：使用class -->
<div class="highlight">内容</div>
.highlight {
color: red;
font-size: 16px;
}
<!-- ✅ 推荐 -->
<div id="user" data-id="123" data-name="张三">用户信息</div>
<!-- ❌ 不推荐：使用自定义属性 -->
<div id="user" id="123" name="张三">用户信息</div>
东巴文对比：
| 对比项 | id | class |
|---|---|---|
| 唯一性 | 页面中唯一 | 页面中可重复 |
| 数量 | 一个元素只能有一个id | 一个元素可以有多个class |
| CSS选择器 | #id | .class |
| JavaScript | getElementById() | getElementsByClassName() |
| 使用场景 | 唯一标识、锚点 | 样式、分组 |
东巴文建议：推荐使用双引号，但单引号也是合法的。
<!-- ✅ 推荐：双引号 -->
<div class="container"></div>
<!-- ✅ 也可以：单引号 -->
<div class='container'></div>
<!-- ✅ 特殊情况：属性值包含引号 -->
<div title='这是"东巴文"的示例'></div>
<div title="这是'东巴文'的示例"></div>
东巴文建议：
问题1：以下哪个属性是布尔属性？
A. class
B. id
C. disabled
D. title
答案：C
东巴文解释：disabled是布尔属性，存在即为true，不需要值。其他属性都需要指定值。
问题2：以下哪个属性用于存储自定义数据？
A. data-id
B. custom-id
C. my-id
D. user-id
答案：A
东巴文解释：HTML5规定自定义数据属性必须以data-开头，其他选项不符合规范。
任务：创建一个包含以下属性的元素：
<div
id="user-profile"
class="card user-card active"
data-user-id="123"
data-user-name="张三"
data-user-role="admin"
title="用户信息卡片"
style="background-color: #f0f0f0; padding: 20px; border-radius: 8px;">
<h2>张三</h2>
<p>管理员</p>
</div>
<script>
const card = document.getElementById('user-profile');
console.log(card.dataset.userId); // "123"
console.log(card.dataset.userName); // "张三"
console.log(card.dataset.userRole); // "admin"
</script>
东巴文（db-w.cn） - 让编程学习更有趣、更高效！