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

HTML属性的概念和使用

news 2025/12/22 7:28:20

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/12/21 14:52:12

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/12/19 3:25:37

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/12/19 21:58:39

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/12/9 13:14:46

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/12/17 20:17:10