Skip to content

Commit 2732335

Browse files
DavidingPlusDavidingPlus
committed
url replacement in front-end
1 parent a7f38b4 commit 2732335

File tree

33 files changed

+678
-708
lines changed

33 files changed

+678
-708
lines changed

‎前端/HTML5+CSS3/01【HTML基础】/【HTML基础】.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ HTML 标签通常是成对出现的，例如：`<html>` 和 `</html>`，我们
139139

140140
**网页 title 示例：**
141141

142-
![](https://img-blog.csdnimg.cn/direct/3544462709e741d683c95204a979cad1.png)
142+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/image-20220115163652252.png)
143143

144144
## 2.3 网页开发工具
145145

@@ -274,7 +274,7 @@ HTML 提供了 6 个等级的网页标题，即：`<h1>` 到 `<h6>`。
274274
<h6>六级标题</h6>
275275
```
276276

277-
<img src="https://img-blog.csdnimg.cn/direct/5ba7a2c19eb447b5957fb3c2b532d8fa.png" style="width: 30%;" />
277+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/image-20220115165012637.png" style="width: 30%;" />
278278

279279
> 单词 head 的缩写，意为：头部、标题。
280280
@@ -311,7 +311,7 @@ HTML 提供了 6 个等级的网页标题，即：`<h1>` 到 `<h6>`。
311311

312312
- 同一段落里的不同行文字之间也有一定的空隙（行间距）
313313

314-
![](https://img-blog.csdnimg.cn/direct/35a9780ebd0b49aeb7643805a8690b3d.png)
314+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/d9b00c3588a14988a0eee7baf8782ca3.png)
315315

316316
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。
317317

@@ -337,7 +337,7 @@ HTML 提供了 6 个等级的网页标题，即：`<h1>` 到 `<h6>`。
337337
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->
338338
```
339339

340-
![](https://img-blog.csdnimg.cn/direct/e590a07ee17148349f4b1bfc7128bf57.png)
340+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/2d74ab3a559a4df5b69a32aa0bc5dd09.png)
341341

342342
> 注意：实际开发中并不常用 hr 作为分割线，而是使用 CSS 盒子模型中的边框来实现分割线效果，或是利用一个空盒子设置长宽高及背景颜色来实现分割线效果。
343343
@@ -436,7 +436,7 @@ HTML 提供了 6 个等级的网页标题，即：`<h1>` 到 `<h6>`。
436436

437437
- 网络地址
438438

439-
`https://github.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/mark-img/I-Love-You.gif`
439+
`https://github.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/I-Love-You.gif`
440440

441441
**注意：**
442442

@@ -511,7 +511,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
511511

512512
## 2.6 表格标签
513513

514-
![](https://img-blog.csdnimg.cn/direct/2c8530349bec490f876504fd8a33adb6.png)
514+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/image-20220121161018164.png)
515515

516516
### 2.6.1 表格的主要作用
517517

@@ -666,7 +666,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
666666
</html>
667667
```
668668

669-
<img src="https://img-blog.csdnimg.cn/direct/108e0110e0b846d7af32d242aef8c848.png" style="width:50%;" />
669+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210405002235373.jpg" style="width:50%;" />
670670

671671
【综合案例】
672672

@@ -718,7 +718,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
718718
</html>
719719
```
720720

721-
![](https://img-blog.csdnimg.cn/direct/29715452b81c4fdf826d9696148b4b3a.png)
721+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/699b0d89c1727c05e1a200e21867c8e5-16422502360695.png)
722722

723723
## 2.7 列表标签
724724

@@ -742,19 +742,19 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
742742

743743
- 无序列表
744744

745-
![](https://img-blog.csdnimg.cn/direct/097c246fe486417b96058b6773f36203.png)
745+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210405004003554.jpg)
746746

747-
![](https://img-blog.csdnimg.cn/direct/43671071418941e5a8ff18f272510f67.png)
747+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210405004003542.jpg)
748748

749749
- 有序列表
750750

751751
> 注意：微博热搜是为方便理解举例，实际上此处并非使用有序列表！
752752
753-
![](https://img-blog.csdnimg.cn/direct/66c7ed6c85154c28acbe186c8ae887fd.png)
753+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210405004003545.jpg)
754754

755755
- 自定义列表
756756

757-
![](https://img-blog.csdnimg.cn/direct/527c0fa1317e490a8acd3b71fa86fa27.png)
757+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210405004003460.jpg)
758758

759759
### 2.7.1 无序列表
760760

@@ -776,7 +776,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
776776
- `<li>` 与 `</li>` 之间相当于一个容器，可以容纳所有的元素
777777
- 无序列表会带有自己的样式属性（比如圆点），但在实际开发中，我们会使用 CSS 来设置
778778

779-
<img src="https://img-blog.csdnimg.cn/direct/086498047e724247a87829611a74e16f.png" style="width:30%;" />
779+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210409111633420-16422555387621.jpg" style="width:30%;" />
780780

781781
> 附：去除 li 前符号的方法：`style="list-style: none;"`
782782
@@ -801,7 +801,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
801801
- `<li>` 与 `</li>` 之间相当于一个容器，可以容纳所有的元素
802802
- 有序列表会带有自己样式属性（比如序号），但在实际使用时，我们会使用 CSS 来设置
803803

804-
<img src="https://img-blog.csdnimg.cn/direct/841025b3867d43dda5384b834b604d25.png" style="width:30%;" />
804+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210409111633549-16422555479543.jpg" style="width:30%;" />
805805

806806
> 附：去除 li 前符号的方法：`style="list-style: none;"`
807807
@@ -828,7 +828,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
828828
- `<dl>` `</dl>` 里面只包含 `<dt>`、`<dd>`
829829
- `<dt>` 和 `<dd>` 个数没有限制，经常是一个 `<dt>` 对应多个 `<dd>`
830830

831-
<img src="https://img-blog.csdnimg.cn/direct/df73e101446846db83a5127a9d6a0ac5.png" style="zoom:50%;" />
831+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210409111710669-16422555546745.jpg" style="zoom:50%;" />
832832

833833
## 2.8 表单标签
834834

@@ -910,9 +910,9 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
910910
</html>
911911
```
912912

913-
<img src="https://img-blog.csdnimg.cn/direct/94dbaa3205fc470e98622c4a675389c3.png" style="width:60%;" />
913+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/06b66d16e62dca2951179ec536cc484a.png" style="width:60%;" />
914914

915-
<img src="https://img-blog.csdnimg.cn/direct/6f1650caf3634e58a89d86e01d6c67af.png" style="width:60%;" />
915+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/a280fd4d6fbdc45784adf7627e4a679e.png" style="width:60%;" />
916916

917917
【POST案例】
918918

@@ -937,9 +937,9 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
937937
</html>
938938
```
939939

940-
<img src="https://img-blog.csdnimg.cn/direct/92a17cbd0dd0494c896299db9f35b468.png" style="width:60%;" />
940+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/06b66d16e62dca2951179ec536cc484a-164225152462516.png" style="width:60%;" />
941941

942-
<img src="https://img-blog.csdnimg.cn/direct/3c7173f0d3844c35a2b523bfa5bd9e25.png" style="width:60%;" />
942+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/2666b32b23643c2c8959491a1989a5af.png" style="width:60%;" />
943943

944944
### 2.8.4 表单控件（表单元素）
945945

@@ -1013,9 +1013,9 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
10131013
> </html>
10141014
> ```
10151015
>
1016-
> <img src="https://img-blog.csdnimg.cn/direct/c04c85cc54674ee09694cad4350730f0.png" style="width:60%;" />
1016+
> <img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/685d11e4bfbb4d8094e722211359c634.png" style="width:60%;" />
10171017
>
1018-
> <img src="https://img-blog.csdnimg.cn/direct/5c0e8bbc734a430ab9528cb3fa305ff1.png" style="width:60%;" />
1018+
> <img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/e6d3e820f2a14536b44b4dec9b7ab3c1.png" style="width:60%;" />
10191019
10201020
**除 type 属性外，`<input>` 标签还有很多其他属性，其常用属性如下：**
10211021
@@ -1096,7 +1096,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
10961096

10971097
**核心：** `<label>` 标签的 for 属性应当与相关元素的 id 属性相同。
10981098

1099-
<img src="https://img-blog.csdnimg.cn/direct/91dd5215b90145e0a85df0186241216c.png" style="zoom:50%;" />
1099+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210409111229906-164225496209822.gif" style="zoom:50%;" />
11001100

11011101
**（2）\<select> 表单元素**
11021102

@@ -1330,11 +1330,11 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
13301330

13311331
**效果：**
13321332

1333-
<img src="https://img-blog.csdnimg.cn/direct/1c52ffd7e8774f73ab02dd4e88ce6641.png" style="width:50%;" />
1333+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/2021040501112593-164225533222026.png" style="width:50%;" />
13341334

13351335
**本质：**
13361336

1337-
<img src="https://img-blog.csdnimg.cn/direct/92bacd5a088147a4977f9717624ef9eb.png" style="width:50%;" />
1337+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/20210405011125140-16422553843201.png" style="width:50%;" />
13381338

13391339
## 2.10 内联框架
13401340

@@ -1362,7 +1362,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
13621362
<iframe src="https://www.bilibili.com/" width="70%" height="500px"></iframe>
13631363
```
13641364

1365-
![](https://img-blog.csdnimg.cn/direct/258501446fa3420fb9dcfd4048d07e2a.png)
1365+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/image-20220121173139191.png)
13661366

13671367
> **提示：**您可以把需要的文本放置在 `<iframe>` 和 `</iframe>` 之间，这样就可以应对不支持 `<iframe>` 的浏览器。
13681368
>
@@ -1397,7 +1397,7 @@ HTML 中的注释以：`<!--` 开头，以 `-->` 结束。
13971397

13981398
SEO（Search Engine Optimization）：汉译为**搜索引擎优化**。是一种方式：利用[搜索引擎](https://baike.baidu.com/item/搜索引擎/104812)的规则提高网站在有关搜索引擎内的[自然排名](https://baike.baidu.com/item/自然排名/2092669)。目的是让其在行业内占据领先地位，获得[品牌](https://baike.baidu.com/item/品牌/235720)收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。（百度百科）
13991399

1400-
![](https://img-blog.csdnimg.cn/direct/bfeba8c407864fc48bc953ea4f13970b.png)
1400+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/01【HTML基础】/mark-img/image-20220214165430495.png)
14011401

14021402
> 外链：链接到外部网页的链接，外链不是越多越好，而是外链的质量越高、越合理、越方便越好。
14031403
>

‎前端/HTML5+CSS3/02【CSS简介、基础选择器、字体属性、文本属性、引入方式】/【CSS简介、基础选择器、字体属性、文本属性、引入方式】.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -597,7 +597,7 @@ div {
597597
598598
> 当然实际开发中通常浏览器请求时，会把字体文件随 HTML CSS JS 等一同传送到客服端。
599599
600-
![](https://img-blog.csdnimg.cn/direct/2dd30a5012624825b48bef4d37d75440.png)
600+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/02【CSS简介、基础选择器、字体属性、文本属性、引入方式】/mark-img/2021041511462678.png)
601601
602602
## 3.2 字体大小
603603
@@ -1120,7 +1120,7 @@ p {
11201120

11211121
补充：行间距测量技巧：上一行文字的底部与本行文字的底部之间的距离就是行间距。
11221122

1123-
![](https://img-blog.csdnimg.cn/direct/8e77db3723054660ba177c16a12d5ad6.png)
1123+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/02【CSS简介、基础选择器、字体属性、文本属性、引入方式】/mark-img/20210405144715962.jpg)
11241124

11251125
## 4.6 文本属性总结
11261126

‎前端/HTML5+CSS3/03【CSS复合选择器、元素显示模式、背景】/【CSS复合选择器、元素显示模式、背景】.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ a:hover {
290290
</html>
291291
```
292292

293-
<img src="https://img-blog.csdnimg.cn/direct/5ea18c9d41f642709f106cafa81d286a.png" style="width:50%;" />
293+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/20210405203010954.gif" style="width:50%;" />
294294

295295
> 注意：`:hover` `:active` 也适用于其他标签元素。
296296
@@ -333,7 +333,7 @@ input:focus {
333333
</html>
334334
```
335335

336-
![](https://img-blog.csdnimg.cn/direct/3999d649705c4facb89fdf8aa3b97f5a.png)
336+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/20210405202554834.gif)
337337

338338
## 1.8 复合选择器总结
339339

@@ -472,7 +472,7 @@ HTML 元素一般分为 `块元素` 和 `行内元素` 两种类型。
472472
</html>
473473
```
474474

475-
<img src="https://img-blog.csdnimg.cn/direct/192915aa0a26402cbf1f4403ceead4d9.png" style="width:70%;" />
475+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/20210405205009406.jpg" style="width:70%;" />
476476

477477
## 2.7 简洁版小米侧边栏案例
478478

@@ -524,7 +524,7 @@ HTML 元素一般分为 `块元素` 和 `行内元素` 两种类型。
524524
</html>
525525
```
526526

527-
<img src="https://img-blog.csdnimg.cn/direct/c9bf0ceba1e74d829190eda5df54769f.png" style="width:30%;" />
527+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/20210405205628339.gif" style="width:30%;" />
528528

529529
## 2.8 小技巧：单行文字垂直居中
530530

@@ -594,7 +594,7 @@ CSS 没有给我们提供文字垂直居中的代码，这里我们可以使用
594594
</html>
595595
```
596596

597-
<img src="https://img-blog.csdnimg.cn/direct/f01433f30f8742d7be3f84a19622b426.png" style="width:50%;" />
597+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/image-20220125215313482.png" style="width:50%;" />
598598

599599
# 三、CSS 的背景
600600

@@ -649,7 +649,7 @@ background-color: transparent;
649649
</html>
650650
```
651651

652-
![](https://img-blog.csdnimg.cn/direct/ddd0015544ce4dc2af12bc46c045ef67.png)
652+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/20210405211456978.jpg)
653653

654654
## 3.2 背景图片
655655

@@ -706,7 +706,7 @@ background-position: x y;
706706
| 参数值 | 说明 |
707707
| ---------- | ------------------------------------------------- |
708708
| `length` | 百分数 \| 由浮点数字和单位标识符组成的长度值 |
709-
| `position` | top \| center \| bottom \| left \| right 方位名词 |
709+
| `position` | top \| center \| bottom \| left \| rigth 方位名词 |
710710

711711
- 参数是方位名词
712712
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
@@ -811,7 +811,7 @@ background-attachment : scroll | fixed
811811
</html>
812812
```
813813

814-
<img src="https://img-blog.csdnimg.cn/direct/46636d1e2f8340d49865d4cc39c8c829.png" style="width: 50%;" />
814+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/20210405212447451-16422629370077.gif" style="width: 50%;" />
815815

816816
## 3.6 背景复合写法
817817

@@ -921,7 +921,7 @@ background: rgba(0, 0, 0, 0.3);
921921
</html>
922922
```
923923

924-
<img src="https://img-blog.csdnimg.cn/direct/f57481aaca644744b79a19ad732b2504.png" style="zoom:80%;" />
924+
<img src="https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/20210405213212859.jpg" style="zoom:80%;" />
925925

926926
```html
927927
<!doctype html>
@@ -953,4 +953,4 @@ background: rgba(0, 0, 0, 0.3);
953953
</html>
954954
```
955955

956-
![](https://img-blog.csdnimg.cn/direct/538a1f33da3e43bba52b3cc4176ba28c.png)
956+
![](https://gitee.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/我爱你，不止三千遍/HTML%20CSS/03【CSS复合选择器、元素显示模式、背景】/mark-img/202104052132139.jpg)

0 commit comments

Comments
 (0)