学习
一、图片
标签
<img/>是个单标签。
属性
<img/>标签有两个必需的属性：src 属性 和 alt 属性。
可选属性：
| align |
|
规定如何根据周围的文本来排列图像。 |
| border | pixels | 定义图像周围的边框。 |
height |
|
定义图像的高度。 |
hspace |
pixels | 定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
loading |
|
规定浏览器是应该立即加载图像还是推迟加载屏幕外图像。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
referrepolicy |
|
规定在获取图像时要使用的引荐来源信息。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 定义图像顶部和底部的空白。 |
width |
|
设置图像的宽度。 |
| title | 文本提示，鼠标放上去时显示 |
<img src="html/1.png" alt="">
二、路径
1、相对路径
根据文件和文件夹之间的关系，来确定文件查找途径。
- 当页面文件和图片文件是同级关系，直接使用图片名称。（页面和图片在同一个文件夹）
<img src="图片名称"/>
- 当页面文件和图片所在的文件夹是同级关系，需定义路径。（页面引用子文件夹里的图片）
<img src="图片所在文件夹名称/图片文件"/>
- 当页面所在的文件夹和图片是同级关系，需要返回所在页面的上一级。（页面引用外层文件里的图片）
<img src="../图片所在文件夹/图片文件" />
2、绝对路径
- 引用互联网资源
- 引用本地磁盘里的文件
三、图片格式
GIF（无损）、JPG（表现图片）、JPEG（表现图片）、PNG、BMP（网站注册/验证码）、webp（针对谷歌浏览器）
有损压缩：对图像本身的改变，在保存图像时保留了较多的亮度信息，将色相和饱和度的信息和周围的像素合并，由于信息量减少了，所以压缩比可以很高，质量也下降。有损压缩可以减少图像在内存和磁盘中占用的空间。
无损压缩：对文件本身的压缩，可以完全还原，压缩率低。
刷题（第二期）
第一题
<html> <head> <meta charset=utf-8> <style type="text/css"> .box { /*补全代码*/ width:4em; height:4em } </style> </head> <body> <div class='box'></div> </body> </html>
第二题
使用元素选择器、id选择器、类选择器。文字颜色用color，字体大小用font-size。
<html> <head> <meta charset=utf-8> <style type="text/css"> /*补全代码*/ div { color:rgb(255, 0, 0); font-size:20px; } .green{ color:rgb(0, 128, 0); } #black{ color:rgb(0, 0, 0); } </style> </head> <body> <div>红色</div> <div class='green'>绿色</div> <div id='black'>黑色</div> </body> </html>
