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

目录

图像标签  : 

插入图像 

图像标签的其它属性 : 

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.hqwc.cn/news/307835.html

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

相关文章

S7-1200PLC脉冲轴位置控制功能块(SCL代码)

S7-1200PLC脉冲轴控制梯形图代码请参考下面链接文章&#xff1a; https://rxxw-control.blog.csdn.net/article/details/127920634https://rxxw-control.blog.csdn.net/article/details/127920634 1、脉冲轴配置 2、机械参数和硬限位设置 3、回原配置 4、轴2配置 未完...

resnet18

ResNet18的基本含义是&#xff0c;网络的基本架构是ResNet&#xff0c;网络的深度是18层。但是这里的网络深度指的是网络的权重层&#xff0c;也就是包括池化&#xff0c;激活&#xff0c;线性层。而不包括批量化归一层&#xff0c;池化层。 transforms.RandomCrop(32, pa…

MindOpt 云上建模求解平台:多求解器协同优化

前言 数学规划是一种数学优化方法&#xff0c;主要是寻找变量的取值在特定的约束情况下&#xff0c;使我们的决策目标得到一个最大或者最小值的决策。 使用数学规划的方法我们需要确定问题的目标、约束、变量的取值范围&#xff0c;然后进行数学建模&#xff0c;将数学公式转化…

年薪最高160万,鸿蒙开发者迎来黄金期!

华为正致力于让鸿蒙系统&#xff08;HarmonyOS&#xff09;成为中国的 Andorid。 鸿蒙操作系统诞生于 2019 年&#xff0c;彼时恰逢华为被禁止使用谷歌应用。一晃 4 年&#xff0c;鸿蒙操作系统已经更新到了 4.0 版本&#xff0c;截止今年 8 月&#xff0c;已有超过 7 亿台设备…

【南方CASS干货教程】CASS11使用时提示 “请不要在虚拟机中运行此程序”,解决办法

【南方CASS干货教程】CASS11使用时提示 “请不要在虚拟机中运行此程序”,解决办法 文章目录 前言一、问题描述二、解决办法方法一:管理员身份运行DOC系统方法二:内核隔离中设置方法三:进入电脑BOIS,关闭虚拟化技术总结前言 ` 在CASS11安装文章后,有人留言说安装后提示“…

【C语言】数据结构——排序二(快排)

&#x1f497;个人主页&#x1f497; ⭐个人专栏——数据结构学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 导读&#xff1a;数组打印与交换1. 交换排序1.1 基本思想&#xff1a;1.2 冒泡与快排的异同 2. 冒泡排序2.1 基本思想2.2 …

C++:第十一讲DFS深搜

Everyday English Your optimal career is simply this: Share the real you with physical world through th e process of creative self-expression. 你的最佳职业很简单&#xff0c;就是这样&#xff1a;通过创造性自我表达的途径和世界分享真实的你。 前言 今天带着大家…

卷积核和学习和训练

如果我们已知原始的图像数据&#xff0c;和这个图像经过某个卷积核计算后&#xff0c;得到的新的数据&#xff0c;那么如何计算出这个卷积核中的具体参数呢&#xff1f; 例如&#xff0c;已知输入图像是12*12的&#xff0c;经过某个3*3的卷积核&#xff0c;得到的输出数据是10*…

Go 如何通过代码进行格式化 gomft命令

我们都知道 使用JetBrains GoLand 快捷键可以快速对代码进行格式化 现在将使用go的代码进行格式化 源代码如下&#xff1a; package mainimport "fmt"func main() {var n1 int 19var n2 float32 4.78//var n3 bool false//var n4 byte avar s1 string…

JoySSL怎么样

JoySSL是一家专业的SSL证书服务提供商&#xff0c;致力于为网站和在线业务提供最佳的安全加密解决方案。以下是JoySSL的一些优点&#xff1a; 提供多种类型的SSL证书选择&#xff1a;JoySSL提供单域名、多域名、通配符等不同类型的SSL证书&#xff0c;以满足不同网站的需求。证…

web自动化上传文件

1&#xff0c;web 自动化文件上传不要太简单 熟悉 web 自动化测试的大佬应该都懂&#xff0c;当采用 js 调用原生控件进行文件上传的时候&#xff0c;最常用的是使用 pywin32 等系统交互库。 当看到 pywin32 那丑陋的 api 封装只能爆粗口。就为了输入一个文件地址&#xff0c;…

大数据Doris(四十四):查询物化视图和自动匹配

文章目录 查询物化视图和自动匹配 一、​​​​​​​查询物化视图