你可能不知道的强大 HTML 属性
前端全栈开发者
共 1814字,需浏览 4分钟
·
2021-07-16 04:13
有很多事情我们可以简单地通过使用HTML属性来完成。本文介绍了这些强大的属性。
1.Download
download
属性指定了当用户单击超链接时将下载目标(在 href
属性中指定的文件)。
<a href="/images/program.jpg" download>
2.ContentEditable
在HTML中,任何元素都可以编辑。使用一些JavaScript事件处理程序,你可以把你的网页转换成一个完整而快速的富文本编辑器。当一个HTML元素的 contenteditable
设置为 true
时,document.execCommand()
方法就可用了。这让你可以运行命令来操作可编辑区域的内容。
<div contenteditable="true">
This text can be edited by the user.
</div>
3.Multiple
multiple
属性是一个布尔属性。当存在时,它指定用户可以一次选择多个选项。
<label for="tech">Choose a technology:</label>
<select name="tech" id="tech" multiple>
<option value="angular">Angular</option>
<option value="react">React</option>
<option value="vue">vue</option>
</select>
<!-- or -->
<input type="file" multiple>
4.Poster
poster
属性指定了在视频下载时或用户点击播放按钮前显示的图像。如果不包括这个,将使用视频的第一帧来代替。
<video poster="/gif/poster.gif">
<source src="trailer.mp4" type="video/mp4">
</video>
5.Hidden
hidden
属性是一个布尔属性。如果存在,浏览器将不会显示指定了 hidden
属性的元素。
<p hidden>You won't see me on the browser, only developers can!</p>
6.Accept
accept
属性指定用户可以从文件输入对话框中选择的文件类型的过滤器。accept
属性只能与 <input type="file">
一起使用。
<form action="/...">
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
<input type="submit">
</form>
<!-- or -->
<input type="file" accept=".jpg, .png" >
最近文章
2021年加速App开发的8个最佳跨平台框架 提高 VS Code 编辑器性能的 5 个技巧 使用React 360创建虚拟现实(VR)体验 自由职业者开发定价指南,自由职业者应按小时计费吗? Prisma:适用于Node.js和TypeScript的完整ORM Flutter还是React Native?谁是2021年构建移动应用程序的最佳选择? CSS的:placeholder-shown伪类有什么用? 你应该经常使用的7种Vue模式 编程日历小程序,对小程序云开发和生成海报的实践 一个付费 chrome 插件的一生
评论