web前端基础知识

一、Web 前端三剑客：网页的骨架、皮肤、灵魂

网页能展示、能交互、能美化，全靠HTML+CSS+JavaScript配合，它们各司其职、缺一不可。

1. HTML：网页的骨架（结构层）

HTML 全称超文本标记语言 ，只负责定义网页有什么内容，不负责美观，就像盖房子的钢筋骨架。

核心知识点

标签：HTML 基本单位，比如<h2>标题、<a>链接、<img>图片、<form>表单
属性：标签的配置项，比如id唯一标识、src资源路径、href跳转地址
表单关键 ：method="post"比get更安全，数据藏在请求体，不会暴露在 URL 里

实战：登录页基础结构

复制代码

<h2>系统登录</h2>
<form id="loginForm" action="/" method="post">
  用户名：<input type="text" id="username" placeholder="请输入用户名">
  <br><br>
  密 码：<input type="password" id="password" placeholder="请输入密码">
  <br><br>
  <button id="loginBtn" type="submit">提交登录</button>
</form>

2. CSS：网页的皮肤（样式层）

CSS 全称层叠样式表 ，专门管网页长什么样，负责颜色、大小、位置、布局，给骨架 "穿衣服"。

两大核心选择器

元素选择器 ：直接写标签名，选中所有同类标签
复制代码
```
h2 { color: red; text-align: center; }
```
ID 选择器 ：#id名，精准选中唯一标签，优先级更高
复制代码
```
#loginBtn { padding: 5px 15px; color: blue; }
```

3. JavaScript：网页的灵魂（交互层）

JS 负责交互和逻辑，让网页 "活起来"，比如点击事件、输入校验、弹窗提示。

核心概念

变量：存储数据的容器，var/const定义
DOM 定位 ：document.getElementById("id名")精准找元素
三大核心事件
- onclick：鼠标点击触发
- onfocus：输入框聚焦触发
- onerror：资源加载失败触发

实战：前端登录过滤

复制代码

function checkInput() {
  // 获取输入框内容并去除空格
  var uname = document.getElementById('username').value.trim();
  var pwd = document.getElementById('password').value.trim();
  
  // 为空则提示并阻止提交
  if (uname === "") {
    alert('用户名不能为空！');
    return false;
  }
  if (pwd === "") {
    alert('密码不能为空！');
    return false;
  }
  return true;
}

二、前端安全必知：XSS 注入攻击到底是什么？

前端校验防君子不防小人 ，最常见的漏洞就是XSS 跨站脚本攻击，新手必须懂原理和防御。

1. 什么是 XSS？

跨站脚本攻击 ：攻击者把恶意 JS 代码伪装成正常内容，插入网页。原理：网站未过滤用户输入，直接把代码当文本渲染，浏览器就会执行恶意脚本。

2. 最简单的 XSS 攻击演示

观察环境 ：URL 带参数http://xss/level1.php?name=test，页面显示Hello test
查看源码 ：test直接嵌入<h2>Hello test</h2>
构造 Payload ：?name=<script>alert(1)</script>
结果：页面弹窗，代码执行，XSS 漏洞触发

3. XSS 有多危险？

窃取用户 Cookie、Session、Token
伪装用户登录，无需密码入侵账号
查看隐私、发送诈骗信息、盗刷转账

4. 新手必学：XSS 防御方法

输出转义 ：把<、>等危险字符转成 HTML 实体，让代码变普通文本
永不信任用户输入 ：前端校验只是第一道门，后端必须二次校验
权限控制 + 日志记录：双重保障，防止越权与恶意操作

三、总结：前端入门 + 安全避坑

HTML ：搭结构，表单用post更安全
CSS：做美化，ID 选择器精准控制
JS：管交互，前端校验易被绕过，别依赖
安全核心 ：前端是展示层，安全靠后端，XSS 靠转义 + 过滤防御