常用HTML全局属性学习记录

accesskey

指定访问当前元素的快捷键。(此时并没有深入去研究这个属性,但是当一个产品用户体量很大的情况下就需要去做快捷键和无障碍访问部分。)

autocapitalize

autocapitalize属性用来控制文本在用户输入/编辑时的大小写,这个属性更适合英文场景,中文场景无效。

contenteditable

可以让元素处于内容可编辑状态。

其中属性值true和false是所有浏览器都支持的,而plaintext-only等属性值火狐浏览器并不支持。

data-*

指开发人员自己设置的各种自定义属性,方便开发的时候获取。

html 复制代码
<div data-test="test"></div>

除了使用 HTMLElement.getAttribute() 方法,还可以使用 HTMLElement.dataset 访问这些自定义属性值,详细看这篇文章

dir

dir属性是可以改变文档流的水平流动方向,设计的初衷是用在多语言处理中。因为有的语言是从右至左的。

  • ltr,指从左 到右,用于那种从左向右书写的语言(比如英语);
  • rtl,指从右 到左,用于那种从右向左书写的语言(比如阿拉伯语);
  • auto,指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法,直到发现一个具有强方向性的字符,然后将这一方向应用于整个元素。

在聊天界面的布局中可以得到应用

draggable

draggable属性在拖拽交互中非常有用。

draggable 可以有如下取值:

  • true:表示元素可以被拖动
  • false:表示元素不可以被拖动

浏览器默认行为是内容可以拖拽,布局不能。

但是,有时候我们希望某些内容不能拖拽,但是布局可以拖拽,则就需要用到draggable属性,(详细看这个文章)

hidden

hidden属性可以让元素隐藏,表现为display:none,相比类名或者style设置display:none的优点在于优先级极低,可以轻松reset。

inputmode

inputmode的作用是告知虚拟键盘应该显示何种类型的键盘,例如是显示数字键盘呢,还是显示网址键盘还是显示邮箱键盘?

对于<input>元素,这个属性是个鸡肋,请使用原生的兼容性更好的type属性,例如:

html 复制代码
<input type="number">
<input type="tel">
<input type="url">
<input type="email">

inputmode属性适合设置了contenteditable的普通元素,例如:

html 复制代码
<div typemode="numeric" contenteditable="plaintext-only"></div>

tabindex

tabindex可以用来设置元素是否能够被Tab键索。

  • 如果属性值是负值,表示当前元素可以被focus,但是不能使用键盘访问到。
  • 如果属性值是0,表示可以被focus,按照DOM先后位置顺序被键盘访问。
  • 如果属性值是正值,则表示可以被focus,同时有优先的键盘访问属性。

title

title表示元素的标题,在PC端浏览器中,鼠标hover会显示相关的提示。

translate

translate属性表示是否允许浏览器对当前元素进行翻译。

该属性可以有以下值:

  • 空字符串或 yes,意味着网页在进行本地化的时候,对应内容要被翻译。
  • no,意味着对应的内容无需做任何翻译。
相关推荐
dadaobusi8 小时前
学习: PCIe 6.0 的 L0p
学习
燕落南枝10 小时前
CSS 学习:类型选择器与 AI 注释实战
css·人工智能·学习
Swilderrr14 小时前
论文精读:《Directory-Aware Query and Maintenance in Vector Databases》
笔记·学习
kkkkkkkkkk_Z14 小时前
新手自学嵌入式 | 学习日记:LCD显示原理、PWM控制、电容触摸屏(GT9147)驱动开发与项目实战
驱动开发·学习
LXT71215 小时前
每日英语一读|为什么夏天的雷雨,总爱在傍晚出现?
深度学习·学习
知识分享小能手15 小时前
C学习教程,从入门到精通,C语言文件 — 完整知识点详解(14)
c语言·网络·学习
羊羊一洋15 小时前
ROM&RAM
c语言·stm32·学习
优化Henry16 小时前
LTE小区光路降质告警排查与处理实录
运维·网络·学习·5g·tdd
暖馒16 小时前
运动控制框架相关知识
学习
stereohomology17 小时前
我对DeepSeek4.1flash能力变化的感觉和第三方评估相当
人工智能·学习·llm