Web前端安全基础
本文摘要：本文系统介绍了Web开发的核心技术体系，包括客户端/服务器架构、前端三件套(HTML/CSS/JavaScript)和后端基础知识。重点讲解了HTML文档结构、表单元素等网页基础；CSS选择器和样式控制；JavaScript变量、函数、事件处理等编程基础；以及DOM树操作等动态交互实现。内容涵盖从网页结构搭建到前端交互开发的完整知识链，特别强调了表单作为前后端数据交互的核心安全关注点，为
目录
2. HTML（HyperText Markup Language -- 超文本标记语言）
3. CSS（Cascading Style Sheets -- 层叠样式表）
1. 客户端、服务器、前端、后端
1.1 核心概念与联系
- 客户端（Client）： 指用户直接使用的设备或软件，是与用户交互的“入口”
- 前端（Frontend）： 属于客户端的“表面层”，负责用户能看到、摸到的界面和交互
（常用 Web 前端语言有 HTML、CSS、JavaScript）
- 服务器（Server / Web服务器）： 指驻留于因特网上某种类型计算机的程序 。它负责处理浏览器等 Web 客户端的请求并返回相应响应 ，同时可以放置网站文件供全世界浏览，或放置数据文件供下载
- 后端（Backend）： 属于服务器的“内层”，负责“幕后”的逻辑处理和数据管理，用户看不到但离不开
- 数据库（Database）： 负责后台数据的规范化持久存储
1.2 两层 B/S 架构与联系
Web（万维网）的组成构建主要包括客户端（前端）、服务器（后端）以及数据库
用户通过前端操作发出请求（Request），通过网络发送给 Web 服务器，后端处理后通过网络返回响应（Response）给浏览器进行渲染展示
1.3 Web 开发框架简介
- 定义与作用： 用于支持动态网站、网络应用和网络服务的开发软件框架 。它简化并加速了 Web 应用的开发过程，能提高开发效率、简化流程、增强安全性，并促进团队协作及代码复用
- 前端框架代表：Angular（由 Google 开发并维护，主要用于构建动态 Web 应用程序）
- 后端框架代表：Yii（基于 PHP 的高性能 Web 开发框架）
2. HTML（HyperText Markup Language -- 超文本标记语言）
2.1 概念与本质
HTML 不是一门真正意义上的编程语言，而是一种标记语言，它通过带有尖角号的标签对文本进行标记，从而实现网页结构的搭建
2.2 基本结构
当网页被加载时，完整的 HTML5 文档必须遵循以下标准骨架 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里可以放内容</title>
</head>
<body>
</body>
</html>2.3 基本语法
- 标签语法： 标签必须书写在成对的尖括号
<>内部
-
- 双标签： 由开始和结束两个标签符号组成，语法为
<标签名>内容</标签名>
- 双标签： 由开始和结束两个标签符号组成，语法为
（如 html, head, body, div, p） 。结束标签必须要有关闭符号 /
-
- 单标签： 用一个标签符号即可完整描述某个功能，语法为
<标签名 属性名="属性值"/>
- 单标签： 用一个标签符号即可完整描述某个功能，语法为
（如 br, hr, img, input, link, meta）
- 属性语法： 属性是赋予标签特殊职能的键值对 ，必须放在开始标签或单标签的标签名后面，以空格隔开 。
写法为 属性名="属性值"。多个属性之间用空格隔开
- 标签级别（补充提升）：
-
- 容器级标签： 元素内部除文本外，还可以嵌套其他标签
（如 div, ul, ol, dl, table, h1~h6）
-
- 文本级标签： 元素内部只能存放文本或文本级标签
（如 span, p, img, input, a）
2.4 基本标签
- 标题标签：
<h1>标题</h1>到<h6>标题</h6>
一共六级，均为双标签、容器级，权重比别的标签高
- 段落标签：
<p>第一个段落</p>
双标签、文本级，用于添加完整段落的语义
- 超链接（锚点）：
<a href="URL" target="_blank" title="提示">显示文字</a>
-
href（超文本引用）：指定跳转的位置，可以是绝对路径（网址）或相对路径 。
页面内跳转时，href 后面加 #id名 可实现页面内锚点跳转
-
target="_blank"：作用是让链接在新的标签页中打开title：鼠标移上文字之后的悬停文本提示
- 图片（单标签）：
<img src="图片路径" alt="替换文本" />
-
src引入图片的路径 ；alt为图片加载不出来时的替换文本
- 换行标签：
<br>，单标签，强制文本换行 - 特殊字符实体（补充）： 替换键盘打不出或会被 HTML 误识别的符号
-
- 空格：
； - 小于号（
<）：<； - 大于号（
>）：>
- 空格：
规定必须以 & 开头，; 结尾
2.5 表单标签与表单元素（★网安学习输入点核心★）
表单是网页中提供用户进行点击或输入的控件，是前端与后端交互传输数据的核心载体
<form>标签（容器标签）：<form action="提交位置" method="提交方法">
-
action：指定数据提交的位置（后端接口地址）method：数据提交的方法，属性值通常是get或post
<input>标签（单标签）： 通过type属性拓展不同的输入功能
-
- 单行文本框：
<input type="text" placeholder="占位符提示文字"> - 密码框：
<input type="password" placeholder="请输入密码">，输入后通过掩码形式加密遮蔽显示 - 单选框：
<input type="radio" name="sex">，必须设置相同的name属性才能实现多选一的互斥效果 - 复选框：
<input type="checkbox" name="hobby">，多选框，同一组建议设置相同name - 默认选中属性：给单选或复选框添加
checked="checked"可实现默认选择 - 提交按钮：
<input type="submit" value="登录">，用于将表单数据打包发送给后端
- 单行文本框：
3. CSS（Cascading Style Sheets -- 层叠样式表）
3.1 概念与基础语法
CSS 是一种用来表现 HTML 样式的计算机语言，能够对网页中元素的位置排版进行精确描述（包括字体、颜色、大小、背景等效果）
- CSS 语法结构：
选择器 { 属性名: 属性值; 属性名: 属性值; }
样式属性和值写在大括号 {} 内部，以键值对形式呈现
3.2 CSS 基础选择器
- 元素选择器（标签选择器）： 根据标签名称匹配
语法：标签名 {}（如 p {}, div {}）
- ID 选择器： 根据标签的
id属性匹配。每个 ID 在页面中必须是唯一的
语法：#id值 {}
定义时前缀用到井号 #，后面紧跟 ID 属性值
- 类选择器（Class选择器）： 根据标签的
class属性匹配，类名可以多次复用在多个元素上
语法：.class值 {}
定义时前缀用到英文句号 ., 后面紧跟类名
3.3 常用样式属性
- 尺寸样式： 宽度
width: 100px;，高度height: 100px;（块状元素生效） - 背景样式： 背景颜色
background: red;或background-color: blue; - 文本样式： 字体颜色
color: red; - 字体样式： 文字大小
font-size: 100px;
4. JS（JavaScript）
4.1 概念与特征
JavaScript 是一种轻量级、解释型或即时编译型的高级编程语言
它主要作为客户端脚本语言嵌套在网页中，负责行为层，用来给网页添加动态交互效果
4.2 JS 的三大部分组成
JavaScript 通常由以下三个部分核心组成 ：
- 核心（ECMAScript）： 由欧洲计算机协会定制的语法规范，是“怎么写代码”的底层规则
- 文档对象模型（DOM）： Document Object Model，将网页构造为对象的树，是“怎么操控和修改网页内容”的工具
- 浏览器对象模型（BOM）： Browser Object Model，是“怎么控制浏览器行为”的接口工具
4.3 JS 注释与基本输出语句
- JS 注释：
-
- 单行注释：使用双斜杠
// 注释内容 - 多行注释：使用
/* 注释内容 */
- 单行注释：使用双斜杠
- 基本输出语句：
-
alert()警告框： 浏览器自带的内置函数，主要作用是在浏览器正上方弹出一个警示框document.write()文档写： 直接向 HTML 文档输出、写入内容
5. 变量与数据类型基础
5.1 变量的基本使用
变量可以理解为一个承载数据的容器 。使用变量时严格遵循以下三步规范 ：
- 声明： 使用关键字
var声明变量
语法：var userName;
- 赋值： 使用等号
=赋值运算符将固定数值或计算结果装载进变量
语法：userName = "小明";
- 使用： 直接通过访问变量名字获取其存储的数值内容
语法：alert(userName);
5.2 核心数据类型（补充）
在 JS 世界中，书写的数据拥有严格的类型划分（5 个基本数据类型，1 个引用类型） ：
- 基本数据类型：
-
String（字符串，外层必须加单/双引号包裹，控制台打印为黑色）Number（数字类型，包含整数和小数，控制台打印为蓝色）Boolean（布尔值true/false）Undefined（未定义，变量声明但未赋值时的初始值）Null（空对象指针类型）
- 引用数据类型：
-
Object（包含函数、数组、JSON 以及接下来要操作的 DOM/BOM 元素对象）
6. 函数 function
6.1 函数的概念与本质
函数（function）就是将某一个常用的功能、代码块进行封装
当需要使用这个特定功能的时候，直接选择调用并执行该功能即可 。函数在 JS 当中本质上属于 Object 引用数据类型
6.2 关键字形式函数的规范
使用关键字 function 定义和使用函数分为明显的两部分 ：
- 1. 声明（定义）函数：
function 函数名() {
// 大括号内部（结构体）书写封装的代码、常用的功能
}- 2. 调用（执行）函数：
语法：函数名();
7. 事件 event 与 DOM 树操作
7.1 事件（Event）概念
JavaScript 中的事件是指发生在 HTML 文档或浏览器窗口中，能够被 JS 侦测到的交互行为或其他动作
- 常见动作：
-
- 用户的操作（如鼠标点击按钮
onclick、移动鼠标、按键等） - 系统行为（页面加载、滚动等）
- 用户的操作（如鼠标点击按钮
- 响应机制：
只有标签（节点）才可以绑定事件
绑定语法格式：element.onxxxx = function() { //触发时执行的代码 }
7.2 JS 对象（Object）概念
JavaScript 是一种基于对象的编程语言
对象是具备特定性质的复合体，主要由两部分组成 ：
- 特征 / 属性： 静态的性质（在 JS 中通过点语法属性名访问属性值）
- 行为 / 方法： 动态的功能（在 JS 中方法后面一定要加上小括号
()执行）
7.3 文档对象模型（DOM）树结构
当网页被加载时，浏览器会自动创建页面的文档对象模型（HTML DOM） 。DOM 模型在底层被构造为对象的树（节点树）
DOM 树的最外层根元素元素对象是内置引用类型的 document 对象，可以用它来操作和控制网页上的所有HTML 标签
7.4 DOM 获取元素与属性操作
在 JavaScript 当中操作、修改 HTML 文档时，必须要遵循"先获取元素，后操作属性"的原则：
- 通过 ID 获取标签元素： 使用
document.getElementById('id属性值')方法
无论标签在网页中的嵌套关系多么复杂，都可以通过这个方法直接获取到目标节点对象
代码演示示例：
// 1. 获取文档中 id 为 p1 的段落标签元素
var myElement = document.getElementById("p1");
// 2. 利用点语法获取或动态修改标签的属性值
console.log(myElement.id); // 获取当前节点的 id 属性值
// 3. 动态控制非表单标签的文本内容
myElement.innerHTML = "文本已被 JS 动态修改啦！"; // 修改非表单元素的文本内容
openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构
更多推荐
24
0- 0
已为社区贡献1条内容
所有评论(0)