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