首页 > 代码库 > 2014年度辛星html教程夏季版第四节
2014年度辛星html教程夏季版第四节
我们前面也涉及了HTML中的一些东西,接下来我们要涉及到图像了,如果没有图像,即使文字的样式再多,再复杂,终归还是单调的,我们就需要用图片来给我们的网页增加更多的表现形式。
***************图片******************
1.我们用<img>标签来给我们的HTML文件导入一个图片,它是一个空标签,即它只包含属性,而且它没有相应的闭合标签,即它不用成对出现。
2.它的src属性应用于指定源属性地址,它可以是绝对路径,也可以是相对路径,还可以是一个网址,即一个URL,比如我们要引入的图片是百度的一张图片,那么可以写如下代码:
<img src="http://f.hiphotos.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=e8f89e86b0fb43160e12722841cd2d46/ca1349540923dd5483db5925d309b3de9d8248d7.jpg">
3.当然上述代码有点长,主要是百度的地址比较长,这张图片,如果大家好奇,可以到自己的浏览器运行一下。
4.img标签还可以包括alt属性,它是当图片无法载入的时候用来显示的。
5.img标签还有一个width属性用于设置显示图像的宽度,用height属性来设置显示图片的高度。
6.如果一个标签有多个属性,那么需要用空格进行分开,并且属性的值需要用双引号引起来,以明确表示它的属性。
7.示例代码:
<img src="xinxing.gif" alt="辛星" width="300" height="400" />
****************路径问题**************
1.会想到我初学HTML的一些经历,在这里提醒大家一下关于路径的问题吧,img标签的src属性可以用绝对路径,也可以用相对路径。
2.比如我们编写的html和图片在同一目录下,且图片叫x.gif,那么就可以写代码为:<img src = "http://www.mamicode.com/x.gif" />
****************小结**************
1.本节课我们介绍了HTML中关于图片的一些知识,希望大家可以理解。
2.但是真正的项目中,添加合适的图片却往往是一件比较费时费力的事情,我们往往要进行各种各样的切图,这些后面再说。