HTML图片(IMG)

插入图片

网页中常用的图片格式有: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 >


猜你喜欢

转载自blog.csdn.net/lihaikuo666/article/details/80999526
今日推荐