Web应用课
html基础标签
文件结构
1 |
|
meta
HTML的<meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(<base>、<link>, <script>、<style> 或 <title>）之一表示的任何元数据信息。
常见属性：
- charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。
- name：name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
name="viewport"：指定了这个meta标签的名称是“viewport”，它是一个特定的标签，用于控制浏览器上的视口（viewport）的尺寸和比例。content="width=device-width, initial-scale=1.0"：这个属性定义了视口的行为。width=device-width表示视口的宽度应该设置为设备屏幕的宽度，而initial-scale=1.0表示页面初始的缩放比例为1.0，也就是说，页面显示比例是1:1，即页面以实际大小显示，没有缩放。
总而言之，这个元标签的目的是让网页能在不同尺寸的设备上正确显示
icon
1 | <link rel="icon" href="images/icon.png"> |
注释
只有多行注释
1 | <!--哈哈哈--> |
文本标签
块状元素和行内元素
常见的块状元素：
- div
- h1到h6
- p：段落
- pre：预格式化的文本，通常用于显示代码
- ul：无序列表
- ol：有序列表
- table：定义表格
- 等
常见的行内元素：
- span
- a：超链接
- i：文本斜体
- del：表示删除线的文本
- ins：下划线
- mark：高亮变黄
- img
div是块状元素，块状元素带换行（回车）。
span是行内元素，不带换行（回车）。
演示：
文本标签虽然很多，但大部分可看成是预定好样式的<div>和<span>。
div
<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
span
<span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。
pre
<pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
演示：
空格和回车
回车：br
空格：
hr
水平线（分割线）
图片
<img> 元素将一份图像嵌入文档。
默认为行内元素，即display: inline。
src属性
该属性是必须的，它包含了你想嵌入的图片的文件路径。
alt属性
该属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt
属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。
height属性 图像的高度，在 HTML5 中的单位是 CSS
像素（默认单位就是px，所以可以直接写数字，比如width="20"），在
HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height
中的一个值，浏览器会根据原始图像进行缩放。
width属性 图像的宽度，在 HTML5 中单位是 CSS
像素（默认单位就是px，所以可以直接写数字，比如width="20"），
在 HTML 4 中可以是像素也可以是百分比。
音频和视频
audio
<audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
加上controls才能播放。
- 使用src属性播放
1 | <audio |
- <audio> 与多个 <source> 元素 这个例子包含了多个 <source> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。
1 | <audio controls> |
video
<video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
- src
1 | <video controls width="800" src="/videos/video1.mp4"></video> |
- 多个source，第一个不能播放，加载第二个
1 | <video controls width="800"> |
超链接
a
<a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。
常用选项
- 点击链接打开新标签页面时加入属性：target="_blank"
表单
form
<form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
演示：
input
HTML<input>用来填写内容，常见类型有：
<input type="text">：创建基础的单行文本框。<input type="number">：用于让用户输入一个数字。其包括内置验证以拒绝非数字输入。浏览器可能会选择提供步进箭头，让用户可以使用鼠标增加和减少输入的值，或者只需用指尖敲击即可。<input type="email">：带有 “email” (电子邮箱) 类型标记的输入框元素 (<input>) 能够让用户输入或编辑一个电子邮箱地址，此外，如果指定了multiple属性，用户还可以输入多个电子邮箱地址。在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址 (非空值且符合电子邮箱地址格式). CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用。<input type="password">：<input> 元素 里有一种叫做 “password” 的值，给我们一个方法让用户更加安全的输入密码。这个元素是作为一行纯文本编辑器控件呈现的，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现。这个符号会根据用户的浏览器和操作系统来具体显示哪个。<input type="radio">：<input> 的 radio 类型元素默认渲染为小型圆圈图表，填充即为激活，类似于之前描述额复选框（checkbox）类型。单选按钮允许你选择单一的值来提交表单。- 属性name一样的构成一组，一组中只能选一个。
常用属性有：
- name: 名称
- id: 唯一ID
- maxlength：最大长度
- minlength：最小长度
- required：是否必填
- placeholder：当表单控件为空时，控件中显示的内容
name的作用演示：
for里面写的是对应的id
点击提交后:
textarea
<textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。
select
默认分支，即在第一个分支前添加一个新的第一个分支，将value变为空即可，文本再写一下提示信息。
若是希望用户默认选某一分支，则在value前加上selected
1 | <option selected value="Cpp">Cpp</option> |
使用多选的进阶选择
下面的例子更加复杂，展示了可用在 <select>
元素上的更多功能：
1 | <label |
你会看见：
- 可选中多个选项，因为我们使用了
multiple属性。 size属性导致一次只有 4 行能显示；你可以滚动查看所有选项。- 我们在其中使用了optgroup元素来将选项分成不同组别。这单纯是视觉上的分组，一般来说，分组由加粗的组名和缩进的选项组成。
- "Hamster"选项使用了
disabled属性，因此不能被选中。
button
<button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。
列表
ul和li
<ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
ol和li
<ol> 元素表示有序列表，通常渲染为一个带编号的列表。
dl、dt与dd
<dl> 元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。
dt不缩，dd缩进
表格
1 | <table> |
| The table header | |
|---|---|
| The table body | with two columns |
语义标签
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
许多现有网站都包含以下HTML代码：
<div id="nav">, <div class="header">, 或者
<div id="footer">, 来指明导航链接, 头部,
以及尾部.
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
header
<header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
nav
<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
section
<section>元素表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
article
<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
aside
<aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
figure
<figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
figcaption
<figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着<figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。
footer
<footer> 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
特殊符号
| HTML源代码 | 显示结果 | 描述 |
|---|---|---|
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行的空白 |
CSS
样式定义方式
行内样式表（inline style sheet）
直接定义在标签的style属性中。
作用范围：仅对当前标签产生影响。 例如：
1 | <img src="images/mountain.jpg" alt="" style="width: 300px; height: 200px;"> |
内部样式表（internal style sheet）
定义在style标签中，通过选择器影响对应的标签。
作用范围：可以对同一个页面中的多个元素产生影响。
外部样式表（external style sheet）
定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。
作用范围：可以对多个页面产生影响。
优先级：如果引入多个css文件，他们对同一个标签进行了修改，那么以最后的修改为准（覆盖）
- 如果这个标签上有行内样式表的话，最后以行内样式表的样式为准
- 理解：按照一步一步执行的顺序，覆盖。
CSS注释
注意不能使用//。 只有：
/* 注释 */
选择器
为什么一开始要设置全局样式*？
p标签含有默认的margin-top和margin-bottom，大小都为1em,即当前标签的字体大小（默认为16px)。
还有很多其他的元素都带有默认的样式，所以为了避免这些带有默认样式的标签带来的意外效果，我们最好设置全局样式：
1 | *{ |
标签选择器
选择所有div标签：
1 | div { |
ID选择器
选择ID为rect-1的标签：
1 | #rect-1 { |
类选择器
选择所有rectangle类的标签：
1 | .rectangle { |
当一个标签中有两个class类，假设class1是设置成红色，class2设置成绿色，最终这个标签的颜色和在css文件中定义的样式顺序有关（和标签里面的类的顺序无关系）。<div class="class2 class1"></div>
比如class1先定义，class2后定义，则标签最终是绿色。
类选择器和ID选择器的区别
1.ID是唯一的，一般一个html文件中只能有一个。
2.同一个标签可以有多个class（空格隔开），同一个标签只能有一个id。
3.id的优先级比class高
1 | <html> |
上面是一个示例，p元素中的文字是红色而不是绿色，因为id的优先级高于class的。
使用：ID is for JavaScript, Class is for CSS. 定义css样式用class，在js中用id。
伪类选择器
伪类用于定义元素的特殊状态。
链接伪类选择器：
:link：链接访问前的样式:visited：链接访问后的样式:hover：鼠标悬停时的样式:active：鼠标点击后长按时的样式:focus：聚焦后的样式- 聚焦：常出现在输入框中，光标放在输入框中处于输入状态的时候，即聚焦。
位置伪类选择器：
:nth-child(n)：选择是其父标签第n个子元素的所有元素。
1 | p:nth-child(2) { |
p2是其父标签的第二个子元素。
p1-p4都不是其父标签的第二个子元素。
理解:p:nth-child(2)相当于会去判断每个p标签是不是其父标签的第二个子元素，如果满足则应用。
:nth-child()
的括号中还可以加入一些比较复杂的式子（n的式子，系统会将n取所有的正整数）
- odd：所有奇数个（用2n+1也能实现一样的效果）
- even：所有偶数个（用2n也能实现一样的效果）
- 3n：3的倍数个
目标伪类选择器：
:target：当url指向该元素时生效。
点了之后，就会定位到这个元素，使用了:target，即会产生相应的变化。
复合选择器
由两个及以上基础选择器组合而成的选择器。
element1, element2：同时选择元素element1和元素element2。element.class：选则包含某类的element元素。比如div.big。element1 + element2：选择紧跟element1的element2元素。比如有四个连着的p标签，p + p会筛选出后面三个p。element1 element2：选择element1内的所有element2元素。element1 > element2：选择父标签是element1的所有element2元素。
通配符选择器
*：选择所有标签
[attribute]：选择具有某个属性的所有标签。比如选择具有required属性的input标签
```css input[required] { }
input:required { } /* 这样也行 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
`[attribute=value]`：选择attribute值为value的所有标签
### 伪元素选择器
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。
`::first-letter`：选择第一个字母
`::first-line`：选择第一行
`::selection`：选择已被选中的内容
`::after`：可以在元素后插入内容
`::before`：可以在元素前插入内容
### 样式渲染优先级
- 权重大小，**越具体的选择器权重越大**：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
- **权重相同时，后面的样式会覆盖前面的样式**
- 继承自父元素的权重最低
CSS 中的 !important 规则用于增加样式的权重。
## 颜色
### 预定义的颜色值
black、white、red、green、blue、lightblue等。
### 16进制表示法
使用6位16进制数表示颜色，例如：#ADD8E6。
其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。
简写方式：#ABC，等价于#AABBCC。
### RGB表示法
rgb(173, 216, 230)。
其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。
### RGBA表示法
rgba(173, 216, 230, 0.5)。
前三个数同上，第四个数表示透明度。
## 文本
### text-align
text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
- center：居中
- right
- left
- justify：左右对齐
子标签可以继承父标签的对齐属性。
### line-height
line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
- 补充知识点：长度单位
| 单位 | 描述 |
| ---- | ------------------------ |
| px | 设备上的像素点 |
| % | 相对于父元素的百分比 |
| em | 相对于当前元素的字体大小 |
| rem | 相对于根元素的字体大小 |
| vw | 相对于视窗宽度的百分比 |
| vh | 相对于视窗高度的百分比 |
em:
子标签会继承父标签，第一层的默认字体大小是16px，2em之后是16px，第二层继承了第一层，大小是32px，2em是64px。
rem：
rem是相对于根元素，应该是相对于字默认大小，比如<p>哈哈<p>中哈哈的默认字体大小。
如图可以看出，都是32px。
#### 行高的一个用处——竖直居中
设置行高成div的高度后。
解释原理：因为字渲染的时候默认渲染到行的正中间。
### letter-spacing
CSS 的 letter-spacing 属性用于设置文本字符的间距。
### text-indent
text-indent属性能定义一个块元素首行文本内容之前的缩进量。
缩进用em作为单位较好，比如缩进两个字符，`text-indent: 2em`。
### text-decoration
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。
常用场景：去掉链接的下划线。 `text-decoration:none;`
### text-shadow
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
x正方向是向右，y正方向是向下。
## 字体
### font-size
指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。
### font-style
允许你选择 font-family 字体下的 italic （斜体）或 oblique 样式。
### font-weight
指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。
### font-family
font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。
## 背景
### background-color
background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。
### background-image
属性用于为一个元素设置一个或者多个背景图像。
- 渐变色：`linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))`
也可以设置多个图片。
### background-size
设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
- cover，让图片覆盖背景，`background-size:cover;`（图片等比例拉伸至长和宽都大于等于背景的时候，取最小值）
- contain，（图片等比例拉伸到图片长和宽都小于等于背景的时候，取最大值）
cover覆盖原则：让图片较小处于背景左上角，逐渐拉大图片，直至覆盖全部背景。
### background-repeat
属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
- no-repeat
- repeat-x：只重复行
- repeat-y：只重复列
### background-position
background-position 为背景图片设置初始位置。
默认初始位置是左上角。
`background-position: center;`
`background-position: 20px 50px;`
`background-position: right top;` 右上角
`background-position: right bottom;` 右下角
### background-attachment
属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
默认是scroll，图片是跟着div一起滚动。
- fix，图片固定，不随div滚动。
## 边框
### border-style
border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。最多可以设置四个样式，分别是上、右、下、左。
### border-width
border-width属性可以设置盒子模型的边框宽度。
### border-color
border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color
### border-radius
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
### border-collapse
是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
`border-collapse:collapse;`
## 元素展示格式
### display
- block：
- 独占一行
- width、height、margin、padding均可控制
- width默认100%。
- inline：
- 可以共占一行
- width与height无效，**水平方向**的margin与padding有效，**竖直方向**的margin与padding无效
- width默认为本身内容宽度
- inline-block
- 可以共占一行
- width、height、margin、padding均可控制
- width默认为本身内容宽度
行内元素、块内元素、行内块元素。
### white-space
是用来设置如何处理元素中的 空白 （比如换行、空白）。
例子：
1.不换行
`white-space:nowrap;`
2.用div实现pre的效果（保留空白和换行）
假如要在网页中显示一段代码，保留空白和换行，使用`white-space:pre`
### text-overflow
确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。
`text-overflow` 属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，你需要在元素上添加几个额外的属性：[`overflow`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow) 和 [`white-space`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space)。例如：
```css
overflow: hidden;
white-space: nowrap;
text-overflow
属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联（inline）方向一致（举个反例：文本无法在盒子的下方溢出，纵向不能溢出）。
overflow
定义当一个元素的内容太大而无法适应块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。
内边距与外边距
margin
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。
可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left
可取值
length：固定值
percentage：相对于包含块的宽度，以百分比值为外边距。
auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
外边距重叠
- 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
- 父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。
常见问题（对应外边距重叠的第二点）：
父元素被子元素的外边距带下去了，如图所示。（正常应该是红色的子元素距蓝色父元素顶部20px）
解决办法：
1.定义父元素的上边框：
1 | .div-outer { |
2.定义父元素的padding：
1 | .div-outer { |
3.overflow:
前面两种方法都有一个缺点，会让元素在竖直方向移动一个像素。
1 | .div-outer { |
形象记忆：子元素的margin-top相当于有东西伸出来，使用overflow:hidden，将伸出来的隐藏掉，它就不会把父元素往下带了。
4.在父元素前面加一个隐藏的元素（内容为空，display改成table即可）：
第3种问题也存在一个缺点，就是当父元素需要用到overflow的一些属性时不行。
1 | .div-outer { |
常见问题（对应外边距重叠的第一点）：
这个问题只出现在上下，左右的时候不会有这个问题。
两个元素相邻时，上面的元素有下外边距，下面的元素有上外边距时，会发生外边距重叠。（取两者最大的）
解决办法：
在开发中避免出现这种情况，一般只定义下边距。
padding
padding CSS 简写属性控制元素所有四条边的内边距区域。
- 可以接受1~4个值（上、右、下、左的顺序）
- 可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
- 可取值
- length：固定值
- percentage：相对于包含块的宽度，以百分比值为内边距。
padding的取值会影响元素的大小。
比如一个div的宽度= 内容 + padding + border
盒子模型
box-sizing
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
- content-box：是默认值，设置border和padding均会增加元素的宽高。
- border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。
位置
position
position属性用于指定一个元素在文档中的定位方式。
定位类型：
定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
取值：
- static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
- relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top,
right, bottom, left等调整元素相对于初始位置的偏移量。
- 相对于初始应该在位置的偏移量，初始位置还给它留着，后面的元素不会抢占。
- z-index属性，实现元素上下位置的覆盖：
- absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static
定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
- body是非static的，div-outer是默认的，也就是static的，所以div-inner-2一直往上找非static的祖先元素，找到了body。
- body是非static的，div-outer是默认的，也就是static的，所以div-inner-2一直往上找非static的祖先元素，找到了body。
- fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
- sticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
- 示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
浮动
float
指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
由于float意味着使用块布局，它在某些情况下修改display 值的计算值：
display为inline或inline-block时，使用float后会统一变成block。
浮动使用场景：希望盒子在同一行摆放，摆不下的会换行。
用inline-block可以实现，但是快与块之间有间隙。
这时候直接用float:left，即做对齐。
取值：
- left：表明元素必须浮动在其所在的块容器左侧的关键字。
- right：表明元素必须浮动在其所在的块容器右侧的关键字。
clear
有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。此时可以使用clear。
应用场景：
在浮动模型之后定义元素块，按理希望放在浮动块的后面。但如下图所示，与之前的浮动元素重叠了。
解决办法：在下面的黄色块加上clear:left
取值：
- left：清除左侧浮动。
- right：清除右侧浮动。
- both：清除左右两侧浮动
css中竖直可以动态计算（比如宽高）：calc(100% - x)中间一定要加空格，要不然识别不了。
flex布局
flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
flex-direction
CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
取值：
- row：flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
- row-reverse：表现和row相同，但是置换了主轴起点和主轴终点。
- column：flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
- column-reverse：表现和column相同，但是置换了主轴起点和主轴终点
如果总长度超出了，会进行压缩。
flex-wrap
CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。
取值：
- nowrap：默认值。不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
flex-flow
CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。
justify-content
CSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
取值：
- flex-start：默认值。左对齐。
- flex-end：右对齐。
- space-between：左右两段对齐。
- space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
- space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样。
flex-start，flex-end，为什么不叫左对齐和右对齐，因为主轴的方向会变化。
align-items
CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。（交叉轴方向上的对齐方式）
取值：
- flex-start：元素向主轴起点对齐。
- flex-end：元素向主轴终点对齐。
- center：元素在侧轴居中。
- stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
align-content
CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。
取值：
- flex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
- stretch：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
align-items和align-content用法相似，不同点：
- 有多行时，用align-items，行和行之间会留有空隙，而用align-content不会留有空隙。
- 只有一行时，用align-items，这一行会竖直居中；而用align-content不会竖直居中。
order
定义flex项目的顺序，值越小越靠前。
flex-grow
设置 flex 项主尺寸 的 flex 增长系数。
负值无效，默认为 0。
可以实现页面拉伸时flex项也随着拉伸。
flex-shrink
属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
负值无效，默认为1。
可以实现页面缩小时flex项也随着缩小。
flex-basis
flex-basis 指定了flex 元素在主轴方向上的初始大小。
取值： width 值可以是 <length>该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。
flex
flex-grow、flex-shrink、flex-basis的缩写。
常用取值：
- auto：flex: 1 1 auto
- none：flex: 0 0 auto
响应式布局
media查询
当屏幕宽度满足特定条件时应用css。
例如：
大于768px之后执行
1 | @media(min-width: 768px) { |
Bootstrap
JavaScript
JS的调用方式与执行顺序
使用方式
一般建议js代码放在后面，比如放在body的最下面，防止页面标签没有渲染出来的时候执行了js代码。
HTML页面中的任意位置加上<script type="module"></script>标签即可。
注：有的地方也会通过<script></script>引入js
加module的好处：
如图所示，在
<script></script>定义的a变量是在整个html页面的全局变量，下面body定义的js内也能访问到a。
如果下面body的js也用到了a变量，就会发生冲突。
加上type module之后就能解决。
常见使用方式有以下几种：
- 直接在
<script type="module"></script>标签内写JS代码。 - 直接引入文件：
<script type="module" src="/static/js/index.js"></script>。 - 将所需的代码通过import关键字引入到当前作用域。
例如：
/static/js/index.js文件中的内容为：
1 | let name = "acwing"; |
<script type="module"></script>中的内容为：
1 | <script type="module"> |
执行顺序
1.类似于HTML与CSS，按从上到下的顺序执行；
2.事件驱动执行；
HTML, CSS, JavaScript三者之间的关系
1.CSS控制HTML
2.JavaScript控制HTML与CSS
3.为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。
- 比如
<button onclik="print()"></button>（以前的规范一般这样写），这样就变成html控制js了，结构混乱，比如后面像修改这个print函数为printf函数，就需要每个button去改。 
变量与运算符
注：js中每条语句可以不加分号，但是推荐加上分号。
let与const
用来声明变量，作用范围为当前作用域。
- let用来定义变量；
- const用来定义常量；
例如： 1
2
3
4
5
6
7
8let s = "acwing", x = 5;
let d = {
name: "yxc",
age: 18,
}
const n = 100;
var、let、const的区别？
https://www.freecodecamp.org/chinese/news/javascript-var-let-and-const/
变量类型
number：数值变量，例如1,2.5string：字符串，例如"acwing",'yxc'，单引号与双引号均可。字符串中的每个字符为只读类型。若想改变string的值，只能新创建一个字符串然后拼接了。
- ```js let s1 = "acwing"; let s2 = s1.substr(0, 1) + 'x' +
s1.substr(2);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- `boolean`：布尔值，例如`true`, `false`
- `object`：对象，类似于C++中的指针，例如`[1, 2, 3]`，`{name: "yxc", age: 18}`，`null`
- ```js
// 类似与字典一样
let d = {
"name": 'yxc', // 前面的键加不加引号都行
age: 18,
}
let key = "name";
key = "age";
console.log(d[key], d["age"]);
console.log(d.name, d.age);
// 以上两种引用方式都可以，区别在于第一种写法可以通过引入变量动态调整获取。
- ```js let s1 = "acwing"; let s2 = s1.substr(0, 1) + 'x' +
s1.substr(2);
undefined：未定义的变量
类似于Python，JavaScript中的变量类型可以动态变化。
运算符
与C++、Python、Java类似，不同点：
**表示乘方- 等于与不等于用
===和!==- 使用
==会隐式强制类型转换（不同类型），比如console.log("1" == 1);的结果是true，使用===才能判断类型和值。
- 使用
输入与输出
输入
- 从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。
- 通过Ajax与WebSocket从服务器端获取输入
- 标准输入，参考AcWing 1. A + B
输出
调试用console.log，会将信息输出到浏览器控制台
改变当前页面的HTML与CSS
通过Ajax与WebSocket将结果返回到服务器
格式化字符串
字符串中填入数值：
1
2let name = 'yxc', age = 18;
let s = `My name is ${name}, I'm ${age} years old.`;定义多行字符串：
1
2
3
4
5let s =
`<div>
<h2>标题</h2>
<p>段落</p>
</div>`保留两位小数如何输出
1
2let x = 1.234567;
let s = `${x.toFixed(2)}`;
判断语句
JavaScript中的if-else语句与C++、Python、Java中类似。
例如：
1 | let score = 90; |
JavaScript中的逻辑运算符也与C++、Java中类似：
&&表示与||表示或!表示非
循环语句
JavaScript中的循环语句与C++中类似，也包含for、while、do while循环。
for循环
1 | for (let i = 0; i < 10; i++) { |
枚举对象或数组时可以使用：
- for-in循环，可以枚举数组中的下标，以及对象中的key
- for-of循环，可以枚举数组中的值，以及对象中的value
while循环
1 | let i = 0; |
do while循环
do while语句与while语句非常相似。唯一的区别是，do while语句限制性循环体后检查条件。不管条件的值如何，我们都要至少执行一次循环。
1 | let i = 0; |
对象
英文名称：Object。 类似于C++中的map，由key:value对构成。
- value可以是变量、数组、对象、函数等。
- 函数定义中的this用来引用该函数的“拥有者”。
例如：
1 | let person = { |
对象属性与函数的调用方式：
- person.name、person.add_money()
- person["name"]、person["add_money"]()
数组
数组是一种特殊的对象。 类似于C++中的数组，但是数组中的元素类型可以不同。
数组中的元素可以是变量、数组、对象、函数。
例如：
1 | let a = [1, 2, "a", "yxc"]; |
访问数组中的元素
通过下标。
例如：
1 | a[0] = 1; // 访问数组a[]的第0个元素 |
数组的常用属性和函数
- 属性length：返回数组长度。注意length是属性，不是函数，因此调用的时候不要加()
- 函数push()：向数组末尾添加元素
- 函数pop()：删除数组末尾的元素
- 函数splice(a, b)：删除从a开始的b个元素
- 函数sort()：将整个数组从小到大排序
- 自定义比较函数：array.sort(cmp)，函数cmp输入两个需要比较的元素，返回一个实数，负数表示第一个参数小于第二个参数，0表示相等，正数表示大于。
函数
函数是用对象来实现的。 函数也C++中的函数类似。
定义方式
1 | function add(a, b) { |
返回值
如果未定义返回值，则返回undefined。
JS中的语法糖
https://segmentfault.com/a/1190000010159725
类
与C++中的Class类似。但是不存在私有成员。
this指向类的实例。
定义
1 | class Point { |
继承
1 | class ColorPoint extends Point { |
注意：
- super这个关键字，既可以当作函数使用，也可以当作对象使用。
- 作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
- super作为对象时，指向父类的原型对象。
- 在子类的构造函数中，只有调用super之后，才可以使用this关键字。
- 成员重名时，子类的成员会覆盖父类的成员。类似于C++中的多态。
静态方法
在成员函数前添加static关键字即可。静态方法不会被类的实例继承，只能通过类来调用。例如：
1 | class Point { |
静态变量
在ES6中，只能通过class.propname定义和访问。例如：
1 | class Point { |
事件
JavaScript的代码一般通过事件触发。
可以通过addEventListener函数为元素绑定事件的触发函数。
常见的触发函数有：
鼠标
- click：鼠标左键点击
- dblclick：鼠标左键双击
- contextmenu：鼠标右键点击
- mousedown：鼠标按下，包括左键、滚轮、右键
- event.button：0表示左键，1表示中键，2表示右键
- mouseup：鼠标弹起，包括左键、滚轮、右键
- event.button：0表示左键，1表示中键，2表示右键
键盘
- keydown：某个键是否被按住，事件会连续触发
event.code：返回按的是哪个键
event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
- keyup：某个按键是否被释放
- event常用属性同上
- keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。
- event常用属性同上
keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click
表单
- focus：聚焦某个元素
- blur：取消聚焦某个元素
- change：某个元素的内容发生了改变
窗口
需要作用到window元素上。
- resize：当窗口大小放生变化
- scroll：滚动指定的元素
- load：当元素被加载完成
常用库
Jquery
jQuery 是一个流行的、轻量级的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互，使得 Web 开发变得更加简单快捷。jQuery 的设计理念是“write less, do more”，即用更少的代码完成更多的工作。
使用方式
- 在head元素中添加：
1 | <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script> |
- 按jQuery官网提示下载
选择器
$(selector)，例如：
1 | $('div'); |
selector类似于CSS选择器。
事件
$(selector).on(event, func)绑定事件，例如：
1 | $('div').on('click', function (e) { |
$(selector).off(event, func)删除事件，例如：
1 | $('div').on('click', function (e) { |
当存在多个相同类型的事件触发函数时，可以通过click.name来区分，例如：
1 | $('div').on('click.first', function (e) { |
在事件触发的函数中的return false等价于同时执行：
- e.stopPropagation()：阻止事件向上传递
- 事件向上传递：比如一个div中包含一个a标签（div绑定了点击事件），点击a标签，由于a标签在div内，所以div也算点击到了。这就是事件的向上传递。
- e.preventDefault()：阻止事件的默认行为
- 阻止当前事件（但不阻止事件向上传递）
1 | $('a').on("click", function(e) { |
元素的隐藏、展现
- $A.hide()：隐藏，可以添加参数，表示消失时间
- $A.show()：展现，可以添加参数，表示出现时间
- $A.fadeOut()：慢慢消失，可以添加参数，表示消失时间
- $A.fadeIn()：慢慢出现，可以添加参数，表示出现时间
元素的添加、删除
$('<div class="mydiv"><span>Hello World</span></div>')：构造一个jQuery对象$A.append($B)：将$B添加到$A的末尾
$A.prepend($B)：将$B添加到$A的开头
$A.remove()：删除元素$A
$A.empty()：清空元素$A的所有儿子
对类的操作
- $A.addClass(class_name)：添加某个类
- $A.removeClass(class_name)：删除某个类
- $A.hasClass(class_name)：判断某个类是否存在
对CSS的操作
$("div").css("background-color")：获取某个CSS的属性
$("div").css("background-color","yellow")：设置某个CSS的属性
同时设置多个CSS的属性：
1
2
3
4
5$('div').css({
width: "200px",
height: "200px",
"background-color": "orange",
});
对标签属性的操作
- $('div').attr('id')：获取属性
- $('div').attr('id', 'ID')：设置属性
对HTML内容、文本的操作
不需要背每个标签该用哪种，用到的时候Google或者百度即可。
- $A.html()：获取、修改HTML内容
- $A.text()：获取、修改文本信息
- $A.val()：获取、修改文本的值
查找
- $(selector).parent(filter)：查找父元素
- $(selector).parents(filter)：查找所有祖先元素
- $(selector).children(filter)：在所有子元素中查找
- $(selector).find(filter)：在所有后代元素中查找
ajax GET方法：
1 | $.ajax({ |
POST方法：
1 | $.ajax({ |
setTimeout与setInterval
setTimeout(func, delay) delay毫秒后，执行函数func()。
clearTimeout() 关闭定时器，例如：
1 | let timeout_id = setTimeout(() => { |
setInterval(func, delay) 每隔delay毫秒，执行一次函数func()。 第一次在第delay毫秒后执行。
clearInterval() 关闭周期执行的函数，例如：
1 | let interval_id = setInterval(() => { |
requestAnimationFrame(func)
该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。
例如：
1 | let step = (timestamp) => { // 每帧将div的宽度增加1像素 |
requestAnimationFrame(step); 与setTimeout和setInterval的区别：
- requestAnimationFrame渲染动画的效果更好，性能更加。 该函数可以保证每两次调用之间的时间间隔相同，但setTimeout与setInterval不能保证这点。setTmeout两次调用之间的间隔包含回调函数的执行时间；setInterval只能保证按固定时间间隔将回调函数压入栈中，但具体的执行时间间隔仍然受回调函数的执行时间影响。
- 当页面在后台时，因为页面不再渲染，因此requestAnimationFrame不再执行。但setTimeout与setInterval函数会继续执行。
Map与Set
Map
Map 对象保存键值对。
- 用for...of或者forEach可以按插入顺序遍历。
- 键值可以为任意值，包括函数、对象或任意基本类型。
常用API：
- set(key, value)：插入键值对，如果key已存在，则会覆盖原有的value
- get(key)：查找关键字，如果不存在，返回undefined
- size：返回键值对数量
- has(key)：返回是否包含关键字key
- delete(key)：删除关键字key
- clear()：删除所有元素
Set
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
- 用for...of或者forEach可以按插入顺序遍历。
常用API：
- add()：添加元素
- has()：返回是否包含某个元素
- size：返回元素数量
- delete()：删除某个元素
- clear()：删除所有元素
localStorage
可以在用户的浏览器上存储键值对。
常用API：
- setItem(key, value)：插入
- getItem(key)：查找
- removeItem(key)：删除
- clear()：清空
JSON
JSON对象用于序列化对象、数组、数值、字符串、布尔值和null。
常用API：
JSON.parse()：将字符串解析成对象 JSON.stringify()：将对象转化为字符串
日期
返回值为整数的API，数值为1970-1-1 00:00:00 UTC（世界标准时间）到某个时刻所经过的毫秒数：
- Date.now()：返回现在时刻。
- Date.parse("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日 15:30:00的时刻。
与Date对象的实例相关的API：
- new Date()：返回现在时刻。
- new Date("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日 15:30:00的时刻。
- 两个Date对象实例的差值为毫秒数
- getDay()：返回星期，0表示星期日，1-6表示星期一至星期六
- getDate()：返回日，数值为1-31
- getMonth()：返回月，数值为0-11
- getFullYear()：返回年份
- getHours()：返回小时
- getMinutes()：返回分钟
- getSeconds()：返回秒
- getMilliseconds()：返回毫秒
WebSocket
与服务器建立全双工连接。
常用API：
- new WebSocket('ws://localhost:8080');：建立ws连接。
- send()：向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串。
- onopen：类似于onclick，当连接建立时触发。
- onmessage：当从服务器端接收到消息时触发。
- close()：关闭连接。
- onclose：当连接关闭后触发。
Windows
- window.open("https://www.acwing.com") 在新标签栏中打开页面。
- location.reload() 刷新页面。
- location.href = "https://www.acwing.com"：在当前标签栏中打开页面。
Canvas教程
React
配置环境
安装
安装create-react-app 打开Git Bash，执行：
1 | npm i -g create-react-app |
安装VSCode的插件
- Simple React Snippets
- Prettier - Code formatter
创建React App 在目标目录下打开Git Bash，在终端中执行：
1 | create-react-app react-app # 可以替换为其他app名称 |
JSX
React中的一种语言，会被Babel编译成标准JavaScript。
下图是jsx代码转换为js代码。
ES6语法补充
使用bind()函数绑定this取值
在JavaScript中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。
例如：
1 | const person = { |
运行结果：
1 | {name: 'yxc', talk: ƒ} |
bind()函数，可以绑定this的取值。例如：
1 | const talk = person.talk.bind(person); |
箭头函数的简写方式
1 | const f = (x) => { |
可以简写为：
1 | const f = x => x * x; |
箭头函数不重新绑定this的取值
例如：
1 | const person = { |
1 | const person = { |
对象的解构
例如：
1 | const person = { |
数组和对象的展开
例如：
1 | let a = [1, 2, 3]; |
1 | const a = {name: "yxc"}; |
Named 与 Default exports
- Named Export：可以export多个，import的时候需要加大括号，名称需要匹配（不能别名，加个as即可改名，原名 as 别名）
- Default Export：最多export一个，import的时候不需要加大括号，可以直接定义别名（因为只有一个，是没有大括号的，所以可以随便定义名字）
Components
创建项目
创建项目box-app：
1 | create-react-app box-app |
安装bootstrap库：
1 | npm i bootstrap |
bootstrap的引入方式：
1 | import 'bootstrap/dist/css/bootstrap.css'; |
创建Component
创建按钮
return返回一个标签时：
1 | return <h1>hello world<h1>; |
如果返回多个标签，如下图一样写，会发现什么也看不见。（这是在js中可以不写分号，等价于第一行其实是return;就已经结束了）
1 | return |
在JS中，当你返回一个表达式时，如果这个表达式包含多个元素，你需要使用括号将它们括起来，以确保它们被视为一个整体的返回值。
当子节点数量大于1时，可以用<div>或<React.Fragment>将其括起来。
用div
可以发现用div括起来，外边会包括一个div。
React.Fragment
用React.Fragment，则不会渲染。
使用React.Fragment标签可以发现，在渲染的时候是不渲染的，只是一个逻辑标签一样。
内嵌表达式
JSX中使用{}嵌入表达式。
设置属性
state也可以改名，不一定要叫state。
- class -> className （原先js中的class在jsx要写成className）
- CSS属性：background-color -> backgroundColor，其它属性类似（CSS属性中用-连接的属性名在jsx中要写成驼峰命名形式 ）
在jsx中定义css样式有以下两种方式：
方式1：
方式2：（注意以下styles中有两个大括号，结合方式1即可理解两个大括号怎么来的，把方式2定义的styles移到方式2，外层大括号指明是一个表达式，里层大括号指明是一个对象）
数据驱动改变Style
例子：
根据state的x的值来改变相应的style样式，x为0的时候是orange，为1的时候是lightblue。
渲染列表
使用map函数
```jsx import React, { Component } from 'react'; // imrc
class Box extends Component { // cc state = { x: 0, colors: ['red', 'green', 'blue'] };
render() { return ( <React.Fragment> <div style={this.getStyles()}>{this.toString()}</div> <button className="btn btn-primary m-2">left</button> <button className='btn btn-success m-2'>right</button> {this.state.colors.map(color =>( <div>{color}</div> // 报错定位，没有为每个元素指定key // 改成<div key={color}>{color}</div>即可 ))} </React.Fragment> ); } getStyles() { let styles = { width: "50px", height: "50px", backgroundColor: "lightblue", color: "white", textAlign: "center", lineHeight: "50px", borderRadius: "5px", }; if(this.state.x === 0) { styles.backgroundColor = 'orange'; } return styles; } toString() { const {x} = this.state; return `x: ${x}`; }};
export default Box;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92- 但是这样写会报错，报错原因是数组里面的每一个元素都需要一个key值（每一个key值要不一样）
- 
- 每个元素需要具有唯一的key属性，用来帮助React快速找到被修改的DOM元素。
### Conditional Rendering
利用逻辑表达式的短路原则。
- 与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值
- colors数组为空，页面显示p标签，即No Colors
- 或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值
### 绑定事件
例子：
为按钮绑定点击事件，（**注意：下方按钮绑定的函数是没有括号的，因为这里是绑定一个函数，而不是调用执行一个函数；我们是把函数传过来，而不是把函数的返回值传过来。**）
```jsx
import React, { Component } from 'react'; // imrc
class Box extends Component { // cc
state = {
x: 0,
};
handleClickLeft() {
console.log("click left", this);
}
/*
方式1：
改成箭头函数
handleClickLeft = () => {
console.log("click left", this);
}
*/
handleClickRight() {
console.log("click right", this);
}
/*
改成箭头函数
handleClickRight = () => {
console.log("click right", this);
}
*/
render() {
return (
<React.Fragment>
<div style={this.getStyles()}>{this.toString()}</div>
<button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button>
<!--
方式2：用bind()
<button onClick={this.handleClickLeft.bind(this)} className="btn btn-primary m-2">left</button>
-->
<button onClick={this.handleClickRight} className='btn btn-success m-2'>right</button>
</React.Fragment>
);
}
getStyles() {
let styles = {
width: "50px",
height: "50px",
backgroundColor: "lightblue",
color: "white",
textAlign: "center",
lineHeight: "50px",
borderRadius: "5px",
};
if(this.state.x === 0) {
styles.backgroundColor = 'orange';
}
return styles;
}
toString() {
const {x} = this.state;
return `x: ${x}`;
}
};
export default Box;
注意妥善处理好绑定事件函数的this
上述代码中this打印出来的是undefined，因为不知道react是在什么地方调用click函数，但我们希望this指向的是当前的class。
解决方案：参照前面的使用bind()函数绑定this取值以及箭头函数不重新绑定this的取值（这里推荐使用箭头函数）
修改后参照上述代码注释1
修改后打印结果如图：
修改state
运行后，从下图可以看出，x的值变了，但是页面的x值没变，因为react没有进行渲染。（所以我们需要明确告诉react值变了，需要修改）
- 需要使用this.setState()函数
- 改成下图即可
- 改成下图即可
- 每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟DOM树。React只会修改不同步的实际DOM树节点。
给事件函数添加参数
组合Components
创建Boxes组件
Boxes组件中包含一系列Box组件。
从上往下传递数据
通过this.props属性可以从上到下传递数据。
props里面存储的是组件被定义时的属性。
传递子节点
通过this.props.children属性传递子节点
组件标签内的内容。
1 | // Boxes.jsx中 |
从下往上调用函数
注意：每个组件的this.state只能在组件内部修改，不能在其他组件内修改。
每个维护的数据仅能保存在一个this.state中
不要直接修改this.state的值，因为setState函数可能会将修改覆盖掉。
创建App组件
包含：
导航栏组件 Boxes组件 注意：
要将多个组件共用的数据存放到最近公共祖先的this.state中。
无状态函数组件
当组件中没有用到this.state时，可以简写为无状态的函数组件。 函数的传入参数为props对象
简写前
1 | import React, { Component } from 'react'; |
简写后
1 | import React, { Component } from 'react'; |
组件的生命周期
Mount周期，执行顺序：constructor() -> render() -> componentDidMount() Update周期，执行顺序：render() -> componentDidUpdate() Unmount周期，执行顺序：componentWillUnmount()
路由
Web分类
- 静态页面：页面里的数据是写死的
- 动态页面：页面里的数据是动态填充的
- 后端渲染：数据在后端填充
- 前端渲染：数据在前端填充
安装环境
- VSCODE安装插件：Auto Import - ES6, TS, JSX, TSX
- 安装Route组件：
npm i react-router-dom
Route组件介绍
BrowserRouter：所有需要路由的组件，都要包裹在BrowserRouter组件内
Link：跳转到某个链接，to属性表示跳转到的链接
改变前：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28import React, { Component } from 'react';
class NavBar extends Component {
state = {}
render() {
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
<a className="navbar-brand" href="/">讲义</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-link active" aria-current="page" href="#">Home</a>
<a className="nav-link" href="/linux">Linux</a>
<a className="nav-link" href="/django">Django</a>
<a className="nav-link" href='/web'>Web</a>
</div>
</div>
</div>
</nav>
);
}
}
export default NavBar;使用Link组件后：（变成了前端渲染）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class NavBar extends Component {
state = {}
render() {
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
<Link className="navbar-brand" to="/">讲义</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
{ /* active属性控制哪个navbar高亮 */}
<Link className="nav-link" to="/linux">Linux</Link>
<Link className="nav-link" to="/django">Django</Link>
<Link className="nav-link" to='/web'>Web</Link>
</div>
</div>
</div>
</nav>
);
}
}
export default NavBar;
Routes：类似于C++中的switch，匹配第一个路径
- 依次匹配路径，匹配到了路径就不会继续往下执行。(以下方式写路由，每次点击都是会重新加载页面，后端渲染，要想实现每次点击不重新加载页面，使用link组件
)
- 依次匹配路径，匹配到了路径就不会继续往下执行。(以下方式写路由，每次点击都是会重新加载页面，后端渲染，要想实现每次点击不重新加载页面，使用link组件
)
Route：路由，path属性表示路径，element属性表示路由到的内容
URL中传递参数
解析URL：
<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />
路径会匹配/linux/，然后后面的两个参数依次会存到名为chatper_id和section_id两个变量中。
获取参数，类组件写法：
1 | import React, { Component } from 'react'; |
函数组件写法：
1 | import React, { Component } from 'react'; |
Search Params传递参数
类组件写法：
1 | import React, { Component } from 'react'; |
函数组件写法：
1 | import React, { Component } from 'react'; |
重定向
使用Navigate组件可以重定向。
要导入Navigate组件。
<Route path="*" element={ <Navigate replace to="/404" /> } />
嵌套路由
1 | <Route path="/web" element={<Web />}> |
注意：需要在父组件中添加<Outlet />组件，用来填充子组件的内容。
Redux
redux将所有数据存储到树中，且树是唯一的。
Redux基本概念
- store：存储树结构。
- state：维护的数据，一般维护成树的结构。
- reducer：对state进行更新的函数，每个state绑定一个reducer。传入两个参数：当前state和action，返回新state。
- action：一个普通对象，存储reducer的传入参数，一般描述对state的更新类型。
- dispatch：传入一个参数action，对整棵state树操作一遍。
React-Redux基本概念
- Provider组件：用来包裹整个项目，其store属性用来存储redux的store对象。
- connect(mapStateToProps,
mapDispatchToProps)函数：用来将store与组件关联起来。
- mapStateToProps：每次store中的状态更新后调用一次，用来更新组件中的值。
- mapDispatchToProps：组件创建时调用一次，用来将store的dispatch函数传入组件。
安装
npm i redux react-redux @reduxjs/toolkit
