HTML/CSS1

1.前置说明

请点这里

2.img元素

格式:

<img src="图片地址" alt="占位文字" width="图片宽度" height="图片高度">

其中alt是当图片加载失败时显示的文字 而且不同内核的浏览器显示出来的占位文字的效果也是不尽相同的
而如果同时设置了图片宽度和图片高度的话 可能会导致图片比例失调 为了保持原图片的比例 我们可以只设置width/height 浏览器会自动根据比例来计算出另外一个属性
还有就是alt是html5中img元素的必要属性

接下来是一个小小的演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片路径失败">
</body>
</html>

在这里插入图片描述

img元素的src属性值可以通过绝对路径或者相对路径进行表示
绝对路径:完整的图片路径表现形式
相对路径:不完整的图片路径表现形式(其中 .表示当前文件所在的路径 可以省略 而…则表示当前文件的上一级路径)
接下来分别通过绝对路径和相对路径来演示一下两种的区别
绝对路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片路径失败">
</body>
</html>

在这里插入图片描述
相对路径
先展示一下文件结构
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img.png" alt="图片路径失败">
</body>
</html>

当然以上写法也可以省略./

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="img.png" alt="图片路径失败">
</body>
</html>

当然我也可以获取当前路径下的images文件夹下的image图片 同样可以有两种方式表达图片的获取路径

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="images/img.png" alt="图片路径失败">
</body>
</html>

假设我们的文件结构如下图所示 依然是想要获取image图片的话 那么可以通过…的方式进行图片的获取

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="../img.png" alt="图片路径失败">
</body>
</html>

然后我们html文件中的路径分隔符都是以/表示 不管针对的是什么操作系统 都是如此(要和Windows操作系统中的路径分隔符\以示区别)

1.常用的图片格式

.png:静态图片 支持透明(不代表一定要透明效果)
.jpg:静态图片 不支持透明
.gif:静态图片、动态图片 支持透明
所谓透明效果其实指的就是图片的某些部分可以让背景透过显示

图片后缀名的修改并不会影响图片的本质(.jpg改成.gif 仍然保持不支持透明的特点)

2.像素

计算机所显示的图片其实就是由一堆像素(小正方块)组成的
而像素是图片显示的最小单位(图片是由一个个小正方块组合而成的 这些小正方块就是像素)
每个像素都只能显示一种颜色
组成图片的像素越多 那么图片就越清晰
我们平时所说的屏幕分辨率 其实都是以像素作为单位的

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

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

相关文章

linux修改max user processes/file limits

1、修改普通用户单个用户可同时运行的最大进程数 &#xff08;默认为 4096 &#xff09; [rootxxx devops]# cat /etc/security/limits.d/20-nproc.conf # Default limit for number of users processes to prevent # accidental fork bombs. # See rhbz #432903 for reasoni…

【Android学习】简单的登录页面和业务逻辑实现

实现功能 1 登录页&#xff1a;密码登录和验证码登录 2 忘记密码页&#xff1a;修改密码 3 页面基础逻辑 java代码 基础页面 XML login_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.and…

游戏后端开发初体验(一)

时间过得很快&#xff0c;一转眼&#xff0c;4月已然过去&#xff0c;迎来了5月。我也完成了第一个月的工作。五一假期没有出游计划&#xff0c;于是想趁这个机会&#xff0c;写下这个月的工作感想&#xff0c;也算是践行“记录即最好的回忆”。 工作环境和日常琐事 公司位于…

Servlet_JSP

1.一些回顾 对于Tomcat部署中 我们有一些补充的点需要在此说明一下 1.如果我们想要查询MINEType的话 可以到TOMCAT_HOME/conf/web.xml中进行查询 里面记录了不同类型对应的MINEType 2.我们客户端发送请求数据给服务器之后 服务器会调用父类中的service方法 然后在内部决定调用…

CMakeLists.txt语法规则:while 循环

一. 简介 前面几篇文章学习了 CMakeLists.txt语法中的一种循环写法&#xff0c;文章如下&#xff1a; CMakeLists.txt语法规则&#xff1a;foreach 循环基本用法-CSDN博客 CMakeLists.txt语法规则&#xff1a;foreach循环的关键字-CSDN博客 本文学习 while循环写法。 二. …

Day08-JavaWeb开发-MySQL(多表查询内外连接子查询事务索引)Mybatis入门

1. MySQL多表查询 1.1 概述 1.2 内连接 -- 内连接 -- A. 查询员工的姓名, 及所属的部门名称(隐式内连接实现) select tb_emp.name, tb_dept.name from tb_emp,tb_dept where tb_emp.dept_id tb_dept.id;-- 起别名 select * from tb_emp e, tb_dept d where e.dept_id d.id…

tomcat+maven+java+mysql图书管理系统2-完善项目结构,添加相关依赖

1.创建java目录 接着选择java&#xff0c;回车&#xff0c;则创建成功&#xff0c;成功后在左侧栏能看见 2.修改pom.xml文件,(添加依赖) <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi…

Thinkphp5 实现 redis 数据缓存

在ThinkPHP 5中&#xff0c;你可以使用Redis作为数据缓存的解决方案。Redis是一个开源的内存数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中介。下面是在ThinkPHP 5中实现Redis数据缓存的基本步骤&#xff1a; 1. 安装 Redis 扩展 首先&#xff0c;你需要在你的…

vs 2022 Xamarin 生成 Android apk

再保存&#xff0c;如果没有生成apk就重启软件 再试一次

Windows内核开发:如何使用STL

前言 大家都知道应用层c的STL非常强大&#xff0c;非常好用&#xff0c;但是在内核下就没法用了。针对这个问题&#xff0c;经过我不懈的寻找&#xff0c;终于找到了解决内核无法使用STL的方法。 使用new/delete关键字 先说一下常用关键字如何在内核中使用。其实只需要在一个全…

广西壮族自治区工程系列住房城乡建设行业高、中、初级职称评审条件

广西壮族自治区工程系列住房城乡建设行业高、中、初级职称评审条件评审文件链接广西壮族自治区人力资源和社会保障厅网站评审工作的通知广西壮族自治区人力资源和社会保障厅网站类别基本条件学术成果备注工程师&#xff08;一&#xff09;具备博士学位&#xff1b;或具备硕士学…

上位机开发PyQt5(三)【布局、单选框和多选框、对话框】

目录 一、布局Layout 1. 布局简介 2. 水平布局QHBoxLayout 3. 竖直布局QVBoxLayout 4. 表单布局QFormLayout 5. 布局嵌套 二、单选框和复选框 1. 单选框 2. 复选框 三、对话框 1. QMessageBox 2. QIputDialog 一、布局Layout 1. 布局简介 一个pyqt窗口中可以有多…

百度文库可直接下载VIP文章

百度文库文件下载 百度文库是百度公司推出的一款在线文档分享平台&#xff0c;它可以让用户免费上传、分享、下载和浏览各类文档资源&#xff0c;包括但不限于文章、论文、报告、PPT、书籍等。 好了&#xff0c;废话不多说&#xff0c;这里推出的新生产的软件&#xff0c;可直…

机器学习的指标评价

之前在学校的小发明制作中&#xff0c;在终期答辩的时候&#xff0c;虽然整个项目的流程都答的很流畅。 在老师提问的过程中&#xff0c;当老师问我recall,precision,accuracy等指标是如何计算的&#xff0c;又能够表示模型的哪方面指标做得好。我听到这个问题的时候&#xff…

内存映射文件

内存映射文件(Memory-Mapped Files)是一种在Windows和其他操作系统中使用的技术,它允许应用程序将文件的内容映射到进程的地址空间中,这样文件就可以像内存一样被直接访问,而无需进行传统的文件读/写操作。这种技术可以提高文件访问的性能,因为内存访问通常比磁盘I/O操作…

图片倾斜矫正处理(Hough Transform)

目录 倾斜矫正原理及实现方式Canny边缘检测非极大值抑制霍夫变换 倾斜矫正原理及实现方式 代码连接&#xff1a;https://github.com/shuyeah2356/Image-Angel-correction/tree/main 倾斜矫正的实现原理&#xff1a; 使用霍夫变换检测图片中的直线&#xff1b; 计算直线与水平方…

【与 Apollo 共创生态:展望自动驾驶全新未来】

1、引言 历经七年的不懈追求与创新&#xff0c;Apollo开放平台已陆续推出了13个版本&#xff0c;汇聚了来自全球170多个国家与地区的16万名开发者及220多家合作伙伴。随着Apollo开放平台的不断创新与发展&#xff0c;Apollo在2024年4月19日迎来了Apollo开放平台的七周年大会&a…

周末总结(2024/05/05)

工作 人际关系核心原则&#xff1a; 要学会随时回应别人的善意。 人际关系的本质是价值交换&#xff08;利益和情绪&#xff09; 接受破烂现状&#xff0c;改变状态 - 这周写了两天代码&#xff0c;总结了node.js的面试题&#xff0c;其他时间都在摸鱼&#xff0c;状态很差&am…

猿人学第七题-动态字体-随风漂移

前言&#xff1a;该题主要是考对fontTools.ttLib.TTFont的操作&#xff0c;另外就是对字典互相映射的操作 一、woff文件存储 from fontTools.ttLib import TTFont #pip install fontTools def save_woff(response):woff response[woff]woff_file base64.b64decode(woff.enc…

.排序总讲.

在这里赘叙一下我对y总前四节所讲排序的分治思想以及递归的深度理解。 就以788.逆序对 这一题来讲&#xff08;我认为这一题对于分治和递归的思想体现的淋淋尽致&#xff09;。 题目&#xff1a; 给定一个长度为 n&#x1d45b; 的整数数列&#xff0c;请你计算数列中的逆序对…