常用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,意味着对应的内容无需做任何翻译。
相关推荐
吃货界的硬件攻城狮2 分钟前
【显示模块】嵌入式显示与触摸屏技术理论
stm32·单片机·嵌入式硬件·学习
rui锐rui1 小时前
大数据学习6:Sqoop数据迁移工具
大数据·学习·sqoop
psybrain1 小时前
脑科学圈| 利用眼动追踪评估演讲情境下焦虑障碍儿童的注视行为
学习·心理学·脑科学·课堂·焦虑·儿童青少年·眼动
序属秋秋秋2 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
B1nna3 小时前
Docker学习
学习·docker·容器
promising-w9 小时前
【运算放大器专题】基础篇
嵌入式硬件·学习
宝山哥哥9 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
前端开发与ui设计的老司机9 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
X Y O10 小时前
神经网络初步学习3——数据与损失
人工智能·神经网络·学习