插入图片
网页中常用的图片格式有:jpg、gif、png等。HTML中插入图片使用<img>标签
基本语法:
<img src=“图片路径” width=宽度 height=高度>
语法解释:宽度和高度的单位都是像素,<img>是插入图片的HTML标签,src 是描述图片路径的属性,它的值表示图片的路径。
举例:
1
|
< img src=“bg.jpg”/ >
|
这里的图片路径表示bg.jpg图片和html文件在同一目录下.如果图片很多的话合理的做法是把所有的图片放在images子文件夹中显着整洁.那么上面的路径应改为<img src=”images/bg.jpg” />,关于路径问题,在后面”相对路径与绝对路径”课程中详细讲到.
<img>标签除了src属性外还包括的属性有:
lowsrc:设定分辩率比较低的图片
alt:设定图像的提示文字属性
width、height:设定图像的宽度和高度
border:设定图片的边框
扫描二维码关注公众号,回复: 2096090 查看本文章vspace:设定图像的垂直间距
hspace:设定图像的水平间距
align:设定图像的排列属性
设定图片的提示文字(alt )
基本语法:
<img src=“图片路径” alt=“提示文字”>
举例:
1
|
<
img
src=“images/1.jpg” alt=“北国风光”>
|
IMG标签的alt属性是指鼠标放在网页的图片上没弹出一行提示性的文字。
设定图片的边框 border
基本语法:
<img src=“图片路径” border=边框宽度>
举例:
1
|
<
img
src=“images/1.jpg”
border
=
10
>
|
设定图片的排列属性(align)
图片的超链接
图片的超链接就是在图片上建立链接。和文字的链接相同,就是点击过链接的图片或文字后就会跳到对应的目标地址上。
图片的超链接与文字相同都是<a>标记。
基本语法:
<a href=”目标地址”><img src=”图片路径” /> </a>
举例:
1
|
<
a
href=“http://www.adminwang.com”><
img
src=”aaa.jpg”>Web开发</
a
>
|
本节总结
1
2
3
4
5
6
7
|
<
html
>
<
head
><
title
>插入图片演示</
title
></
head
>
<
body
>
<
h1
>插入IMG图片标签演示</
h1
>
<
img
src
=
"img.jpg"
height
=
"180"
width
=
"320"
border
=
"10"
alt
=
"熊猫宝宝"
/>
</
body
>
</
html
>
|