Web安全基础相关知识2.0（前端三剑客）

优质文章学习记录

10 Apr 2026 — 10 min read

HTML

定义

HTML（超文本标记语言）是用来描述网页结构的标记语言。

- 它用标签（带角号标签例如<body>）来定义页面的各个部分，比如标题、段落、图片、链接等。
- HTML 本身不负责样式和交互，样式由 CSS 负责，交互由 JavaScript 负责。

基本结构

一个标准的 HTML5 页面结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>

<h1>这是一级标题</h1>
<p>这是一个段落。</p >
</body>
</html>

CSS

定义

CSS（层叠样式表）是用来描述 HTML 或 XML 文档样式的语言。

它控制网页的外观：颜色、字体、布局、间距、动画等。
CSS 与 HTML 分工明确：HTML 负责结构，CSS 负责样式。

基本语法

CSS 规则由选择器和声明块组成：

选择器 {
属性名: 属性值;
属性名: 属性值;
}

示例：

p {
color: red;
font-size: 16px;
}

- 选择器
"p"：选中所有
"<p>" 标签。
- 声明块：
"{}" 内的样式规则。
- 属性名
"color"：要设置的样式属性（文字颜色）。
- 属性值
"red"：属性的具体值。

CSS 的三种引入方式

3.1 内联样式

直接在 HTML 标签中用
"style" 属性定义样式：

<p>这是蓝色文字</p >

- 优点：优先级最高，适合临时覆盖样式。
- 缺点：难以维护，代码冗余。

3.2 内部样式表

在
"<head>" 中用
"<style>" 标签定义样式：

<head>
<style>
p {
color: green;
font-size: 16px;
}
</style>
</head>

- 优点：适合单个页面的样式管理。
- 缺点：多个页面无法共享样式。

3.3 外部样式表

将 CSS 代码保存在独立的
".css" 文件中，通过
"<link>" 标签引入：

styles.css 文件内容：

p {
color: purple;
font-size: 18px;
}

- 优点：样式可复用，便于维护和缓存。
- 推荐使用：大型项目必备。

CSS 选择器

选择器用于选中需要应用样式的 HTML 元素。

4.1 基础选择器

- 元素选择器：
"p { ... }"（选中所有
"<p>" 标签）。
- 类选择器：
".intro { ... }"（选中所有
"class="intro"" 的元素）。
- ID 选择器：
"#header { ... }"（选中
"id="header"" 的元素）。
- 通配符选择器：
"* { ... }"（选中所有元素）。

4.2 组合选择器

- 后代选择器：
"div p { ... }"（选中
"<div>" 内的所有
"<p>"）。
- 子元素选择器：
"div > p { ... }"（选中
"<div>" 的直接子元素
"<p>"）。
- 相邻兄弟选择器：
"h1 + p { ... }"（选中紧跟在
"<h1>" 后的第一个
"<p>"）。
- 通用兄弟选择器：
"h1 ~ p { ... }"（选中
"<h1>" 后的所有同级
"<p>"）。

4.3 伪类与伪元素

- 伪类：
":hover"（鼠标悬停）、
":active"（激活状态）、
":first-child"（第一个子元素）。
- 伪元素：
"::before"（在元素前插入内容）、
"::after"（在元素后插入内容）。

CSS 盒模型

每个 HTML 元素都可以看作一个矩形盒子，由四部分组成：

1. Content（内容）：元素的实际内容（文字、图片等）。
2. Padding（内边距）：内容与边框之间的空间。
3. Border（边框）：围绕内容和内边距的边界线。
4. Margin（外边距）：元素与其他元素之间的空间。

示例：

box {
width: 200px; /* 内容宽度 */
height: 100px; /* 内容高度 */
padding: 20px; /* 内边距 */
border: 5px solid black; /* 边框 */
margin: 30px; /* 外边距 */
}

总宽度 =
"width + padding-left + padding-right + border-left + border-right + margin-left + margin-right"。

CSS 布局

CSS 提供了多种布局方式，常见的有：

5.1 普通流

默认布局方式，元素按照 HTML 顺序从上到下、从左到右排列。

5.2 Flexbox（弹性布局）

适用于一维布局（行或列）：

.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

- 优点：简单易用，适合响应式设计。

5.3 Grid（网格布局）

适用于二维布局（行和列）：

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
gap: 10px; /* 网格间距 */
}

- 优点：强大的二维布局能力。

5.4 浮动（Float）

早期用于图文混排，现在逐渐被 Flexbox 和 Grid 取代：

img {
float: left; /* 图片左浮动 */
margin-right: 10px;
}

5.5 定位（Position）

控制元素的位置：

"static"：默认值，正常流。
"relative"：相对定位，相对于自身原位置偏移。
"absolute"：绝对定位，相对于最近的定位祖先元素。
"fixed"：固定定位，相对于浏览器窗口。
"sticky"：粘性定位，滚动时在阈值范围内固定。

CSS 响应式设计

让网页在不同设备上自适应显示：

6.1 媒体查询

根据屏幕尺寸应用不同样式：

/* 默认样式（手机） */
.container {
width: 100%;
}

/* 平板及以上 */
@media (min-width: 768px) {
.container {
width: 750px;
}
}

/* 桌面及以上 */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

6.2 相对单位

"%"：相对于父元素尺寸。
"em"：相对于当前元素字体大小。
"rem"：相对于根元素（
"<html>"）字体大小。
"vw/vh"：相对于视口宽度/高度的 1%。

CSS 预处理器（Sass/SCSS）

CSS 预处理器扩展了 CSS 的功能，如变量、嵌套、混合等：

// 变量
$primary-color: #007BFF;

// 嵌套
.nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
color: $primary-color;
&:hover {
color: darken($primary-color, 10%);
}
}
}
}
}

编译后会生成标准 CSS。

CSS 动画与过渡

1. 过渡

平滑改变属性值：

.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}

2. 动画

定义关键帧动画：

@keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}

.element {
animation: slidein 0.5s ease-out;
}

CSS 最佳实践

1. 语义化 HTML：用合适的标签表达内容结构。
2. 分离关注点：HTML 负责结构，CSS 负责样式，JS 负责交互。
3. 命名规范：使用 BEM（Block__Element--Modifier）等方法提高可读性。
4. 性能优化：减少重排（reflow）和重绘（repaint），压缩 CSS 文件

JavaScript

定义

JavaScript（简称 JS）是一种脚本语言，主要用于为网页添加交互功能。

- 与 HTML（结构）、CSS（样式）并列，是前端开发的三大核心技术之一。
- 现在也可用于后端开发（Node.js）、移动端开发（React Native）、桌面应用（Electron）等。

JavaScript 的三种引入方式

2.1 内联脚本

在 HTML 标签中直接使用
"onclick" 等事件属性：

- 缺点：难以维护，不推荐大量使用。

2.2 内部脚本

在
"<script>" 标签中编写 JS 代码：

2.3 外部脚本

将 JS 代码保存在
".js" 文件中，通过
"<script src="app.js"></script>" 引入：

- 优点：代码分离，便于维护和缓存。

JavaScript 基础语法

3.1 变量与常量

-
"let"：可变变量（块级作用域）。
-
"const"：不可变常量（块级作用域）。
-
"var"（旧版，不推荐）：函数作用域，容易引发问题。

let name = 'Alice';
const age = 25;

3.2 数据类型

- 原始类型：
"string"、
"number"、
"boolean"、
"null"、
"undefined"、
"symbol"（ES6）、
"bigint"（ES2020）。
- 引用类型：
"object"（包括数组、函数等）。

let str = "Hello";
let num = 42;
let isDone = true;
let obj = { key: "value" };
let arr = [1, 2, 3];

3.3 运算符

- 算术："+"、"-"、"*"、"/"、"%"、"**"（幂）
- 比较："=="（宽松相等）、"==="（严格相等）、"!="、"!=="、">"、"<"
- 逻辑："&&"（与）、"||"（或）、"!"（非）。

流程控制

4.1 条件语句

if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}

4.2 循环语句

// for 循环
for (let i = 0; i < 5; i++) {
console.log(i);
}

// while 循环
let j = 0;
while (j < 5) {
console.log(j);
j++;
}

5. 函数

函数是可重复使用的代码块。

5.1 函数声明

function greet(name) {
return "Hello, " + name;
}
console.log(greet("Bob")); // Hello, Bob

5.2 箭头函数

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

6. 对象与数组

6.1 对象

let person = {
name: "Alice",
age: 25,
sayHi: function() {
console.log("Hi, I'm " + this.name);
}
};
person.sayHi(); // Hi, I'm Alice

6.2 数组

let fruits = ["apple", "banana", "orange"];
fruits.push("grape"); // 添加元素
console.log(fruits[1]); // banana

7. DOM 操作（前端核心）

DOM（Document Object Model）是 HTML 文档的对象表示，JS 可以通过 DOM API 操作页面元素。

7.1 选择元素

let title = document.getElementById("title");
let items = document.querySelectorAll(".item");

7.2 修改内容

title.textContent = "新标题";
title.style.color = "red";

7.3 事件监听

let btn = document.querySelector("button");
btn.addEventListener("click", function() {
alert("按钮被点击");
});

前端开发常见代码

1. HTML 基础结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>网站标题</h1>
</header>
<main>
<p>这是一个段落。</p >
</main>
<footer>
<p>版权 © 2026</p >
</footer>
<script src="app.js"></script>
</body>
</html>

2. CSS 常用样式

/* 重置默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}

.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}

.btn {
display: inline-block;
padding: 10px 20px;
background: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}

.btn:hover {
background: #0056b3;
}

3. JavaScript 基础

// 获取元素
const btn = document.querySelector('.btn');
const output = document.getElementById('output');

// 事件监听
btn.addEventListener('click', () => {
output.textContent = '按钮被点击了！';
});

// 定时器
setTimeout(() => {
console.log('3秒后执行');
}, 3000);

// 数组操作
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]