从零学网络安全 - Web 技术核心与安全风险（二）前端 HTML、CSS、JavaScript
一、Web 前端三剑客（HTML/CSS/JS）
1. HTML
HTML（hyper text markup language）译为超文本标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构。
HTML 基本语法：通常有两种
- <标签名 属性名="属性值" 属性名="属性值"> </标签名>
- <标签名 属性名="属性值" />
HTML 入门级常用标签
- <h1>：语义化标题，由 h1 至 h6。
- <form>：表单容器，⽤于收集⽤户输⼊并封装为 HTTP 请求。
- method="post" 比 get 方式更安全，post 将数据藏在请求体内，get 传参能直接在 url 看到参数值。
- <input> ：输⼊控件，功能由 type 决定。
- id="username"：唯⼀标识，JS 找元素、CSS 美化、锚点跳转全靠它。
- <a>：超链接，由核⼼属性 href 来定义跳转目标。
- <img> ：图⽚标签，是个单标签，无需结束标签 </img>。
2. CSS
CSS （Cascading Style Sheets）负责网页的视觉呈现，包括颜色、大小、位置、视觉效果等等。
CSS基本语法
如果单独使用CSS文件：
选择器 {
属性1: 值1;
属性2: 值2;
/* 注意：一行声明结束必须加分号，最后一行可省略但建议加上 */
}
示例：
/* 示例1：为所有
标签设置样式 /
p {
color: red; / 文字颜色为红色 /
font-size: 16px; / 字体大小16像素 /
line-height: 1.5; / 行高1.5倍 */
}
/* 示例2：为class="box"的元素设置样式 /
.box {
width: 200px; / 宽度200像素 /
height: 100px; / 高度100像素 /
background: #eee; / 背景色浅灰色 */
}
/* 示例3：为id="title"的元素设置样式 /
#title {
font-weight: bold; / 文字加粗 /
text-align: center;/ 文字居中 */
}
如果直接在 html 的 <head> 标签内使用，可以用<style> </style>标签：
CSS 简单美化示例：
美化前：
美化后：
3. JavaScript
JS 为网页赋予动态交互能力（如响应用户点击、输入等操作），实现页面动态效果与数据交互。
JavaScrip 常见事件
- 鼠标事件：
- click：单击元素
- dblclick：双击元素
- mouseover/mouseout：鼠标进入 / 离开
- 键盘事件：
- keydown/keyup：按键按下 / 松开
- 表单事件：
- submit：表单提交
- change：值改变且失焦
- 窗口事件：
- load：页面加载完成
- resize：窗口大小改变
二、Web 前端安全风险与防御
1. XSS 漏洞
XSS 攻击的核心成因是Web 应用程序对用户输入的数据未进行严格过滤或转义，导致攻击者能够将恶意脚本（如 JavaScript、HTML 等）注入到网页中，并被浏览器执行。
xss 攻击演示
有这么一个页面，地址为
右键检查源码，可以看到 test 被直接插⼊到了 <h2> 标签中间
我们修改url，把 'name=test' 改成 'name=<script>alert(1)</script>'
即可顺利完成跳转
2. XSS防御手段
输出转义：让代码变普通文本
例如，用户输入 <script>alert('hack')</script> 后，服务器自动将危险字符 '<' 和 '>' 转义，变成 <script>alert('hack')</script> ，浏览器就会显示没有找到和<>相关结果。
