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

目录

图像标签  : 

插入图像 

图像标签的其它属性 : 

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.mzph.cn/news/584441.shtml

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

相关文章

Android画布Canvas drawPath绘制跟随手指移动的圆,Kotlin

Android画布Canvas drawPath绘制跟随手指移动的圆&#xff0c;Kotlin import android.content.Context import android.graphics.Canvas import android.graphics.Color import android.graphics.Paint import android.graphics.Path import android.os.Bundle import android.…

Java 类加载与字节码技术

3 类加载与字节码技术 3.1 类文件结构 类文件结构字节码指令编译期处理类加载阶段类加载器运行期优化 根据 JVM 规范&#xff0c;类文件结构如下 ClassFile {u4 magic;u2 minor_version; // 小版本号u2 major_version; // 主版本号u2 constant_pool_count; // 常量池cp_info…

算法时间空间复杂度计算—空间复杂度

算法时间空间复杂度计算—空间复杂度 空间复杂度定义影响空间复杂度的因素算法在运行过程中临时占用的存储空间讲解 计算方法例子1、空间算法的常数阶2、空间算法的线性阶&#xff08;递归算法&#xff09;3、二分查找分析方法一&#xff08;迭代法&#xff09;方法二&#xff…

WEB 3D技术 three.js 色彩空间讲解

上文 WEB 3D技术 three.js 设置环境贴图 高光贴图 场景设置 光照贴图 我们讲了基础材质的各种纹理 但是 我们的图片 到了界面场景中 好像绿的程度有点不太一样了 这里的话 涉及到我们的色彩空间 他有两种 一种是线性的 一种是 sRGB类型的 线性呢 就是根据光照强度 去均匀分…

【满分】【华为OD机试真题2023CD卷 JAVAJS】API集群负载统计

华为OD2023(C&D卷)机试题库全覆盖,刷题指南点这里 API集群负载统计 时间限制:1s 空间限制:256MB 限定语言:不限 题目描述: 某个产品的RESTful API集合部署在服务器集群的多个节点上,近期对客户端访问日志进行了采集,需要统计各个API的访问频次,根据热点信息在服务…

拓扑排序图解-Kahn算法和深度优先搜索

拓扑排序 是将一个有向无环图中的每个节点按照依赖关系进行排序。比如图 G G G存在边 < u , v > <u,v> <u,v> 代表 v v v的依赖 u u u, 那么在拓扑排序中&#xff0c;节点 u u u一定在 v v v的前面。 从另一个角度看&#xff0c;拓扑排序是一种图遍历&#…

《别让猴子跳回背上》——管理者的时间管理

讲时间管理的书很多&#xff0c;但这本是专门讲给管理者的时间管理。 在职场中&#xff0c;许多管理者都会碰到工作计划执行不下去、组织目标难于实现的问题&#xff0c;搭进了自己所有可以支配的时间&#xff0c;仍旧是焦头烂额&#xff0c;顾此失彼&#xff1b;而下属则因为…

力扣题目学习笔记(OC + Swift)19. 删除链表的倒数第 N 个结点

19. 删除链表的倒数第 N 个结点 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 此题目为链表题&#xff0c;拿出我们的杀手锏&#xff0c;链表解题经典三把斧&#xff1a; 哑巴节点栈快慢指针 关于内存问题&#xff1a;由于Swift及…

算法基础day1

归并排序模版 #include <iostream> using namespace std; int n; const int N 1e610; int q[N],tmp[N]; void merge_sort(int l,int r,int q[]){if(l>r) return;int mid lr>>1;merge_sort(l,mid,q);merge_sort(mid1,r,q);//归并的的过程int k0,il,jmid1;while(…

【Vue2+3入门到实战】(10)Vue基础之一文掌握 组件通信 详细示例(组件通信语法、父传子 、 子传父、非父子通信)

这里写自定义目录标题 一、学习目标1.组件通信2.综合案例&#xff1a;小黑记事本&#xff08;组件版&#xff09; 二、组件通信1.什么是组件通信&#xff1f;2.组件之间如何通信3.组件关系分类4.通信解决方案5.父子通信流程6.父向子通信代码示例7.子向父通信代码示例8.总结 三、…

FME之读取文件名路径FilenamePartExtractor转换器

在读取文件所在路径及相关信息时&#xff0c;我们除了在读模块时选择Directory and File Pathnames数据类型。还可以选择在某个阶段使用FilenamePartExtractor转换器来读取文件所在路径及相关信息。 在前面转换器只要暴露有fme_dataset&#xff0c;在源文件名选择它即可实现。…

Google Play上架:2023年度总结报告

今天是2023年的最后一个工作日&#xff0c;今天用来总结一下2023年关于谷歌商店上架的相关政策改动和对应的拒审解决方法。 目录 政策更新与改动2023 年 2 月 22 日2023 年 4 月5 日2023 年 7 月 12 日2023 年 10 月 25 日 开发者计划政策拒审邮件内容和解决办法 政策更新与改…

利用Pandas进行高效网络数据获取

利用Pandas进行高效网络数据获取 背景&#xff1a; ​ 最近看到一篇关于使用Pandas模块进行爬虫的文章&#xff0c;觉得很有趣&#xff0c;这里为大家详细说明。 基础铺垫&#xff1a; ​ pd.read_html pandas 库中的一个函数&#xff0c;用于从 HTML 页面中读取表格数据并…

数据库 基础面试第一弹

1. SQL语句类型 1. DDL&#xff08;Data Definition Language&#xff0c;数据定义语言&#xff09;&#xff1a; DDL语句用于定义数据库对象&#xff08;如表、索引、视图等&#xff09;。常见的DDL语句包括&#xff1a; CREATE&#xff1a;用于创建数据库对象&#xff0c;如…

【网络安全 | Misc】Training-Stegano-1

该题考察winhex工具使用 打开文件&#xff1a; 使用StegSolve并不能获取有效信息 使用winhex得到flag steganoI

【Linux系统化学习】进程终止的奥秘

个人主页点击直达&#xff1a;小白不是程序媛 Linux专栏&#xff1a;Liunx系统化学习 代码仓库&#xff1a;Gitee 目录 获取函数返回值 退出码 进程退出的场景 错误码 信号终止异常代码 进程的终止 main函数直接return exit函数 _exit函数 获取函数返回值 在C语言学…

玩转区域流量调配,详细解析GLSB是什么?

在互联网早期&#xff0c;由于网络不是很发达&#xff0c;流量也相对比较小&#xff0c;单体架构已经能足够满足需求。但伴随着互联网越来越&#xff0c;网站的流量请求甚至能达到上千亿。为了实现高可用&#xff0c;需要用到多台机器来提升处理流量的能力。在这种环境下&#…

PIE-Engine简介

PIE-Engine&#xff0c;是航天宏图基于云计算、物联网、大数据和人工智能技术自主研发的一站式地球科学大数据实时计算平台&#xff0c;平台构建了基于云原生的并行高效底层架构&#xff0c;助力地球科学应用的产业化发展。&#xff08;摘自官网&#xff09; 前天&#xff0c;我…

web前端开发网页制作html/css结课作业

效果图展示&#xff1a; 注意事项&#xff1a; 引用JQuery文件地址和图片地址要更换一下。 百度网盘链接&#xff1a; http://链接&#xff1a;https://pan.baidu.com/s/1wYkmLr7csjBwQY6GmlYm4Q?pwd4332 提取码&#xff1a;4332 html界面展示&#xff1a; main.css代码部…

写给工作6年的程序员的一封信

准大牛 &#xff1b;兄&#xff0c; 希望你不会反感我给你的这个特别的称号&#xff0c;我们程序员中的大部分工作到5~6年这个节骨眼上&#xff0c;不出意外的话…准大牛…了&#xff0c;此时的你技术能力正在成熟或者已然成熟&#xff1b;架构设计力初现峥嵘&#xff1b;创新能…