img标签语法为:<img src="图片的URL" />
能插入的图片类型
- 能够插入的图片类型:jpg(jpeg)、gif、png、bmp等。
- 不能往网页中插入图片的格式是:psd、ai等。
HTML页面不是直接插入图片,而是插入图片的引用地址,所以要先把图片上传到服务器上。
img标签的src属性
- src属性:图片的路径,相对路径、绝对路径
写法一:图片的相对路径
相对当前页面所在的路径。两个标记(.
——当前目录)和(..
——上一层目录)
举例:
<!--当前目录中的图片-->
<img src="2.jpg">
<img src=".\2.jpg">
<!--上一级目录中的图片-->
<img src="..\2.jpg">
相对路径不会出现此情况:
aa/../bbb/1.jpg
要么不写../
,要么就写在开头。
相对路径的面试题。
有如下文件层级图,若想在index.html中插入1.png,那么对应的img语句是?
分析:document文件包含work和photo。work中又有一个文件夹myweb。myweb文件中有index.html。 所以index.html在myweb文件夹里面,上一级就是work文件夹,上两级就是document文件夹。通过document文件夹当做一个中转站,进入photo文件夹,看到了1.png。
答案:
<img src="../../photo/1.png"/>
写法二:图片的绝对路径
(1)以盘符开始的绝对路径。例:
<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">
(2)网络绝对路径。例:
<img src="http://img.smyhvae.com/20200122_200901.png">
总结:
不管是a标签还是img标签,要用路径。只有两种路径可用,相对路径和绝对路径。
- 相对路径从自己出发,找到别人。
- 绝对路径,就是
http://
或者https://
开头的路径。 - 绝对不允许使用
file://
开头的文件,完全错误!
img标签的其他属性
width、height 属性
width:
图像的宽度。height:
图像的高度。
提示:如果想保证图片等比例缩放,只设置width
和height
中一个。
Alt属性
alt
:当图片不可用(无法显示时),代替图片显示的内容。
如上图,当图片src不可用时,显示文字进行提示。
title属性
title
:提示性文本。鼠标停顿时出现的文本。
align属性
align
:图片和周围文字的相对位置。属性取值可以是:bottom
(默认)、center
、top
、left
、right
。
1、align=“ ”
,图片和文字低端对齐,botton
默认下的效果:
2、align="center"
:图片和文字水平方向上居中对齐。效果显示:
3、align="top"
:图片和文字顶端对齐。显示效果:
4、align="left"
:图片在文字的左边。显示效果:
5、align="right"
:图片在文字的右边。