文档介绍：第5章图片、背景和颜色
清华大学出版社
主要内容
图片的使用
背景
HTML颜色
小结
插入图片标记IMG
网页中常用的图片格式为GIF、JPEG和PNG。
高质量的图片一般用TIFF格式保存,但其图片体积过大,不太适合网络传输。
不同的图片格式会表现出不同的颜色分辨率和颜色标准,当然也会影响其体积的大小。
一般在网页设计中选择的图片不要超过8KB,如必须选用较大图片时,可先将其分成若干小图片,显示时再通过表格将这些小图片拼合起来。
如果在同一文件中多次使用相同的图片时,最好使用相对路径查找该图片。
在HTML文档中,显示图片所用的标记是<img>。
插入图片标记IMG
基本语法:
<img src=”url”>
插入图片标记IMG
语法说明:
- img是插入图片的标记,其常用属性如表9-1。其中src是其必须的属性;
- src属性用来指定图像源,即图像的URL路径。该路径可以是相对路径,
也可以是绝对路径。
<img>的属性
功能说明
src
指定图像源,即图像的URL路径
width
指定图像的显示宽度
height
指定图片的显示高度
hspace
定义图像左侧和右侧的空白。
vspace
定义图像顶部和底部的空白。
align
指定图片的对齐方式
border
指定图片的边框大小
alt
如果图片无法显示,代替图像的说明文字
插入图片标记IMG
示例代码<!--程序5-1-1-->
<html>
<head>
<title>插入图片示例</title>
</head>
<body>
<img src=img/ width="240">
<img src= img/ width="240">
</body>
</html>
插入图片标记IMG
程序5-1-1采用<img>标记插入了两幅图片,其执行效果如图所示。
替换文本说明
<img>标记的alt属性分别用来指定图像的替代文字说明,替代文本说明应该简洁而清晰,能够为用户提供足够的图片说明信息,使用户在无法看到图片的情况下也可以了解图片的内容信息。
基本语法:
<img src="url" alt=" " >
替换文本说明
语法说明:
- 图片的alt属性用于对图片信息进行描述。在浏览器中
当图片无法正常显示时,在图片位置显示该描述信息。
当图片可以正常显示时,当鼠标放在图片上面时才显示
该描述信息;
- alt属性可在Web浏览器不支持图像显示或用户关闭图像
下载功能时,告诉用户该处是一幅什么样的图像。
添加图片边框
<img>标记的border属性可以用来指定图像的边框,添加边框后的图片显得更醒目、更美观。
基本语法:
<img src="url" border=" " >