常用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,意味着对应的内容无需做任何翻译。
相关推荐
tb_first4 分钟前
万字超详细苍穹外卖学习笔记4
java·spring boot·笔记·学习·spring·mybatis
代码游侠1 小时前
学习笔记——Linux字符设备驱动开发
linux·arm开发·驱动开发·单片机·嵌入式硬件·学习·算法
charlie1145141911 小时前
嵌入式C++教程——ETL(Embedded Template Library)
开发语言·c++·笔记·学习·嵌入式·etl
李小星同志1 小时前
VID2WORLD: CRAFTING VIDEO DIFFUSION MODELSTO INTERACTIVE WORLD MODELS论文学习
学习
laplace01232 小时前
Claude Code 逆向工程报告 笔记(学习记录)
数据库·人工智能·笔记·学习·agent·rag
lingggggaaaa2 小时前
安全工具篇&Go魔改二开&Fscan扫描&FRP代理&特征消除&新增扩展&打乱HASH
学习·安全·web安全·网络安全·golang·哈希算法
Daydream.V3 小时前
网页学习——HTML
学习
张永清-老清3 小时前
每周读书与学习->JMeter性能测试脚本编写实战(四)-利用JMeter对MySQL数据库查询进行性能测试
学习·jmeter·性能调优·jmeter性能测试·性能分析·每周读书与学习
InterestOriented3 小时前
中老年线上学习发展:兴趣岛“内容+服务+空间”融合赋能下的体验升级
人工智能·学习
宇钶宇夕3 小时前
CoDeSys入门实战一起学习(二十八):(ST)三台电机顺起逆停程序详解
运维·学习·自动化·软件工程