2024年最全零基础必看的Html5+Css3+移动端前端教程(五)(1)，2024年最新Web前端面试知识点梳理

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

5.总结

| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |

| — | — | — | — | — |

| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |

| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |

| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #red {color: red;} |

| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .red { color: red; } |

三、字体属性

======

1.字体类型

用类标签显示字体属性

font-family中可以设置多个字体，字体类型要用,隔开，如果字体类型分割可以使用''号

尽量使用系统默认字体和英文标识

2.字体大小

• font-size属性用于设置字号(字体大小)

• 谷歌浏览器默认的文字大小为16px

• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。

字体大小的数字也就是像素值，后面的px不能忘

3.字体粗细

| 属性值 | 描述 |

| — | — |

| normal | 默认值（不加粗的） |

| bold | 定义粗体（加粗的） |

| 100~900 | 400 等同于 normal，而 700 等同于 bold  ，使用数字后面什么都不必写 |

字体的粗细使用

4.字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

| 属性 | 作用 |

| — | — |

| normal | 默认值，浏览器会显示标准的字体样式  font-style: normal; |

| italic | 浏览器会显示斜体的字体样式。 |

字体风格的使用教程

我们一般不使用font-style来定义倾斜字体，反而通过它把变为正常

5.复合属性

复合属性的使用

平常的方法是：每一个属性都写一个，如下：

对于复合属性而言：

5.总结

| 属性 | 表示 | 注意点 |

| — | — | — |

| font-size | 字号 | 尽量使用系统默认字体和英文标识 |

| font-family | 字体 | 字体大小的数字也就是像素值，后面的px不能忘 |

| font-weight | 字体粗细 | 记住加粗是 700 或者 bold  不加粗 是 normal 或者  400  数字不要跟单位 |

| font-style | 字体样式 | 记住倾斜是 italic     不倾斜 是 normal   |

| font | 字体连写 | 1. 字体连写是有顺序的  不能随意换位置 2. 其中字号 和 字体 必须同时出现 |

四、文本属性

======

1.文本颜色

| 表示表示 | 属性值 |

| — | — |

| 预定义的颜色值 | red，green，blue等 |

| 十六进制 | #FF0000，不必记忆 |

| RGB代码 | rgb(255,0,0) |

开发中最常用的是十六进制表示颜色。

2.文本对齐

文本对齐指的是水平对齐:

其可用属性值如下：

| 属性 | 解释 |

| — | — |

| left | 左对齐（默认值） |

| right | 右对齐 |

| center | 居中对齐 |

3.文本装饰

text-decoration属性规定添加到文本的属性，如下划线、上划线、_删除线。

| 值 | 描述 |

| — | — |

| none | 默认。定义标准的文本。取消下划线（最常用） |

| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |

| overline | 定义文本上的一条线。（不用） |

| line-through | 定义穿过文本下的一条线。（不常用） |

常用的是text-decoration添加下划线和删除默认的下划线。

4.文本缩进

text-indent为控制缩进的元素，对于后面的单位，px为默认像素值，em为文字，2em就是空出2个文字的距离。

5.行间距

line-height控制行与行之间的距离，单位为像素px.

6.总结

| 属性 | 表示 | 注意点 |

| — | — | — |

| color | 颜色 | 我们通常用 十六进制    |

| line-height | 行高 | 控制行与行之间的距离 |

| text-align | 对齐 | 可以设定文字水平的对齐方式 |

| text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离   text-indent: 2em; |

| text-decoration | 文本修饰 | 下划线  underline  取消下划线  none |

五、CSS引入方式

=========

1.行内样式表

在元素标签内部的style属性中设置变量，如

内部样式表

2.内部样式表

就是一开始写在标签中，如

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！