你可能不知道的7个非常有用的HTML属性

724 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

大家知道HTML是Web开发三大件中的基础,很多人觉得HTML并不具有很大难度,进而花更多的时间去学习CSS和JavaScript,忽略了HTML作为表现层的重要作用。

今天我们来看看那些容易所被人忽视,但却非常有用的那些HTML属性。

如果你还知道其他很有用的标签属性,请在评论区里告诉我,我会补充在文章里

1)multiple

支持multiple属性的标签有<input><select>,input支持type为file或者email时。

为email时,可以在输入框中通过逗号分隔的方式输入多个email地址。

为file时,可以按住Ctrl或者Shift键选择多个文件。

平时,大家可能原生标签用的少,都用现成的组件库,也要多了解其中的基础原理。

<!-- 上传文件 -->
<input type="file" multiple>
<!-- 邮箱 -->
<input type="email" multiple>
<!-- 选择框 -->
<select multiple>
  <option>value1</option>  
  <option>value2</option>
</select>

2) accept

支持multiple的标签有

使用accept属性可以使<input> file标签指定用户上传的文件类型。

如果有多种文件类型使用逗号进行分隔。

一般我们可以用来限制用户上传图片或者视频的格式。

平时,我们可能会用上传组件,用JS去判断文件类型。但HTML其实是提供了这个功能。

<input type="file" accept=".png, .jpg">

3) contenteditable

contenteditable是一个全局的HTML属性,可以用在任何的HTML元素上,使用contenteditable后可使标签进入可编辑的状态。像是一个简单的编辑器。

<style>
  div { 
    font-size: 32px;
    color: blue;
  }
</style>
<div contenteditable="true">我是傲夫靠斯,快来编辑我吧</div>

kapture-2021-09-27at17.56.24

4) spellcheck

spellcheck是另一个全局属性,用来检查输入的内容单词拼写和语法是否正确,比如input和contenteditable元素。

注意:需要浏览器支持spellcheck,对于中文错误也是无可奈舍。

做国际化业务的小伙伴们可以试试。

<p contenteditable="true" spellcheck="true">
I'm a little shep 我是已只小绵羊</p>

image-20210927175528863

5) translate

translate属性告诉浏览器是否翻译该元素内的内容。

比如我们可以禁止翻译页面的专业英文词汇或者品牌英文Logo的等,或者全部禁止翻译。

<header>
  <p translate="no">Hello ByteDance</p>
</header>

6) poster

使用poster属性指定一张图片作为video标签的封面,当视频未加载完毕或加载完成时会一直显示设置的封面,直到用户点击播放按钮。

如果未设置poster,会加载图片的第一帧作为视频的封面。

<video controls 
src="https://www.w3school.com.cn/i/movie.ogg"
poster="https://www.w3school.com.cn/i/eg_tulip.jpg">
</video>
  1. download

使用download属性和a标签配合,浏览器会直接下载该文件,而不是去打开新标签页。

也可以使用download去指定下载文件的名称。

<a href="index.html" download="fileName">点击下载</a>

总结

以上就是今天的分享,有更多有趣好玩有用的属性分享在评论区中,我会补充到文章中。

觉得文章不错,欢迎关注公号(点击关注),每天更新一篇有用的内容。