HTML 属性

前言

  • HTML 元素可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述于开始标签

  • 属性总是以名称/值对的形式出现,比如:name="value"

1、实例

  • HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

    1
    <a href="https://www.qianchia.com">这是一个链接</a>
  • 效果

2、引用属性值

  • 属性值应该始终被包括在引号内。

  • 双引号是最常用的,不过使用单引号也没有问题,在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

  • class 属性可以多用 class=" " (引号里面可以填入多个 class 属性)

  • id 属性只能单独设置 id=" "(只能填写一个,多个无效)

3、使用小写属性

  • 属性和属性值对大小写不敏感。

  • 不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

  • 而新版本的 (X)HTML 要求使用小写属性。

4、全局属性

  • 全局属性列表
属性 描述 值描述 备注 🔗
accesskey 设置访问元素的键盘快捷键 character 指定激活元素的快捷键 🔗
class 规定元素的类名(classname),可以填入多个 class 属性 classname 规定元素的类的名称 🔗
contenteditable 规定是否可编辑元素的内容 true

false
指定元素是可编辑的

指定元素是不可编辑的
H5 新加 🔗
contextmenu 指定一个元素的上下文菜单 menu_id 要打开的 <menu> 元素的 id H5 新加 🔗
data-* 用于存储私有页面后应用的自定义数据 somevalue 指定属性值 (一个字符串) H5 新加 🔗
dir 设置元素中内容的文本方向 ltr

rtl

auto
默认。从左向右的文本方向

从右向左的文本方向

让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用
🔗
draggable 指定某个元素是否可以拖动 true

false

auto
规定元素是可拖动的

规定元素是不可拖动的

使用浏览器的默认特性
H5 新加 🔗
dropzone 指定是否将数据复制,移动,或链接,或删除 copy

move

link
拖动数据会导致被拖数据产生副本

拖动数据会导致被拖数据移动到新位置

拖动数据会生成指向原始数据的链接
H5 新加 🔗
hidden hidden 属性规定对元素进行隐藏 如果使用该属性,则会隐藏元素 H5 新加 🔗
id 规定元素的唯一 id,只能填写一个,多个无效 id 规定元素的唯一 id 🔗
lang 设置元素中内容的语言代码 language_code 规定元素内容的语言代码。语言代码参考手册 🔗
spellcheck 检测元素是否拼写错误 true

false
规定应当对元素的文本进行拼写检查

规定不应对元素的文本进行拼写检查
H5 新加 🔗
style 规定元素的行内样式(inline style) style_definitions 一个或多个由分号分隔的 CSS 属性和值 🔗
tabindex 设置元素的 Tab 键控制次序 number 规定元素的 tab 键控制顺序(1 是第一) 🔗
title 规定元素的额外信息(可在工具提示中显示) text 规定元素的工具提示文本(tooltip text) 🔗
translate 指定是否一个元素的值在页面载入时是否需要翻译 yes

no
规定元素内容需要翻译

规定元素内容不需要翻译
H5 新加 🔗

5、全局事件属性

  • HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

  • 下面的表格提供了标准的事件属性,可以把它们插入 HTML/XHTML 元素中,以定义事件行为。

5.1 窗口事件属性(Window Event Attributes)

  • 由窗口触发该事件 (适用于 <body> 标签)。
属性 描述 备注 🔗
onafterprint script 在打印文档之后运行脚本 H5 新加 🔗
onbeforeprint script 在文档打印之前运行脚本 H5 新加 🔗
onbeforeonload script 在文档加载之前运行脚本 H5 新加
onblur script 当窗口失去焦点时运行脚本
onerror script 当错误发生时运行脚本 H5 新加
onfocus script 当窗口获得焦点时运行脚本
onhashchange script 当文档改变时运行脚本 H5 新加
onload script 当文档加载时运行脚本 🔗
onmessage script 当触发消息时运行脚本 H5 新加
onoffline script 当文档离线时运行脚本 H5 新加
ononline script 当文档上线时运行脚本 H5 新加
onpagehide script 当窗口隐藏时运行脚本 H5 新加
onpageshow script 当窗口可见时运行脚本 H5 新加
onpopstate script 当窗口历史记录改变时运行脚本 H5 新加
onredo script 当文档执行再执行操作(redo)时运行脚本 H5 新加
onresize script 当调整窗口大小时运行脚本 H5 新加 🔗
onstorage script 当 Web Storage 区域更新时(存储空间中的数据发生变化时)运行脚本 H5 新加
onundo script 当文档执行撤销时运行脚本 H5 新加
onunload script 当用户离开文档时运行脚本 H5 新加 🔗

5.2 表单事件属性(Form Event Attributes)

  • 表单事件在 HTML 表单中触发 (适用于所有 HTML 元素, 但该 HTML 元素需在 form 表单内)。
属性 描述 备注 🔗
onblur script 当元素失去焦点时运行脚本 🔗
onchange script 当元素改变时运行脚本 🔗
oncontextmenu script 当触发上下文菜单时运行脚本 H5 新加
onfocus script 当元素获得焦点时运行脚本 🔗
onformchange script 当表单改变时运行脚本 H5 新加
onforminput script 当表单获得用户输入时运行脚本 H5 新加
oninput script 当元素获得用户输入时运行脚本 H5 新加
oninvalid script 当元素无效时运行脚本 H5 新加
onreset script 当表单重置时运行脚本。HTML 5 不支持
onselect script 当选取元素时运行脚本 🔗
onsubmit script 当提交表单时运行脚本 🔗

5.3 键盘事件属性(Keyboard Event Attributes)

属性 描述 备注 🔗
onkeydown script 当按下按键时运行脚本 🔗
onkeypress script 当按下并松开按键时运行脚本 🔗
onkeyup script 当松开按键时运行脚本 🔗

5.4 鼠标事件属性(Mouse Event Attributes)

  • 通过鼠标触发事件, 类似用户的行为。
属性 描述 备注 🔗
onclick script 当单击鼠标时运行脚本 🔗
ondblclick script 当双击鼠标时运行脚本 🔗
ondrag script 当拖动元素时运行脚本 H5 新加
ondragend script 当拖动操作结束时运行脚本 H5 新加
ondragenter script 当元素被拖动至有效的拖放目标时运行脚本 H5 新加
ondragleave script 当元素离开有效拖放目标时运行脚本 H5 新加
ondragover script 当元素被拖动至有效拖放目标上方时运行脚本 H5 新加
ondragstart script 当拖动操作开始时运行脚本 H5 新加
ondrop script 当被拖动元素正在被拖放时运行脚本 H5 新加
onmousedown script 当按下鼠标按钮时运行脚本 🔗
onmousemove script 当鼠标指针移动时运行脚本 🔗
onmouseout script 当鼠标指针移出元素时运行脚本 🔗
onmouseover script 当鼠标指针移至元素之上时运行脚本 🔗
onmouseup script 当松开鼠标按钮时运行脚本 🔗
onmousewheel script 当转动鼠标滚轮时运行脚本 H5 新加
onscroll script 当滚动元素的滚动条时运行脚本 H5 新加

5.5 多媒体事件属性(Media Event Attributes)

  • 通过视频(videos),图像(images)或者音频(audio) 触发该事件,多应用于 HTML 媒体元素比如 <audio>, <embed>, <img>, <object>, 和 <video>
属性 描述 备注 🔗
onabort script 当发生中止事件时运行脚本
oncanplay script 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 H5 新加
oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 H5 新加
ondurationchange script 当媒介长度改变时运行脚本 H5 新加
onemptied script 当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本 H5 新加
onended script 当媒介已抵达结尾时运行脚本 H5 新加
onerror script 当在元素加载期间发生错误时运行脚本 H5 新加
onloadeddata script 当加载媒介数据时运行脚本 H5 新加
onloadedmetadata script 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 H5 新加
onloadstart script 当浏览器开始加载媒介数据时运行脚本 H5 新加
onpause script 当媒介数据暂停时运行脚本 H5 新加
onplay script 当媒介数据将要开始播放时运行脚本 H5 新加
onplaying script 当媒介数据已开始播放时运行脚本 H5 新加
onprogress script 当浏览器正在取媒介数据时运行脚本 H5 新加
onratechange script 当媒介数据的播放速率改变时运行脚本 H5 新加
onreadystatechange script 当就绪状态(ready-state)改变时运行脚本 H5 新加
onseeked script 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本 H5 新加
onseeking script 当媒介元素的定位属性为真且定位已开始时运行脚本 H5 新加
onstalled script 当取回媒介数据过程中(延迟)存在错误时运行脚本 H5 新加
onsuspend script 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本 H5 新加
ontimeupdate script 当媒介改变其播放位置时运行脚本 H5 新加
onvolumechange script 当媒介改变音量亦或当音量被设置为静音时运行脚本 H5 新加
onwaiting script 当媒介已停止播放但打算继续播放时运行脚本 H5 新加

5.6 其他事件属性

属性 描述 备注 🔗
onshow script <menu> 元素在上下文显示时触发 H5 新加 🔗
ontoggle script 当用户打开或关闭 <details> 元素时触发 H5 新加 🔗
文章目录
  1. 1. 前言
  2. 2. 1、实例
  3. 3. 2、引用属性值
  4. 4. 3、使用小写属性
  5. 5. 4、全局属性
  6. 6. 5、全局事件属性
    1. 6.1. 5.1 窗口事件属性(Window Event Attributes)
    2. 6.2. 5.2 表单事件属性(Form Event Attributes)
    3. 6.3. 5.3 键盘事件属性(Keyboard Event Attributes)
    4. 6.4. 5.4 鼠标事件属性(Mouse Event Attributes)
    5. 6.5. 5.5 多媒体事件属性(Media Event Attributes)
    6. 6.6. 5.6 其他事件属性
隐藏目录