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

HTML属性的概念和使用

news 2026/2/11 6:15:14

通过前面的学习，我们已经对 HTML标签 有了简单的认识，知道可以在标签中可以添加一些属性，这些属性包含了标签的额外信息，例如：

  • href 属性可以为 <a> 标签提供链接地址；
  • src 属性可以为 <img> 标签提供图像的路径；
  • style 属性可以为几乎所有标签定义 CSS 样式。


本节我们就来讲解一下 HTML 标签属性的概念和用法。

什么是属性

属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：

attr="value"

attr 表示属性名，value 表示属性值。属性值必须使用双引号" "或者单引号' '包围。

注意，虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。

一个标签可以没有属性，也可以有一个或者多个属性。

使用 HTML 属性的例子：

<p id="user-info" class="color-red">欢迎 <font color="red" size="3">Tom</font> 来到百度，你已经在百度使用超过3年的时间了。<p>
<div class="clearfloat">
<p class="left">这里显示 Tom 的账号信息</p>
<p class="right">这里显示 Tom 的个性签名</p>
</div>

专用属性

HTML 属性有很多，大体可以分为两类：

  • 有些属性适用于大部分或者所有 HTML 标签，我们将这些属性称为通用属性；
  • 有些属性只适用于一个或者几个特定的 HTML 标签，我们将这些属性称为专用属性。


HTML 中的 <img> 标签就有 src 和 alt 两个专用属性，<a> 标签也有 href 和 target 两个专用属性，如下例所示：

<img src="./logo.png" alt="百度Logo" width="100" height="50">
<a href="https://www.baidu.com" target="_blank">百度</a>

通用属性介绍

HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用，下面来简单介绍一下它们的用法。

1) id

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签。
为标签定义 id 属性可以给我们提供很多便利，比如：

  • 如果标签中带有 id 属性作为唯一标识符，通过 id 属性可以很方便的定位到该标签；
  • 如果 HTML 文档中包含多个同名的标签，利用 id 属性的唯一性，可以很方便的区分它们。

注意：在一个 HTML 文档中 id 属性的值必须是唯一的。

示例代码如下所示：

<input type="text" id="username" />
<div id="content">百度</div>
<p id="url">https://www.baidu.com/</p>

2) class

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值，如下所示：

<div class="className1 className2 className3"></div>
<p class="content">百度</p>
<div class="content">https://www.baidu.com/</div>

当使用 CSS 或者 JavaScript 来操作 HTML 标签时，同样可以使用 class 属性来找到对应的 HTML 标签。由于 class 属性不是唯一的，所以通过 CSS 或 JavaScript 对 HTML 标签的操作会应用于所有具有同名 class 属性的标签中。

3) title

title 属性用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title 属性的值，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>演示文档</title>
</head>
<body><a href="https://www.baidu.com" title="百度一下">百度一下</a>
</body>
</html>

运行结果如下图所示： 

 

相关文章：

HTML属性的概念和使用

通过前面的学习&#xff0c;我们已经对 HTML标签 有了简单的认识&#xff0c;知道可以在标签中可以添加一些属性&#xff0c;这些属性包含了标签的额外信息&#xff0c;例如&#xff1a; href 属性可以为 <a> 标签提供链接地址&#xff1b;src 属性可以为 <img> 标…...

编程日记 2023/5/17 0:33:11

ChatGPT基础知识系列之一文说透ChatGPT

ChatGPT基础知识系列之一文说透ChatGPT OpenAI近期发布聊天机器人模型ChatGPT，迅速出圈全网。它以对话方式进行交互。以更贴近人的对话方式与使用者互动，可以回答问题、承认错误、挑战不正确的前提、拒绝不适当的请求。高质量的回答、上瘾式的交互体验，圈内外都纷纷惊呼。 …...

编程日记 2023/5/25 16:05:36

‘go install‘ requires a version when current directory is not in a module

背景 安装好环境之后&#xff0c;跑个helloworld看看 目录结构 workspacepathsrchellohelloworld.go代码&#xff1a; package mainimport "fmt"func main() { fmt.Println("Hello World") }1.使用 go run 命令 - 在命令提示符旁&#xff0c;输入 go …...

编程日记 2023/5/13 13:15:52

蓝桥杯嵌入式第十三届（第二套客观题）

文章目录 前言一、题目1二、题目2三、题目3四、题目4五、题目5六、题目6七、题目7八、题目8九、题目9十、题目10总结前言 本篇文章继续讲解客观题。 一、题目1 这个其实属于送分题，了解嵌入式或者以后想要入行嵌入式的同学应该都对嵌入式特点有所了解。 A. 采用专用微控制…...

编程日记 2023/5/28 0:58:48

FFmpeg进阶:各种输入输出设备

文章目录查看设备列表输入设备介绍输出设备介绍查看设备列表 我们可以通过ffmpeg自带的工具查看系统支持的设备列表信息, 对应的指令如下所示: ffmpeg -devices输入设备介绍 通过配置ffmpeg的输入设备,我们可以访问系统中的某个多媒体设备的数据。下面详细介绍一下各个系统中…...

编程日记 2023/5/24 21:27:56

使用Shell笔记总结

一、变量 1、定义变量不加$符号&#xff0c;使用变量要用$&#xff1b;等号两边不能直接接空格符&#xff1b;通常大写字符为系统默认变量&#xff0c;自行设定变量可以使用小写字符。 2、双引号内的特殊字符如 $ 等&#xff0c;可以保有其符号代表的特性&#xff0c;即可以有…...

编程日记 2023/5/17 1:41:58

反常积分的审敛法

目录 无穷先的反常积分的审敛法 定理1&#xff1a;比较判别法 例题&#xff1a; 比较判别法的极限形式&#xff1a; 例题&#xff1a; 定理3&#xff1a;绝对收敛准则 例题&#xff1a; 无界函数的反常积分收敛法 例题&#xff1a; 无穷先的反常积分的审敛法 定理1&#x…...

编程日记 2023/5/22 14:13:05

python实战应用讲解-【numpy专题篇】numpy常见函数使用示例（十三）（附python示例代码）

目录 Python numpy.ma.mask_or()函数 Python numpy.ma.notmasked_contiguous函数 Python numpy.ma.notmasked_edges()函数 Python numpy.ma.where()函数 Python Numpy MaskedArray.all()函数 Python Numpy MaskedArray.anom()函数 Python Numpy MaskedArray.any()函数 …...

编程日记 2023/5/15 3:49:26

Java设计模式（十九）—— 桥接模式

桥接模式定义如下&#xff1a;将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。 适合桥接模式的情景如下&#xff1a; 不希望抽象和某些重要的实现代码是绑定关系&#xff0c;可运行时动态决定抽象和实现者都可以继承的方式独立的扩充&#xff0c;程序在运行…...

编程日记 2023/5/13 4:09:18

多线程并发安全问题

文章目录并发安全问题线程安全性死锁定义实现一个死锁查看死锁解决死锁其他线程安全问题单例模式并发安全问题 线程安全性 线程安全是指我们所写的代码在并发情况下使用时&#xff0c;总是能表现出正确的行为&#xff1b;反之&#xff0c;未实现线程安全的代码&#xff0c;表…...

编程日记 2023/5/30 8:56:47

P1005 [NOIP2007 提高组] 矩阵取数游戏

题目描述 帅帅经常跟同学玩一个矩阵取数游戏&#xff1a;对于一个给定的 &#xfffd;&#xfffd;nm 的矩阵&#xff0c;矩阵中的每个元素 &#xfffd;&#xfffd;,&#xfffd;ai,j​ 均为非负整数。游戏规则如下&#xff1a; 每次取数时须从每行各取走一个元素&#xff…...

编程日记 2023/5/28 19:22:03

百度云【人脸识别】

目录 1&#xff1a;百度云【人脸识别云服务】 2&#xff1a;Java-SDK文档 3&#xff1a;项目中测试 1&#xff1a;百度云【人脸识别云服务】 人脸识别云服务 包含实名认证、人脸对比、人脸搜索、活体检测等能力。灵活应用于金融、泛安防等行业场景&#xff0c;满足身份核验…...

编程日记 2023/5/16 6:04:51

强化模板模块

一、非类型模板参数 模板参数分为 类型模板参数(C模板的零基础讲解)和非类型模板参数。 看下面的代码 #define N 10 //T就是类型模板参数 template<class T> class Array { private:T a[N]; }; int main() {Array<int> a1;Array<double> a2;return 0; }上面…...

编程日记 2023/5/17 22:11:10

Vue.js学习详细课程系列--共32节（6 / 6）

Vue.js学习课程&#xff08;6 / 6&#xff09;29. 组件&#xff1a;参数验证知识点组件的数据综合例30. 组件&#xff1a;事件传递知识点v-on$emit综合例31. 组件&#xff1a;slot插槽知识点slot综合例32. 组件&#xff1a;组合slot知识点slot命名综合例29. 组件&#xff1a;参…...

编程日记 2023/5/22 18:17:49

【TFT屏幕】1.44寸彩屏

文章目录一.硬件层——引脚配置的移植二.应用层——显示函数的移植1. 移植显示一个字符函数2. 移植显示数字函数3.叠加方式选择一.硬件层——引脚配置的移植 宏定义的方式&#xff0c;直接修改引脚&#xff0c;实测可直接更改&#xff0c;非常方便移植 /*******************…...

编程日记 2023/5/24 1:54:50

vue3组合式api

文章目录组合式API介绍什么是组合式 API&#xff1f;为什么要有组合式 API&#xff1f;更好的逻辑复用更灵活的代码组织Option ApiOption Api的缺陷Composition Api更好的类型推导更小的生产包体积与选项式 API 的关系取舍组合式 API 是否覆盖了所有场景&#xff1f;可以同时使…...

编程日记 2023/5/14 18:39:13

Maven高级-私服

Maven高级-私服6&#xff0c;私服6.1 私服简介6.2 私服安装步骤1:下载解压步骤2:启动Nexus步骤3:浏览器访问步骤4:首次登录重置密码6.3 私服仓库分类6.4 本地仓库访问私服配置步骤1:私服上配置仓库步骤2:配置本地Maven对私服的访问权限步骤3:配置私服的访问路径6.5 私服资源上传…...

编程日记 2023/5/24 2:39:41

网络优化小结

网络基础知识 OSI七层网络架构 OSI简称Open System Intercnnect&#xff0c;开放式系统互联&#xff0c;是一个国际互联网标准制定的一个组织 应用层 实际应用场景&#xff0c;比如 浏览器、文件传输、电子邮件、文件服务、虚拟终端等&#xff1b; http、FTP、ssh等 表示层…...

编程日记 2023/5/27 14:23:19

Android 11.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(一)

1.前言 在11.0的系统rom定制化开发中，在原生系统中关于SystemUI下拉状态栏的通知栏的每条通知的背景是白色的四角的背景， 由于在产品设计中，需要把四角背景默认改成白色的圆角背景，所以就需要分析系统原生下拉通知栏的每条通知的默认背景， 这就需要了解11.0的systemui的通…...

编程日记 2023/5/27 6:13:53

个人练习-Leetcode-1942. The Number of the Smallest Unoccupied Chair

题目链接&#xff1a;https://leetcode.cn/problems/the-number-of-the-smallest-unoccupied-chair/ 题目大意&#xff1a;给出一群人到达一个排队的时间和离开派对的时间[arr, lev]。有无数个座位&#xff0c;下标从0开始。当一个人在tm时刻离开时&#xff0c;如果一个人在tm…...

编程日记 2023/5/13 22:12:28

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/2/8 10:56:57

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2026/2/8 1:53:31

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...

编程新知 2026/1/31 9:00:14

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/12/6 11:14:42

精益数据分析（98/126）：电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...

编程新知 2025/8/1 17:29:00

实现p2p的webrtc-srs版本

1. 基本知识 1.1 webrtc 一、WebRTC的本质&#xff1a;实时通信的“网络协议栈”类比 将WebRTC类比为Linux网络协议栈极具洞察力&#xff0c;二者在架构设计和功能定位上高度相似&#xff1a; 分层协议栈架构 Linux网络协议栈&#xff1a;从底层物理层到应用层&#xff08;如…...

编程新知 2026/2/4 22:46:03