HTML属性是用于为HTML元素提供附加信息或控制其行为的键值对,通常以name="value"
的形式出现在元素的开始标签中。以下从通用属性、专用属性、自定义属性、布尔属性及事件处理属性五个方面,对其用法进行详解:
一、通用属性
通用属性适用于大多数HTML元素,常见的有:
id
:为元素指定唯一标识符,便于CSS或JavaScript操作。class
:为元素指定一个或多个类名,用于CSS样式化或JavaScript操作。style
:内联定义元素的CSS样式,如<p style="color:red;">
。title
:为元素提供额外信息,鼠标悬停时显示为工具提示。lang
:定义元素内容的语言,如<div lang="zh-CN">
。hidden
:隐藏元素,不显示且不占用空间。contenteditable
:使元素内容可编辑,如<div contenteditable="true">
。dir
:定义文本方向,如<div dir="rtl">
(从右到左)。data-*
:自定义数据属性,用于存储私有数据,如<div data-user-id="123">
。
二、专用属性
专用属性仅适用于特定元素,例如:
<a>
标签:href
:指定链接目标URL,如<a href="https://example.com">
。target
:指定链接打开方式,如_blank
(新窗口)。download
:强制下载链接资源,如<a href="file.pdf" download>
。<img>
标签:src
:指定图像URL,如<img src="image.jpg">
。alt
:提供图像替代文本,用于SEO和无障碍访问。width
/height
:设置图像尺寸。loading
:控制图像加载方式,如lazy
(延迟加载)。<form>
标签:action
:指定表单提交的URL。method
:指定提交方法,如GET
或POST
。enctype
:指定表单数据编码类型,如multipart/form-data
。<input>
标签:type
:指定输入类型,如text
、password
、email
等。value
:设置输入框的默认值。placeholder
:提供输入提示文本。required
:标记为必填项。disabled
:禁用输入框。readonly
:只读(可选中但不可编辑)。multiple
:允许多选,如文件上传。pattern
:使用正则表达式验证输入内容。min
/max
:限制数值范围。step
:设置数值步长。minlength
/maxlength
:限制文本长度。<video>
/<audio>
标签:src
:指定媒体文件URL。controls
:显示播放控件。autoplay
:自动播放(部分浏览器限制)。loop
:循环播放。muted
:静音。preload
:预加载策略,如none
、metadata
、auto
。<table>
标签:border
:设置表格边框(不推荐,建议用CSS)。cellspacing
:设置单元格间距。cellpadding
:设置单元格内容与边框的间距。rowspan
/colspan
:跨越多行/列。<script>
标签:src
:指定外部脚本URL。async
:异步加载脚本。defer
:延迟执行脚本。
三、自定义属性
HTML5引入了data-*
属性,允许开发者自定义数据属性,通常通过JavaScript访问。例如:
<div data-user-id="123" data-role="admin">用户信息</div>
通过JavaScript可以这样访问:
const div = document.querySelector('div');
console.log(div.dataset.userId); // 输出: "123"
console.log(div.dataset.role); // 输出: "admin"
四、布尔属性
布尔属性不需要值,其存在即表示true
,不存在则表示false
。常见的有:
disabled
:禁用元素。readonly
:使输入框只读。required
:指定输入字段为必填项。checked
:指定复选框或单选按钮是否被选中。autoplay
:自动播放媒体(部分浏览器限制)。loop
:循环播放媒体。muted
:静音媒体。
五、事件处理属性
HTML元素可以通过事件处理属性来响应特定事件,例如:
onclick
:当用户点击元素时触发。onmouseover
:当用户将鼠标悬停在元素上时触发。onchange
:当元素的值发生变化时触发。onsubmit
:当表单提交时触发。onkeydown
/onkeyup
:键盘按键事件。
示例:
<button onclick="alert('按钮被点击了!')">点击我</button>
<input type="text" onchange="alert('值已改变!')">