前端 -- 基础 常用标签 ( 图像标签及其属性详解)

news2025/1/10 17:21:26

目录

图像标签  : 

插入图像 

图像标签的其它属性 : 

alt 属性 

title  属性 

width  属性 

height  属性 

border  属性 

注意


图像标签  : 

在我们的网页中,可以看到 好多 好多 图片,那这些图片又是怎样 在 页面中 展现出来的呢 ? 

这就需要用到 我们 图像标签 了 

===>>>

        在 HTML 标签 中, < img > 标签   用于 定义 HTML 页面中的 图像  

        语法格式 : 

<img src="图像URL" />

         显然,这是一个 单标签  !!  

         src  是  < img > 标签的 必须属性, 它用于 指定图像文件的路径和文件名  

         所谓 属性 : 简单理解 就是属于这张图像标签的特性 ~!! 

插入图像 

那么,我们是怎样把图片放到网页中去的呢? 或者,网页中的图片是怎么实现的呢?

===>>>

简单示例 : 

我们举个简单例子, 演示下 : 

#  首先,要清楚,你得先把网页中你想要显示的图片, 事先就放在网页文件的文件夹里

  

即 :  

图片和网页文件是在一起的 ~!!  这是事先工作 ~!

随后,我们编写代码 : 

黄色标注的即是 图像标签的规范, 里面红色标注的即是 具体的某个图像的名称,即你要在网页中

显示的图片叫啥, 我们示例中的这个图片叫 OIP-C.jpg  ;  那红色标注的就是这个~!!

# 另一点要注意的就是, .jpg 是这个图片的格式,也是必须要加的,示例中是把这个 .jpg 直接纳

   入到名称里面去了。 

随后执行 : 

如此,即显示了如何在网页中显示一个图片的大致简单做法~!!!

那我们,现在想要网页既有文字,也有图片 

===>>>

那你加文字就行了呗

结果显示 : 

这样,上示内容即展示了一个网页中的两种最基本元素( 包含了 图片和文字 ) 

当然了,你如果要把图片显示到文字下方,那你加个 换行标签即可~!!

图像标签的其它属性 : 

#  我们刚才学习了 图像标签的 src 属性, 下面我们再学习下其它的属性 

alt 属性 

#  该属性表示 替换文本,图像不能显示时起作用,会显示文字 

    即当图像显示不出的时候,用文字替换~!

示例 : 

执行结果 : 

诶奇怪,怎么没见 alt 的作用呢 ??  当然了, alt 属性是在 图像显示不出的时候才起作用的;

你图像可以正常显示,那 alt 属性当然也就不体现了 ~!!

所以,我们让 图像无法正常显示,再看

===>>>

执行效果 :

显然,当图像显示不出的时候,就可以看到 alt 属性的作用了, 那个 CR7 即是  alt 属性的作用

即,可以告诉网页读者,当图像显示不出的时候,读者可以看到 这个图像是和 CR7 有关的图像

title  属性 

#  是提示文本,即当鼠标放置图像上时,会显示文字内容 

示例  : 

执行结果 : 

结果显示即为 title 属性的作用 

width  属性 

#  设置图像的宽度  

示例 : 

===>>>

显然第二个就是 修改完宽度后的效果, 我们设置了 宽度为 300 , 当然了这个值你来控制即可 

height  属性 

修改图像高度的属性 

示例 : 

===>>>

显然修改完高度后,明显不一样了

注意 : 一般修改 高度 或 宽度 属性时, 只修改一个属性,如果图像标签里同时都有 高度或

             宽度属性,那么这个图像会失真 

示例

这个时候即 图像标签里 既有 宽度属性,又有 高度属性,那么这个图像就失帧 

===>>>

你看第二个就会觉得 这个图像怪怪的,不好看~!!  

border  属性 

 设置图像的边框粗细 

示例 : 

===>>>

我们,一般是不会通过属性去修改 图像的边框的,会在后面 CSS 里去学习,这里了解一下即可

注意

#  图像标签可以同时拥有多个属性,但这些属性必须写在标签名的后面,即 img 的后面  

#  属性名是不分先后顺序的,标签名与属性, 属性与属性之间 均以空格分开 

#  属性采取键值对的形式去书写        即  属性=“属性值” 

#   图像标签  src 属性是必须要有的~!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

javascript之location常用属性和方法

文章目录 前言为什么使用location的属性和方法呢&#xff1f;属性展示hrefhosthostnameportprotocolpathname 方法展示replace(url)assign(url)reload()toString() 总结属性总结&#xff1a;方法总结&#xff1a; 前言 本章学习的是location常用属性和方法 为什么使用location的…

独立站如何优化网页加载速度

对于跨境电商独立站而言&#xff0c;流量是跨境电商业务的重中之重&#xff0c;由于独立站并不自带流量&#xff0c;非常依赖于谷歌搜索引擎自然流量&#xff0c;以及付费广告流量。 但随着付费流量价格日益水涨船高&#xff0c;为了摆脱对付费流量的依赖&#xff0c;相信广大…

【数据结构】快速排序(4种方式实现)

前言&#xff1a;前面我们学习了几种相对比较简单的排序&#xff0c;今天我们要一起学习的是快速排序&#xff0c;我们将通过四种方式来模拟实现快排。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &#x1f4a…

Impala4.x源码阅读笔记(三)——Impala如何管理Iceberg表元数据

前言 本文为笔者个人阅读Apache Impala源码时的笔记&#xff0c;仅代表我个人对代码的理解&#xff0c;个人水平有限&#xff0c;文章可能存在理解错误、遗漏或者过时之处。如果有任何错误或者有更好的见解&#xff0c;欢迎指正。 上一篇文章Impala4.x源码阅读笔记&#xff0…

函数式编程的妙用

前言 我们平常项目中维护的比较多的就是实体类中的数量问题&#xff0c;我们最常见的做法就是通过get方法读取旧数据&#xff0c;然后进行新数据的set 。这套方法相对来说是比较统一固定的&#xff0c;如果有多处地方使用&#xff0c;我们可以想着通过Function和BiConsumer的函…

防爆气象环境监测站设备的应用场所

TH-FBCQX2防爆气象环境监测站设备应用广泛&#xff0c;主要用于对各种危险品、易爆品等场所的气象环境进行实时监测和预警&#xff0c;保障安全生产和人员安全。 这些设备通常采用防爆设计&#xff0c;能够承受恶劣的环境条件&#xff0c;如高温、低温、潮湿、震动等&#xff0…

「亲测有效」ChatGPT Plus会员/GPT4开通方法 — 仅需支付宝或微信

这是我这两天找到的一个「只需要有支付宝或者微信」就可行的会员开通方法。 这个方法亲测有效&#xff0c;半个小时前给一个新的ChatGPT账号成功开通Plus会员&#xff0c; 并且只要有微信或支付宝就能成功支付 准备工作 首先我们准备好一个没有开通GPT4的ChatGPT账号&#xf…

Java学习——设计模式——创建型模式2

文章目录 创建型模式原型建造者模式扩展 创建型模式对比 创建型模式 关注点是如何创建对象&#xff0c;核心思想是要把对象创建和使用相分离&#xff0c;这样两者能相对独立地变换 包括&#xff1a; 1、工厂方法&#xff1a;Factory Method 2、抽象工厂&#xff1a;Abstarct Fa…

Factory Method工厂模式(对象创建)

Factory Method&#xff08;对象创建&#xff09; 链接&#xff1a;工厂模式实例代码 解析 目的 在软件系统中&#xff0c;经常面临着创建对象的工作&#xff1b;由于需求的变化&#xff0c;需要创建的对象的具体类型经常变化。 如何应对这种变化&#xff1f;如何绕过常规的…

什么是工厂方法模式,工厂方法模式解决了什么问题?

工厂方法模式是一种创建型设计模式&#xff0c;它定义了一个用于创建对象的接口&#xff0c;但将实际的实例化过程延迟到子类中。这样&#xff0c;客户端代码在不同的子类中实例化具体对象&#xff0c;而不是直接实例化具体类。工厂方法模式允许一个类的实例化延迟到其子类&…

词表示:语言与计算的桥梁

目录 前言1 什么是词表示2 独热表示3 上下文表示4 分布式表示结语 前言 在自然语言处理领域&#xff0c;词语的表示是一个基本挑战。将词语转换为计算机可以理解的符号&#xff0c;衡量词语之间的相似度&#xff0c;捕捉它们之间复杂的关系&#xff0c;是使机器能够理解和处理…

RTC实时时钟

简介 RTC时钟是一个独立的定时器&#xff0c;可以在后备电源不掉电的情况下一直运行。在对应的软件配置下一般可以做时钟日历功能。   RTC模块和时钟配置系统&#xff08;RCC_BDCR寄存器&#xff09;是在后备区域&#xff0c;即使系统复位或者待机唤醒后RTC的设置和时间都维持…

图片格式 WebP、JPEG、PNG、SVG 及转换

文章目录 图片格式 WebP、JPEG、PNG、SVG 及转换1. 图片格式1.1 WebP1.2 JPEG1.3 PNG1.4 SVG1.5 ... 2. 格式转换2.1 Python 批量转 WebP2.2 在线转换工具2.2.1 Shutterstock2.2.2 PicWish2.2.3 MyEdit2.2.4 Freeconvert2.2.5 iLoveIMG Reference 图片格式 WebP、JPEG、PNG、SV…

WPF+Halcon 培训项目实战(8):WPF+Halcon初次开发

前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原因无非是想换个工作。相关的教学视频来源于下方的Up主的提供的教程。这里只做笔记分享&#xff0c;想要源码或者教学视频可以和他联系一下。 相关链接 微软系列技术教程 WPF 年度公益课程 Halcon开发 CSD…

MySQL数据库性能优化中常用的方法是什么?

MySQL是目前广泛使用的关系型数据库系统&#xff0c;随着数据量的不断增加和业务需求的提升&#xff0c;MySQL数据库性能优化已经成为开发人员和DBA必须面对的一个重要问题。 查询语句是MySQL数据库中最常用的操作之一&#xff0c;也是造成性能问题的主要原因之一。以下是一些常…

SpringMVC之视图和RESTful

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

CSI多普勒效应

CSI多普勒效应 一、定义二、应用三、计算方法1方法2STFT和DFT间的区别 一、定义 多普勒频移是指由于运动引起的信号频率的变化。当信号源相对于接收器运动时&#xff0c;由于多普勒效应&#xff0c;信号的频率会发生改变。多普勒频移可以通过以下公式表示&#xff1a; 二、应…

4.16 构建onnx结构模型-And

前言 构建onnx方式通常有两种&#xff1a; 1、通过代码转换成onnx结构&#xff0c;比如pytorch —> onnx 2、通过onnx 自定义结点&#xff0c;图&#xff0c;生成onnx结构 本文主要是简单学习和使用两种不同onnx结构&#xff0c; 下面以 And 结点进行分析 方式 方法一&…

轻松记录、修改收支,让财务一目了然!

收支明细管理是每位个人或企业都必须面对的财务任务&#xff0c;但如何准确记录并修改收支明细却常常让人感到困扰。为了帮助大家更好地管理财务&#xff0c;让你轻松掌握记录、修改收支的技巧&#xff0c;让财务状况一目了然&#xff01;方法如下&#xff1a; 第一步&#xf…

线上隐私保护的未来:分布式身份DID的潜力

在日益数字化的世界中&#xff0c;人们的生活越来越多地依赖于互联网&#xff0c;数字身份也因而变得越来越重要。根据法律规定&#xff0c;互联网应用需要确认用户的真实身份才能提供各种服务&#xff0c;而用户则希望在进行身份认证的同时能够尽量保护他们的个人隐私&#xf…