正在加载...

HTML 属性

上一课你学到元素由标签和内容构成。属性（attributes）给这些标签补充额外信息。没有属性，许多元素无法完成真正的工作——链接需要地址，图片需要文件路径。

什么是 HTML 属性？

HTML 属性是放在元素开始标签内的名称和值。它告诉浏览器关于该元素的一些信息，而不是标签之间那段可见文本本身。

直接回答

属性使用简单模式：name="value"。它们属于开始标签，写在结束的 > 之前。常见例子包括链接的 href，以及图片的 src 和 alt。后续课程会经常用到属性，请在这里先掌握这个模式。

链接与图片上的属性

html
HTML Code 
<a href="https://example.com">Visit Example</a>
<img src="cat.jpg" alt="A cat sitting on a chair">

阅读示例

  • 在链接上，href 保存目标 URL
  • 可见的链接文字仍是 <a> 与 </a> 之间的内容
  • 在图片上，src 指向图片文件
  • alt 在图片无法加载时或为无障碍提供替代文本
  • 两个属性都在开始标签内

需要记住的语法规则

  1. 只把属性写在开始标签里——不要写在结束标签里
  2. 用 = 分隔属性名与值
  3. 大多数值要用引号包起来：href="https://example.com"
  4. 同一个开始标签里可以放多个属性，用空格分开
  5. 现代 HTML 中属性名通常写成小写

一个标签上的多个属性

html
HTML Code 
<a href="https://example.com" title="Example website">Visit Example</a>

这里 href 设置地址，title 可提供额外提示文字（桌面浏览器中常显示为工具提示）。不必给每个标签都加上所有可选属性——只用元素需要的那些。

属性与内容

内容位于开始标签与结束标签之间，例如段落中的文字。属性位于开始标签上，用来配置元素。混淆会导致错误：只把 URL 写在链接文字里并不能创建可用链接；URL 属于 href。

关于空元素的说明

像 img 这样的空元素即使没有单独的结束标签，也仍然使用属性。这很正常：属性描述元素，它们不是被包裹的内容。

亲自试一试

  1. 在编辑器中打开一个基础 HTML 页面
  2. 添加带有 href 属性的链接，指向真实或示例 URL
  3. 添加带有 src 和有意义 alt 的 img（任意练习路径或占位名称，用于学习语法）
  4. 保存并在浏览器中打开页面
  5. 点击链接，并在页面源代码中确认即使缺少图片文件，图片标记仍然存在

常见错误

  • 把属性写在结束标签上
  • 忘记给需要引号的值加引号
  • 用错属性（例如在链接上把 URL 放进 src 而不是 href）
  • 在信息性图片上把 alt 留空
  • 以为属性文字总会作为可见页面内容出现——许多属性配置的是行为或无障碍

小结

  • 属性在开始标签内添加额外信息
  • 常见形式是 name="value"
  • 链接需要 href；图片通常需要 src 和 alt
  • 内容在标签之间；属性配置标签
  • 可以在一个开始标签上组合多个属性
  • 后续课程会在标题、表单、媒体等处复用这一模式

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程