HTML学习第五章---图像

HTML学习第五章—图像：

教材：Head First HTML与CSS

---

学习内容

类如<h1>,<p>等标签，浏览器只需显示它们，浏览器处理<img>元素与处理其他元素不同。
步骤：

1. 浏览器接收来自服务器的HTML文件
2. 浏览器阅读HTML文件，发现需要图像文件后，向服务器获请求该文件
3. 获取后显示该图像，并请求下一个图像文件

---

JPEG和GIF的区别：

• GIF文件比较小，但颜色种类很少，可以支持动画，可以设置透明背景，方便一些元素的显示。GIF格式适用于对色彩要求不高同时需要文件体积较小的场景，比如企业Logo、线框类的图等。因其体积小的特点，现在GIF被广泛的应用在各类网站中。
• JPEG非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

---

<img>元素

1. src属性指定图像文件的位置。

src属性中也可以通过URL来进行指定：

图像是内容，但是<img>是空元素。图像替代了<img>元素，但HTML页是纯文本，所以图像永远不是页面的一部分。

2.alt属性提供图像信息

如果无法接收到图像，就会显示alt属性的内容。用于无法正常访问图像时，备注传达图像内容。

<img src="https://www.headfirstlabs.com/trivia/pencil.gif" 
     alt="This is a test for alt, can you see?">

3. width和height属性调整图像尺寸

高度和宽度是根据像素的数量决定的，如果不添加这两个属性，浏览器会自动决定图像的大小。
由于大部分浏览器的显示宽度为800像素，所以最好保持图像宽度小于800像素。

---

创建图像链接：

在<a>元素中放置<img>元素

<a href="html/seattle_med.html">
	<img src="thumbnails/seattle.jpg" alt="My iPod in Seattle,WA">
</a>

---

总结