1.图像在HTML页面中是如何工作的?
浏览器在读取HTML文档时,发现有图像需要显示,于是先从Web服务器获取这些图像,接着显示图像,若在同一个页面中有多个图像需要显示,理论上按顺序一个接着一个显示的,但是由于现在浏览器的速度越来越快,肉眼看起来几乎是同时显示的。
2.Web中常见的图像格式有哪些?
Web常见的图像格式有3种,分别是:
JPEG: 常用于连续色调图像,如照片,有损文件(缩小文件时会丢失一些图像信息),文件比较小,不支持动画。
PNG:用于单色图像和线条构成的图像(LOGO,剪贴画),有PNG-8,PNG-24,PNG-32集中格式,分别代表可用的颜色数,无损文件,不支持动画。
GIF: 最多256种颜色图像,与PNG用法基本一致,无损文件,支持动画。
选用规则:多色调照片则选用JPEG,动画则选择GIF,其余选择PNG(PNG在其他性能方面总是优于GIF格式的)
3.<img>元素如何使用?
仍然是用代码和效果图来解释(代码如下):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>创建一个链接</title>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531755137688&di=347c234a6fb3cf355524213cc874b2e7&imgtype=0&src=http%3A%2F%2Ffd.topitme.com%2Fd%2F34%2F96%2F1129954763f729634do.jpg"
alt="这是一张关于火影忍者的图片" width="300px" height="160px">
</body>
</html>
运行代码后的效果图如下所示:
现在来解释每个属性的作用:
src="xxx.jpg" src是source的缩写,src是指向图像的源地址,可用相对路径和绝对路径表示(必须有)
alt="这是一张关于火影忍者的图片" 作为候选格式,当图像无法显示时,就显示该文字(必须有)
width="300px" 设定图像的宽度,300px指宽度为300像素。
height="160px" 设定图像的高度,160px指高度为160像素。
4.怎样让图像作为链接内容呢?(<a>元素和<img>的搭配使用)
这个很简单,用一段代码表示即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>火影忍者</title>
</head>
<body>
<a href="xiaowan.html">
<img src="narutuo.png"
alt="这是一张关于火影忍者的图片" width="300px" height="160px">
</a>
</body>
</html>
即将图片作为<a>元素的内容即可。
5.如何确定Web上任意图像的URL(统一资源定位符)?
在浏览器上搜索你需要的图片,鼠标点击右键,点击复制图片地址,即可获取图片的URL。
6.选择LOGO时怎么解决LOGO与页面背景颜色不搭配的问题?
由于LOGO的颜色可能和页面背景色不是同一个颜色,为了让LOGO能更恰当的显示在页面上,我们可以在编辑LOGO时(可用PS编辑)选择合适的透明度,这时候LOGO的边缘还有出现一些尖刺,为了柔化这种边缘,可以把蒙版颜色设置为页面的背景色,这样尖刺就会经过柔化处理,颜色不匹配问题就解决了。