当前位置: 首页 > news >正文

HTML属性

HTML(HyperText Markup Language)是网页开发的基石,而属性(Attribute)则是HTML元素的重要组成部分。它们为标签提供附加信息,控制元素的行为、样式或功能。本文将从基础到进阶,全面解析HTML属性的核心概念和应用场景。


一、HTML属性的基本结构

属性位于HTML元素的开始标签中,由以下部分组成:

<元素名 属性名="属性值">内容</元素名>
  • 属性名:定义功能的名称(如 hrefsrc

  • 属性值:赋予属性的具体参数(如 "https://example.com"

  • 引号规范:双引号为标准写法,单引号可在特殊场景使用

示例:

<a href="https://example.com" title="访问示例网站">点击这里</a>

二、常见属性类型

1. 核心通用属性

属性作用示例
id唯一标识元素<div id="header">
class定义CSS类选择器<p class="text-red">
style直接内联样式<span style="color: blue;">
title鼠标悬停提示信息<abbr title="World Wide Web">WWW</abbr>

2. 表单相关属性

<input type="email" name="user_email" placeholder="输入邮箱" required>
<textarea rows="4" cols="50" maxlength="200"></textarea>
  • type: 定义输入类型(text/password/checkbox等)

  • disabled: 禁用表单控件

  • pattern: 正则表达式验证

3. 媒体资源属性

<img src="logo.png" alt="公司标志" width="200" loading="lazy">
<video controls autoplay muted><source src="movie.mp4" type="video/mp4">
</video>
  • src: 资源路径

  • alt: 图片描述(SEO与可访问性关键)

  • preload: 视频预加载策略

4. 元数据属性

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">

三、全局属性(Global Attributes)

适用于所有HTML元素的通用属性:

1. 内容可编辑

<div contenteditable="true">用户可编辑区域</div>

2. 数据存储

<article data-author="张三" data-publish-date="2023-08-20"></article>

通过JavaScript访问:

document.querySelector('article').dataset.author; // 返回"张三"

3. 无障碍访问

<nav aria-label="主菜单"><button aria-expanded="false">菜单</button>
</nav>

4. 其他重要全局属性

  • hidden:隐藏元素(保持DOM存在)

  • tabindex:控制Tab键导航顺序

  • lang:定义元素语言(如lang="en"


四、自定义属性规范

HTML5引入的data-*属性规范:

<div data-user-id="U1234" data-role="admin"></div>
  • 命名规则:必须小写,包含连字符

  • JavaScript访问方式:

    element.dataset.userId; // 返回"U1234"

五、使用注意事项

  1. 属性顺序:不影响功能但建议保持一致性

  2. 引号省略:仅限无空格的值(不推荐)

  3. 布尔属性:存在即生效(如<input disabled>

  4. 语义化优先:优先使用标准属性

  5. 兼容性检查:新属性需验证浏览器支持


六、最佳实践

  1. 可访问性:为图片添加alt,为表单添加label

  2. 响应式设计:配合srcsetsizes属性

  3. 性能优化:使用loading="lazy"延迟加载

  4. 安全防护:表单添加rel="noopener"防止钓鱼

相关文章:

HTML属性

HTML&#xff08;HyperText Markup Language&#xff09;是网页开发的基石&#xff0c;而属性&#xff08;Attribute&#xff09;则是HTML元素的重要组成部分。它们为标签提供附加信息&#xff0c;控制元素的行为、样式或功能。本文将从基础到进阶&#xff0c;全面解析HTML属性…...

计算机网络 4-1 网络层(网络层的功能)

【考纲内容】 &#xff08;一&#xff09;网络层的功能 异构网络互连&#xff1b;路由与转发&#xff1b;SDN基本概念&#xff1b;拥塞控制 &#xff08;二&#xff09;路由算法 静态路由与动态路由&#xff1b;距离-向量路由算法&#xff1b;链路状态路由算法&#xff1b;层…...

《算法导论(第4版)》阅读笔记:p17-p27

《算法导论(第4版)》学习第 10 天&#xff0c;p17-p27 总结&#xff0c;总计 11 页。 一、技术总结 1. insertion sort (1)keys The numbers to be sorted are also known as the keys(要排序的数称为key)。 第 n 次看插入排序&#xff0c;这次有两个地方感触比较深&#…...

C++中线程安全的对多个锁同时加锁

C中线程安全的对多个锁同时加锁 C中线程安全的对两个锁同时加锁 C中线程安全的对两个锁同时加锁 参考文档&#xff1a;https://llfc.club/articlepage?id2UVOC0CihIdfguQFmv220vs5hAG 如果我们现在有一个需要互斥访问的变量 big_object&#xff0c;它的定义如下&#xff1a; …...

子串简写(JAVA)一维前缀和, 蓝桥杯

这个题用前缀和&#xff0c;开两个数组&#xff0c;一个存前n个字符数据的c1的数字个数&#xff0c;另一个前n个字符c2的数字个数&#xff0c;然后遍历一次加起来&#xff0c;有一个测试点没过去&#xff0c;把那个存最后数的换成long&#xff0c;应该是这题数据范围给的不对&a…...

数据库故障排查全攻略:从实战案例到体系化解决方案

一、引言&#xff1a;数据库故障为何是技术人必须攻克的 "心腹大患" 在数字化时代&#xff0c;数据库作为企业核心数据资产的载体&#xff0c;其稳定性直接决定业务连续性。据 Gartner 统计&#xff0c;企业每小时数据库 downtime 平均损失高达 56 万美元&#xff0…...

vllm笔记

目录 vllm简介vllm解决了哪些问题&#xff1f;1. **瓶颈&#xff1a;KV 缓存内存管理低效**2. **瓶颈&#xff1a;并行采样和束搜索中的内存冗余**3. **瓶颈&#xff1a;批处理请求中的内存碎片化** 快速开始安装vllm开始使用离线推理启动 vLLM 服务器 支持的模型文本语言模型生…...

“AI+城市治理”智能化解决方案

目录 一、建设背景 二、需求分析 三、系统设计 四、系统功能 五、应用场景 六、方案优势 七、客户价值 八、典型案例 一、建设背景 当前我国城市化率已突破65%,传统治理模式面临前所未有的挑战。一方面,城市规模扩大带来治理复杂度呈指数级增长,全国城市管理案件年…...

《医疗AI的透明革命:破解黑箱困境与算法偏见的治理之路》

医疗AI透明度困境 黑箱问题对医生和患者信任的影响&#xff1a;在医疗领域&#xff0c;AI模型往往表现为难以理解的“黑箱”&#xff0c;这会直接影响医生和患者对其诊断建议的信任度 。医生如果无法理解AI给出诊断的依据&#xff0c;就难以判断模型是否存在偏见或错误&#x…...

【论文阅读】Efficient and secure federated learning against backdoor attacks

Efficient and secure federated learning against backdoor attacks -- 高效且安全的可抵御后门攻击的联邦学习 论文来源问题背景TLDR系统及威胁模型实体威胁模型 方法展开服务器初始化本地更新本地压缩高斯噪声与自适应扰动聚合与解压缩总体算法 总结优点缺点 论文来源 名称…...

21、DeepSeekMath论文笔记(GRPO)

DeepSeekMath论文笔记 0、研究背景与目标1、GRPO结构GRPO结构PPO知识点**1. PPO的网络模型结构****2. GAE&#xff08;广义优势估计&#xff09;原理****1. 优势函数的定义**2.GAE&#xff08;广义优势估计&#xff09; 2、关键技术与方法3、核心实验结果4、结论与未来方向关键…...

深入解析:如何基于开源p-net快速开发Profinet从站服务

一、Profinet协议与软协议栈技术解析 1.1 工业通信的"高速公路" Profinet作为工业以太网协议三巨头之一,采用IEEE 802.3标准实现实时通信,具有: 实时分级:支持RT(实时)和IRT(等时实时)通信模式拓扑灵活:支持星型、树型、环型等多种网络结构对象模型:基于…...

腾讯多模态定制化视频生成框架:HunyuanCustom

HunyuanCustom 速读 一、引言 HunyuanCustom 是由腾讯团队提出的一款多模态定制化视频生成框架。该框架旨在解决现有视频生成方法在身份一致性(identity consistency)和输入模态有限性方面的不足。通过支持图像、音频、视频和文本等多种条件输入&#xff0c;HunyuanCustom 能…...

警惕C#版本差异多线程中的foreach陷阱

警惕C#版本差异多线程中的foreach陷阱​ 同样的代码,不同的结果闭包捕获的“时间差”问题绕过闭包陷阱的三种方法Lambda立即捕获(代码简洁)显式传递参数(兼容性最佳)使用Parallel.ForEach(官方推荐)注意事项:版本兼容性指南警惕多线程中的foreach陷阱:C#版本差异引发的…...

2024年AI发展趋势全面解析:从多模态到AGI的突破

2024年AI发展五大核心趋势 1. 多模态AI的爆发式增长 GPT-4V、Gemini等模型实现文本/图像/视频的跨模态理解应用场景扩展至智能客服、内容创作、工业质检等领域 2. 小型化与边缘AI的崛起 手机端LLM&#xff08;如Phi-2&#xff09;实现本地化部署隐私保护与实时响应的双重优…...

高精度之加减乘除之多解总结(加与减篇)

开篇总述&#xff1a;精度计算的教学比较杂乱&#xff0c;无系统的学习&#xff0c;且存在同法多线的方式进行同一种运算&#xff0c;所以我写此篇的目的只是为了直指本质&#xff0c;不走教科书方式&#xff0c;步骤冗杂。 一&#xff0c;加法 我在此讲两种方法&#xff1a; …...

Arduino 开源按键库大合集(单击/双击/长按实现)

2025.5.10 22:25更新&#xff1a;增加了Button2 2025.5.10 13:13更新&#xff1a;增加了superButton 虽然Arduino自带按键中断attachInterrupt(button1.PIN, isr, FALLING);&#xff0c;但是要是要实现去抖&#xff0c;双击检测&#xff0c;长按检测等等就略微麻烦些&#xff0…...

相机Camera日志分析之八:高通Camx HAL架构opencamera三级日志详解及关键字

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:相机Camera日志分析之七:高通Camx HAL架构opencamera二级日志详解及关键字 这一篇我们开始讲: 相机Camera日志分析之八:高通Camx HAL架构opencamera三级日志详解及关键字 目录 【关注我,后续持续…...

Java零组件实现配置热更新

在某些场景下&#xff0c;我们需要实现配置的热更新&#xff0c;但是又要实现软件即插即用的需求&#xff0c;这就使我们不能引入过多复杂的插件&#xff0c;而nacos等配置中心在分布式业务场景下对配置的管理起着很重要作用&#xff0c;为此需要想一些办法去代替它们而完成同样…...

Kotlin高阶函数多态场景条件判断与子逻辑

Kotlin高阶函数多态场景条件判断与子逻辑 fun main() {var somefun: (Int, Float) -> Longval a 4val b 5fsomefun multi()//if 某条件println(somefun.invoke(a, b))//if 某条件somefun add()println(somefun.invoke(a, b)) }fun multi(): (Int, Float) -> Long {re…...

Ethercat转Profinet网关如何用“协议翻译术“打通自动化产线任督二脉

Ethercat转Profinet网关如何用"协议翻译术"打通自动化产线任督二脉 将遗留的Profinet设备&#xff08;如传感器&#xff09;接入现代EtherCAT主站&#xff08;如Codesys控制器&#xff09;避免全面更换硬件。 作为一名电气工程师&#xff0c;我最近面临的一个挑战&a…...

每日算法刷题Day1 5.9:leetcode数组3道题,用时1h

1.LC寻找数组的中心索引(简单) 数组和字符串 - LeetBook - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 思想: 计算总和和左侧和&#xff0c;要让左侧和等于右侧和&#xff0c;即左侧和总和-左侧和-当前数字 代码 c代码: class Solution { public:i…...

MySQL的视图

一、MySQL视图的介绍和作用 MySQL视图&#xff0c;加油兄弟们&#xff0c;孰能生巧&#xff0c;完整代码在最后&#xff01;&#xff01;&#xff01; 视图是一个虚拟的表&#xff0c;并不是真是存在的&#xff0c;视图其实并没有真实的数据&#xff0c;他只是根据一个sql语句…...

旅游推荐数据分析可视化系统算法

旅游推荐数据分析可视化系统算法 本文档详细介绍了旅游推荐数据分析可视化系统中使用的各种算法&#xff0c;包括推荐算法、数据分析算法和可视化算法。 目录 推荐算法 基于用户的协同过滤推荐基于浏览历史的推荐主题推荐算法 亲子游推荐算法文化游推荐算法自然风光推荐算法…...

Pandas:数据处理与分析

目录 一、Pandas 简介 二、Pandas 的安装与导入 三、Pandas 的核心数据结构 &#xff08;一&#xff09;Series &#xff08;二&#xff09;DataFrame 四、Pandas 数据读取与写入 &#xff08;一&#xff09;读取数据 &#xff08;二&#xff09;写入数据 五、数据清洗…...

非阻塞式IO-Java NIO

一、NIO简介 Java NIO是Java1.4引入的一种新的IO API&#xff0c;它提供了非阻塞式IO&#xff0c;选择器、通道、缓冲区等新的概念和机制。相比传统的IO&#xff0c;多出的N不单纯是新的&#xff0c;更表现在Non-blocking非阻塞&#xff0c;NIO具有更高的并发性、可扩展性以及…...

tryhackme——Enumerating Active Directory

文章目录 一、凭据注入1.1 RUNAS1.2 SYSVOL1.3 IP和主机名 二、通过Microsoft Management Console枚举AD三、通过命令行net命令枚举四、通过powershell枚举 一、凭据注入 1.1 RUNAS 当获得AD凭证<用户名>:<密码>但无法登录域内机器时&#xff0c;runas.exe可帮助…...

(二)Linux下基本指令 2

【知识预告】 16. date 指令 17. cal 指令 18. find 指令 19. which指令 20. whereis 指令 21. alias 指令 22. grep 指令 23. zip/unzip 指令 24. tar 指令 25. bc 指令 26. uname ‒r 指令 27. 重要的⼏个热键 28. 关机 16 date 指令 指定格式显⽰时间&#xff1a;date %Y-…...

[ctfshow web入门] web70

信息收集 使用cinclude("php://filter/convert.base64-encode/resourceindex.php");读取的index.php error_reporting和ini_set被禁用了&#xff0c;不必管他 error_reporting(0); ini_set(display_errors, 0); // 你们在炫技吗&#xff1f; if(isset($_POST[c])){…...

第三章 Freertos智能小车遥控控制

本文基于小车APP&#xff0c;通过与蓝牙模块进行连接&#xff0c;发送特定信号给小车主控&#xff0c;实现对小车的模式切换、灯光控制、前进、后退、左右控制。目前还未加入电机控制&#xff0c;具体的电机控制效果还不能实现&#xff0c;但是可以进行模式切换与灯光控制。 …...

Spring 6.x 详解介绍

Spring 6.x 是 Spring Framework 的最新主版本&#xff0c;于2022年11月正式发布&#xff0c;标志着对 Java 17 和 Jakarta EE 9 的全面支持&#xff0c;同时引入了多项革新性特性&#xff0c;旨在优化性能、简化开发并拥抱现代技术趋势。 一、核心特性与架构调整 Java 17 与 J…...

阿里云OSS+CDN自动添加文章图片水印配置指南

文章目录 一、环境准备二、OSS水印样式配置三、CDN关键配置四、Handsome主题自动化配置五、水印效果验证六、常见问题排查 一、环境准备 资源清单 阿里云OSS Bucket&#xff08;绑定自定义域名 static.example.com&#xff09;阿里云CDN加速域名&#xff0c;回源为Bucket的域名…...

hot100-子串-JS

一、560.和为k的子串 560. 和为 K 的子数组 提示 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例 2…...

LeetCode 270:在二叉搜索树中寻找最接近的值(Swift 实战解析)

文章目录 摘要描述题解答案题解代码分析示例测试及结果时间复杂度空间复杂度总结 摘要 在日常开发中&#xff0c;我们经常需要在一组有序的数据中快速找到最接近某个目标值的元素。LeetCode 第 270 题“Closest Binary Search Tree Value”正是这样一个问题。本文将深入解析该…...

《操作系统真象还原》第十三章——编写硬盘驱动程序

文章目录 前言硬盘及分区表创建从盘及获取安装的磁盘数创建磁盘分区表硬盘分区表浅析 编写硬盘驱动程序硬盘初始化修改interrupt.c编写ide.h编写ide.c 实现thread_yield和idle线程修改thread.c 实现简单的休眠函数修改timer.c 完善硬盘驱动程序继续编写ide.c 获取硬盘信息&…...

DNS服务实验

该文章将介绍DNS服务的正向和反向解析实验、主从实验、转发服务器实验以及Web解析实验 正向解析实验&#xff1a;将域名解析为对应的IP地址 反向解析实验&#xff1a;将IP地址解析为对应的域名 主从实验&#xff1a;主服务器区域数据文件发送给从服务器&#xff0c;从服务器…...

SierraNet M1288网络损伤功能显著助力GPU互联网络的测试验证,包含包喷洒,LLR等复杂特性的验证测试

SierraNet M1288 以太网协议分析仪 产品概述 SierraNet M1288 是一款兼具高性价比与全面功能的以太网和光纤通道数据捕获及协议验证系统。它能够以全线路速率 100% 记录所有流量&#xff0c;并借助 InFusion™ 工具实现高级错误注入和流量破坏功能&#xff0c;为开发人员和协议…...

HunyuanCustom:文生视频框架论文速读

《HunyuanCustom: A Multimodal-Driven Architecture for Customized Video Generation》论文讲解 一、引言 本文提出了 HunyuanCustom&#xff0c;这是一个基于多模态驱动的定制化视频生成框架。该框架旨在解决现有视频生成模型在身份一致性&#xff08;identity consistenc…...

HTTP、HTTPS、SSH区别以及如何使用ssh-keygen生成密钥对

HTTP、HTTPS、SSH区别以及如何使用ssh-keygen生成密钥对 HTTP (HyperText Transfer Protocol) 定义&#xff1a;应用层协议&#xff0c;用于通过Web传输数据&#xff08;如网页、文件&#xff09;默认端口&#xff1a;80机制&#xff1a;客户端发送Get请求&#xff0c;服务器…...

如何启动vue项目及vue语法组件化不同标签应对的作用说明

如何启动vue项目及vue语法组件化不同标签应对的作用说明 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性。【帮帮志系列文章】&…...

Ubuntu22.04安装显卡驱动/卸载显卡驱动

报错 今日输入nvidia-smi报错,在安装了535和550,包括560都没办法解决,但是又怕乱搞导致环境损坏,打算把显卡卸载然后重新安装系统默认推荐版本的显卡驱动 qinqin:~$ nvidia-smi Failed to initialize NVML: Driver/library version mismatch NVML library version: 560.35卸载…...

【桌面】【输入法】常见问题汇总

目录 一、麒麟桌面系统输入法概述 1、输入法介绍 2、输入法相关组件与服务 3、输入法调试相关命令 3.1、输入法诊断命令 3.2、输入法配置重新加载命令 3.3、启动fcitx输入法 3.4、查看输入法有哪些版本&#xff0c;并安装指定版本 3.5、重启输入法 3.6、查看fcitx进程…...

Web3 初学者学习路线图

目录 🌟 Web3 初学者学习路线图 🧩 第一步:搞懂 Web3 是什么 ✅ 学什么? 🔧 推荐工具: 🎥 推荐学习: 🛠️ 第二步:了解智能合约和 Solidity(核心技能) ✅ 学什么? 🔧 工具: 📘 推荐课程: 🌐 第三步:连接前端和区块链,创建简单 DApp ✅ 学…...

python打卡day21

常见的降维算法 知识点回顾&#xff1a; LDA线性判别PCA主成分分析t-sne降维 之前学了特征降维的两个思路&#xff0c;特征筛选&#xff08;如树模型重要性、方差筛选&#xff09;和特征组合&#xff08;如SVD/PCA&#xff09;。 现在引入特征降维的另一种分类&#xff1a;无/有…...

KNOWLEDGE-BASED SYSTEMS(KBS期刊)投稿经验分享

期刊介绍&#xff1a; KBS是计算机一区&#xff0c;CCF-c期刊&#xff0c;&#xff08;只看大类分区&#xff0c;小类不用看&#xff0c;速度很快&#xff0c;桌拒比较多&#xff0c;能送审就机会很大&#xff01;&#xff09; 具体时间流程&#xff1a; 7月初投稿&#xf…...

vue使用rules实现表单校验——校验用户名和密码

编写校验规则 常规校验 const rules {username: [{ required: true, message: 请输入用户名, trigger: blur },{ min: 5, max: 16, message: 长度在 5 到 16 个字符, trigger: blur }],password: [{ required: true, message: 请输入密码, trigger: blur },{ min: 5, max: 1…...

[CANN] 安装软件依赖

环境 昊算平台910b NPUdocker容器 安装步骤 安装依赖-安装CANN&#xff08;物理机场景&#xff09;-软件安装-开发文档-昇腾社区 apt安装miniconda安装 Apt 首先进行换源&#xff0c;参考昇腾NPU容器内 apt 换源 Miniconda 安装miniconda mkdir -p ~/miniconda3 wget …...

代码随想录算法训练营第三十七天

LeetCode题目: 300. 最长递增子序列674. 最长连续递增序列718. 最长重复子数组2918. 数组的最小相等和(每日一题) 其他: 今日总结 往期打卡 300. 最长递增子序列 跳转: 300. 最长递增子序列 学习: 代码随想录公开讲解 问题: 给你一个整数数组 nums &#xff0c;找到其中最长…...

Qt开发经验 --- 避坑指南(11)

文章目录 [toc]1 QtCreator同时运行多个程序2 刚安装的Qt编译报错cannot find -lGL: No such file or directory3 ubuntu下Qt无法输入中文4 Qt版本发行说明5 Qt6.6 VS2022报cdb.exe无法定位dbghelp.dll输入点6 Qt Creator13.0对msvc-qmake-jom.exe支持有问题7 银河麒麟系统中ud…...

vue 组件函数式调用实战:以身份验证弹窗为例

通常我们在 Vue 中使用组件&#xff0c;是像这样在模板中写标签&#xff1a; <MyComponent :prop"value" event"handleEvent" />而函数式调用&#xff0c;则是让我们像调用一个普通 JavaScript 函数一样来使用这个组件&#xff0c;例如&#xff1a;…...