HTML 属性 用法详解

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:指定提交方法,如GETPOST
  • enctype:指定表单数据编码类型,如multipart/form-data
  • <input>标签
  • type:指定输入类型,如textpasswordemail等。
  • value:设置输入框的默认值。
  • placeholder:提供输入提示文本。
  • required:标记为必填项。
  • disabled:禁用输入框。
  • readonly:只读(可选中但不可编辑)。
  • multiple:允许多选,如文件上传。
  • pattern:使用正则表达式验证输入内容。
  • min/max:限制数值范围。
  • step:设置数值步长。
  • minlength/maxlength:限制文本长度。
  • <video>/<audio>标签
  • src:指定媒体文件URL。
  • controls:显示播放控件。
  • autoplay:自动播放(部分浏览器限制)。
  • loop:循环播放。
  • muted:静音。
  • preload:预加载策略,如nonemetadataauto
  • <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('值已改变!')">
发布日期:
分类:HTML 标签:

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注