html属性通过提供额外信息提升网页可访问性和用户体验：1. alt属性为图片提供替代文本，帮助视障用户理解内容；2. title属性显示工具提示，补充上下文信息；3. aria-开头的wai-aria属性如aria-label、role等增强复杂组件的语义，支持屏幕阅读器；4. 全局属性如lang和dir明确语言与文本方向，优化多语言支持；5. tabindex确保键盘导航的可达性，使所有用户均可操作页面元素。这些属性共同构建了包容性强、体验良好的网页环境。
HTML标签的属性是用来提供关于HTML元素额外信息的修饰符。它们总是以名称/值对的形式出现，比如
name="value"，并通常放在元素的开始标签中。这些属性决定了元素在浏览器中的行为或显示方式，是构建功能丰富、样式多变的网页不可或缺的一部分。
解决方案
说起HTML属性，我总觉得它们像是给每个标签“贴标签”或者“写备注”，让浏览器知道这个标签具体要干嘛，或者长什么样。一个简单的
<p>标签，它就是个段落，但如果你想让它有特定的样式、或者在JavaScript里能被快速找到，那属性就派上用场了。
属性通常包含两个部分：属性名和属性值。比如
@@##@@，
src和
alt就是属性名，
image.jpg和
一张图片就是它们对应的属性值。属性值一般用双引号包裹，虽然单引号也行，但规范上双引号更常见。有些属性是布尔属性，比如
disabled，它们不需要值，只要存在就表示启用。
立即学习“前端免费学习笔记（深入）”；
我们用属性来给元素添加样式（
style）、指定链接目标（
href）、引入外部资源（
src）、或者给元素一个唯一的标识（
id）或分类（
class）。它们让静态的HTML页面变得动态且可控，是前端开发中处理元素行为和外观的核心手段。没有属性，HTML就只是一堆纯文本的骨架，毫无生气。
HTML属性如何提升网页可访问性和用户体验？
谈到网页可访问性，这真是一个经常被忽视，但又至关重要的话题。HTML属性在这里面扮演的角色，远比很多人想象的要大。我个人觉得，做好这块，不仅仅是满足规范，更是对用户的一种尊重，尤其是有特殊需求的用户。
最典型的例子就是
alt属性，它用在
@@##@@标签里。当图片因为某种原因无法显示时，或者对于视障用户来说，屏幕阅读器就会朗读
alt属性里的文本。这不仅仅是“图片描述”，它应该简洁、准确地概括图片内容或其传达的信息。一个好的
alt文本能让用户即使看不到图片，也能理解页面的完整内容。我见过不少网站，
alt属性要么空着，要么就写个“图片”，这其实是很大的失误。
再比如
title属性，它几乎可以用于任何HTML元素。当用户鼠标悬停在元素上时，
title属性的值会以工具提示的形式显示出来。虽然它对可访问性的直接影响不如
alt，但它能提供额外的上下文信息，比如一个链接的完整目标，或者一个图标的具体含义，这无疑能提升普通用户的体验。
还有一组非常强大的属性，是WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）规范引入的，它们通常以
aria-开头，比如
aria-label、
aria-describedby、
aria-hidden、
role等。这些属性的出现，是为了弥补HTML在语义表达上的一些不足，特别是对于那些通过JavaScript动态生成或改变行为的复杂组件。比如，一个自定义的滑动条，如果没有
aria-valuemin、
aria-valuemax、
aria-valuenow等属性，屏幕阅读器就无法理解它的当前状态和范围。虽然这些属性可能不会直接改变视觉效果，但它们是无障碍技术理解页面结构和功能的关键。我个人觉得，花时间去理解和正确使用ARIA属性，是衡量一个前端开发者是否专业的标准之一。这不光是技术活，更是一种责任。
不同HTML元素有哪些独特且常用的属性？
每个HTML元素都有其特定的用途，因此它们也往往带有一些独有的、或者在该元素上特别常用的属性。这就像不同的工具，有它们各自的专用配件。
首先想到的就是链接
<a>标签的
href属性。没有它，
<a>就只是个普通文本，有了
href，它才能指向另一个网页、文件、或者页面内的某个锚点。同时，
target="_blank"也是
<a>标签上一个非常常见的属性，它让链接在新标签页中打开，虽然方便，但也要注意用户体验，不是所有链接都适合新开页面。
图片
@@##@@标签除了前面提到的
src和
alt，还有
width和
height。虽然现在我们更倾向于用CSS来控制图片尺寸，但
width和
height属性依然有其价值，比如它们可以帮助浏览器在图片加载前预留空间，避免页面布局的跳动（Cumulative Layout Shift, CLS）。
表单元素
input、
textarea、
select则拥有一大堆特定属性。
input标签的
type属性，比如
text、
password、
checkbox、
radio、
submit等，决定了输入框的类型和行为。
placeholder用于提供输入提示，
value设定默认值，
name用于提交数据，
required表示必填，
disabled禁用，
readonly只读。这些属性的组合，让表单的交互变得异常丰富。我经常看到开发者在
input上忘记
name属性，导致表单数据无法提交，这其实是很基础但又容易犯的错误。
表格
<table>相关的元素，比如
<td>和
<th>，它们有
colspan和
rowspan属性，用来合并单元格。这在创建复杂表格布局时非常有用，但滥用也可能导致表格结构混乱，不利于维护和可读性。
视频
video和音频
audio标签，它们的
src属性指向媒体文件，
controls属性显示播放控件，
autoplay自动播放（需要注意用户体验），
loop循环播放，
muted静音播放。这些属性让多媒体内容在网页上的呈现变得简单直接。
全局属性在HTML中扮演什么角色？
全局属性，顾名思义，就是那些可以被几乎所有HTML元素使用的属性。它们就像一套通用的工具包，无论你是在处理段落、图片、链接还是表单，这些属性都能派上用场，提供一些基础但非常重要的功能。
最常用的全局属性可能就是
id和
class了。
id提供了一个元素在整个文档中的唯一标识符，就像人的身份证号。它主要用于JavaScript操作DOM元素，或者作为CSS选择器来应用特定样式，或者作为链接的锚点。而
class则允许你将多个元素归为一类，方便通过CSS批量应用样式，或者通过JavaScript批量操作。我个人倾向于在CSS中使用
class进行样式控制，而
id则更多地留给JavaScript进行精确的DOM操作，这样职责会更清晰。
style属性允许你直接在HTML元素上定义内联CSS样式。虽然它很方便，特别是进行快速测试或者少量特殊样式时，但我通常不推荐过度使用它，因为它会增加HTML的冗余，降低样式复用性，并且不利于内容与表现的分离。外部CSS文件或
<style>标签内的样式规则通常是更好的选择。
title属性前面也提到了，它提供额外的信息提示，对可访问性和用户体验都有贡献。
lang和
dir属性则与语言和文字方向有关。
lang属性声明元素内容的语言，比如
lang="en"表示英文，
lang="zh-CN"表示简体中文。这对于搜索引擎优化（SEO）、屏幕阅读器以及浏览器翻译功能都非常重要。
dir属性则指定文本方向，比如
ltr（从左到右，默认）或
rtl（从右到左，如阿拉伯语、希伯来语）。这些属性虽然不直接影响视觉，但对全球化网站的构建至关重要。
tabindex属性控制元素是否可以被Tab键聚焦，以及聚焦的顺序。这对于键盘导航的用户来说非常关键，它能确保用户可以通过键盘方便地访问页面上的所有可交互元素。
还有一些不那么常用但很有用的全局属性，比如
contenteditable，它可以让元素的内容直接在浏览器中被编辑；
hidden，用来隐藏元素；
data-*属性，用于存储自定义数据，这在JavaScript中处理特定数据时非常灵活和方便。全局属性的存在，使得HTML元素在保持其核心语义的同时，能够被赋予更广泛的行为和表现力，大大提升了HTML的灵活性和扩展性。
