HTML属性的概念和使用
通过前面的学习，我们已经对 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属性的概念和使用
通过前面的学习，我们已经对 HTML标签 有了简单的认识，知道可以在标签中可以添加一些属性，这些属性包含了标签的额外信息，例如： href 属性可以为 <a> 标签提供链接地址；src 属性可以为 <img> 标…...
ChatGPT基础知识系列之一文说透ChatGPT
ChatGPT基础知识系列之一文说透ChatGPT OpenAI近期发布聊天机器人模型ChatGPT，迅速出圈全网。它以对话方式进行交互。以更贴近人的对话方式与使用者互动，可以回答问题、承认错误、挑战不正确的前提、拒绝不适当的请求。高质量的回答、上瘾式的交互体验，圈内外都纷纷惊呼。 …...
‘go install‘ requires a version when current directory is not in a module
背景 安装好环境之后，跑个helloworld看看 目录结构 workspacepathsrchellohelloworld.go代码： package mainimport "fmt"func main() { fmt.Println("Hello World") }1.使用 go run 命令 - 在命令提示符旁，输入 go …...
蓝桥杯嵌入式第十三届（第二套客观题）
文章目录 前言一、题目1二、题目2三、题目3四、题目4五、题目5六、题目6七、题目7八、题目8九、题目9十、题目10总结前言 本篇文章继续讲解客观题。 一、题目1 这个其实属于送分题，了解嵌入式或者以后想要入行嵌入式的同学应该都对嵌入式特点有所了解。 A. 采用专用微控制…...
FFmpeg进阶:各种输入输出设备
文章目录查看设备列表输入设备介绍输出设备介绍查看设备列表 我们可以通过ffmpeg自带的工具查看系统支持的设备列表信息, 对应的指令如下所示: ffmpeg -devices输入设备介绍 通过配置ffmpeg的输入设备,我们可以访问系统中的某个多媒体设备的数据。下面详细介绍一下各个系统中…...
使用Shell笔记总结
一、变量 1、定义变量不加$符号，使用变量要用$；等号两边不能直接接空格符；通常大写字符为系统默认变量，自行设定变量可以使用小写字符。 2、双引号内的特殊字符如 $ 等，可以保有其符号代表的特性，即可以有…...
反常积分的审敛法
目录 无穷先的反常积分的审敛法 定理1：比较判别法 例题： 比较判别法的极限形式： 例题： 定理3：绝对收敛准则 例题： 无界函数的反常积分收敛法 例题： 无穷先的反常积分的审敛法 定理1&#x…...
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()函数 …...
Java设计模式（十九）—— 桥接模式
桥接模式定义如下：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 适合桥接模式的情景如下： 不希望抽象和某些重要的实现代码是绑定关系，可运行时动态决定抽象和实现者都可以继承的方式独立的扩充，程序在运行…...
多线程并发安全问题
文章目录并发安全问题线程安全性死锁定义实现一个死锁查看死锁解决死锁其他线程安全问题单例模式并发安全问题 线程安全性 线程安全是指我们所写的代码在并发情况下使用时，总是能表现出正确的行为；反之，未实现线程安全的代码，表…...
P1005 [NOIP2007 提高组] 矩阵取数游戏
题目描述 帅帅经常跟同学玩一个矩阵取数游戏：对于一个给定的 ��nm 的矩阵，矩阵中的每个元素 ��,�ai,j 均为非负整数。游戏规则如下： 每次取数时须从每行各取走一个元素ÿ…...
百度云【人脸识别】
目录 1：百度云【人脸识别云服务】 2：Java-SDK文档 3：项目中测试 1：百度云【人脸识别云服务】 人脸识别云服务 包含实名认证、人脸对比、人脸搜索、活体检测等能力。灵活应用于金融、泛安防等行业场景，满足身份核验…...
强化模板模块
一、非类型模板参数 模板参数分为 类型模板参数(C模板的零基础讲解)和非类型模板参数。 看下面的代码 #define N 10 //T就是类型模板参数 template<class T> class Array { private:T a[N]; }; int main() {Array<int> a1;Array<double> a2;return 0; }上面…...
Vue.js学习详细课程系列--共32节（6 / 6）
Vue.js学习课程（6 / 6）29. 组件：参数验证知识点组件的数据综合例30. 组件：事件传递知识点v-on$emit综合例31. 组件：slot插槽知识点slot综合例32. 组件：组合slot知识点slot命名综合例29. 组件：参…...
【TFT屏幕】1.44寸彩屏
文章目录一.硬件层——引脚配置的移植二.应用层——显示函数的移植1. 移植显示一个字符函数2. 移植显示数字函数3.叠加方式选择一.硬件层——引脚配置的移植 宏定义的方式，直接修改引脚，实测可直接更改，非常方便移植 /*******************…...
vue3组合式api
文章目录组合式API介绍什么是组合式 API？为什么要有组合式 API？更好的逻辑复用更灵活的代码组织Option ApiOption Api的缺陷Composition Api更好的类型推导更小的生产包体积与选项式 API 的关系取舍组合式 API 是否覆盖了所有场景？可以同时使…...
Maven高级-私服
Maven高级-私服6，私服6.1 私服简介6.2 私服安装步骤1:下载解压步骤2:启动Nexus步骤3:浏览器访问步骤4:首次登录重置密码6.3 私服仓库分类6.4 本地仓库访问私服配置步骤1:私服上配置仓库步骤2:配置本地Maven对私服的访问权限步骤3:配置私服的访问路径6.5 私服资源上传…...
网络优化小结
网络基础知识 OSI七层网络架构 OSI简称Open System Intercnnect，开放式系统互联，是一个国际互联网标准制定的一个组织 应用层 实际应用场景，比如 浏览器、文件传输、电子邮件、文件服务、虚拟终端等； http、FTP、ssh等 表示层…...
Android 11.0 原生SystemUI下拉通知栏UI背景设置为圆角背景的定制(一)
1.前言 在11.0的系统rom定制化开发中，在原生系统中关于SystemUI下拉状态栏的通知栏的每条通知的背景是白色的四角的背景， 由于在产品设计中，需要把四角背景默认改成白色的圆角背景，所以就需要分析系统原生下拉通知栏的每条通知的默认背景， 这就需要了解11.0的systemui的通…...
个人练习-Leetcode-1942. The Number of the Smallest Unoccupied Chair
题目链接：https://leetcode.cn/problems/the-number-of-the-smallest-unoccupied-chair/ 题目大意：给出一群人到达一个排队的时间和离开派对的时间[arr, lev]。有无数个座位，下标从0开始。当一个人在tm时刻离开时，如果一个人在tm…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注：文档 https://developers.weixin.qq…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙（HarmonyOS5）中集成百度地图，可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API，可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具：下载安装 De…...