HTML5+CSS3王者归来
上QQ阅读APP看书,第一时间看更新

7-1 嵌入图片<img>元素

这个元素没有结束标,它的使用格式如下:

    <img src="图片的URL" alt="替代的文字"
height="像素" width="像素">

src

src指图片名称或是图片的URL。HTML5可以接受的图片格式有GIF、PNG、JPG,或是SVG、PDF文件。

alt

当图片因某些原因无法显示时,在图片位置可以列出此属性设定的文字。则如果省略这个属性,则当图片无法显示时,图片位置将以取代。

height/width

height是图片的高度,单位是px(pixel),此值必须大于0;width是图片的宽度,单位是px,此值必须大于0。如果所设定的值与真实图片大小不符,则浏览器会强制缩放图片。如果省略这两个属性,则依图片实际大小显示。

程序实例ch7_1.html:输出图片的应用。这个程序会将图片输出两次,第一次指定宽度和高度,第二次不指定。在执行这个程序前,本程序所在的ch7文件夹内一定要有sselogo.jpg文件才可以正常执行。

执行结果

程序实例ch7_2.html:测试alt属性。笔者故意写错文件名,所以无法正常输出图片。

执行结果

这个程序会在执行第10行输出第一个图片sse.jpg时,因为本程序所在的ch7文件夹没有sse.jpg文件,所以此图片文件名错误。由于没有alt属性指示输出替换文字,所以只能输出。上述程序第12行要输出第二个图片sse.jpg,而本程序所在的ch7文件夹中没有sse.jpg,所以出现图片文件名错误。因为本指令使用了alt属性指示输出替换文字,所以输出了和替换文字“SSE Logo输出错误”。