第一阶段:HTML结构
1.核心概念
- HTML(超文本标记语言):网页的“骨架”。它定义了网页的层级结构和内容分类(如标题、段落、列表等)，只负责“有什么”，不负责“长什么样”。
就像是代码的“语法”一样，标签基于此结构构成代码。 - 标签(Tag):HTML代码的基本单位，用于定义特定元素。
例如<h2>定义标题，<a>定义链接。就好似“成语”一样决定一篇文章角色的性格，也可以链接一段“故事”。 - 属性(Attribute):标签的“配置项”。以“名称-值”对的形式存在，定义元素的行为或特征。如
id是唯一标识(门牌号)，src是资源路径。
就像“数学里的x=1”一样，比如：“<img src="logo.png" alt="系统logo">”就是“图片插入，资源路径=logo.png，替代文本=系统logo”,翻译成白话文就是在说“插入一个图片，这个图片的位置在logo.png,未找到则替换成系统logo”。
2.标签知识点
<h2>语义化标题： 定义：⼆级标题（数字越⼤字体越⼩，h1最⼤，h6最⼩）。<form>表单容器：
- 定义：⽤于收集⽤户输⼊并封装为 HTTP 请求。
例如：“<form id="loginForm" action="/" method="post">”就是“表单容器，标识符=登录表单，提交地址=网站根目录，提交方式=post”，翻译成白话文就是在说“在这个表单容器里，当有人操作标识符‘登录表单’输入并提交时，输入的信息会发送到后端URL的网站根目录，发送时不显示”。 method="post"：数据传输⽅式。POST 将数据藏在请求体内，⽐ GET（拼在 URL 后）更安全，适合传密码；渗透测试中 GET 传参能直接在 URL 看到参数值，POST 则看不到。action="/"：提交的终点（后端接⼝地址）。- 补充：点击提交默认会刷新⻚⾯，JS 中常⽤
return false阻⽌刷新。
<input>输⼊控件：
- 定义：交互式控件，功能由 type 决定。
例如：“⽤户名: <input type="text" id="username" placeholder="请输⼊⽤户名">”就是“⽤户名: 框，框的类型=文本输入，标识符=操作这个输入框，占位提示=‘请输⼊⽤户名’”，翻译成白话文就是在说“用户名：<生成一个框，框的类型为文本输入，生成标识符‘操作这个输入框’，当输入框为空时显示‘请输入用户名’>” type="text"：单⾏明⽂输⼊。type="password"：密码掩码输⼊（防偷看）。
id="username"唯⼀标识： 作⽤：⻚⾯内的**“⻔牌号”**，必须唯⼀。JS 找元素、CSS 美化、锚点跳转全靠它。<a>锚链接/链接标签：
- 核⼼属性
href：定义跳转⽬的地。
例如：“<a href="forget.html">忘记密码</a>”就是“<连接，目标地址=forget.html>忘记密码<结束标签>”简单说就是“生成‘忘记密码’连接显示文本，点击跳转到forget.html” - 核⼼⽤法：
写URL(如forget.html)一跳转到别的页面。
写#id(如#bottom)一>跳转到页面内指定位置。
写#-->直接回到页面顶部(无需id)。
<img>图片标签
- 特点:单标签(空元素)，不需要结束标签
</img>。 Src:图片的来源路径(监控画面来源)。alt:图片加载失败时显示的文字(故障说明)。
第⼆阶段：JavaScript
1. 核⼼概念
- 变量(Variable):存储信息的“容器”。
语法:var name = "xiaolin";或const age = 18;(const 定义的值不可修改)。第一个语法意思为：变量，变量名=xiaolin;第二个语法意思为：常量，常量名=18。 - 函数(Function):封装好的“代码盒子”。
定义后不会自动运行，必须通过函数名()调用才会执行。 - DOM定位:
JS通过document.getElementById("id名")指令，利用id(门牌号)精准找到页面中的标签。该指令意思为：网页文档.获取ID为("id名").value:专门用于获取**输入框(input)**里用户填写的内容，渗透中看页面传参，优先找带.value的输入框，是传参核心载体。
2.JS三大核心事件(交互触发器)
- 点击事件
onclick：⿏标点击标签时触发。 例：<button onclick="alert('你好')">注释：button可点击按钮 - 聚焦事件
onfocus：⿏标点击输⼊框，光标进⼊时触发（准备输⼊）。 例：<input onfocus="console.log('开始输⼊')"> - 错误事件
onerror：图⽚或资源加载失败时触发（执⾏备⽤⽅案）。 例：<img src="转存失败，建议直接上传图片文件 错误路径.jpg" onerror="alert('加载失败')" alt="转存失败，建议直接上传图片文件">
第三阶段：CSS 美化
1. 核⼼概念
- CSS(层叠样式表):网页的**“皮肤”。不关心逻辑，只关心颜色(color)、位置(position)、大小和可见性**。
- 工作原理:通过选择器找到标签，然后设置样式属性。
2.两大核心选择器
- 元素选择器(标签选择器):
- ID选择器(精准选择器)：
HTML+JS+CSS 合体:CSS：HTML：负责⻣架+JS：负责逻辑+负责化妆
拓展：XSS注入
1.什么是XSS?
- 定义：跨站脚本攻击。攻击者把恶意的 JavaScript 代码（如弹窗、偷取信息）伪装成正常内容，插 ⼊到⽹⻚中。
- 特点：
借刀杀人：攻击者不直接攻击用户，而是利用有漏洞的网页作为跳板，让网页自己 “坑” 用户；
利用输入漏洞：只发生在网页有「用户输入 + 无防护展示」的场景（比如评论区、URL 参数、昵称输入框）；
用户无感知：执行脚本的过程在浏览器后台完成，用户只是正常打开网页，完全不知道自己被攻击了。 - 原理：⽹站没有过滤⽤户的输⼊，直接把⽤户输⼊的内容当作“⽂本”显示在⻚⾯上。如果⽤户输⼊ 的是“代码”，浏览器就会把它当成代码执⾏。
2.攻击演示步骤
- 第一步:观察环境
- 第二步:分析骨架(F12查看源码)
- 第三步:构造Payload(攻击代码)
- 实战结果：
