0
点赞
收藏
分享

微信扫一扫

7 个少见但有用的 HTML 属性

本文是译文,采用意译。

​HTML​​​ 是 ​​web​​​ 开发的基石。然而很多急于速成的开发者对其浅尝即止,立马去学习 ​​CSS​​​, ​​JS​​ 或其他,错失了其潜力。

下面是很多初学者对 ​​HTML​​ 不熟悉的属性。

也许拥有几年的开发者都不知道。说的就是俺 💨

1. Multiple

​multiple​​​ 属性是一个布尔值,允许用户在 ​​<input>​​​ 标签操作,​​<input>​​​ 标签的类型 ​​type​​​ 是 ​​file​​​ 或者 ​​email​​​。当然,你也可以用在 ​​<select>​​ 标签。

对于 ​​email​​​ 类型的 ​​<input>​​​,添加上 ​​multiple​​​ 属性,你输入的邮箱值需要用 ​​,​​ 分隔开,内容不允许有空格。

对于 ​​file​​​ 类型的 ​​<input>​​,你可以多选文件上传。

<input type="file" multiple

2. Accept

​<input>​​​ 元素有 ​​accept​​​ 属性,它允许你指明上传文件 ​​file​​ 的类型。

你需要通过 ​​,​​ 来分割文件类型。

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

当然,你还可以使用它上传音频或视频。

3. Contenteditable

​contenteditable​​​ 是一个全局的属性(对于所有的 HTML 元素都适用),它可以使得 ​​HTML​​ 的可被用户编辑。

需要注意的是,它仅对可见内容和DOM的内容进行更改。

<div contenteditable="true">I'm a cool editable div ;)</div>

7 个少见但有用的 HTML 属性_HTML

当然,如果你想使得整个文档的内容都可以编辑,你可以直接使用 ​​document.designMode = "on"​​​,关闭编辑则使用 ​​document.designMode = "off"​​。如果你想保存整个文档或者某个编辑内容,可以直接通过 DOM 操作完成。

4. Spellcheck

​spellcheck​​​ 也是一个全局的属性,可以检验 ​​HTML​​​ 内容是否有拼写的语法错误,你可以用在 ​​input​​ 或其他元素上。

⚠️注意:通常不检查不可编辑元素的拼写错误,即使 ​​spellcheck​​​ 被设置为 ​​true​​ 并且浏览器支持检查。

<!-- 不检查 -->
<p spellcheck="true">
Thanks furr checkinng my speling :)</p>

<!-- 检查 -->
<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>

5. Translate

​translate​​ 告诉浏览器指定的内容是否应该被翻译。

比如:你想阻止谷歌自动翻译你公司名称或者品牌名称。

<footer><p translate="no">LearnPine</p></footer>

6. Poster

当视频正在加载中或者当用户开始播放视频前,我们可以用 ​​poster​​ 属性设定指定的视频海报。

如果 ​​poster​​ 未指定图片,则视频的第一帧可用之后作为海报显示。

<video controls
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>

7. Download

​download​​​ 属性结合 ​​<a>​​​ 元素,告诉浏览器下载的 ​​URL​​,而不是导航到它,提示用户将其下载到本地。

你还可以命名文件。

<a href="index.html" download="fileName">Download me :)</a>

url 指向 video,image 资源,不会直接下载,会进行跳转

原文 7 useful HTML attributes you may not know

Not Bad!

举报

相关推荐

0 条评论