HTML 属性

学习目标

理解 HTML 属性的基本语法与作用
掌握常见属性（如 src、alt、id、class、href、style 等）的使用场景
区分全局属性、事件属性、元素特定属性等类型
遵循 W3C 推荐的最佳实践编写规范、可维护的 HTML 代码

什么是 HTML 属性

HTML 属性是写在开始标签内部的特殊关键词，用于提供关于元素的额外信息，控制其外观、行为或功能。

基本语法

<tagname attribute_name="attribute_value">内容</tagname>

示例解析

<img src="logo.png" alt="网站Logo" width="200">

标签：<img>
属性名：src, alt, width
属性值："logo.png", "网站Logo", "200"

注意：属性只能出现在开始标签中，不能写在结束标签或内容区域。

HTML 属性的核心组成

组成部分	说明
属性名 attribute_name	定义要设置的特性，如 `id`、`class`、`src`、`href`
属性值 attribute_value	指定该特性的具体值，必须用引号包裹（推荐双引号）

HTML 属性的主要类型

1. 全局属性

可应用于任何 HTML 元素，增强通用功能：

属性	用途
`id`	为元素分配唯一标识符，用于 CSS/JS 精准定位
`class`	为元素分组，便于批量样式或脚本操作
`style`	内联 CSS 样式（不推荐大量使用）
`title`	鼠标悬停时显示提示文本
`lang`	声明内容语言，提升 SEO 与无障碍访问
`contenteditable`	允许用户直接编辑元素内容
`tabindex`	控制键盘 Tab 键的焦点顺序

2. 元素特定属性

仅适用于特定标签：

元素	常见属性	说明
`<img>`	`src`, `alt`, `width`, `height`	图片资源与替代文本
`<a>`	`href`, `target`	超链接地址与打开方式
`<input>`	`type`, `value`, `placeholder`, `checked`	表单控件配置
`<link>`	`rel`, `href`, `type`	引入外部资源（如 CSS）
`<meta>`	`charset`, `name`, `content`	页面元数据

3. 其他重要类别

事件属性：如 onclick, onload（现代开发中建议用 JS 绑定）
无障碍属性：如 aria-label, role（提升残障用户体验）
媒体属性：如 <video> 的 controls, autoplay

常见 HTML 属性

1. `src`

Source

指定外部资源路径，常用于 <img>, <script>, <iframe>。

<img src="https://example.com/image.jpg" alt="示例图">

安全提示：避免使用不可信来源的 src，防止 XSS 攻击。

2. `alt`

Alternative Text

为图片提供替代文本，关键作用：

图片加载失败时显示
屏幕阅读器朗读（无障碍）
搜索引擎理解图片内容（SEO）

<img src="chart.png" alt="2024年销售增长趋势图">

最佳实践：描述图片内容与功能，而非简单写“image”。

3. `id` 与 `class`

属性	特点	使用场景
`id`	唯一性，一个页面只能出现一次	JS 操作、锚点跳转
`class`	可重复，多个元素可共享	CSS 样式复用、组件化

<h1 id="main-title" class="heading primary">主标题</h1>
<p class="heading secondary">副标题</p>

CSS 选择器：#main-title（ID），.heading（类）

4. `href`

Hyperlink Reference

定义超链接目标，用于 <a> 和 <link>。

<a href="/about">关于我们</a>
<a href="https://example.org" target="_blank">新窗口打开</a>

target="_blank"：在新标签页打开（注意：需配合 rel="noopener" 防安全风险）

5. `style`

直接嵌入 CSS 样式（仅建议临时调试使用）。

<p style="color: red; font-size: 18px;">红色文字</p>

缺点：难以维护、无法复用、违反“结构与样式分离”原则。
推荐做法：使用 <style> 或外部 CSS 文件。

6. `lang`

声明语言，提升国际化支持。

<html lang="zh-CN">
  <p lang="en">This is an English sentence.</p>
</html>

对搜索引擎和语音合成工具至关重要。

属性编写最佳实践

1. 始终使用小写属性名

<!-- 推荐 -->
<img src="logo.png" alt="Logo">

<!-- 不推荐 -->
<IMG SRC="logo.png" ALT="Logo">

2. 属性值必须加引号

<!-- 正确 -->
<input type="text" placeholder="输入用户名">

<!-- 危险（含空格会解析错误） -->
<input type=text placeholder=输入 用户名>

3. 布尔属性无需赋值

<!-- 正确 -->
<input type="checkbox" checked>
<button disabled>禁用按钮</button>

<!-- 冗余（虽有效但不简洁） -->
<input type="checkbox" checked="checked">

4. 避免已废弃属性

❌ 不要使用：

<p align="center">居中文本</p>
<table border="1">

✅ 改用 CSS：

<p style="text-align: center;">居中文本</p>
<style>
  table { border: 1px solid #000; }
</style>

5. 保持属性顺序一致

提升可读性

建议顺序：id → class → 全局属性 → 特定属性 → 事件属性

<button id="submit-btn" class="btn primary" type="submit" onclick="handleSubmit()">
  提交
</button>

重点总结

要点	说明
属性位置	只能写在开始标签内
语法格式	`属性名="属性值"`，值必须加引号
大小写	推荐全小写（W3C 标准）
全局属性	如 `id`, `class`, `style`, `title` 可用于任何元素
语义优先	用 `alt` 描述图片，用 `lang` 声明语言
避免内联样式	优先使用 CSS 类而非 `style` 属性
弃用属性	用 CSS 替代 `align`, `bgcolor` 等过时属性

思考题

为什么 <img> 的 alt 属性对 SEO 和无障碍访问如此重要？如果省略会有什么后果？
在 <a href="..." target="_blank"> 中，为什么现代安全实践建议添加 rel="noopener noreferrer"？
布尔属性如 disabled、checked 是否可以写成 disabled="false"？为什么？浏览器会如何处理？