C/S架构与B/S架构
C/S架构：客户端与服务器（需要安装、偶尔更新、不跨平台、安全性要求高）
B/S架构：浏览器与服务器
HTML认知
注释
在VS Code中键入ctrl + /
标签组成和关系
组成：①双标签 ②单标签
关系：①父子关系 ②兄弟关系
换行和水平线标签
换行标签：<br>
水平线标签：<hr>
文本格式化标签
| 标签 | 说明 |
| b / strong | 加粗 |
| u / ins | 下划线 |
| i / em | 倾斜 |
| s / del | 删除线 |
图片标签
<img src="" alt="">
src为图片路径
alt为替换文本（当图片加载失败时，显示alt文本）
相对路径
同级目录：直接 + 文件名
下级目录：路径 + 文件名
上级路径：../ + 路径 + 文件名
音频标签
<audio src=""></audio>
属性：
①src：音频路径
②controls：显示播放的控件
③autoplay：自动播放
④loop：循环播放
视频标签
<video src=""></video>
属性：
①src：音频路径
②controls：显示播放的控件
③autoplay：自动播放
④loop：循环播放
HTML基础
列表应用
①无序列表 : ul > li
②有序列表 : ol > li
③自定义列表 : dl > dt（主题名） / dd（样品名）
表格标签
基本使用：
table > tr > td
表格整体：table
每一行：tr
每一列：td
表格标题加粗：
表格大标题：caption
th：表头单元格
表单标签
① input标签
type属性值：
- text：文本框，单行（用placeholder属性可添加提示文本）
- password：密码框
- radio：单选框（name为将单选框分组，属性值一致为一组；checked为默认选中）
- checkbox：多选框
- file：文件选择（multiple为多文件选择）
- submit：提交按钮
- reset：重置按钮
- button：普通按钮
② button标签
③ select标签
组成：
select标签：下拉菜单整体
option标签：下拉菜单的每一项
selected：默认选中的属性
④ textarea标签
cols：规定可见宽度
row：规定可见行数
⑤ label标签
方法：用label把内容包括，将其for对应的属性值与表单id属性值对应
语义化标签
div：独占一行
span：一行可显示多个
header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章
CSS基础
CSS引入方式
①内嵌式：在head标签中，写style标签
②外联式：单独写在一共.css文件，通过link标签在网页引入
基础选择器
①标签选择器
②类选择器
③id选择器
④通配符选择器
字体和文本样式
①字体样式
- 字体大小：font-size
- 字体粗细：font-weight
- 字体样式：font-style
- 字体类型：font-family
- 字体类型：font属性连写
②字体样式
- 文本缩进：text-indent（数字+px或数字+em）
- 文本对齐水平方式：text-align（left、center、right）
- 文本修饰：text-decoration（underline下划线、line-through删除线、overline上划线、none）
③行高
line-height：数字+px / 倍数（font-size的倍数）
CSS进阶
选择器进阶
① 复合选择器
后代选择器：选择器1 选择器2
子代选择器：选择器1>选择器2（只选择儿子标签）
② 并集选择器
作用：选择多个标签
格式：选择器1，选择器2
③ 交集选择器
作用：选择唯一的标签
格式：选择器1.选择器2
④ hover伪类选择器
作用：选中鼠标悬停在元素上的状态
格式：选择器：hover
背景相关属性
① 背景颜色：background-color
② 背景图片：background-image
③ 背景平铺：background-repeat（repeat平铺、no-repeat不平铺、repeat-x或repeat-y）
④ 背景位置：background-position
元素显示模式
① 块级元素：独占一行、可设置宽高
② 行内元素：一行显示多个、不可设置宽高
③ 行内块元素：一行显示多个、可设置宽高（input、button、select）
④ 模式转换：
display：block、inline-block、inline
CSS特性
① 继承性：子元素默认继承父元素样式的特点
② 层叠性：通过标签不同样式会层叠
③优先级：继承<通配符<标签选择器<类选择器<id选择器<行内样式<！important
CSS盒子模型
① 盒子模型介绍：内容区域、内边距区域、边框区域、外边距区域
② 内容的宽度和高度：width和height
③ 边框border（例border：10px solid red；） —— border会撑大盒子
④ 内边距padding —— padding会撑大盒子
内减模式：给盒子添加box-sizing：border-box即可
⑤ 外边距margin （版心居中margin：0 auto） 上下的margin会选择最大的
若通过margin或padding改变行内标签位置无法生效
CSS浮动
① 结构伪类选择器
利用标签关系找元素
E：first-child（）
E：last-child（）
E：nth-child（n）
E：nth-last-child（n）
② 伪元素
::before - 在父元素内容最前添加一个伪元素
::after - 在父元素内容最后添加一个伪元素
设置content属性生效
③ 标准流
文档流，默认的排版规则：
块级元素：从上往下，垂直布局，独占一行
行内元素：从左往右，水平布局
④ 浮动
① 作用：让块级标签在一行使用
② 代码：float：right / left
③ 特点：
- 浮动元素会脱标，不占位置
- 浮动比标准流高半个级别，可以覆盖标准流
- 具备行内块特点，可以用margin和padding
⑤ 清除浮动
直接给父元素设置overflow：hidden
