HTML标签常用属性

nico-leco

已于 2024-11-28 21:45:22 修改

阅读量397

点赞数 3

分类专栏：前端文章标签： html 前端

于 2024-11-28 19:12:50 首次发布

本文链接：https://blog.csdn.net/weixin_50577609/article/details/144118624

版权

5 篇文章

订阅专栏

HTML标签的常用属性包括：

id：定义元素的唯一标识符（在同一个HTML文档中）。
```
<div id="main-content"></div>
```
class：为元素指定类名，用于CSS样式应用和JavaScript操作。
```
<div class="content"></div>
```
style：定义元素的行内CSS样式。
```
<div style="color: red;"></div>
```
title：提供了关于元素的额外信息（通常在鼠标悬停时显示）。
```
<img src="image.jpg" title="示例图片">
```
alt：图像的替代文本，当图像无法显示时使用。
```
<img src="image.jpg" alt="示例图片">
```
src：指定外部资源的路径，如图像或视频文件。
```
<img src="image.jpg" alt="示例图片">
```
href：指定链接的目标URL，用于 <a>（锚）标签。
```
<a href="http://www.example.com">访问示例网站</a>
```

target：指定链接打开的目标窗口或框架。

<a href="http://www.example.com" target="_blank">在新标签页打开</a>

type：指定元素的类型，常用于 <input> 和 <script> 标签。

<input type="text" name="firstname">
<script type="text/javascript" src="script.js"></script>

value：指定表单控件的值，常用于 <input> 和 <select> 标签。
```
<input type="text" name="firstname" value="John">
```
name：定义表单控件的名称，用于表单数据的提交。
```
<input type="text" name="firstname">
```

disabled：禁用表单控件，使其不可交互。

<input type="text" name="disabledInput" disabled>

checked：标记 <input> 标签（如单选按钮或复选框）为预选中状态。
```
<input type="checkbox" name="terms" checked>
```

readonly：使 <input> 标签只读，不可修改。

<input type="text" name="readonlyInput" readonly>

required：表单提交时必须填写的字段。

<input type="text" name="firstname" required>

placeholder：提供输入字段的提示文本。

<input type="text" name="firstname" placeholder="输入名字">

rows 和 cols：定义 <textarea> 标签的行数和列数。
```
<textarea rows="4" cols="50"></textarea>
```

for：与 <label> 标签的 id 属性关联，提高表单的可访问性。

<label for="name">名字:</label>
<input type="text" id="name" name="name">

这些属性提供了控制元素行为、样式和功能的基本方法。