【HTML 基础教程】HTML 属性
HTML 属性
属性是 HTML 元素提供的附加信息。
属性通常出现在 HTML 标签的开始标签中,用于定义元素的行为、样式、内容或其他特性。
属性总是以 name="value" 的形式写在标签内,name 是属性的名称,value 是属性的值。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
实例
<a href="http://www.runoob.com">这是一个链接</a>
尝试一下 »
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
使用双引号:
<a href="https://www.runoob.com">Link</a>
使用单引号:
<a href='https://www.runoob.com'>Link</a>
属性值包含引号: Link
提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='John "ShotGun" Nelson'或者:
<a href="https://www.runoob.com?q='search'">Link</a>
HTML 提示:使用小写属性
属性和属性值对大小写不敏感。
不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册。
下面列出了适用于大多数 HTML 元素的属性:
属性名 | 适用元素 | 说明 |
---|---|---|
id | 所有元素 | 为元素指定唯一的标识符。 |
class | 所有元素 | 为元素指定一个或多个类名,用于 CSS 或 JavaScript 选择。 |
style | 所有元素 | 直接在元素上应用 CSS 样式。 |
title | 所有元素 | 为元素提供额外的提示信息,通常在鼠标悬停时显示。 |
data-* | 所有元素 | 用于存储自定义数据,通常通过 JavaScript 访问。 |
href | <a> , <link> | 指定链接的目标 URL。 |
src | <img> , <script> , <iframe> | 指定外部资源(如图片、脚本、框架)的 URL。 |
alt | <img> | 为图像提供替代文本,当图像无法显示时显示。 |
type | <input> , <button> | 指定输入控件的类型(如 text , password , checkbox 等)。 |
value | <input> , <button> , <option> | 指定元素的初始值。 |
disabled | 表单元素 | 禁用元素,使其不可交互。 |
checked | <input type="checkbox"> , <input type="radio"> | 指定复选框或单选按钮是否被选中。 |
placeholder | <input> , <textarea> | 在输入框中显示提示文本。 |
target | <a> , <form> | 指定链接或表单提交的目标窗口或框架(如 _blank 表示新标签页)。 |
readonly | 表单元素 | 使输入框只读。 |
required | 表单元素 | 指定输入字段为必填项。 |
autoplay | <audio> , <video> | 自动播放媒体。 |
onclick | 所有元素 | 当用户点击元素时触发 JavaScript 事件。 |
onmouseover | 所有元素 | 当用户将鼠标悬停在元素上时触发 JavaScript 事件。 |
onchange | 表单元素 | 当元素的值发生变化时触发 JavaScript 事件。 |
全局属性
全局属性是所有 HTML 元素都可以使用的属性。
id:为元素指定唯一的标识符。
<div id="header">This is the header</div>
class:为元素指定一个或多个类名,用于 CSS 或 JavaScript 选择。
<p class="text highlight">This is a highlighted text.</p>
style:用于直接在元素上应用 CSS 样式。
<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>
title:为元素提供额外的提示信息,通常在鼠标悬停时显示。
<abbr title="HyperText Markup Language">HTML</abbr>
data-*:用于存储自定义数据,通常通过 JavaScript 访问。
<div data-user-id="12345">User Info</div>
特定元素的属性
某些属性仅适用于特定的 HTML 元素。
href
(用于 <a>
和 <link>
元素):指定链接的目标 URL。
<a href="https://www.example.com">Visit Example</a>
src
(用于 <img>
, <script>
, <iframe>
等元素):指定外部资源的 URL。
<img src="image.jpg" alt="An example image">
alt(用于 <img>
元素):为图像提供替代文本,当图像无法显示时显示。
<img src="image.jpg" alt="An example image">
type
(用于 <input>
和 <button>
元素):指定输入控件的类型。
<input type="text" placeholder="Enter your name">
value
(用于 <input>
, <button>
, <option>
等元素):指定元素的初始值。
<input type="text" value="Default Value">
disabled(用于表单元素):禁用元素,使其不可交互。
<input type="text" disabled>
checked
(用于 <input type="checkbox">
和 <input type="radio">
):指定复选框或单选按钮是否被选中。
<input type="checkbox" checked>
placeholder
(用于 <input>
和 <textarea>
元素):在输入框中显示提示文本。
<input type="text" placeholder="Enter your email">
target
(用于 <a>
和 <form>
元素):指定链接或表单提交的目标窗口或框架。
<a href="https://www.example.com" target="_blank">Open in new tab</a>
布尔属性
布尔属性是指不需要值的属性,它们的存在即表示 true,不存在则表示 false。
disabled:禁用元素。
<input type="text" disabled>
readonly:使输入框只读。
<input type="text" readonly>
required:指定输入字段为必填项。
<input type="text" required>
autoplay
(用于 <audio>
和 <video>
元素):自动播放媒体。
<video src="video.mp4" autoplay></video>
自定义属性
HTML5 引入了 data-* 属性,允许开发者自定义属性来存储额外的数据。
data-*:用于存储自定义数据,通常通过 JavaScript 访问。
<div data-user-id="12345" data-role="admin">User Info</div>
事件处理属性
HTML 元素可以通过事件处理属性来响应特定的事件,如点击、鼠标悬停等。
onclick:当用户点击元素时触发。
<button οnclick="alert('Button clicked!')">Click Me</button>
onmouseover:当用户将鼠标悬停在元素上时触发。
<div οnmοuseοver="this.style.backgroundColor='yellow'">Hover over me</div>
onchange:当元素的值发生变化时触发。
<input type="text" οnchange="alert('Value changed!')">
更多标准属性说明: HTML 标准属性参考手册.
相关文章:
【HTML 基础教程】HTML 属性
HTML 属性 属性是 HTML 元素提供的附加信息。 属性通常出现在 HTML 标签的开始标签中,用于定义元素的行为、样式、内容或其他特性。 属性总是以 name"value" 的形式写在标签内,name 是属性的名称,value 是属性的值。 HTML 属性 …...
macOS 制作dmg磁盘映像安装包
制作dmg磁盘影像安装包需要准备一下材料: 1. 导出的APP 2. 背景图片 3. 应用程序替身 前两种材料很容易得到。 下面介绍一下 应用程序替身制作过程: Finder —> 选中 应用程序 --> 找到顶部菜单栏中 的 前往 ----> 选择上层文件夹选中应用程…...
Appium中元素定位之一组元素定位API
应用场景 和定位一个元素相同,但如果想要批量的获取某个相同特征的元素,使用定位一组元素的方式更加方便 在 Appium 中定位一组元素的 API 与定位单个元素的 API 类似,但它们返回的是一个元素列表(List<MobileElement>&am…...
webstorm中element-ui标签无法跳转源码
原本用的webstorm2019,之前的项目开发时切实体验过跳转element-ui源码,觉得很香。 更新了webstorm至2024,居然不行了,能弹出来提示,但就是找不到定义。 不知道是不是2024版本的问题,node_moudles不管我是否手动添加exc…...
【蓝桥杯】算法笔记1
1.暴力枚举 给定一个正整数n,请找出所有满足a + b = n的整数对(a, b),其中a和b都是正整数,且a ≤ b。 输入格式:一个正整数n (1 ≤ n ≤ 10⁶) 输出格式:所有符合条件的(a, b)对,每行一对,按a的升序排列。如果没有符合条件的对,输出"No solution"。 问题分…...
Pytorch学习笔记(十一)Learning PyTorch - What is torch.nn really
这篇博客瞄准的是 pytorch 官方教程中 Learning PyTorch 章节的 What is torch.nn really? 部分。主要是教你如何一步一步将最原始的代码进行重构至pytorch标准的代码,如果你已经熟悉了如何使用原始代码以及pytorch标准形式构建模型,可以跳过这一篇。 …...
OpenGL ES 2.0与OpenGL ES 3.1的区别
如果硬件支持且需要更高质量的图形效果,推荐3.1;如果兼容性和开发简便更重要,且效果需求不高,2.0更合适。不过现代车载系统可能越来越多支持3.x版本,所以可能倾向于使用3.1,但具体情况还需调查目标平台的硬…...
【Unity3D脚本与系统设计6】鼠标触摸超时待机实现
实现步骤 在Unity中实现一个功能,当鼠标或触摸超过一定时间没有操作时,自动返回待机界面。 检测输入 首先,我需要检测用户的输入,无论是鼠标还是触摸。Unity的Input系统可以检测到鼠标和触摸事件,比如Input.GetAxis…...
SpringMVC 入门教程
一、SpringMVC 简介 SpringMVC 是基于 MVC 设计模式的轻量级 Web 框架,核心功能包括: 请求分发:通过 DispatcherServlet 统一处理请求。注解驱动:使用 Controller、RequestMapping 简化开发。视图解析:支持 JSP、Thy…...
矿山自动化监测解决方案
1.行业现状 为贯彻落实《中共中央国务院关于推进安全生产领域改革发展的意见》《“十四五”矿山安全生产规划》(应急〔2022〕64号)、《国务院安委会办公室关于加强矿山安全生产工作的紧急通知》(安委办〔2021〕3号)等有关工作部署…...
el-table + el-pagination 前端实现分页操作
el-table el-pagination 前端实现分页操作 后端返回全部列表数据,前端进行分页操作 html代码 <div><el-table :data"tableData" border><el-table-column label"序号" type"index" width"50" /><el…...
NIO ByteBuffer 总结
目录 基本概念创建 ByteBuffer核心属性关键方法切换模式读写操作压缩数据 基本概念 java.nio.ByteBuffer 是 Java NIO 中一个核心类, 用于高效处理二进制数据的读写操作。应用于通道(Channel)的I/O操作。作用: 数据缓冲…...
华为hcia——Datacom实验指南——配置IPv4静态路由,默认路由和浮动静态路由
什么是IPv4 IPv4静态路由,是手动配置的,不会随着网络拓扑的变化而变化,所配置的路由信息也不会在网络中传播,所以它主要运用在小型网络或者作为动态路由的补充。 IPv4的配置 配置的命令很简单 IP route-static (目…...
Git入门——常用指令汇总
以下是一份精心整理的 Git常用指令速查表,基本覆盖日常开发使用场景,建议收藏备用👇 🔧 环境配置 指令作用git config --global user.name "你的名字"设置全局用户名git config --global user.email "你的邮箱&qu…...
深入解析 MyBatis-Plus 批量操作:原理、实现与性能优化
引言 在高并发、大数据量场景下,批量数据库操作是提升系统性能的核心手段之一。本文以 MyBatis-Plus 为例,深入剖析 批量更新 和 自定义批量插入 的实现原理,并结合实战代码与性能测试,揭示其在高性能场景下的应用价值。 批量更新:动态 SQL 的极致运用 原理与 SQL 生成…...
2025年成都市双流区农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排
成都市双流区2025年农业科技试验示范基地建设方案申报条件材料和补贴程序、时间安排如下,需要申报的可指导! 一、成都市双流区农业科技试验示范基地申报 (一)基地建设数量。2025年建设农业科技试验示范基地2个。 (二…...
8路CXP相机采集系统介绍
8xCXP相机采集系统介绍 目录 1 系统概述 4 2 硬件架构 5 2.1 FPGA处理单元 5 2.2 CXP接口层 6 2.3 CXP相机说明与使用要求 7 2.4 SSI控制器板 8 3 FPGA方案 9 3.1 FPGA实现 9 3.2 Block Design说明 10 4 软件方案 14 4.1 嵌入式层 14 4.2 上位机软件(C…...
vue2前端日志数据存储,推荐(IndexedDB)
前言:首先,我得回忆一下IndexedDB的基本概念和用法,确保自己理解正确。IndexedDB是一个浏览器内置的数据库,允许存储大量结构化数据,支持事务和索引查询,适合需要离线存储的应用场景。 接下来,用…...
onedav一为导航批量自动化导入网址(完整教程)
OneNav作为一个功能强大的导航工具,支持后台管理、加密链接、浏览器书签批量导入等功能,能够帮助用户轻松打造专属的导航页面。今天,我将为大家详细介绍如何实现OneNav导航站的批量自动化导入网址。 1、建立要批量导入的表格 格局需要创建表格,表格的要求是一定要有需要,…...
Ubuntu Linux安装PyQt5并配置Qt Designer
一 安装 PyQt5 借助 apt 包管理器来安装 PyQt5 及其相关的开发工具: sudo apt install python3-pyqt5 pyqt5-dev-tools 假如报错, You might want to run apt --fix-broken install to correct these. 直接执行: sudo apt --fix-…...
无人机螺旋桨平衡标准
螺旋桨平衡是确保无人机(UAV)平稳运行、可靠性和使用寿命的关键过程。螺旋桨的不平衡会导致振动、噪音,并加速关键部件的磨损,从而对飞行性能产生负面影响。 ISO 21940-11:2016标准为旋翼平衡提供了一个广泛引用的框架,定义了可接受的不平衡…...
基于MCP协议的多模态模型优化在医疗3D打印精密人工关节制造中的研究
一、引言 1.1 研究背景与意义 在全球人口老龄化趋势愈发明显的当下,诸如骨关节炎、类风湿性关节炎这类关节疾病的发病率不断攀升,进而使得人工关节置换手术的需求呈现出激增态势。人工关节置换手术作为治疗终末期关节疾病的有效手段,能够显著缓解患者疼痛,提升关节功能与生…...
ESLint报错:Could not find config file.
如果你的ESLint的版本大于 8,同时使用 .eslinrc.js 和 .eslintignore 作为配置文件,且目前用的是 VSCODE ,就有可能遇到报错: Could not find config file. 这个是因为 VSCode 中 ESLint 插件的配置 eslint.useFlatConfig 的问题…...
npm install 卡在创建项目:sill idealTree buildDeps
参考: https://blog.csdn.net/PengXing_Huang/article/details/136460133 或者再执行 npm install -g cnpm --registryhttps://registry.npm.taobao.org 或者换梯子...
drizzleDumper:基于内存搜索的Android脱壳工具
一、工具介绍 drizzleDumper 是一款基于内存搜索的 Android 脱壳工具,主要用于从加固的 Android 应用程序中提取原始的 DEX 文件。它通过分析应用程序运行时的内存,定位并提取被加固的 DEX 文件,从而帮助开发者、安全研究人员进行逆向工程和…...
信号处理中的窗
窗函数(Window Function)是一种在信号处理中常用的工具,用于对信号进行截断和加权处理。它在频谱分析、滤波器设计以及信号处理的许多其他领域中都发挥着重要作用。 窗函数的基本概念 窗函数本质上是一个有限长度的序列,通常用于…...
FFmpeg学习:AVPacket结构体
1.AVPacket结构体 FFmpeg中用于封装一帧的编码数据的结构体(比如H264视频帧或者AAC音频帧),主要用于编解码过程中数据的载体,使用av_read_frame()读取获得,或者使用avcodec_send_packet()进行解码,与AVFra…...
34.[前端开发-JavaScript基础]Day11-王者轮播图-书籍购物车-BOM对象-JSON
1 认识BOM操作 认识BOM 2 全局对象window window对象 window对象的作用 window常见的属性 window常见的方法 3 事件对象event window常见的事件 4 location、history location对象常见的属性 Location对象常见的方法 URLSearchParams history对象常见属性和方法 5 navigato…...
FLEXlm如何通过web调用
FLEXlm 是一种流行的软件许可管理工具,广泛用于各种软件产品的授权管理。它支持多种协议,包括传统的服务器-客户端模式和一些基于网络的解决方案。如果你想通过 Web 接口调用 FLEXlm 许可证服务器,你可以通过以下几种方式实现: 使…...
深度解析Spring Boot可执行JAR的构建与启动机制
一、Spring Boot应用打包架构演进 1.1 传统JAR包与Fat JAR对比 传统Java应用的JAR包在依赖管理上存在明显短板,依赖项需要单独配置classpath。Spring Boot创新的Fat JAR(又称Uber JAR)解决方案通过spring-boot-maven-plugin插件实现了"…...
Zookeeper运维指南:服务端与客户端常用命令详解
#作者:任少近 文章目录 1 Zookeeper服务端常用命令2 Zookeeper客户端常用命令2.1Ls命令2.2创建节点create2.3Get命令2.4删除命令2.5修改命令 1 Zookeeper服务端常用命令 启动ZK服务: bin/zkServer.sh start # ./zkServer.sh startZooKeeper JMX enabled by defau…...
K8S学习之基础五十一:k8s部署jenkins
k8s部署jenkins 创建nfs共享目录, mkdir -p /data/v2 echo /data/v2 *(rw,no_root_squash) > /etc/exports exportfs -arv创建pv、pvc vi pv.yaml apiVersion: v1 kind: PersistentVolume metadata:name: jenkins-k8s-pv spec:capacity:storage: 1GiaccessMod…...
界面控件DevExpress WinForms v25.1 - 人工智能(AI)方面全新升级
DevExpress WinForms拥有180组件和UI库,能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜…...
基于动态光影融合的缺陷实时检测和材质量化方法,并且整合EventPS、VMNer和EvDiG
要完成基于动态光影融合的缺陷实时检测和材质量化方法,并且整合EventPS、VMNer和EvDiG,是一个复杂且综合性的任务。以下是一个大致的实现步骤和代码示例,不过要完整完成论文和所有实验还需要大量的细化和调整。 整体思路 数据加载与预处理&…...
关于我对接了deepseek之后部署到本地将数据存储到mysql的过程
写在前面 今天写一下使用nodejs作为服务端,vue作为客户端,mysql的数据库,对接deepseek的全过程,要实现一个很简单的效果就是,可以自由的询问,然后可以将询问的过程存储到mysql的数据库中。 文档对接 deeps…...
Android 中两个 APK 之间切换的几中方法
在 Android 中,两个 APK(应用程序)之间的切换通常是通过 Intent 来实现的。以下是一些常见的方法和注意事项,帮助你实现两个 APK 之间的切换。 一、启动目标 APK 的主 Activity 1、setPackage 方法 使用 Intent 的 setPackage …...
【LeetCode 热题 100】解答汇总
一、哈希表 1. 两数之和 | python【简单】 49. 字母异位词分组 | python【中等】 128. 最长连续序列 | python【中等】 二、双指针 283. 移动零 | python【简单】 盛最多水的容器 三数之和 接雨水 三、滑动窗口 3. 无重复字符的最长子串 | python 【中等】 49. 字母异…...
【RAG综述系列】之 RAG 相关背景和基本原理
系列文章: 【RAG综述系列】之 RAG 相关背景和基本原理 【RAG综述系列】之 RAG 特点与挑战以及方法与评估 【RAG综述系列】之 RAG 先进方法与综合评估 【RAG综述系列】之 RAG 应用和未来方向 正文: 检索增强生成(Retrieval-Augmented Gen…...
Unity 开发休闲手游:M_Studio 实战指南,源码课件全解析
Unity 开发休闲手游:M_Studio 实战指南,源码课件全解析 在手游开发领域,Unity 引擎凭借其强大的跨平台能力和丰富的资源,成为众多开发者的首选。今天,我们深入探讨如何利用 Unity 开发休闲手机游戏,以 M_S…...
HTML5 新的 Input 类型学习笔记
HTML5 引入了多种新的表单输入类型,这些新特性不仅增强了输入控制,还提供了更强大的验证功能,使表单设计更加灵活和便捷。以下是 HTML5 新的 Input 类型的详细学习笔记。 一、color 类型 功能:用于选取颜色。 使用场景ÿ…...
【第23节】windows网络编程模型(WSAEventSelect模型)
目录 引言 一、WSAEventSelect模型概述 二、 WSAEventSelect模型的实现流程 2.1 创建一个事件对象,注册网络事件 2.2 等待网络事件发生 2.3 获取网络事件 2.4 手动设置信号量和释放资源 三、 WSAEventSelect模型伪代码示例 四、完整实践示例代码 引言 在网…...
C# 中实现 跨线程写入
方案核心思路 写入请求队列:使用 ConcurrentQueue 接收来自任意线程的写入请求。 专用写入线程:由独立线程处理队列中的写入操作,确保顺序执行。 双信号机制:通过 ManualResetEventSlim 控制读取线程的暂停与恢复。 线程安全确…...
联合体(Union)的使用与应用场景
引言 在 C/C++ 编程中,联合体(Union)是一个非常独特的数据结构。与结构体(struct)不同,联合体允许不同的数据类型共享同一块内存空间,从而节省内存。在许多需要高效内存管理的场景下,联合体的使用能够显著提高程序的性能与资源利用率。本文将从联合体的基本概念入手,…...
Spark2 之 Expression/Functions
ExpressionConverter src/main/scala/org/apache/gluten/expression/ExpressionConverter.scala TopNTransformer src/main/scala/org/apache/gluten/execution/TopNTransformer.scala...
【Mysql】SQL 优化全解析
文章目录 一、理解执行计划1.1 执行计划的作用1.2 查看执行计划 二、查询优化2.1 避免全表扫描2.2 使用覆盖索引2.3 合理使用 JOIN 三、索引优化3.1 索引设计原则3.2 索引维护 在数据驱动的当今时代,MySQL 作为应用广泛的开源关系型数据库&…...
谈谈对spring IOC的理解,原理和实现
一、IoC 核心概念 1. 控制反转(Inversion of Control) 传统编程中对象自行管理依赖(主动创建),而IoC将控制权转移给容器,由容器负责对象的创建、装配和管理,实现依赖关系的反向控制。 2. 依赖…...
Element UI实现表格全选、半选
制作如图所示的表格全选、半选: 父组件 <template><div id"app"><SelectHost :hostArray"hostArray" /></div> </template><script> import SelectHost from ./components/SelectHost.vue export default…...
Dify实现自然语言生成SQL并执行
目录 一、需求分析 二、解决思路 问题1:文字描述生成SQL语句 问题2:执行生成的SQL语句 完整解决方案 三、最终效果展示 四、具体实现 1.Agent提示词 2.知识库数据 3.sql执行器工作流创建 3.1 节点1 3.2 节点2 3.3 节点3 3.4 最终配置界面预…...
【leetcode hot 100 347】前 K 个高频元素
解法一:用map的value记录key出现的次数,用PriorityQueue构造最小堆。 class Solution {public int[] topKFrequent(int[] nums, int k) {// 把元素放在map中Map<Integer,Integer> map new HashMap<>();for(int num:nums){if(map.containsK…...
golang不使用锁的情况下,对slice执行并发写操作,是否会有并发问题呢?
背景 并发问题最简单的解决方案加个锁,但是,加锁就会有资源争用,提高并发能力其中的一个优化方向就是减少锁的使用。 我在之前的这篇文章《开启多个协程,并行对struct中的每个元素操作,是否会引起并发问题?》中讨论过多协程场景下struct的并发问题。 Go语言中的slice在…...