丸子学HTML（那些嘎嘎好用的属性）

2023-11-12 本文已影响0人丸子小姐__不懂爱

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">

学习就是不断不断的重复，没有什么捷径，一点一滴慢慢积累，愿枯燥乏味的学习路上，你我共同勉励