We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第13天,点击查看活动详情
本文是译文,采用意译。
HTML 是 web 开发的基石。然而很多急于速成的开发者对其浅尝即止,立马去学习 CSS, JS 或其他,错失了其潜力。
HTML
web
CSS
JS
下面是很多初学者对 HTML 不熟悉的属性。
也许拥有几年的开发者都不知道。说的就是俺 💨
multiple 属性是一个布尔值,允许用户在 <input> 标签操作,<input> 标签的类型 type 是 file 或者 email。当然,你也可以用在 <select> 标签。
multiple
<input>
type
file
email
<select>
对于 email 类型的 <input>,添加上 multiple 属性,你输入的邮箱值需要用 , 分隔开,内容不允许有空格。
,
对于 file 类型的 <input>,你可以多选文件上传。
<input type="file" multiple />
<input> 元素有 accept 属性,它允许你指明上传文件 file 的类型。
accept
你需要通过 , 来分割文件类型。
<input type="file" accept=".png, .jpg" />
当然,你还可以使用它上传音频或视频。
contenteditable 是一个全局的属性(对于所有的 HTML 元素都适用),它可以使得 HTML 的可被用户编辑。
contenteditable
需要注意的是,它仅对可见内容和DOM的内容进行更改。
<div contenteditable="true">I'm a cool editable div ;)</div>
当然,如果你想使得整个文档的内容都可以编辑,你可以直接使用 document.designMode = "on",关闭编辑则使用 document.designMode = "off"。如果你想保存整个文档或者某个编辑内容,可以直接通过 DOM 操作完成。
document.designMode = "on"
document.designMode = "off"
spellcheck 也是一个全局的属性,可以检验 HTML 内容是否有拼写的语法错误,你可以用在 input 或其他元素上。
spellcheck
input
⚠️注意:通常不检查不可编辑元素的拼写错误,即使 spellcheck 被设置为 true 并且浏览器支持检查。
true
<!-- 不检查 --> <p spellcheck="true"> Thanks furr checkinng my speling :)</p> <!-- 检查 --> <p contenteditable="true" spellcheck="true"> Thanks furr checkinng my speling :)</p>
translate 告诉浏览器指定的内容是否应该被翻译。
translate
比如:你想阻止谷歌自动翻译你公司名称或者品牌名称。
<footer><p translate="no">LearnPine</p></footer>
当视频正在加载中或者当用户开始播放视频前,我们可以用 poster 属性设定指定的视频海报。
poster
如果 poster 未指定图片,则视频的第一帧可用之后作为海报显示。
<video controls src="https://bit.ly/3nWh78w" poster="posterImage.png"> </video>
download 属性结合 <a> 元素,告诉浏览器下载的 URL,而不是导航到它,提示用户将其下载到本地。
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!
The text was updated successfully, but these errors were encountered:
No branches or pull requests
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第13天,点击查看活动详情
本文是译文,采用意译。
HTML
是web
开发的基石。然而很多急于速成的开发者对其浅尝即止,立马去学习CSS
,JS
或其他,错失了其潜力。下面是很多初学者对
HTML
不熟悉的属性。1. Multiple
multiple
属性是一个布尔值,允许用户在<input>
标签操作,<input>
标签的类型type
是file
或者email
。当然,你也可以用在<select>
标签。对于
email
类型的<input>
,添加上multiple
属性,你输入的邮箱值需要用,
分隔开,内容不允许有空格。对于
file
类型的<input>
,你可以多选文件上传。2. Accept
<input>
元素有accept
属性,它允许你指明上传文件file
的类型。你需要通过
,
来分割文件类型。当然,你还可以使用它上传音频或视频。
3. Contenteditable
contenteditable
是一个全局的属性(对于所有的 HTML 元素都适用),它可以使得HTML
的可被用户编辑。需要注意的是,它仅对可见内容和DOM的内容进行更改。
4. Spellcheck
spellcheck
也是一个全局的属性,可以检验HTML
内容是否有拼写的语法错误,你可以用在input
或其他元素上。spellcheck
被设置为true
并且浏览器支持检查。5. Translate
translate
告诉浏览器指定的内容是否应该被翻译。比如:你想阻止谷歌自动翻译你公司名称或者品牌名称。
6. Poster
当视频正在加载中或者当用户开始播放视频前,我们可以用
poster
属性设定指定的视频海报。如果
poster
未指定图片,则视频的第一帧可用之后作为海报显示。7. Download
download
属性结合<a>
元素,告诉浏览器下载的URL
,而不是导航到它,提示用户将其下载到本地。你还可以命名文件。
原文 7 useful HTML attributes you may not know
Not Bad!
The text was updated successfully, but these errors were encountered: