Required
确保在提交表单之前必须填写内容
<form action="xxxx.js">
<input type="text" name="username" required>
<input type="submit">
</form>
Autocomplete
指定浏览器是否有权提供帮助以填写电子邮件、电话号码、国家/地区等表单字段
<input type="text" autocomplete="off">
Accept
描述允许的输入文件类型
<input type="file" accept=".png">
接受一种或多种文件类型的逗号分隔列表，如果要允许特定媒体类型的所有文件，使用 accept="image/*"
Autofocus
它表明特定元素应该专注于页面加载
<input type="text" autofocus>
文档或对话框中只有一个元素能具有 autofocus属性
Inputmode
提示用户在编辑元素或器内容时可能输入的数据类型，它允许浏览器显示适当的虚拟键盘
<input type="text" inputmode="url">
<input type="text" inputmode="email">
<input type="text" inputmode="numeric">
Pattern
指定在表单提交时检查 input值的正则表达式
<input type="text" pattern="[A-Za-z0-9]+">
Multiple
允许用户选择多个值
<input type="file" multiple>
Download
指定当用户单击超链接时将下载目标
<a href="document.pdf" download>Download PDF</a>
Contenteditable
允许用户编辑元素的内容
<div contenteditable="true">填写内容</div>
Readonly
指定输入字段是只读状态
<input type="text" value="只读状态" readonly>
Hidden
指定元素是否可见
<p hidden>元素不可见</p>
Spellcheck
是否检查元素的拼写错误
<p contenteditable="true" spellcheck="true">拼写</p>
通常，不会检查所有不可编辑的元素，即使 spellcheck 属性设置为 true 并且浏览器支持拼写检查
Translate
指定页面本地化时是否翻译元素
<footer><p translate="no">Printing Works, Inc</p></footer>
Loading
指定浏览器是应该立即加载图像还是推迟加载屏幕外图像
<img loading="lazy" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fee9079dd-33da-4481-ac74-17f8bbc2ed6c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702294500&t=43ed19787a3e24ac1957a0257b010765" loading="lazy">
Poster
允许在下载视频时添加要显示的图像
<video src="xxx.mp4" poster="image.png"></video>
Async
确保脚本与页面的其余部分异步执行
<script src="script.js" async></script>
async属性只对外部脚本有影响（src属性必须存在）
Defer
确保在页面完成解析后执行脚本
<script src="script.js" defer></script>
Draggable
指定元素是否可拖动
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">拖拽我</p>
<script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData('text', e.target.id)
const drop = (e) => {
let data = e.dataTransfer.getData("text")
if (!data) return false
e.target.appendChild(document.getElementById(data))
}
</script>
Oncontextmenu
禁止用户右键点击， 在body上设置该属性则整个页面会被禁用右键点击
<body oncontextmenu="return false">
学习就是不断不断的重复，没有什么捷径，一点一滴慢慢积累，愿枯燥乏味的学习路上，你我共同勉励
网友评论