HTML 元素提供的附加信息--属性 ——WEB开发系列03

HTML 属性是指用于描述 HTML 元素的额外信息,它们提供了元素的特定配置或行为,属性通常包含在 HTML 元素的开始标签中。


元素也可以拥有属性,属性看起来像这样:

属性是元素的附加信息,它们不会显示在实际内容中。在前述例子中,​​​class​​ 属性是用于标识元素的名称,便于在以后应用样式信息时识别和操作该元素。

属性必须包含:

  • 必须有一个空格,位于属性名称和元素名称之间。如果元素有多个属性,每个属性之间必须用空格分隔。
  • 属性名称后必须紧跟一个等号。
  • 属性值必须被一对双引号("")括起来。

一、为元素添加属性

要为元素添加属性时,可以使用以下例子:

  1. 添加链接的 href 属性
<a href="https://example.com">这是一个链接</a>

在这个例子中,​​<a>​​ 元素使用了 ​​href​​ 属性,指定了链接的目标地址为 ​​https://example.com​​。

  1. 添加图片的 src 和 alt 属性
<img src="image.jpg" alt="描述性文本">

这个例子中的 ​​<img>​​ 元素有两个属性:​​src​​ 属性指定了要显示的图像文件路径为 ​​image.jpg​​,​​alt​​​ 属性提供了图像的描述性文本。


二、属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

编辑下面的文本框中的内容,使之变成指向任一个你喜欢的 web 地址的链接。

  1. 添加 ​​<a>​​ 元素。
  2. 添加 ​​href​​ 属性和 ​​title​​ 属性。
  3. 指定 ​​target​​​ 属性,使得点击链接时在新标签页打开。

实例

<a href="https://www.csdn.net/">这是一个链接</a>



三、布尔属性

​有时你会遇到没有设置值的属性,这种情况是完全合法的。这些属性被称为布尔属性,因为它们要么存在(即属性名本身就是属性值),要么不存在。

例如,考虑 ​​disabled​​ 属性,你可以将其应用于表单输入元素。通过设置 ​​disabled​​ 属性,可以禁用表单输入元素,从而阻止用户进行输入。被禁用的元素通常显示为灰色外观。

下面是一个示例:

<input type="text" disabled>

在这个例子中,​​disabled​​ 属性被应用于文本输入框,使其不可用状态,用户无法在其中输入内容。

作为参考,上面的例子还包括一个非禁用的表单输入元素。上面两段 HTML 代码产生的效果如下:

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled /><!-- 下面这个输入框不包含 disabled 属性,所以用户可以向其中输入 -->
<input type="text" />


四、省略包围属性值的引号

或许你浏览了许多其他网站的代码,遇到一些奇怪的标记风格,比如没有使用引号包裹属性值的情况。尽管在某些情况下这是允许的,但在其他情况下可能会破坏你的标记。举例来说,对于之前提到的链接示例,可以这样写一个只有 ​​href​​​ 属性的版本:

<a href=https://www.baidu.com/>favorite website</a>

然而,再添加一个 ​​title​​​ 属性时,就会出现问题:

<a href=https://www.baidu.com/ title=The unique passage>favorite website</a>

在这种情况下,浏览器会误解你的标记。它可能会将 ​​title​​ 属性误解为三个属性的组合——​​title​​ 的属性值为 "The",以及两个布尔属性 ​​unique​​ 和 ​​passage​​。显然,这不是期望的结果,这样的编码会导致错误或者异常行为。如果你将鼠标移到链接上,尝试看一下会显示什么样的 ​​title​​​ 文字!

建议始终添加引号,可以避免很多问题,并且使代码更易读。


五、使用单引号还是双引号?

在目前为止,所有的属性都是由双引号引用。也许在一些 HTML 中也有单引号。这只是风格的问题,你可以从中选择一个你喜欢的。以下两种情况都可以:

<a href='https://www.baidu.com'>示例站点链接</a><a href="https://www.baidu.com">示例站点链接</a>

但应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的:

<a href="https://www.baidu.com'>示例站点链接</a>

六、HTML 属性参考

适用于大多数 HTML 元素的属性:

属性

描述

class

为html元素定义一个或多个类名

id

定义元素的唯一id

style

规定元素的行内样式

title

描述了元素的额外信息


注意:

属性和属性值,尽量小写,本来这样做也方便些。

class 属性可以多用 class=" " (引号里面可以填入多个class属性)

id 属性只能单独设置 id=" "(只能填写一个,多个无效)


如有表述错误及欠缺之处敬请批评指正。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/396431.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hack The Box-Resource

总体思路 phar反序列化->SSH CA私钥泄露->SSH CA私钥滥用->SSH脚本滥用 信息收集&端口利用 nmap -sSVC itrc.ssg.htb目标开放了两个ssh端口和一个80端口&#xff0c;先查看80端口 网站是一个SSG IT资源中心&#xff0c;主要用于解决网站问题、管理 SSH 访问、清…

【学习总结】MySQL篇

MySQL MySQL索引 B树 B树和作为索引&#xff0c;有两个明显特点 一是、他的层级非常低&#xff0c;我们都知道传统的平衡二叉树。它们的阶为2&#xff0c;如果数据量很大&#xff0c;AVL树&#xff08;传统的平衡二叉树&#xff09;的层级就非常深。但是B树&#xff0c;它是…

基于STM32F407+NBIOT+华为云IOT平台设计的环境检测系统

基于STM32F407NBIOT华为云IOT平台设计的环境检测系统实现的功能&#xff1a; 【1】能够采集本地环境的温度、湿度、烟雾浓度&#xff0c;火光信息&#xff0c;在OLED显示屏上显示。 如果检测到烟雾、温度、火光超过阀值会触发蜂鸣器报警。 【2】能够通过NBIOT将本地设备采集的信…

在 Django 表单中传递自定义表单值到视图

在Django中&#xff0c;我们可以通过表单的初始化参数initial来传递自定义的初始值给表单字段。如果我们想要在视图中设置表单的初始值&#xff0c;可以在视图中创建表单的实例时&#xff0c;传递一个字典给initial参数。 1、问题背景 我们遇到了这样一个问题&#xff1a;在使…

解决 MacOS 连接公司 VPN 成功但是不能网络的问题

目录 解决办法2024 Mac mini 爆料 解决办法 操作比较简单&#xff0c;修改配置文件即可&#xff08;如果没有则需要手动创建&#xff09;。 sudo vim /etc/ppp/options在此文件下&#xff0c;加入 plugin L2TP.ppp&#xff1a; plugin L2TP.ppp如果文件里有l2tpnoipsec&…

【SpringBoot系列】接口参数的默认值与必要性

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

结构化输出及其使用方法

在 LLM 应用程序中构建稳健性和确定性 图片来自作者 欢迎来到雲闪世界。OpenAI最近宣布其最新的gpt-4o-2024–08–06模型支持结构化输出。与大型语言模型 (LLM) 相关的结构化输出并不是什么新鲜事——开发人员要么使用各种快速工程技术&#xff0c;要么使用第三方工具。 在本文…

[ACP云计算]组件介绍

一、IaaS、PaaS、SaaS 二、交换机 三、VPC 四、ECS 云服务器ECS&#xff08;Elastic Compute Service&#xff09;是阿里云提供的性能卓越、稳定可靠、弹性扩展的IaaS&#xff08;Infrastructure as a Service&#xff09;级别云计算服务。云服务器ECS免去了您采购IT硬件的前期…

vue项目名修改、webstorm和idea创建的项目重命名、重构项目、修改项目名称

一、需求 就是创建了一个项目&#xff0c;后期需要重命名&#xff0c;怎么办&#xff1f;----> 直接修改&#xff1f;肯定不行&#xff0c;因为里面有些配置也需要修改&#xff0c;假如你只改文件夹名称的话&#xff0c;里面配置都没修改&#xff0c;后期可能会出问题。 二…

完美解决浏览器的输入框自动填入时,黄色背景问题,以及图标被遮住问题(最新)

用图说话↓↓↓ 首先用代码解决黄色背景问题&#xff0c;box-shadow颜色设置透明即可&#xff0c;延时渲染时间可修改为更久 :deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #f…

C++:多态及虚函数

多态&#xff1a;面向对象的多态性可以分为4类:重载多态、强制多态、包含多态和参数多态。 多态从实现的角度来讲可以划分为两类:编泽时的多态和运行时的多态 运算符重载&#xff1a; foo(i)相当于i的一个别名 前置和后置重载&#xff08;后置参数必须加一个int&#xff09; …

Ubuntu 22.04 Docker安装笔记

1、准备一台虚机 可以根据《VMware Workstation安装Ubuntu 22.04笔记》来准备虚拟机。完成后&#xff0c;根据需求安装必要的软件&#xff0c;并设置root权限进行登录。 sudo apt update sudo apt install iputils-ping -y sudo apt install vim -y允许root ssh登录&#xff1…

邀请函 I 松下信息和望繁信科技邀您参加「数智时代下大数据应用的“道”与“术”」闭门会议

在数字化浪潮席卷全球的今天&#xff0c;大数据与智能化的结合成为企业成功的关键。为了深入探讨这一重要议题&#xff0c;松下信息系统&#xff08;上海&#xff09;有限公司&#xff08;简称“松下信息”&#xff09;与上海望繁信科技有限公司&#xff08;简称“望繁信科技”…

11.面试题——消息队列RabbitMQ

1.RabbitMQ是什么&#xff1f;特点是什么&#xff1f; RabbitMQ是一种开源的消息队列中间件&#xff0c;用于在应用程序之间进行可靠的消息传递。它实现了AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议&#xff0c;提供了强大的消息处理能力。RabbitMQ的…

【数据结构与算法】二叉树

二叉树 一.二叉树的结构二.二叉树的插入1.根的插入2.其他的插入 三.二叉树的删除1.找到删除节点2.删除节点的子节点只有一个或没有3.删除节点的子节点有两个 四.完整代码 一.二叉树的结构 树的形式多种多样,但是我们最常用的还是二叉树.在二叉树中最长用的又数二叉搜索树. 这…

云原生的候选应用

前言&#xff0c;到底哪些应用适合云原生&#xff1f; 云原生应用适合于多种场景&#xff0c;‌包括高并发、‌高负载的Web应用、‌大数据处理、‌容器化应用程序、‌微服务架构、‌DevOps、‌智能物联网、‌云原生区块链应用以及大数据和机器学习。‌ 高并发、‌高负载的Web…

RuntimeError: device >= 0 device < num_gpus INTERNAL ASSERT FAILED

参考网址 https://discuss.pytorch.org/t/runtimeerror-device-0-device-num-gpus-internal-assert-failed/178118/1 今天运行GPU发现一个很特别的问题&#xff0c;就是 解决办法

Vue的事件处理、事件修饰符、键盘事件

目录 1. 事件处理基本使用2. 事件修饰符3. 键盘事件 1. 事件处理基本使用 使用v-on:xxx或xxx绑定事件&#xff0c;其中xxx是事件名&#xff0c;比如clickmethods中配置的函数&#xff0c;都是被Vue所管理的函数&#xff0c;this的指向是vm或组件实例对象 <!DOCTYPE html&g…

【路由器】RT-AC88U华硕配置DNS

公共dns ip 测试了下就119.29.29.29 为53毫秒,谷歌的8.8.8.8为55毫秒。阿里的竟然有112毫秒。阿里DNS:阿里巴巴集团提供的公共DNS服务器,其服务器分布广泛,响应速度较快。主要DNS地址:223.5.5.5、223.6.6.6。 百度DNS:百度提供的公共DNS服务器,也具有较快的响应速度。主…

【原创】springboot+mysql疫苗预约网设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…