一、<img>的属性
1.1 src：图片路径
1.2 alt：对图片进行描述，一般不显示，若无法显示，则会出现（一些浏览器会显示）
主要用法：搜索引擎会根据alt中的内容来识别图片；如果不写alt属性则图片不会被搜索引擎所收录
注意：
一般情况在PC端，不建议修改图片的大小（由美工进行裁定）。
但是在移动端，经常需要对图片进行缩放（大图缩小）。
1.3 图片格式
① jpeg（jpg）
- 支持的颜色比较丰富，不支持透明和动图
- 一般用来显示图片
② gif
-支持的颜色比较少，支持简单透明和动图
- 颜色单一的图片，动图
③ png
- 支持颜色丰富，支持复杂透明，不支持动图
- 专为网页而生的
④ webp
- 这种格式是谷歌推出的专门用来表示网页中图片的一种格式
- 优点：具备以上所有格式的优点，同时文件比较小
- 缺点：兼容性不好
注：
效果一样，用文件大小小的
效果不同，用效果好的
二、元素的两种形式
2.1 行内元素 （inline element）
2.2 块元素 （block element）
但是，如<img>标签则属于替换元素（介于行内元素和块元素之间）
display可以用来设置元素显示的类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display</title> <style> /* display用来设置元素的显示类型 可选值： inline：将元素设置为行内元素 block：将元素设置为块元素 inline-block：将元素设置为行内块元素 行内块，既可以设置宽度和高度又不会独占一行 table：将元素设置为一个表格 none：元素不在页面中显示（不占据页面位置） visibility用来设置元素的显示状态 可选值： visible：默认值，元素在页面正常显示 hidden：元素在页面中隐藏，但是依旧占据页面位置 */ *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: skyblue; border-top: 2px solid #999; } .box2{ width: 50px; height: 50px; background-color: yellow; border-top: 2px solid red; display: inline-block; margin-top: -2px; } .box{ width: 50px; height: 50px; background-color: green; display: none; /* visibility: hidden */ } </style> </head> <body> <div class="box"></div> <div class="box1"> <div class="box2"></div> </div> </body> </html>