实用干货:分享4个冷门但非常实用的HTML属性

大家好,我是大澈!

本文约1100+字,整篇阅读大约需要2分钟。

关注微信公众号:“程序员大澈”,免费加入问答群,一起交流技术难题与未来!

现在关注公众号,免费送你 ”前后端入行大礼包“ ,包含了:前后端面试题、面试技巧、简历模版、前后端学习路线图、前后端全技术栈学习笔记。

1. 干货速览

今天分享4个冷门但非常实用的HTML属性,列出来。

  • inputmode属性:改变键盘布局
  • poster属性:设置视频封面

  • tabindex属性:改变Tab键导航顺序

  • dir属性:改变文本排列方向

图片

下面对其展开详细讲解!

2. 干货详细

先简单介绍4个HTML冷门属性,最后做小结。

2.1 inputmode

inputmode 属性是 HTML5 中的一个相对较新的属性,用于指定浏览器在输入字段中应该使用的输入模式。

说白了,在H5中,inputmode值会影响弹出的键盘布局。

<div>默认值,普通文本:<input type="text" inputmode="text" /></div>
<div>电话号码:<input type="text" inputmode="tel" /></div>
<div>url地址:<input type="text" inputmode="url" /></div>
<div>邮箱:<input type="text" inputmode="email" /></div>
<div>数字:<input type="text" inputmode="numeric" /></div>
<div>小数:<input type="text" inputmode="decimal" /></div>
<div>搜索:<input type="text" inputmode="search" /></div>

图片

此时,可能有的朋友会有疑问:input 元素的 type 属性和 inputmode 属性,有啥区别?

用通俗的语言解释,type属性用于限制输入值的类型,inputmode 属性用于限制弹出键盘的布局。

2.2 poster

poster 属性是 video 元素的一个属性,接受一个图片的 URL,该图片将作为视频的封面。

当然,如果你没有设置 poster 属性的话,默认将视频第一帧作为视频的封面。

<video src="" poster="./cover.jpg"></video>

2.3 tabindex

tabindex 属性用于指定元素在通过 Tab 键进行键盘导航时的顺序,接受一个整数值,用于确定元素在 Tab 键顺序中的位置。

请注意,滥用或不正确使用 tabindex 属性,可能会导致键盘导航的混乱和不一致。

<input type="text" tabindex="1" />
<input type="text" tabindex="3" />
<input type="text" tabindex="2" />

图片

2.4 dir

dir 属性用于定义元素内容的文本方向。

它是一个全局属性,适用于大多数 HTML 元素。

<p dir="ltr">从左往右排版</p>
<p dir="rtl">从右往左排版</p>
<p dir="auto">自动检测文本排版</p>

图片

2.5 小结

今天大澈给朋友们分享了4个HTML冷门属性。

  • inputmode属性:改变键盘布局
  • poster属性:设置视频封面

  • tabindex属性:改变Tab键导航顺序

  • dir属性:改变文本排列方向

赶紧去试试吧!

结语

  • 我是大澈,一个喜欢交朋友、喜欢分享、喜欢搞钱的90后小伙。

  • 文章主分享前后端功能问题实现、次分享技术资讯、实用干货。

  • 遇到技术难题,在问答群里与众多同行朋友一起讨论成长。

关注微信公众号:“程序员大澈”,免费加入问答群,一起交流技术难题与未来!

现在关注公众号,免费送你 ”前后端入行大礼包“ ,包含了:前后端面试题、面试技巧、简历模版、前后端学习路线图、前后端全技术栈学习笔记。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/730843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

炉石传说(ccf201609-3)解题思路

题目 * 玩家会控制一些角色&#xff0c;每个角色有自己的生命值和攻击力。当生命值小于等于 0 时&#xff0c;该角色死亡。角色分为英雄和随从。   * 玩家各控制一个英雄&#xff0c;游戏开始时&#xff0c;英雄的生命值为 30&#xff0c;攻击力为 0。当英雄死亡时&#xff…

软件设计师软考题目解析23 --每日五题

想说的话&#xff1a;要准备软考了。0.0&#xff0c;其实我是不想考的&#xff0c;但是吧&#xff0c;由于本人已经学完所有知识了&#xff0c;只是被学校的课程给锁在那里了&#xff0c;不然早找工作去了。寻思着反正也无聊&#xff0c;就考个证玩玩。 本人github地址&#xf…

TensorRT是什么,有什么作用,如何使用

TensorRT 是由 NVIDIA 提供的一个高性能深度学习推理&#xff08;inference&#xff09;引擎。它专为生产环境中的部署而设计&#xff0c;用于提高在 NVIDIA GPU 上运行的深度学习模型的推理速度和效率。以下是关于 TensorRT 的详细介绍&#xff1a; TensorRT 是 NVIDIA 推出的…

Hive中增量插入的处理

增量数据采集&#xff0c;目前实现的方式是hive中按某个字段创建分区表&#xff0c; insert override的时候where语句带上对应的增量过滤条件。 我一般选取日期字段ETL_DATE。 hive建立分区表&#xff0c;hql如下&#xff1a; CREATE TABLE IF NOT EXISTS product_sell( cate…

抖店怎么运营?学会这个,玩赚整个抖店市场!

我是电商珠珠 我做电商已经有五年的时间了&#xff0c;做抖店也3年多了&#xff0c;期间还带着学生一起做店。 今天就来给你们讲讲店铺的运营流程&#xff0c;你只要按照这个流程去做店&#xff0c;理解了其中的精髓&#xff0c;就会有明显的效果。 一、类目 抖店运营的第一…

freeRTOS20240308

1.总结任务的调度算法&#xff0c;把实现代码再写一下 2.总结任务的状态以及是怎么样进行转换的

Java集合面试题(day 02)

&#x1f4d1;前言 本文主要是【JAVA】——Java集合面试题的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&am…

容器: string

引言: 为什么要有string类型, 就使用字符数组表示字符串不行吗? 原因: 使用字符数组描述文本信息, 无法确定开多大空间, 开多了浪费,开少了不够用使用string封装: 扩容机制:减少了空间的浪费各种接口:方便修改等操作 string的使用 容量相关 size:获取字符个数,不包含\0 (C语言…

从huggingface下载模型像本地加载但是UnicodeDecodeError

我自己是在Linux下出现了这个问题 原文&#xff1a;https://github.com/huggingface/transformers/issues/13674 The path for the AutoModel should be to a directory pointing to a pytorch_model.bin and to a config.json. Since you’re pointing to the .bin file dire…

探究java final、finally、finalize的异同

探究final、finally、finalize的异同 在Java编程语言中&#xff0c;final、finally和finalize是三个看似相似但实际上用途迥异的关键词。它们各自在Java的不同场景中扮演着重要角色。本文旨在深入探讨这三个关键词的含义、用法以及它们之间的区别。 1. final final是一个Jav…

无限debugger的几种处理方式

不少网站会在代码中加入‘debugger’&#xff0c;使你F12时一直卡在debugger&#xff0c;这种措施会让新手朋友束手无策。 js中创建debugger的方式有很多&#xff0c;基础的形式有&#xff1a; ①直接创建debugger debugger; ②通过eval创建debugger&#xff08;在虚拟机中…

ERD Online 快速启动指南:代码下载到首次运行的全流程攻略 ️

&#x1f680; 一、代码下载 ERD online前端代码正常拉取即可&#x1f44c; 后端代码含有子模块&#xff0c;拉取命令如下&#xff1a; git clone --recurse-submodules https://github.com/www-zerocode-net-cn/martin-framework.git &#x1f6e0;️ 二、代码构建 &#x1f3…

PROTEUS可以在单片机设计时帮助你做什么

引言 在单片机&#xff08;MCU&#xff09;设计过程中&#xff0c;验证和调试是非常重要的步骤。然而&#xff0c;使用实际硬件进行验证和调试需要大量的时间和成本。这时&#xff0c;PROTEUS作为一款强大的电子设计自动化软件&#xff0c;可以极大地提高设计效率&#xff0c;…

算法二刷day3

203.移除链表元素 class Solution { public:ListNode* removeElements(ListNode* head, int val) {ListNode *dummyHead new ListNode(0);dummyHead->next head;ListNode *cur dummyHead;while (cur->next ! nullptr) {if (cur->next->val val) {ListNode *tm…

安全防御-第七次

在FW5和FW6之间建立一条IPSEC通道保证10.0.2.0/24网段可以正常访问到192.168.1.0/24 NAT&#xff1a; 安全策略&#xff1a; NAT: 安全策略&#xff1a; 修改服务器映射&#xff1a; 配置IPSEC&#xff1a;

物联网的商业模式洞察

大约在十年前&#xff08;2014年11月&#xff09;&#xff0c;全球知名管理思想家、哈佛商学院教授迈克尔波特与PTC前首席执行官吉姆赫普尔曼&#xff0c;在《哈佛商业评论》上联合撰写了一篇备受赞誉的文章&#xff0c;题为《智能互联产品如何改变竞争》。在这篇文章中&#x…

零基础,学6个月嵌入式,能找到工作吗?

今天看到一个老铁问&#xff0c;他报了个班&#xff0c;学6个月&#xff0c;学完能找到工作吗&#xff1f; 我看了下他的学习内容&#xff0c;包含C语言、数据结构、系统编程、网络编程、STM32、RTOS、物联网通讯协议、Linux内核驱动&#xff0c;这是大纲&#xff0c;细节的课程…

前端算法之插入排序

3、插入排序&#xff08;Insertion Sort&#xff09; 插入排序&#xff08;Insertion-Sort&#xff09;的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入…

AIOPS:Zabbix结合讯飞星火做自动化告警+邮件通知并基于人工智能提供解决方案

目前Zabbix官方已经提供Zabbix+ChatGPT的解决方案 ChatGPT一周年,你充分利用了吗?Zabbix+ChatGPT,轻松化解告警! 但是由于需要魔法等其他因素,比较不稳定,遂决定使用国内模型,这里我挑选的是讯飞星火,基于我之前的文档,在此基础上通过Zabbix的告警脚本实现调用AI模型…

Sora的核心技术预测

在ChatGPT火爆全网的一年后&#xff0c;OpenAI公司又一次大显身手&#xff1a;推出了全新的文生视频大模型Sora。直接输入文字提示词&#xff0c;即可直接生成长达60秒的视频。 “现实真的要不存在了。” 马斯克直接大呼&#xff1a;人类彻底完蛋了&#xff01; 马斯克为什么…