2022前端知识整理：一、HTML+CSS基础

1、web标准的构成：

构成	语言	说明
结构	HTML	页面元素
表现	CSS	页面样式
行为	JavaScript	页面交互

2、HTML

（Hyper Text Markup Language）中文译为：超文本标记语言

3、VS code

需要安装的插件

1. Auto Rename Tag

2. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

3. code settings sync

4. Error Lens

5. ESLint

6. GitLens — Git supercharged

7. JSON to TS

8. Live Server

9. One Dark Pro

10. Prettier ESLint

11. Settings Sync

12. TypeScript Vue Plugin (Volar)

13. Vue Language Features (Volar)

14. Vue VSCode Snippets

15. VueHelper

16. Vetur

17. Vue 3 Snippets

4、HTML基础

排版标签

• 标题标签 h1 h2 h3 h4 h5 h6

• 段落标签 p

• 换行标签 br

• 水平线标签 hr

文本格式化标签

• b，strong 加粗

• u，ins 下划线

• i，em 倾斜

• s，del 删除线

媒体标签

• img，{src，alt，title，weight，height} 图片

• ../，./ 路径

• audio，{src，controls} 音频

• video，{src，controls} 视频

链接标签

• a，{herf，target，title，weight，height} 超链接

列表标签

• ul，li 无序列表

• ol，li 有序列表

• dl，dt，dd 自定义列表

表格标签

• table 表格整体

• tr 表格每行

• td 表格每个单元格

• border，width，height 表格属性

• caption 表格外部大标题

• th 表格第一行的小标题

• thead，tobody，tfoot 表格结构标签

• rowspan，colspan 跨行合并，跨列合并

表单标签

• input，{text，password，radio，checkbox，file，submit，reset，button} 输入框，选择框，按钮

• button，{submit，reset，button} 按钮

• td 表格每个单元格

• select，{selected，option} 下拉菜单

• textarea，{cols，rows} 文本域

• label 使用label标签将表单内容包裹起来

语义化标签

无语意的布局标签：实际的作用需要开发者自己定义

• div 独占一行

• span 一行多个

有语义的的布局标签：header头部，nav导航，footer底部，aside侧边栏，section区块，article文章

字符实体

• &nbsp 空格

• &gt 大于

• &lt 小于

• &amp 和

• &quot 双引号

• &apos 单引号

5、CSS基础

CSS引入方式

内嵌式、外联式、行内式

基础选择器

标签选择器 p{}，类选择器 .class{}，id 选择器 #value{}，通配符选择器 *{}

class类名可以重复，一个标签可以同时有多个class类名；id属性值不可重复，一个标签只能有一个id属性值

字体和文本样式

• 字体样式：字体大小：font-size，字体粗细：font-weight，字体样式：font-style，字体类型：font-family，字体类型：font属性连写

• 文本样式：文本缩进：text-indent，文本水平对齐：text-align，文本修饰：text-decoration，行高：line-height

chorme调试工具（略）

颜色取值

• rgb表示法 rgb ( 255 , 255 , 255 ) ：白色

• rgba表示法 rgba ( 0 , 0 , 0 , 0.5 )

十六进制表示法 #fff ：白色

复合选择器

• 后代选择器：空格 选择器1 选择器2 { css }

• 子代选择器：> 选择器1 > 选择器2 { css }

• 并集选择器：, 选择器1 ， 选择器2 { css }

• 交集选择器：紧挨着 选择器1选择器2 { css }

hover伪类选择器

选择器:hover { css }

emmet语法

通过简写语法，快速生成代码，如ul>li*3

背景相关属性

背景颜色background-color，背景图片background-image，背景重复background-repeat，背景定位background-position，背景相关属性的连写形式background:color image repeat position

元素显示模式

元素显示模式：块级元素、行内元素、行内块元素

元素显示模式转换：display：block转换成块级元素，display：inline-block转换成行内块元素，display：inline转换成行内元素

CSS特性

继承性：子元素有默认继承父元素样式的特点（子承父业）

层叠性：①给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上 ②给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

优先级：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

权重叠加计算：（行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数）

PXcook像素大厨的使用：略

盒子模型：宽高width&height，边框border，内边距padding，外边距margin，外边距的合并与塌陷

CSS浮动

结构伪类选择器：first-child{}、last-child{}、nth-child(N){}、nth-last-child(n){}

伪元素：由 CSS 模拟出的标签效果，如::before，::after

标准流：又称文档流，块级元素：从上往下，垂直布局，独占一行；行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

浮动的作用：早期用来图文环绕，现在用来网页布局

浮动的代码：float : left左浮动，float : right右浮动

浮动的特点：

1. 浮动元素会脱标，在标准流中不占位置

1. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

1. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

1. 浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

清除浮动：

1. 直接设置父元素高度

1. 额外标签法

1. 单伪元素清除法

1. 双伪元素清除法

1. 给父元素设置overflow : hidden

BFC盒子：块格式化上下文（Block Formatting Context）

定位

属性名：position，

属性值：static静态定位，relative相对定位，absolute绝对定位，fixed固定定位

偏移值：left水平距离左边，right水平距离右边，top垂直距离上面，bottom垂直距离下面

装饰

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

垂直对齐方式：vertical-align，取值baseline基线对齐，top顶部对齐，middle中部对齐，bottom底部对齐

光标类型：cursor，取值default箭头，pointer抓手，text工字型，move十字光标

边框圆角：border-radius，取值border-radius:50%设置边框圆角为盒子宽高的一半

元素溢出处理：overflow，取值visible默认，hidden溢出隐藏，scroll添加滚动条，auto自动判断是否添加滚动条

元素隐藏：visibility：hidden和display：none，区别是visibility：hidden 隐藏元素本身，并且在网页中 占位置；display：none 隐藏元素本身，并且在网页中 不占位置

边框合并：border-collapse：collapse让相邻表格边框进行合并，得到细线边框效果

学成在线项目（略）

小兔鲜项目（略）

项目样式补充

1.精灵图 2. 背景图片大小 3. 文字阴影 4. 盒子阴影 5. 过渡

项目前置认知

1.网页与网站的关系 2. 骨架结构标签 3. SEO三大标签 4. ico图标设置 5. 版心

项目结构搭建

1.文件和目录准备 2. 基础公共样式 3. index页面骨架