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

大家好,我是大澈!

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

关注微信公众号:"程序员大澈",免费加入问答群,一起交流技术难题与未来!现在关注公众号,免费送你 "前后端入行大礼包" ,包含了:前后端面试题、面试技巧、简历模版、前后端学习路线图、前后端全技术栈学习笔记。

1. 干货速览

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

  • inputmode属性:改变键盘布局
  • poster属性:设置视频封面
  • tabindex属性:改变Tab键导航顺序
  • dir属性:改变文本排列方向

下面对其展开详细讲解!

2. 干货详细

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

2.1 inputmode

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

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

HTML 复制代码
<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 属性的话,默认将视频第一帧作为视频的封面。

HTML 复制代码
<video src="" poster="./cover.jpg"></video>

2.3 tabindex

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

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

HTML 复制代码
<input type="text" tabindex="1" />
<input type="text" tabindex="3" />
<input type="text" tabindex="2" />

2.4 dir

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

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

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

2.5 小结

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

  • inputmode属性:改变键盘布局
  • poster属性:设置视频封面
  • tabindex属性:改变Tab键导航顺序
  • dir属性:改变文本排列方向

赶紧去试试吧!

结语

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

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

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

关注微信公众号:"程序员大澈",免费加入问答群,一起交流技术难题与未来!现在关注公众号,免费送你 "前后端入行大礼包" ,包含了:前后端面试题、面试技巧、简历模版、前后端学习路线图、前后端全技术栈学习笔记。

相关推荐
三思而后行,慎承诺3 分钟前
react的fiber 用法
前端·javascript·react.js
阿伟来咯~1 小时前
vue3+Nest.js项目 部署阿里云
开发语言·javascript·ecmascript
工业互联网专业1 小时前
基于springboot+vue的健康健身追踪系统
java·vue.js·spring boot·毕业设计·源码·课程设计·健康健身追踪系统
不想上班只想要钱2 小时前
vue3使用<el-date-picker分别设置开始时间和结束时间时,设置开始时间晚于当前时间,开始时间早于结束时间,结束时间晚于开始时间
前端·javascript
2501_915373882 小时前
Electron 入门指南
前端·javascript·electron
同志327133 小时前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟3 小时前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
吃瓜群众i3 小时前
兼容IE8浏览器的8个实用知识点
前端·javascript
猫头虎4 小时前
如何解决IDE项目启动报错 error:0308010C:digital envelope routines::unsupported 问题
javascript·ide·vue.js·typescript·node.js·编辑器·vim
Mintopia4 小时前
Three.js 在数字孪生中的应用场景教学
前端·javascript·three.js