小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
大家知道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>
4) spellcheck
spellcheck是另一个全局属性,用来检查输入的内容单词拼写和语法是否正确,比如input和contenteditable元素。
注意:需要浏览器支持spellcheck,对于中文错误也是无可奈舍。
做国际化业务的小伙伴们可以试试。
<p contenteditable="true" spellcheck="true">
I'm a little shep 我是已只小绵羊</p>
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>
- download
使用download属性和a标签配合,浏览器会直接下载该文件,而不是去打开新标签页。
也可以使用download去指定下载文件的名称。
<a href="index.html" download="fileName">点击下载</a>
总结
以上就是今天的分享,有更多有趣好玩有用的属性分享在评论区中,我会补充到文章中。
觉得文章不错,欢迎关注公号(点击关注),每天更新一篇有用的内容。