你可能没有用过的HTML属性

简介: HTML作为前端三大基础之一,应该没有前端工程师没用过吧。HTML的属性有很多,全部记住也不现实,主要是没必要。但是常见的一些属性还是要时刻记得的,本文就来总结一些可能不常见还是有点意思的HTML属性。

HTML作为前端三大基础之一,应该没有前端工程师没用过吧。HTML的属性有很多,全部记住也不现实,主要是没必要。但是常见的一些属性还是要时刻记得的,本文就来总结一些可能不常见还是有点意思的HTML属性。

enterKeyHint

enterKeyHint是虚拟键盘上回车键呈现的操作标签,这是一个枚举属性,目前只能使用内置的一些值,如果传入其他值或者不是内置的值,将会识别为空字符串,键盘中的回车键将会是默认的文本:

  • enter
  • done
  • go
  • next
  • previous
  • search
  • send

enterKeyHint只能用于可编辑元素上,例如输入框以及contenteditable为true的元素。

<input type="text" enterkeyhint="next">
<div contenteditable></div>

运行效果:

  • 如果是PC端,使用键盘的话将没有什么效果
  • 如果是移动端,使用的是虚拟屏幕键盘,那么可以看到键盘的回车键的文本内容将变成我们设置的。

enterkeyhint兼容性

image-20220610164706429.png

reversed

我们经常使用ol来表示有序的列表,特别是需要显示出编号的情况。ol的编号默认是由低到高,也就是顺序排序,如果我们要想实现编号由高到低排序,则可使用reversed属性

<ol reversed>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

实现效果:

image-20220610214944250.png

如果不使用reversed属性,也可以通过列表的index来计算得到,但是显然这种方式比较麻烦。细心的朋友可能还发现了,虽然列表的编号倒序排序了,但是其内容本身并没有发生变化。

兼容性:

image-20220610214004500.png

既然说到了olreversed属性,那就再来看看其他有意思的属性:

  • start:整数值编号,表示列表的起始值,注意只能为数字。虽然可以指定type为字母、罗马数字等,但是start只能是数字
  • type:设置编号的类型,默认是数字。可选值范围有:

    • 1:表示数字
    • i:表示小写罗马数字
    • I:表示大写罗马数字
    • a:表示小写英文字母
    • A:表示大写英文字母

举个例子:

 <ol reversed start="10" type="1">
     <li>第一项</li>
     <li>第二项</li>
     <li value="20">第三项</li>
     <li>第四项</li>
 </ol>

运行结果:

image-20220611214252373.png

在这里,我们还额外使用到了value属性,可以用来在特定列表项上指定自定义编号。

disablepictureinpicture

什么是画中画?画中画简单点来说就是视频可以脱离页面播放。实现画中画可以操作video,也可以使用canvas,还可以是新增的requestPictureInPicture()方法,本次提到的disablepictureinpicture是HTML的一个新属性,主要用于video标签,可禁止画中画。

<video src="" disablepictureinpicture>

兼容性:

image-20220611220158513.png

download

在实际开发中,遇到需要处理文件下载时,我们经常会采用a标签的方式。但是遇到文本、JSON等内容时,浏览器默认会直接显示而不是下载。如果我们想点击a链接的时候下载文件,那么可以指定download属性,表示下载文件的名称。

如果该名称不是有效的文件名,浏览器会对其进行调整。注意该属性对IE不兼容。

<a href="" download="file" >文件下载</a>

总结

本文简单总结了几个有意思的HTML属性,说不定以后在项目中还能用到。

相关文章
WK
|
2月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
72 1
|
23天前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
22天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
22天前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
22天前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
23天前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
23天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。
|
21天前
|
移动开发 数据安全/隐私保护 HTML5
HTML5 表单属性8
`required`属性确保表单提交前输入框不能为空,适用于多种类型的 `&lt;input&gt;` 标签,如文本、邮箱、密码等。`step`属性则用于指定输入域中合法数值的间隔,常与`max`和`min`属性配合使用,适用于数字、日期等类型。例如,设置`&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;`可使输入值以3为单位递增或递减。
|
24天前
|
移动开发 UED HTML5
HTML5 表单属性1
HTML5为&lt;form&gt;和&lt;input&gt;标签引入了多个新属性,增强了表单的功能性和用户体验。其中,&lt;form&gt;新增了autocomplete和novalidate属性;&lt;input&gt;则增加了如autofocus、formaction、placeholder等13个新属性,支持更精细的表单控制和数据验证。例如,autocomplete属性允许表单或输入字段提供自动完成功能,提高用户填写效率。
|
1月前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。