一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第13天,点击查看活动详情
本文是译文,采用意译。
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> 复制代码
当然,如果你想使得整个文档的内容都可以编辑,你可以直接使用
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 资源,不会直接下载,会进行跳转