5.图片-HTML基础
一、图片标签
在
HTML
中,我们可以使用img
标签来显示一张图片。 对于img
标签,只需要掌握它的 3 个属性:
- src
- alt
- title
<img src="" alt="" title=""/>
1.src属性
src
用于指定图片所在的路径,这个路径可以是绝对路径,也可以是相对路径。
(1)语法
<img src="图片路径"/>
这里的图片路径就是图片地址,任何一个图片必须指定
src属性
才可以显示。 也就是说,src属性
是img标签
必不可少的属性。
(2)示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="pikaqiu.png">
</body>
</html>
图片src属性.png
2.alt属性和title属性
alt属性
和title属性
都是用于指定图片的提示文字。 一般情况下,alt属性
和title属性
的值是相同的,但是二者也有很大不同。
(1)二者区别
-
alt属性
用于描述图片,这个描述文字是给搜索引擎看的,并且当文字无法显示时,页面会显示alt
中的文字。 -
title属性
也用于描述图片,这个描述文字是给用户看的,并且当鼠标指针移到图片上时,会显示title
中的文字。
(2)示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="pikaqiu.png" alt="我是皮卡丘" title="十万伏特"> <!--鼠标移动到图片显示十万伏特-->
</body>
</html>
<!--
这时,加上alt属性跟没加上效果一样,要是我们把图片路径即src属性换个不存在的,就会在浏览器上显示alt属性的提示文字。
若没有加上alt属性,图片无法显示时,就不会有提示文字。
当我们把鼠标移到图片上,就会显示title属性中的提示文字。
-->
(3)实际开发
在实际开发中,对于
img
标签,src
和alt
这两个是必选属性,一定添加,而title
是可选属性,可加可不加。
二、图片路径
1.绝对路径
绝对路径,指的是图片在我们的电脑中的完整路径。 文件夹上方会有一个路径,这个就是绝对路径。
(1)示例
图片路径练习.png
① 例1
将
毛毛.jpg
用绝对路径显示在浏览器上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="D:/赢凌策/前端全栈工程师/前端练习(小知识点)/赢凌齊_练习作品/img/毛毛.jpg" alt="毛毛最可爱" title="小黑">
</body>
</html>
2.相对路径
相对路径,指的是相对当前页面的位置。
(1)“../”表示上一级目录
“../”表示上一级目录,一定要记住这种写法。
(2)示例
① 例1
将
毛毛.jpg
用绝对路径显示在浏览器上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>图片</title>
</head>
<body>
<img src="img/毛毛.jpg" alt="毛毛最可爱" title="小黑"/>
</body>
</html>
3.实际开发
(1)使用绝对路径时,图片不显示
使用绝对路径时,编辑器往往都不能把图片的路径解析出来,因此图片无法在网页中显示出来。 在真正的网页开发中,对于图片或引用文件路径都是使用相对路径。因此我们只需要掌握相对路径的写法即可。
(2)图片或文件,不建议使用中文名
不建议使用中文,因为很多服务器是英文操作系统,不能对中文文件名提供很好的支持。所以不管是图片还是文件夹,都建议使用英文。
三、图片格式
在网页中,图片格式有两种:一种是位图,另外一种是矢量图。
1.位图
位图,又叫像素图,它是由像素组成的图片。 将位图放大后,图片会失真;缩小图片后,位图同样也会失真。 在实际开发中,最常见位图的图片格式有以下三种:
- .jpg(或.jpeg)
- .png
- .gif
深入理解这三种图片适合在哪种情况下使用,是非常重要。
(1).jpg格式
.jpg
格式可以很好地处理大面积色调的图片,适合存储颜色丰富的复杂图片,如照片、高清图片等。 此外,.jpg
体积较大,并且不支持透明。
(2).png格式
.png
格式是一种无损格式,可以无损压缩以保证页面打开速度。此外,.png
体积较小,并且支持透明,不过不适合存储颜色丰富的图片。
(3).gif格式
.gif
图片效果最差,不过它适合制作动画。实际上,我们经常在QQ发的动图都是.gif
的格式。也就是说,如果想要展示的色彩丰富而高品质图片,可以使用
.jpg
格式;如果是一般图片,为了减少体积或想要透明效果,可以使用.png
格式;如果是动画图片,可以使用.gif
格式。 对于位图,我们可以使用photoshop这款软件的处理。
2.矢量图
矢量图,又叫向量图,它是用计算机图形学中点、直线或多边形等表示出来的几何图像。 矢量图是以一种数字描述的方式来记录内容的图片格式。例如:我们可以使用
y = kx
来绘制一条直线,当 k 取不同值时,就会绘制不同角度的直线,这就是矢量图的构图原理。
(1)优缺点
矢量图最大优点是图片无论放大,缩小或旋转等都不会失真。 最大的缺点是难以表现色彩丰富的图片效果。
在网页中,很少用到矢量图,除非是一些字体图标。
(2)位图和矢量图的区别
- 位图适用于展示色彩丰富的图片,而矢量图不适用于展示色彩丰富的图片。
- 位图的组成单位是像素,而矢量图组成单位是数学向量。
- 位图受分辨率影响,当图片放大时会失真,而适量图不受分辨率影响,当图片放大时不会失真。
- 网页中的图片绝大多数都是位图,而不是矢量图。
- Bootstrap幻灯轮播如何支持触屏左右滑动手势?
- JavaScript 调试小技巧
- 图片上传预览js
- Isolation Forest算法实现详解
- css继承样式怎么控制?用选择器
- wordpress站内搜索结果页URL伪静态如何操作
- 如何实现大图居中超过的部分两边自动隐藏
- Ubuntu16.04安装后开发环境配置和常用软件安装
- wordpress如何屏蔽wp-json(禁用REST API)
- 贝叶斯系列——贝叶斯与其他统计流派的区别和联系
- bootstrap tab切换如何让鼠标移动自动切换内容
- css自动换行如何设置?url太长会撑开页面
- Histogram of Oriented Gridients(HOG) 方向梯度直方图
- 动态规划系列之最长递增子序列问题解答
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例