前端学习---HTML---标签属性

文章目录

1、通用属性（适用于大多数HTML元素）
2、链接与资源相关属性
3、表单与输入控件属性
4、表格相关属性
- 4.1、border
- [4.2、colspan / rowspan](#4.2、colspan / rowspan)
5、媒体相关属性
6、语义化与结构属性

HTML标签属性用于为标签提供额外信息，以调整元素的行为、样式或功能。

1、通用属性（适用于大多数HTML元素）

1.1、id

为元素指定唯一标识符，用于CSS样式选择或JavaScript操作。

例如：

bash 复制代码

<div id="header">页面标题</div>

1.2、class

为元素指定一个或多个类名（用空格分隔），便于批量应用CSS样式或JavaScript操作。

例如：

bash 复制代码

<p class="text-center highlight">居中高亮文本</p>

1.3、style

直接定义元素的内联CSS样式。

例如：

bash 复制代码

<button style="background-color: blue; color: white;">点击我</button>

1.4、title

提供元素的附加信息，通常在鼠标悬停时显示为工具提示。

例如：

bash 复制代码

<a href="#" title="这是一个提示">悬停查看提示</a>

1.5、data-*

自定义数据属性，用于存储与元素相关的额外信息，供JavaScript使用。

例如：

bash 复制代码

<div data-user-id="123" data-role="admin">用户信息</div>

2、链接与资源相关属性

2.1、href

定义链接的目标URL（用于<a>、<link>标签）。

例如：

bash 复制代码

<a href="https://example.com">访问示例网站</a>

2.2、target

指定链接的打开方式（如_blank在新窗口打开）。

例如：

bash 复制代码

<a href="https://example.com" target="_blank">在新窗口打开</a>

2.3、src

定义外部资源的路径（如图片、脚本、iframe等）。

例如：

bash 复制代码

<img src="image.jpg" alt="示例图片">

2.4、alt

为图片提供替代文本，当图片无法显示时显示，或供屏幕阅读器使用。

例如：

bash 复制代码

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

3、表单与输入控件属性

3.1、type

定义输入字段的类型（如text、password、checkbox、radio等）。

例如：

bash 复制代码

<input type="password" placeholder="输入密码">

3.2、name

定义表单元素的名称，用于提交数据时标识字段。

例如：

bash 复制代码

<input type="text" name="username">

3.3、vaule

定义输入字段的默认值或提交的值。

例如：

bash 复制代码

<input type="hidden" name="token" value="abc123">

3.4、placeholder

提供输入框的提示文本。

例如：

bash 复制代码

<input type="email" placeholder="请输入邮箱地址">

3.5、required

标记字段为必填项。

例如：

bash 复制代码

<input type="text" required>

3.6、disabled

禁用表单元素，使其不可交互。

例如：

bash 复制代码

<button disabled>不可点击按钮</button>

4、表格相关属性

4.1、border

定义表格边框的宽度。例如：

bash 复制代码

<table border="1">
  <tr><td>单元格1</td></tr>
</table>

4.2、colspan / rowspan

定义单元格跨列或跨行的数量。例如：

bash 复制代码

<table>
  <tr><td colspan="2">跨两列的单元格</td></tr>
</table>

5、媒体相关属性

5.1、controls

在音频或视频元素中显示播放控件。例如：

bash 复制代码

<video src="video.mp4" controls></video>

5.2、autoplay

自动播放媒体文件（需注意用户体验）。例如：

bash 复制代码

<audio src="audio.mp3" autoplay></audio>

5.3、loop

循环播放媒体文件。例如：

bash 复制代码

<video src="video.mp4" loop></video>

6、语义化与结构属性

6.1、rel

定义链接与当前文档的关系（如stylesheet、nofollow等）。例如：

bash 复制代码

<link rel="stylesheet" href="style.css">

6.2、lang

定义元素的文本语言（如en、zh-CN）。例如：

bash 复制代码

<html lang="zh-CN">

6.3、aria-*

WAI-ARIA属性，增强网页的可访问性（如aria-label、role等）。例如：

bash 复制代码

<button aria-label="关闭">X</button>