《Head First HTML and CSS》学习笔记——5、认识媒体

认识媒体

这一章将学习如何为页面添加第一个媒体类型：图像。会专门讨论<img>，学完这一章，就能全面地了解使用它及其属性的所有细节了。

---

浏览器如何处理图像

浏览器对<img>元素的处理和其他元素不同。以<h1>为例，浏览器在页面上看到这些标记时，只需要把它们显示出来就行了，而看到<img>时，浏览器在显示图像之前，必须先获取这个图像。下面以浏览器收到http://wickedlysmart.com/lounge/请求时如何获取和显示这个页面：

1. 首先，浏览器从服务器获取文件"elixir.html"。
2. 接下来，浏览器读取"elixir.html"文件，显示这个文件，发现有四个图像需要获取，所以需要从Web服务器逐个得到这些图像，先从"green.html"开始。
3. 获取到"green.html"之后，浏览器显示这个图像，然后对页面上的每一个图像都重复这个过程。

---

介绍元素

<img>元素是一个内联元素，它不会在前面或后面插入换行，且是一个void元素，它的属性：

1. src属性：指定了在Web页面上显示的图像文件的位置（相对路径或URL）。
2. alt属性：指定描述这个图像的一些文本，如果图像未能显示，就会使用这个文本来替代它。
3. width和height属性：指定显示图像的宽和高。

---

相关链接

原书下载链接： https://pan.baidu.com/s/19_EahD9E2QeNZYst7zriaA

提取码： pbu2

本书代码： https://gitee.com/Stephen-wzw/head-first-html-and-css