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

HTML属性的概念和使用

news 文章来源：https://blog.csdn.net/m0_68539124/article/details/129903870 2025/5/9 0:37:06

通过前面的学习，我们已经对 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

EMC经典问答85问（59-62问）

59、用双向可控硅控制直流电机的调速&#xff0c;但电机会干扰电源影响过零检则&#xff0c;造成不受控或速度妀变。请各位指教&#xff01; 答 1: 出现这中现象的可能性有&#xff1a;1、电机属于非阻性负载&#xff0c;所以电路中产生相位移动&#xff0c;导致控制不准&#…...

编程日记 2023/5/22 14:17:01

Java面向对象 - 封装、继承和多态的综合练习（答案+知识点总结）第1关：封装、继承和多态进阶（一）+ 第2关：封装、继承和多态进阶（二）

目录 第1关&#xff1a;封装、继承和多态进阶&#xff08;一&#xff09; 报错总结 & 注意事项&#xff1a; 第2关&#xff1a;封装、继承和多态进阶&#xff08;二&#xff09; 源码&#xff1a; 报错总结 & 注意事项&#xff1a; 思维导图免费制作网站&#xf…...

编程日记 2023/5/17 10:32:48

小迪安全day20WEB漏洞-文件上传之基础及过滤方式

小迪安全day20WEB漏洞-文件上传之基础及过滤方式 什么是文件上传漏洞 有文件上传就可以测试是否有漏洞&#xff0c;关键看代码是否完备。 服务端代码未对客户端上传的文件进行严格的验证和过滤 漏洞危害 自定义网站后门&#xff0c;获取网站权限&#xff0c;属于高危漏洞。 上…...

编程日记 2023/5/15 3:50:53

LeetCode236.最近的公共祖先

求解最近公共祖先的算法 分为两个步骤&#xff1a; 求出两节点路径取两路径上最后一个相同的节点&#xff08;该节点即为p&#xff0c;q节点的最近公共祖先&#xff09; 节点路径的算法设计与实现 求节点路径即输入二叉树根节点与待求节点返回根节点到该节点路径上的所有节…...

编程日记 2023/5/11 21:09:49

【springcloud 微服务】Spring Cloud Alibaba整合Sentinel详解

目录 一、前言 二、环境准备 2.1 部署sentinel管控台 2.1.1 官网下载sentinel的jar包 2.1.2 启动控制台 2.1.3 访问控制台 2.2 整合springcloud-alibaba 2.2.1 引入相关依赖 2.2.2 修改配置文件 2.2.3 增加一个测试接口 2.2.4 接口测试 三、sentinel 流控规则使用 …...

编程日记 2023/5/16 6:07:53

ASP医院管理系统—病历管理系统的设计与实现

病历管理系统是医院管理系统的重要组成,该系统的开发主要包括后台数据库的建立以及前台应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的数据库,而对于后者则要求具有齐全完善的应用程序功能,友好人性化的操作界面。该系统采用现代的办公自动化…...

编程日记 2023/5/28 19:23:52

【蓝桥杯】动态规划(dp)入门！| 入门动态规划的正确方式! ——学习笔记

目录 最暴力的dfs --> 记忆化搜索 ---> 递推(dp) 记忆化搜索 暴力dfs 记录答案 递推的公式 dfs 向下递归的公式 递推数组的初始值 递归的边界 动态规划(dp)入门 | 这tm才是入门动态规划的正确方式! | dfs记忆化搜索 | 全体起立!!_哔哩哔哩_bilibili 大佬教学视频…...

编程日记 2023/5/30 8:58:14

元宇宙与网络安全

元宇宙是一种虚拟现实空间&#xff0c;用户可以在计算机生成的环境中进行互动。元宇宙的应用范围很广&#xff0c;比如房地产&#xff0c;医疗&#xff0c;教育&#xff0c;军事&#xff0c;游戏等等。它提供了更具沉浸感的体验&#xff0c;更好地现实生活整合&#xff0c;以及…...

编程日记 2023/5/16 16:01:33

Pod控制器之hpa

简述 HPA全称HorizontalPodAutoscaler Pod水平自动扩缩容&#xff0c;Kubernetes控制器HPA是一种用于自动调整Pod数量的控制器。它可以根据资源使用情况自动增加或减少Pod的数量&#xff0c;以确保应用程序的高可用性和性能。HPA可以根据CPU使用率或自定义指标来进行调整&…...

编程日记 2023/5/14 16:19:52

发现一个白嫖GPT4.0的方法！真的是完胜3.5！

大家好&#xff0c;我是五竹。 先说个基本的科普&#xff0c;最近被问的人都嘛了。 1、ChatGPT账号只有两种:普通账号和plus账号。 2、普通账号升级到plus账号&#xff0c;需要绑定国外的支付方式&#xff0c;每个月大概130左右&#xff01;plus账号更稳&#xff01;更快&am…...

编程日记 2023/5/17 2:02:32