HTML属性和值
目录
- 第一章、HTML属性
- 1.1) HTML 属性是什么
- 1.1.1）属性的作用和示例
- 1.1.2）全局属性是什么
- 1.1.3）全局属性作用
- 1.1.4）重要的全局属性
- 1.2) HTML 属性中的值
- 1.2.1）什么是 HTML 值？
- 1.2.2）属性值示例
友情提醒:
先看目录，了解文章结构，点击目录可跳转到文章指定位置。
第一章、HTML属性
1.1) HTML 属性是什么
1.1.1）属性的作用和示例
属性提供了关于HTML元素的额外信息。它们总是写在元素的开始标签中，以“键/值对”的形式出现，即 name=“value”。
<标签名 属性名="属性值">内容</标签名><a href="https://www.example.com">Visit Example</a>
href 就是一个属性，它提供了超链接的目标地址这个“额外信息”。<img src="cat.jpg" alt="一只可爱的猫">
src 和 alt 都是属性。src 提供图片来源，alt 提供图片无法显示时的替代文本。1.1.2）全局属性是什么
全局属性是指可以用于所有HTML元素的属性。这意味着无论是块级元素、行内元素，还是HTML5的语义化标签，你都可以为它们指定这些属性。
与之相对的是局部属性，它们只适用于特定的元素。例如：
src 属性只适用于 <img>、<script>、<iframe> 等元素。
href 属性只适用于 <a>、<link> 等元素。
type 属性只适用于 <input>、<button> 等元素。1.1.3）全局属性作用
全局属性有什么用？
| 功能类别 | 主要作用 | 关键属性/示例 |
|---|---|---|
| 提供钩子 (Hooks) | 为CSS和JavaScript提供选择和操作元素的锚点 | id, class |
| 存储数据 | 在元素上临时存储数据，方便与JS进行数据交换 | data-* (如 data-id="1") |
| 控制行为 | 控制用户与元素的交互方式 | tabindex, contenteditable, hidden |
| 增强可访问性 (A11y) | 为辅助技术提供关键信息，提升网站友好度 | lang, title, alt, aria-* |
| 添加元信息 | 为元素提供额外的解释性信息 | title, lang |
1.1.4）重要的全局属性
| 属性 | 作用描述 | 主要用途 |
|---|---|---|
| id | 为元素指定一个在全文档中唯一的名称。 | CSS钩子: #my-id { ... } JS操作: document.getElementById('my-id') 页面锚点: <a href="#my-id"> |
| class | 为元素指定一个或多个（空格分隔）可重复使用的类名。 | CSS样式: .my-class { ... } JS操作: document.getElementsByClassName() 或 document.querySelectorAll() |
| style | 直接在元素上编写内联CSS样式（优先级高，但不利于维护）。 | 为单个元素快速添加独特样式。 |
1.2) HTML 属性中的值
1.2.1）什么是 HTML 值？
值就是属性的具体内容或设置。它总是被放在引号（双引号""最常用，单引号’'也可以）中，紧跟在属性名的等号=后面
值的类型：
**URL路径：**如 src="images/photo.jpg", href="page.html"**文本字符串：**如 alt="描述文字", title="提示信息"**数字：**如 <input type="number" min="1" max="10"> 中的 "1" 和 "10"**关键字：**有些属性只有几个固定的值可选。如 <input type="checkbox" **checked**>，checked 就是一个关键字值，表示复选框默认被选中。
1.2.2）属性值示例
语法
属性名="值"示例：
href="https://www.example.com"
"https://www.example.com" 就是 href 属性的值。alt="一只可爱的猫"
"一只可爱的猫" 就是 alt 属性的值。class="important text-red"
"important text-red" 是 class 属性的值，它包含了两个类名。