PMCKK

何为CDN

Fri, 04 Sep 2026 00:00:00 GMT

关于CDN#

介绍

全程(content delivery network)

中文: 内容分发网络

cdn是一套分布式节点服务器网络，也就是我们的常说的套盾(个人理解).

工作原理#

把网站的静态资源（图片、JS、CSS、视频、静态页面）缓存到遍布各地的 CDN 节点服务器。
用户请求资源时，不直接访问源服务器，就近找离自己最近的 CDN 节点获取资源。
减少网络传输距离，降低延迟，提升加载速度，同时抗高并发、抗攻击。

适合缓存的资源#

适合: 图片、css、js、字体文件、静态页面、视频

不适合: 动态实时接口、需要实时计算的数据一般不适合放CDN

优点#

访问速度快：就近节点返回资源，减少跨地域网络耗时
保护源站：大量访问打在CDN节点，源服务器压力变小
抗并发：可以承载大量用户同时访问
跨地区加速：不同地区用户都能获得较好访问体验

前端学习笔记CSS篇

Thu, 03 Sep 2026 00:00:00 GMT

CSS篇#

简介#

css即Cascanding Style Sheets(层叠样式表)，是一种用于定义网页样式和布局的语言.

语法#

css通常由选择器,属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式.

css

1
选择器{
2
  属性1:属性值;
3
  属性2:属性值;
4
}

注:

1.选择器的声明可以写无数条属性.

2.声明的每一行属性,都需要以英文分号结尾.

3.声明中的属性和值都是以键值这种形势出现的.

代码示例:

css

1
/*这是一个p标签选择器*/
2

3
p{
4

5
  color: blue;
6

7
  font-size: 16px;
8

9
}

CSS导入方式#

常见的三种导入方式

内联样式(Inline Style)
内部样式表(Internal Stylesheet)
外部样式表(External Stylesheet)

三种导入方式的优先级:

“内联样式”>“内部样式表”>“外部样式表”

CSS选择器

CSS有以下选择器,他们提供了不同的方式来选择对象.

元素选择器
类选择器
ID选择器
通用选择器
子元素选择器
后代选择器(包含选择器)
并集选择器(兄弟选择器)
伪类选择器

代码演示

HTML部分:

html展开收起

1
<body>
2
    <h1>不同类型的 CSS 选择器</h1>
3

4
    <h2>这是一个元素选择器示例</h2>
5
    <h3 class="hightlight">这是一个类选择器示例</h3>
6
    <h3>这是另一个类选择器示例</h3>
7
    <h4 id="header">这是一个id选择器</h4>
8
    <div class="father">
9
        <p class="son">这是一个子元素选择器示例</p>
10
        <div>
11
            <p class="grandson">这是一个后代选择器示例</p>
12
        </div>
13
    </div>
14
    <p>这是一个普通p标签</p>
15
    <h3>这是一个相邻兄弟选择器示例</h3>
16
    <p>这是另一个p标签</p>
17

18
    <h3 id="element">这是一个伪类选择器示例</h3>
19
</body>

展开收起

CSS部分:

css展开收起

1
    <style>
2
        /*元素选择器*/
3

4
        h2 {
5
            color: aqua;
6
        }
7
        /* 类选择器 */
8

9
        .hightlight {
10
            background-color: yellow;
11
        }
12
        /* id选择器 */
13

14
        #header {
15
            font-size: 35px;
16
        }
17
        /* 通用选择器 */
18

19
        * {
20
            font-family: 'KaiTi';
21
            font-weight: bolder;
22
        }
23
        /* 子元素选择器 */
24

25
        .father>.son {
26
            color: yellowgreen;
27
        }
28
        /*后代选择器*/
29

30
        .father p {
31
            color: brown;
32
            font-size: larger;
33
        }
34
        /*相邻元素选择器*/
35

36
        h3+p {
37
            background-color: red;
38
        }
39
        /*伪类选择器*/
40

41
        #element:hover {
42
            background-color: purple;
43
        }
44
        /*
45
        选中第一个子元素 :first-child
46
                        :nth-child
47
                        :active
48
        */
49
        /*
50
        伪元素选择器
51
        ::after
52
        ::before
53
        */
54
    </style>

展开收起

CSS选择器知识点整理

重点区分：类选择器、ID选择器、伪类选择器、伪元素选择器

类选择器：语法为 .类名
ID选择器：语法为 #id

伪类选择器 用于匹配元素的状态、位置，比如鼠标悬浮、匹配父级下第一个子元素。示例：鼠标悬浮 :hover，给元素添加悬浮后的背景效果；也可以选中父元素中的第一个子元素。

伪元素选择器 语法：::after、::before

⚠️ 伪元素不会选中页面真实已存在的DOM元素，而是创建虚拟元素，分别在目标元素之前、之后插入虚拟内容。

CSS常用属性#

介绍:

css有非常多的属性，但是不代表我们要一次性全部学习，新手阶段可以学习一部分使用频率非常高的属性，当然我们可以在html官网中查看,或者其他网站如菜鸟教程或者w3cschool这些网站中查看.

示例代码:

html展开收起

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>css 常用属性</title>
8
    <style>
9
        .block {
10
            background-color: aqua;
11
            width: 200px;
12
            height: 100px;
13
        }
14

15
        .inline {
16
            background-color: brown;
17
            width: 200px;
18
            width: 200px;
19
        }
20

21
        .inline-block {
22
            width: 100px;
23
            height: 150px;
24
        }
25

26
        .div-inline {
27
            display: inline;
28
            background-color: aquamarine;
29
        }
30

31
        .span-inline-block {
32
            display: block;
33
            background-color: blueviolet;
34
            /* width: 300px; */
35
        }
36
    </style>
37
</head>
38

39
<body>
40
    <h1 style="font: bolder 50px 'KaiTi';">这是一个一级标题</h1>
41
    <p style="line-height: 40px;">这是一个非常非常长的文本,他没有任何作用和意义,仅仅演示行高属性的作用,以便更直观的方式来观测它的样式</p>
42

43
    <div class="block">这是一个块级元素</div>
44
    <span class="inline">这是一个行内元素</span>
45
    <img src="./生成穿女仆装的图片.png" alt="" class="inline-block">
46
    <img src="./生成穿女仆装的图片.png" alt="" class="inline-block">
47
    <img src="./生成穿女仆装的图片.png" alt="" class="inline-block">
48
    <h2>Display</h2>
49
    <div class="div-inline">这是一个转换成行内元素的div 标签</div>
50
    <span class="span-inline-block">这是一个转换为行内块元素的span 标签</span>
51

52
</body>
53

54
</html>

展开收起

CSS盒子模型#

属性:

属性名	说明
`内容(content)`	盒子包含的实际内容如文本，图片等.
`内边距(padding)`	围绕在内容内部，是内容与边框之间的空间，可以使用`padding`属性来设置
`边框(border)`	围绕在内边距的外部，是盒子的边界，可以使用`border`属性来设置
`外边距(margrin)`	围绕在边框的外部，是盒子与其他元素之间的空间，可以使用`margin`属性来设置

前端学习笔记HTML篇

Wed, 02 Sep 2026 00:00:00 GMT

HTML篇#

开发工具选择

新手阶段使用VSCODE作为开发工具安装后需要安装以下扩展:

LiveServer(网页实时预览)
HTML CSS Support
Auto Rename Tag(自动重命名对应标签)

基础知识#

HTMl(超文本语言) 结构为

html展开收起

1
<!--文档源信息-->
2
<!DOCTYPE html>
3
<html lang="en">
4
<head>
5
    <!--文档源信息-->
6
    <meta charset="UTF-8">
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
    <title>DOCMENT</title>
9
    <!--链接外部样式以及脚本-->
10
    <link rel="stylesheet" type= "text/css" href= "style.css">
11
    <script src= "script.js"></script>
12
</head>
13
<body>
14
    <!--页面内容-->
15
</body>
16
<!--其他内容-->
17
</html>

展开收起

常用的标签#

标签名	含义	标签名	含义	标签名	含义
`h1-h6`	标题标签	`table`	表格根元素	`from`	表单标签
`p`	段落标签	`tr`	行	`input`	输入标签
`b(strong)`	字体加粗	`td`	列	`label`	标记标签
`i`	斜体	`th`	表格标题
`u`	下划线	`br`	换行
`s`	删除线	`hr`	水平分割线
`ul`	无序列表	`img`	图片标签
`li`	列表元素	`div`	块级标签
`ol`	有序列表	`span`	行内元素标签

使用案例#

html

1
<!--border为table的属性,添加厚度为1的边框-->
2
    <table border=1>
3
        <tr>
4
            <th>列标题 1</th>
5
            <th>列标题 2</th>
6
            <th>列标题 3</th>
7
        </tr>
8
        <tr>
9
            <td>元素 1</td>
10
            <td>元素 2</td>
11
            <td>元素 3</td>
12
        </tr>
13
    </table>

HTML属性#

用于定义元素的行为以及外观以及其他元素的关系

语法:

1
<开始标签 属性名="属性值">

注:

每个HTML元素可以具有不同的属性,属性名不区分大小写,但属性值大小写敏感.

常见属性值#

以常见的a标签举例#

html

1
<a herf="链接地址" target="属性值">

以上内容会创建一个可点击的文本,点击后跳转herf值中的链接地址,target有以下四种属性

属性	打开位置
_self	当前页面
_blank	新标签/窗口
_parent	上一页,没有则当前页
_top	最顶层窗口，跳出全部 iframe

IMG标签#

title

1
<img src=”文件地址“ alt=”图片替代文本“ width=”100“ height=”100“>

文件地址如果图片和文件同级则直接输入文件名称如logo.png,也可以填入图片的链接地址,alt为当图片无法加载时显示的文本,后面两个属性则为设置图片的宽度和高度(像素).

HTML区块#

块元素(block)#

块元素用于组织布局页面主要结构和内容,将内容分隔成逻辑块,块元素通常会从新行开始,并占据整行的宽度,因此它们会在内容上呈现一块独立的内容块,可以包含其他块元素和行内元素.

行内元素(inline)#

用于添加文本样式和文本中的一部分应用样式,可与在文本中插入小的元素,超链文本,强调文本等.

行内元素通知在同一行呈现不会独占一行,只占据内容所需的宽度而不是整行的宽度,不能包含其他行内元素以及块元素.

标签使用#

div标签#

简介: 这是一个块级标签通常用于创建一个可以包含其他html元素的容器块,没其他语义,用创建页面布局结构

下面是创建一个导航栏和内容区域

html展开收起

1
<body>
2
<!--导航栏区域-->
3
    <div class="nav">
4
        <a href="#">链接 1</a>
5
        <a href="#">链接 1</a>
6
        <a href="#">链接 1</a>
7
        <a href="#">链接 1</a>
8
    </div>
9
<!--内容区域-->
10
    <div class="content">
11
        <h1>文章标题</h1>
12
        <p>文章标题</p>
13
        <p>文章标题</p>
14
        <p>文章标题</p>
15
        <p>文章标题</p>
16
    </div>
17
</body>

展开收起

注:

可以使用.类名快速创建含有类属性的标签

span标签#

简介<相当于没有特殊元素的a标签或者img标签>,作用是让文本使用css样式以及js行为,不会独占一行,只占用内容所需宽度,所以这是一个内联样式化文本的一个标签.

使用案例:

html

1
<span>点击此处跳转<a href="#">点击跳转</a></span>

HTML表单#

先看代码:

”html“展开收起

1
<body>
2
    <form action=”#“>
3
        <label for="account">账号:</label>
4
        <input type="text" id="account" placeholder="请输入账号"><br>
5
        <label for="pwd">密码:</label>
6
        <input type="password" id="pwd" placeholder="请输入密码"><br>
7
        <label>性别:</label>
8
        <input type="radio" name="gender">男
9
        <input type="radio" name="gender">女
10
        <input type="radio" name="gender">沃尔玛购物袋<br>
11

12
        <label>爱好</label>
13
        <input type="checkbox" name="hobby">唱歌
14
        <input type="checkbox" name="hobby">跳舞
15
        <input type="checkbox" name="hobby">RAP
16
        <input type="checkbox" name="hobby">篮球<br>
17

18
        <input type="submit" value="登录">
19
    </form>
20
</body>

展开收起

代码解析:#

表单类似于表格，最常见用于登录。这里使用 label 标签来绑定 input 标签，绑定方式为 label 的 for 属性填写 input 标签的 id。正常来说像账号这种可以明文显示，如果是密码的话可以将 input 标签的 type 属性的值改为 password，就可以切换密码密文显示。其次是 placeholder 属性，通常用于提示，如：在输入框内半透明显示请输入账号/密码等。如果我们添加 value="默认值"，则输入框会有默认填充的内容。 - type="radio"：表示这是一个单选 - type="checkbox"：表示多选 - type="submit"：通常用作登录提交按钮，使用 value="默认值" 可更改提交按钮的内容搭配 form 标签中的 action 以及后端提供的 api 来完成登录。

属性	作用说明
label for	和 input 的 id 绑定，点击文字可以选中输入框
type=“text”	明文文本输入（账号）
type=“password”	密码密文输入
placeholder	输入框灰色提示文字
value	输入框 / 按钮默认值
type=“radio”	单选框
type=“checkbox”	多选框
type=“submit”	表单提交按钮
form action	指定表单提交的后端 API 地址

注:

form标签action的属性值为url类型,需要后端提供api

结语#

以上为html部分的学习笔记,如果有错误内容请及时评论区留言,本人会第一时间修正.

我的第一篇博客

Tue, 01 Sep 2026 00:00:00 GMT

关于#

本博客用于记录以及分享日常