HTML——＞图片

最新推荐文章于 2023-11-21 17:00:00 发布
最新推荐文章于 2023-11-21 17:00:00 发布
阅读量749 收藏 4
点赞数
分类专栏： html 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55016379/article/details/116333303
版权
笔记 同时被 2 个专栏收录
94 篇文章 0 订阅
订阅专栏
html
11 篇文章 0 订阅
订阅专栏

图片

图片标签

在HTML中，我们可以通过img标签向页面添加一张照片

对于img标签一共有三个属性：src、alt、title

src属性

作用：src用于指定这个图片的路径，而路径可以是相对路径也可以是绝对路径

语法结构

<img src="图片路径">

alt属性和title属性

特点：alt和title都用于指定图片的提示文字。一般情况下，alt和title的值是相同的。不过两者也是有区别的

区别：

  • alt属性用于图片描述，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字
  • title属性也用于图片藐视，这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字

图片路径

图片路径分为两类：绝对路径和相对路径

绝对路径

绝对路径指的是图片在计算机中的存储位置。这个位置一般是固定的。在使用时是将路径（完全体）全部填入scr=“ ”中。

相对路径

相对路径，指的是图片相当于当前网页的位置

在文件中，文件的关系有**“父子”或"兄弟"**关系

对于网页与图片为兄弟关系

当网页和图片存在兄弟关系（即两者的存储位置在同一文件夹下，处于同一级）可以直接使用

语法结构

<img str="相对路径"/>

对于网页与图片不存在兄弟关系

也就是可能网页与图片的上级存在兄弟关系，或其他情况

可以通过**…/**操作进入网页的上级目录

可以通过**/**操作进行下级目录的访问，直到找到图片的位置

代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body>
		<img src="../photopakge/sweetheart.jpg" alt="" title="我的甜心"><br/>
		<img src="../photopakge/lol.png" alt = ""title="lol"><br/>
		<img src="../photopakge/workhard.gif" alt = "" title="hungry"> 
		
	</body>
</html>

图片格式

对于图片可以分为两类：位图和矢量图

位图

特点：位图，又叫作“像素图”，它是由像素点组成的图片，对于位图来说，放大图片后，图片会失真；缩小图片后图片同样也会失真

常见的位图有三种：jpg或（jpeg）、png、gif

  • jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片，高清图片等。此外，jpg格式的图片体积较大，并且不支持保存透明背景
  • png格式是一种无损格式，可以无损压缩以保证页面的打开速度。此外png格式的图片体积较小，并且支持保存透明背景，不过不适合保存颜色丰富的图片
  • gif格式的图片效果最差，不过它适合制作动画。

矢量图

**特点：**矢量图，又叫做“向量图”，是一种数学描述的方式来记录内容的图片格式

矢量图的常见格式有：“.ai”,.cdr,.fh,.swf

  • 位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片
  • 位图的组成单位是“像素”，而矢量图的组成单位是“数学向量”
  • 位图受分辨率影响，当图片放大是会失真；而矢量图不受分辨率影响，当图片放大时不会失真
  • 网页中的绝大多数图片都是位图，而不是矢量图
省级干饭王
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
标记语言——图片替换
12-10
上文：标记语言——为文字指定CSS样式。 Chapter 14 图片替换 随着更多设计师与开发者开始使用标准(特别是CSS),每天都会有许多新技术被发现,达成相同目标的新方法,更好的方法也不断发展着. "图片替换" 可以说是这种...
如何在html中插入图片
Yt0601的博客
06-21 4251
学习html中必学的一个知识点，如何插入图片。 在学习了如何插入图片后，页面会变的丰富很多，在枯燥的文字中添加了一抹亮色
【Java 进阶篇】HTML 图片标签详解
繁依Fanyi的博客
10-07 677
img>标签是HTML中用于插入图像的主要标签，具有许多可用于控制图像显示的属性。使用这些属性，您可以轻松地在网页中插入图像并控制其外观和行为。请确保合理使用图像，以提高用户体验和网站性能。希望本文对您理解HTML图像标签和其属性有所帮助。如果您正在学习Web开发，这是一个重要的基础知识点，可以让您创建更具吸引力的网页。
常见图片格式（HTML）
JunGuanDreams的博客
04-21 1131
（1）本质：把图片转为一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。使用场景：对图片细节没有极高要求的场景，如：网站的产品宣传图。使用场景：对图片细节要求极高的场景，如：一些大型游戏中的图片。（5）使用场景：一些较小的图片，或者需要和网页一起加载的图片。概述：不进行压缩的一种格式，在最大程度上保留图片更多的细节。概述：是一种有损的压缩格式，能够更高质量的保存图片。主要特点：支持的颜色丰富，保留的细节更多，占用。支持的颜色较少，支持简单透明背景，支持动态图。主要特点：支持的颜色丰富，占用。
HTML 图片 img标签介绍
最新发布
2301_80716660的博客
11-21 248
又称图片标签。在浏览器中显示一张图片的HTML标签。img 标签 -- 代表HTML图像，img,是image(图像)的缩写。做网站时，如果网页上没有图片，将会使自己的网站失色。通过图片标签img标签可以让我们自己的网站图文并茂，图像会使网页更加生动。
HTML图片标签
小可爱的博客
07-23 1万+
图片标签标签定义HTML页面中的图像
html—显示照片（方法一）
yuan283095的博客
09-08 6257
1.在桌面上新建一个文件夹，将所要添加的照片放到文件夹中 2.新建txt文件，命名更改为.html 3.再新建一个txt文件，打开上面的html文件书写代码 4.得到的文件夹中内容包括： 5.代码为： 6.显示结果为： 注：图片过大，代码为初始代码，并未设置大小。
HTML中照片的各种常用属性
m0_56693703的博客
11-28 1064
HTML中图片的常用属性
HTML图像标签指南：从入门到精通掌握图片呈现技巧
canshanyin的博客
06-11 4369
HTML图像标签并不只是简单的显示图片，这里所介绍的只是其中的一部分小技巧。我们只有深入掌握其中更多的要面面俱到，才能够真正掌握图像标签的技巧并实现更好的网页设计。体验来自图像的美丽吧！东卫23:57HTML链接标签完全指南——让你的网页亮眼且有趣HTML是Web开发的基础，而链接标签是构建Web页面中必不可少的一部分。链接标签可以让你的网页更加动态、互动和有趣，让用户更加轻松地访问其他的页面。在本文中，我们将详细介绍HTML链接标签，为你提供一个完整的指南，让你的Web开发能更上一层楼。
HTML中的图片
maimang1001的专栏
03-05 5444
怎样将一幅图片放到网页上? 我们可以用<img>元素来把图片放到网页上。它是一个空元素（它不需要包含文本内容或闭合标签），最少只需要一个src（一般读作其全称source）来使其生效。src属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对URL，就像<a>元素的href属性一样。 举个例子来看，如果你有一幅文件名为dinosaur.jpg的图片，且它与你的 HTML 页面存放在相同路径下，那么你可以这样嵌入它： <img src="di...
HTML——表白特效.rar
03-03
这是一个由前端技术实现的“表白特效”，包含全部代码以及图片素材，可以用来学习前端使用或者表白喜欢的女孩！可以直接运行，欢迎各位下载呀！祝各位学习顺利，表白成功！
img.7z 伪——料理次元官网所用图片
10-18
img.7z 伪——料理次元官网所用图片
Html课程设计——时代音乐网站
08-20
网站所采用的知识包含很多，有渐变色背景变化、轮播图的实现、盒子嵌套使用、图片旋转效果等。采用html、css完成。应对于多种场合，网站内的色彩搭配都很漂亮，满满的科技感
用python写Hello World
热门推荐
qq_55016379的博客
03-02 2万+
用python写Hello World 运行python程序有两种方式：交互式和文件式 交互式 交互式又可分为通过cmd运行和通过IDLE远行两种 这种方式写的Python代码是输入一行，执行一行 通过cmd运行hello world 打开cmd 在命令控制栏输入python进入python解释器 在>>>后输入print（“hello world”） 通过IDLE运行hello world 点击python IDLE进入解释器 在file中新建或打开一个python文件 在文件中
Python——＞基本统计值计算
qq_55016379的博客
04-12 4684
基本统计值计算 这一一个计算多数据基本统计值得实例 程序包含求平均数，方差，中位数 Python的列表数据结构能够支持基本的数据统计应用 问题的IPO流解析： 输入 ：用户，文件，网络等输入数据 处理：适当的结构和算法 输出：平均值，方差，中位数 from math import sqrt def getNum(): nums = [] iNumStr = input("请输入数字(直接输入回车退出):") while iNumStr != "": nums.appe
python math库函数
qq_55016379的博客
03-14 3797
python math库函数 math库概括 模块编程：需要用import调用库的编程方式 简洁：math库是python提供的内置数学类函数库，因为复数类型常用于科学计算，一般计算并不常用，因此math函数不支持复数类型，仅支持整数和浮点数运算。 math函数一共提供了4个数学常数和44个函数。44个函数分为4类，包括16个数值表示函数，8个幂对数函数，16个三角对数函数和4个高等特殊函数。 math库解析 math库的数学常数（共4个） 常数 数学表示 描述 math.pi π 圆周率，
用正则表达式进行搜索
qq_55016379的博客
08-13 3519
用正则表达式进行搜索 正则表达式的介绍 正则表达式的使用环境 如果你想从一个文本文件中提取电话号码 如果你需要查找名字中间有数字的所有文件 如果你想在一个文本块中找到所有重复的单词 如果你想替换一个页面中的所有URL为这些URL的实际HTML链接 基本字符匹配 语法结构 SELECT 列名 FROM 表格 WHERE 列名 REGEXP 'XX' ORDER BY 列名 表示返回列中列名中包含(XX)子列的所有行 除了关键字LIKE被REGEXP代替外，这个语法结构和LIKE的语句相同 LIKE与RE
Python——＞jieba库的使用
qq_55016379的博客
04-13 3118
jieba库的使用 jieba是Python中的一个非常重要的一个第三方中文分词函数库 因为jieba库是第三方函数库，需要通过下载才能引用，不会第三方库下载的可以参考我的之前的第三方库引用对的笔记 jieba库的概述 jieba（“结巴”）是Python中一个重要的第三方中文分词函数库 分词原理：jieba分词原理是利用一个中文词库，将待分词的内容与分词词库进行比对，通过图结构和动态规划方法找到最大概率的词组。除了分词，jieba还提供增加自定义中文单词的功能 jieba库支持的三种分词模式 精确模式：
python——＞组合数据类型概述——＞序列
qq_55016379的博客
03-30 2976
组合数据类型概述 组合数据额类型为多个同类型或不同类型数据提供单一表示。组合数据类型分3类：序列类型、集合类型、映射类型 基本数据类型：表示单一数据类型 组合数据类型：能够表示多个数据的类型 三种数据类型 序列类型：是一个元素向量，元素之间存在先后关系，通过序号访问，元素之间不排他（可以有重复项） 集合类型：一个元素集合，元素之间无需，相同元素在集合中唯一存在 映射类型：“键-值”数据项的组合，每个元素是一个键值对，表示为（key，value） 序列类型 序列类型是一维元素向量，元素之间存在先后关
HTML——鼠标经过图片放大特效
05-12
HTML本身不支持鼠标经过图片放大特效，但可以通过CSS和JavaScript实现。 以下是一种实现方式： HTML代码： ```html <div class="image-container"> <img src="image.jpg" alt="Image"> </div> ``` CSS代码： `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值