3周从认识HTML到掌握入门知识
行内与块元素
元素会区分
块元素（block element） 常用来布局
特点：
1、块元素会独占一行,而且从上往下依次排列
2、块元素的宽度默认是父元素的100%
3、块元素的高度默认是被内容撑开的
常用块元素：div h1-h6 p header footer nav ·····
行内元素（inline element）
特点：
1、行内元素不会独占一行,它是自左向右排列，一行排满，再另起一行，继续从左向右
2、行内元素的宽和高都是被内容撑开的
常用行内元素：span em strong a i ·····
行内块元素
特点：兼具块元素和行内元素的特点
不会独占一行、可自定义宽高
常用行内块元素：img
注意：
1、块元素里面什么都能放，可以放块元素、行内元素、行内块元素
2、行内元素里面一般只放行内元素，如文字，不能放块元素
3、特殊的块元素p标签，它里面一般只放文字或者图片，不能放块元素
4、特殊的行内元素a标签，它里面什么都能放，可以放块元素、行内元素、行内块元素
除了它自己
元素之间可以相互转换
用display属性
列表
列表（list） 一组一组
1:有序列表 用ol创建，li表示列表项
2:无序列表 用ul创建 li表示列表项
3:定义列表 用dl创建，dt下定义 dd解释定义
下定义
解释定义
有序列表、无序列表
默认样式：左边有间距，有项目符号
关注是它的语义
使用type属性可以更改项目符号
有序列表 1,a,A,i,I
无序列表：disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：
1、一般情况下，我们不会使用它的项目符号
2、列表是可以相互嵌套
图片标签与格式
使用img标签来向网页中引入一个外部图片
4个属性
src属性 引入图片的路径 通过./或者../开头
./ 引入图片跟你在同一个目录下
../ 跳出当前的目录，再找
alt属性 对图片的描述，它会在图片引入不成功的时候，显示文字
它也会帮助浏览器做收录功能
width属性 设置图片的宽度
属性值里直接写数值或者带长度单位都可
height属性 设置图片的高度
注意：一般情况下，width和height只设置一个，另一个让浏览器按比例缩放
和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。
图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
- 一般用来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少，只支持简单的透明，支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多，并且支持复杂的透明，不支持动图
- 可以用来显示颜色复杂的透明的图片
专为网页而生的
webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点，而且文件格式还很小
-缺点：兼容性不好
base64
-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
图片的使用原则：
效果不一致，使用效果好的
效果一致，使用小的
<!DOCTYPE html>
<html>
<head></head>
<body>
<center>
<img src="./图片/01作业图片列表/练习1-1.jpg.webp" art="图片" width="" height=""><br>
<img src="./图片/01作业图片列表/练习1-2.jpg.webp" art="图片 " width="" height=""><br>
<img src="./图片/01作业图片列表/练习1-3.jpg.webp" art="图片" width="" height="">
</center>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>热门活动</title>
</head>
<body>
<h2>热门活动 更多</h2>
<ul type="disc">
<li><img src="./图片/02热门活动素材/image/img1.png" alt="图片"><br>
<h3>推荐活动|原创音乐现金榜T榜</h3>
</li>
<li><img src="./图片/02热门活动素材/image/img2.png" alt="图片"><br>
<h3>推荐节目|《TAImusic》爆笑来袭</h3>
</li>
<li><img src="./图片/02热门活动素材/image/img3.png" alt="图片"><br>
<h3>推荐歌单|继续宠爱张国荣</h3>
</li>
<li><img src="./图片/02热门活动素材/image/img4.png" alt="图片"><br>
<h3>推荐活动|330金属音乐巡演 成都小酒馆</h3>
</li>
</ul>
</body>
</html>