分享 24 个常用且有效的 HTML 属性

1、Accept

设置允许用户输入文件的类型

<input type="file" accept=".jpg, .png">

接受一种或多种文件类型的逗号分隔列表。如果允许特定媒体类型的所有文件,用法如:accept="image/*"。

注:仅与 <input> 标记的文件类型一起使用。

2、Autofocus

用于设置特定元素待页面加载完成时自动获得焦点

<input type="text" autofocus>

注:文档或对话框中只有一个元素能具有 autofocus 属性,如果需要应用于多个元素中,则会将第一个元素设置为焦点。

3、Inputmode

根据设置的属性值为用户匹配适当的虚拟键盘,方便用户输入

<input type="text" inputmode="text"/> //默认值

<input type="text" inputmode="email"/> //便于输入邮箱地址

<input type="text" inputmode="numeric"/> //方便用户输入数字

<input type="text" inputmode="tel"/> //方便用户输入电话

<input type="text" inputmode="search"/> //方便用户搜索

<input type="text" inputmode="url"/>    便于输入URL

4、Pattern

指定在表单提交时检查 <input> 值的正则表达式

<input name="username" id="username" pattern="[A-Za-z0-9]+">

5、 Required

确保在提交表单之前必须填写元素

<form action="/send_form.js"> 
    Username: <input type="text" name="username" required> 
    <input type="submit"> 
</form>

6、Autocomplete

指定浏览器是否有权提供帮助以填写电子邮件、电话号码、国家/地区等表单字段(自动补全)。

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

7、Multiple

该属性允许用户选择多个值

<input type="file" multiple>

可以将它与 <input> 和 <select> 标记的文件和电子邮件类型一起使用。

8、Download

指定当用户单击超链接时将下载目标

<a href="document.pdf" download="下载的文件名">点击下载</a>

注:当下载跨域资源时,有些浏览器因为跨域问题而无法下载

9、Contenteditable

该属性允许用户编辑元素的内容

<div contenteditable="true">您可以编辑该区域</div>

10、Readonly

指定输入字段是只读的

<input type="text" id="sports" name="sports" value="golf" readonly>

注:用户仍然可以选择它、突出显示它并从中复制文本,若要禁止这些操作,用 disabled 属性。

11、Hidden

指定元素是否可见

<p hidden>隐藏</p>

12、Spellcheck

定义是否检查元素的拼写错误

<p contenteditable="true" spellcheck="true">注意拼写</p>

通常,不会检查所有不可编辑的元素,即使 spellcheck 属性设置为 true ,并且浏览器支持拼写检查。

13、Translate

指定页面本地化时是否应翻译元素

<footer><p translate="no">翻译</p></footer>

14、Loading

指定浏览器是应该立即加载图像还是推迟加载屏幕外图像,例如,直到用户滚动到它们附近

<img src="https://cdn.mysite.com/media/image.jpg" loading="lazy">

eager 是默认值,lazy 用于延迟(也称为延迟加载

15、Onerror

如果未加载原件,则允许添加备用图像

<img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/>

如果后备图像本身不可用, this.οnerrοr=null 用于防止循环。

16、Poster

允许在下载视频时添加要显示的图像

<video src="https://cdn.mysite.com/media/video.mp4"poster="image.png"></video>

如果未指定,则在第一帧可用之前不显示任何内容,然后,第一帧显示为张贴帧。

17、Controls

指定是否在播放器上显示音频/视频控件

<audio controls>
    <source src="track11.mp3" type="audio/mpeg">
</audio>

18、Autoplay

指定音频/视频在加载后立即自动开始播放

<video autoplaysrc="url"poster="image.png"></video>

19、Loop

指定音频/视频将在每次完成时重新开始(自动播放)

<audio loop>
    <source src="track323.mp3"  type="audio/mpeg">
</audio>

20、Cite

指向内容的来源、更改或删除的参考点

<blockquote cite="url">  
    <p>来源</p>
</blockquote>

21、Datetime

它指定删除/插入文本的日期和时间

<p> 我的计划时间
    <del datetime="2023-03-29T01:21">跑步</del>   
    <ins datetime="2023-03-29T02:07">健身</ins>
</p>
<p>我将在xx期限内完成
    <time datetime="2021-12-31"></time>
</p>

当与 <time> 元素一起使用时,它表示机器可读格式的日期/时间。

22、Async

确保脚本与页面的其余部分异步执行。

<script src="script.js" async></script>

注:async 属性只对外部脚本有影响(src 属性必须存在)

23、Defer

确保在页面完成解析后执行脚本

<script src="script.js" defer></script>

注:defer 属性只对外部脚本有影响(src 属性必须存在)

24、Draggable

指定元素是否可拖动

<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black">
</div>
<p id="drag" draggable="true" ondragstart="drag(event)">请将我拖拽到盒子里</p>

注:以上代码中οndrοp="drop(event)"οndragοver="allowDrop(event)"、以及οndragstart="drag(event)"涉及到javaScript,想要继续了解的可以自行浏览文档 ,点击前往查看

最后

希望本文可以帮助到,大家如果有任何问题,欢迎在留言区留言 

感谢您的阅读,阿里嘎多

猜你喜欢

转载自blog.csdn.net/weixin_52057286/article/details/129828227