2024-04-07（复盘前端）

---HTML

1.HTMl骨架

html：整个网页

head：网页头部，用来存放给浏览器看的信息，如css

body：网页主体，用来存放给用户看的信息，例如图片和文字

2.标题标签中h1标签只能使用一次，其他可以无限次试用

3.列表

无序列表：ul嵌套li

有序列表：ol嵌套li

定义列表：dl嵌套dt和dd，dt是定义列表的标题，dd是定义列表的描述/详情

4.表格

和excel类似，用于展示数据

table嵌套tr，tr嵌套td/th

5.表单

作用：收集用户信息

使用场景：登陆页面，注册页面，搜索区域

6.无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

<div>div 标签，独占一行</div>

<span>span标签，不换行</span>

----CSS

7.CSS选择器

标签选择器：使用标签名作为选择器，选中同名标签就设置为相同的样式，所以无法差异化的设置同名标签的显示效果

类选择器：通过类名来查找标签，可以差异化的设置标签的显示效果（.类名的方式）

                一个类选择器可以给多个标签使用，一个标签可以使用多个类型

id选择器：一般配合JS使用，很少用来设置CSS样式，同一个id在一个页面只能使用一次

通配符选择器：（*），用于把页面的所有标签设置为相同的样式，一般用于清除标签的默认样式，如标签默认的外边距，内边距。

8.网页制作思路

从上到下，先整体再局部

先标签，再CSS美化

9.复合选择器

后代选择器：选中某元素的后代元素

子代选择器：选择某元素的子代元素（最近的子代）

并集选择器：选择多组标签设置相同的样式

交集选择器：选中同时满足多个条件的元素

伪类选择器：伪类表示元素的状态，选中元素的某个状态设置样式

10.显示模式

块级元素

特点：独占一行，宽度默认是父级的100%，添加宽高属性生效

行内元素

特点：一行可以显示多个，设置宽高属性不生效，宽高尺寸由内容撑开

行内块元素

特点：一行可以显示多个，设置宽高属性生效，宽高尺寸也可以由内容撑开

转换显示模式的方法：

display属性：block-->块级；inline-block-->行内块；inline-->行内

11.结构伪类选择器

作用：根据元素的结构关系查找元素

公式：:nth-child(查找公式)

12.盒子模型

组成：

内容区域 -- width & height

内边距 -- padding（盒子内）

边框线 -- border

外边距 -- margin（盒子外）

div {
    margin: 50px;
    border: 5px solid brown;
    padding: 20px;
    width: 200px;
    height: 200px;
    background-color: pink;
}

13.版心居中

margin属性的左右值设置为auto，并且盒子要有宽度