HTML 属性

参考资料

1. HTML 用于短的引用
2. html表单标签详细说明以及案例
3. HTML 有序列表
4. HTML 颜色
5. html结构标签详细说明以及案例
6. HTML 表格表头单元格
7. HTML 图像格式化
8. HTML 强调

HTML 属性

1. 定义：HTML元素的附加信息，用于配置或调整元素行为

2. 语法：name="value"（属性值通常用双引号包裹）

核心属性分类：

1. 全局属性（适用于所有HTML元素）

• class：指定元素类名

• id：定义唯一标识符

• style：内联CSS样式

• title：附加提示信息

• lang：设置语言

• data-*：自定义数据属性

2. 常用元素特定属性

• img标签：
  src：图像路径
  alt：替代文本
  width/height：尺寸控制

• a标签：
  href：链接地址
  target：打开方式（_blank等）

• form相关：
  action：提交地址
  method：请求方法
  name：表单名称

• input标签：
  type：输入类型
  placeholder：提示文本
  required：必填验证

HTML5新增属性：

1. 表单增强

• autocomplete

• pattern（正则验证）

• multiple（多文件上传）

2. 媒体相关

• controls（显示控制条）

• autoplay

• loop

3. 语义化属性

• contenteditable

• draggable

• hidden

CSS扩展属性：

1. 自定义属性（CSS变量）

• 定义：--main-color: #ff0000;

• 使用：color: var(--main-color);

2. 属性选择器

• [attribute]：存在性选择

• [attribute=value]：精确匹配

• [attribute^=value]：开头匹配

• [attribute$=value]：结尾匹配

• [attribute*=value]：包含匹配

3. 伪类选择器

• :hover/:active

• :nth-child()

• :not()

4. 属性继承控制

• inherit：显式继承

• initial：恢复初始值

• unset：重置为自然值

最佳实践：

1. 语义化优先使用专用属性

2. 自定义数据使用data-*属性

3. ARIA属性增强可访问性

4. 避免过度使用style属性