一些不被人熟知,但又很好用的HTML属性

news2025/4/5 20:09:27

HTML(超文本标记语言)具有多种属性,可用于增强我们的网页的结构和功能。
下面我就给大家介绍一下,一些很好用的HTML属性,但是不被人熟知的HTML属性

contenteditable:

这个属性使我们的元素变的可编辑。用户可以直接在我们的浏览器中修改元素的内容。

<div contenteditable="true">
    这段内容可以被编辑。
</div>

使用场景:
-可以用来创建富文本编辑器,使用户能够在网页中创建、编辑和格式化文本,

spellcheck:

该属性用于启用或禁用元素的拼写检查功能。(如果用户输入的单词拼写有误,浏览器通常会标记出来并提供纠正建议)

<textarea spellcheck="true">
    这个文本区域启用了拼写检查。
</textarea>

image.png

使用场景:

  • 可以在文章创作者的富文本编辑器中使用,辅助文章创作

代码演示:
jcode

draggable:

该属性使元素可拖动。通常与 JavaScript 结合使用,实现拖放功能。

<img src="image.jpg" draggable="true" alt="可拖动的图片">

使用场景:

  • 在电子商务网站中,用户可以拖动产品图像到购物车区域,以便快速添加商品到购物清单。
  • 在可视化数据分析工具中,用户可以通过拖拽图表或数据元素来定制自己的数据可视化图形。
  • 可以创建一个可拖放的低代码平台

代码演示:
jcode

sandbox:

与 元素一起使用,sandbox 属性限制了嵌入内容的行为,如阻止执行脚本或提交表单。

<iframe src="sandboxed-page.html" sandbox="allow-same-origin allow-scripts"></iframe>

使用场景:

  • 可以在电子邮件客户端中,通过使用 sandbox 属性限制电子邮件中嵌入内容的行为,以确保安全性并防止恶意代码执行。
  • 可以在需要嵌入第三方内容(如广告、外部应用程序等)但又需要限制其行为的情况下使用。这可以防止嵌入的内容执行恶意脚本或访问敏感信息。

download:

该属性与 <a>(锚点)元素一起使用,指定用户单击链接时应下载的目标。

<a href="document.pdf" download="my-document">下载 PDF</a>

使用场景:

  • 可用于提供下载链接,例如下载文档、图像或其他文件。这使得用户可以通过单击链接直接下载相关内容而无需离开页面。

hidden:

该属性用于隐藏页面上的元素。这是最初隐藏内容的简单方法,可以通过 CSS 或 JavaScript 在后来显示。

<p hidden>这个段落最初是隐藏的。</p>

使用场景:

  • 在网页中使用弹出式模态框或折叠式面板,可以利用 hidden 属性来最初隐藏它们,并在用户点击或触发特定事件时展现。
  • 在网页表单验证中,可以将错误消息初始隐藏,只有当用户提交表单出现错误时才显示出来。

defer:

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

使用场景:

  • 在网页底部延迟加载 JavaScript 脚本,以确保页面内容首先加载,提升页面加载速度和性能。
  • 对于异步加载的脚本(async),适用于对网页影响较小的辅助性 JavaScript 脚本,例如网页分析工具或跟踪代码。

async:

类似于 defer,async 属性与

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

使用场景:

  • 在网页底部延迟加载 JavaScript 脚本,以确保页面内容首先加载,提升页面加载速度和性能。
  • 对于异步加载的脚本(async),适用于对网页影响较小的辅助性 JavaScript 脚本,例如网页分析工具或跟踪代码。

Accept 属性:

你可以将 accept 属性与 元素(仅适用于文件类型)一起使用,以指定服务器可以接受的文件类型。

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

使用场景:

  • 在上传图片的社交媒体平台中,限制用户只能上传特定格式(如 JPG、PNG)的图片文件,确保图片质量和页面加载速度。
  • 在在线应用程序中,限制用户只能上传特定类型的文件,例如在云存储服务中只允许上传文档文件。

Translate:

该属性用于指定在页面本地化时,元素的内容是否应该被翻译。

<p translate="no">这段内容不应被翻译。</p>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1977841.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

谷粒商城实战笔记-126-全文检索-ElasticSearch-整合-测试保存

文章目录 一&#xff0c;谷粒商城实战笔记-126-全文检索-ElasticSearch-整合-测试保存1&#xff0c;在Elasticsearch的配置类中增加通用设置2&#xff0c;索引数据3&#xff0c;验证 一&#xff0c;谷粒商城实战笔记-126-全文检索-ElasticSearch-整合-测试保存 1&#xff0c;在…

环境搭建:全面详尽的 MongoDB Shell MongoDB Server介绍、安装、验证与配置指南(以 Windows 系统为主)

环境搭建&#xff1a;全面详尽的 MongoDB Shell & MongoDB Server介绍、安装、验证与配置指南&#xff08;以 Windows 系统为主&#xff09; MongoDB 是一个基于文档的 NoSQL 数据库&#xff0c;以其高性能、灵活性和可扩展性而受到广泛欢迎。本文将带您完成 MongoDB 的安装…

数据结构第十讲:二叉树OJ题

数据结构第十讲&#xff1a;二叉树OJ题 1.单值二叉树2.相同的树3.对称二叉树4. 另一棵树的子树5.二叉树的前序遍历6.二叉树的中序遍历7.二叉树的后序遍历8.二叉树的构建及其遍历9.二叉树选择题9.1二叉树性质19.2二叉树性质29.3二叉树性质三9.4选择题 1.单值二叉树 链接: OJ题链…

Java-----二叉树

1.树型结构 1.1概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看 起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。它具有以下的特点&#xff1a; 1.有…

本地文件上传

java本地文件上传 1、FileController /*** author: yc* des: 文件接口* date: 2024/8/4 11:11*/ RestController RequestMapping("/file") public class FileController {Resourceprivate FileService fileService;PostMapping("/upload")public Respon…

智能交通(6)——DQN代码复现

伪代码 如算法描述&#xff0c;dqn即深度q网络和记忆池 初始化记忆池和可以容纳的数量N 动作价值函数Q使用随机权重进行初始化。 目标动作价值函数Q′也使用相同的权重进行初始化&#xff0c;即Q′Q。 循环训练M局 初始化和预处理观察到的状态 每局循环训练T步 采用e的概…

【Scene Transformer】scene transformer论文阅读笔记

文章目录 序言(Abstract)(Introduction)(Related Work)(Methods)(Scene-centric Representation for Agents and Road Graphs)(Encoding Transformer)(Predicting Probabilities for Each Futures)(Joint and Marginal Loss Formulation) (Results)(Discussion)(Questions) sce…

Linux|最佳命令行下载加速器

引言 无论是远程工作还是本地工作&#xff0c;我们经常需要从外部获取信息。在没有其他选择的情况下&#xff0c;使用命令行工具来获取这些信息是一个不错的选择。 本文[1]将介绍一些通过命令行下载内容时最常使用的工具。 Wget 我们首先介绍一个广受欢迎的工具 wget。它是一个…

使用Qt编译modbus

一.编译库文件 1. 创建library项目 2. 选择要配置的编译器 3. 把自动生成的源码都移除&#xff1a;&#xff08;右键单击&#xff0c;选择 remove&#xff09; 4 4. 导入库源码 把源码拷贝到项目目录下&#xff08;.pro 文件所在的目录&#xff09; 5. 修改 configure.js 文…

(计算机网络)物理层

目录 一.基本概念 二.基本术语 三.码元 四.多路复用技术 一.基本概念 1. 2. 3. 4. 5. 6. 7. 8. 9. 二.基本术语 1. 2. 3.早期--公用的电话网传输数据&#xff0c;网络上传的是模拟信号&#xff0c;调制解调器--将数字信号转化成模拟信号&#xff0c;最后&#xff0c;调制解…

Java: 线程安全问题的解决方案(synchronized)

发生原因 要想解决线程安全问题,那么我们首先得知道线程安全问题为什么会发生. 发生原因: 线程在操作系统中是"随机调度,抢占式执行的"[根本原因].多个线程,同时修改同一个变量修改操作不是"原子"的内存可见性问题指令重排序 解决方案 原因1和2,我们很…

htsjdk库FeatureCodec和Feature接口介绍

在 HTSJDK 库中,FeatureCodec 接口和 Feature 接口分别扮演不同的角色,用于处理基因组数据的不同方面。下面是这两个接口的区别和各自的功能: FeatureCodec 接口 主要功能 编码和解码:FeatureCodec 接口的主要职责是定义如何将数据从文件格式解码为 Java 对象(即 Featur…

【C语言】分支与循环(循环篇)——结尾猜数字游戏实现

前言 C语言是一种结构化的计算机语言&#xff0c;这里指的通常是顺序结构、选择结构、循环结构&#xff0c;掌握这三种结构之后我们就可以解决大多数问题。 分支结构可以使用if、switch来实现&#xff0c;而循环可以使用for、while、do while来实现。 1. while循环 C语言中…

[CP_AUTOSAR]_系统服务_DEM模块(三)功能规范之诊断事件定义

目录 1、诊断事件定义1.1、Event priority&#xff08;事件优先级&#xff09;1.2、Event occurrence&#xff08;事件发生计数器&#xff09;1.3、Event kind&#xff08;事件类别&#xff09;1.4、Event destination&#xff08;故障内存&#xff09;1.5、Diagnostic monitor…

2.MonggoDB是什么?

1. 不是什么&#xff1f; 要想知道MongoDB是什么&#xff0c;我们得先搞清楚它不是什么&#xff0c;首先它不是关系数据&#xff0c;不是像下面这样这种格式存储数据。 这个图展示了关系型数据库的常用存储方式&#xff0c;一个表格&#xff0c;里面存储了多行记录&#xff0…

Linux系统中的两个核心进程:`init`和`kthreadd`

文章目录 1 init 进程1.1 基本信息1.2 主要功能1.3 示例 2 kthreadd 进程2.1 基本信息2.2 主要功能2.3 示例 3 对比总结4 用户空间进程与内核线程4.1 用户空间进程特点 4.2 内核线程特点 5 对比总结6 结论参考链接封面 本文详细对比了Linux系统中的两个核心进程&#xff1a; i…

nvm 对node版本的控制

使用nvm切换Node.js版本的步骤如下 nvm list available // 显示可以安装的所有node.js的版本 如果出现空白 问题解决 经过查找nvm的文档&#xff0c;发现&#xff0c;对于中国用户而言&#xff0c;可以切换nodejs或npm的镜像地址来访问&#xff1a; nvm node_mirror https:…

软raid - - udev规则

一、什么是udev FROM AI: udev是Linux 2.6内核及以后版本中引入的一个设备管理框架&#xff0c;它取代了之前的devfs系统。udev以守护进程的形式运行&#xff0c;并且工作在用户空间而不是内核空间。它的主要功能是动态地创建和管理/dev目录下的设备节点&#xff0c;并且能够根…

SAP支出管理,企业成本控制的智能钥匙

在企业运营中&#xff0c;有效的支出管理是确保财务健康和提升竞争力的关键。SAP支出管理系统作为企业资源规划的核心组成部分&#xff0c;提供了一套全面的解决方案&#xff0c;帮助企业实现成本控制、风险管理和合规性监督。实现支出管理流程自动化&#xff0c;并主动管理更多…

蚂蚁笔试0511-编程题

解题思路&#xff1a; 记录0、正数、负数的个数&#xff0c;分类讨论。 解题思路&#xff1a; 有n个位置&#xff0c;每个位置有m个数&#xff0c;所以一共有m^n种情况&#xff0c;每种情况至少包含权值1&#xff0c;也就是全相等是一段&#xff0c;或者说是一个数形成的 从第二…