常用HTML全局属性学习记录

accesskey

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

autocapitalize

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

contenteditable

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

其中属性值truefalse是所有浏览器都支持的,而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,意味着对应的内容无需做任何翻译。
相关推荐
xian_wwq3 小时前
【学习笔记】攻击链贯穿端边云!边缘网络访问三大核心风险预警
笔记·学习·安全·边缘计算
深蓝海拓6 小时前
PySide6从0开始学习的笔记(一) 学前班
笔记·学习
EveryPossible7 小时前
优先级调整练习1
大数据·学习
逐辰十七7 小时前
FreeRTOS 中断管理 (Chapter 17) 核心学习大纲
学习
智行众维7 小时前
【用户心得】SCANeR™Studio学习笔记(六):人因工程Pack——一站式搞定驾驶模拟的多模态数据同步
笔记·学习·自动驾驶·汽车·仿真·scaner·人因工程
kissgoodbye20127 小时前
cadence学习之基础知识
网络·学习
xian_wwq8 小时前
【学习笔记】基于人工智能的火电机组全局性能一体化优化研究
人工智能·笔记·学习·火电
阿蒙Amon8 小时前
JavaScript学习笔记:6.表达式和运算符
javascript·笔记·学习
potato_15549 小时前
Windows11系统安装Isaac Sim和Isaac Lab记录
人工智能·学习·isaac sim·isaac lab
我命由我123459 小时前
python-dotenv - python-dotenv 快速上手
服务器·开发语言·数据库·后端·python·学习·学习方法