web前端页面

web前端三剑客：HTML、CSS、JS
一、HTML：超文本标记语言，通过尖括号的标签对文本内容标记，实现网页的主体架构
定义了网页基本框架结构和具体内容信息。
标签：尖括号表示，定义网页里的基本内容的单位元素。
例如<h1>标签表示标题，<br>标签表示换行，<a herf=""></a>表示网页链接
属性：标签的配置项，以属性名称=属性值出现。
标签分为单标签和双标签，每一个标签定义了网页里不同的内容

<br> 换行标签 单标签
<p></p> 段落 双标签

一个标签里有一个或者多个属性名称和值，多个属性之间空格间隔
一个标签有其对应的属性名称和值，多个标签可以嵌套使用
标签语法：
<标签名属性名称1="属性值1" 属性名称2="属性值2"></标签名>
<标签名属性名称="属性值" />
属性语法：
属性名称="属性值"

常见标签：

<head></head>头部标签
<title>Document</title> 主题标签
<a href="https://www.baidu.com">百度</a> 链接标签
<img src="img/https.png" alt="图片加载失败"> 图片标签
<form action="" method="get">  form表单
<input type=""> inptu标签

网页架构：头部（不显示），身体（html正文显示），足部（底部）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

重要标签：

<h1>标签表示标题，h1-h6，数字越大，字体越小
<form> 表单：
	⽤于收集⽤户输⼊并封装为 HTTP 请求。	
	method="post" ：数据传输⽅式。POST 将数据藏在请求体内，⽐ GET（拼在 URL 后）更
	安全，适合传密码；渗透测试中 GET 传参能直接在 URL 看到参数值，POST 则看不到。
 	当没有定义方法时候，默认就是Get方法
	action="/" ：按钮提交的终点（一般后端接⼝地址）。提交后将数据提交到哪里去
	补充：点击提交默认会刷新⻚⾯，JS 中常⽤ return false 阻⽌刷新。
<input> 输⼊控件：
	定义：交互式控件，功能由 type 决定。
	type="text" ：单⾏明⽂输⼊。
	type="password" ：密码掩码输⼊。
id="" html页面标签唯⼀标识：
	作⽤：⻚⾯内的某一个标签内容，必须唯⼀。JS 找元素、CSS 美化、锚点都是通过它实现。
<a> 锚链接/链接标签：
核⼼属性 href ：定义跳转⽬的地。
目的地：	写 URL（如 forget.html ）→ 跳转到别的⻚⾯。
	写 #id （如 #bottom ）→ 跳转到⻚⾯内指定位置
 	写 # → 直接回到⻚⾯顶部（⽆需 id
<img> 图⽚标签：
	特点：单标签（空元素），不需要结束标签 </img> 。
	src ：图⽚的来源路径（监控画⾯来源）。
	alt ：图⽚加载失败时显示的⽂字（故障说明）。

二、CSS：层叠式样式表
负责美化网页，负责网页的样式和美化，渲染网页的视觉效果
<style>css语句</style>
原理：通过选择器去渲染网页结构的标签内容
语法：属性名称：值的形式渲染
分为2类选择器：
第一类标签选择器
直接写标签名
作用范围：页面内所有该类型的标签，例如：

h3{
            margin-top: 20px;
     }

第二类：ID选择器，一个html里，id是唯一的，直接精确选择
通过#+id名称，直接选择页面中唯一的那个标签，例如

#forgetpassword{
            margin-top: 8px;
            color: #ff0000;
        }

当标签选择器和id选择器作用于同一个标签元素时候
优先级：id选择器> 标签选择器
第三类 class选择器
通过使用.+class名称，来选择到网页内容

<div class="box">
.box { background: #fff;}

三、JavaScrip
为网页赋予动态交互能力，响应用户的点击、输入等操作，实现网页的动态效果以及数据交互。
网页里的各种事件：
1、鼠标事件：
click：单击onclick
doubleclick 双击事件
mouseover/mouseout 鼠标进入/鼠标离开
2、键盘事件：
keydown/keyup 按键按下和松开
3、表单事件：
submit 表单提交
change 值改变切失焦
4、窗口事件：
load 页面加载完成
resize 窗口大小改变

JS中
var：申明变量，存储信息容器，其中const 定义的值是不可改变的
函数：一段功能性代码封装以完成特定的功能，通过函数名调用
JS 三⼤核⼼事件（交互触发器）

点击事件 onclick ：⿏标点击标签时触发。
例： <button onclick="alert('你好')">
聚焦事件 onfocus ：⿏标点击输⼊框，光标进⼊时触发（准备输⼊）。
例： <input onfocus="console.log('开始输⼊')">
错误事件 onerror ：图⽚或资源加载失败时触发（执⾏备⽤⽅案）。
例： <img src="错误路径.jpg" onerror="alert('加载失败')">

事件触发机制：可以是人为触发（按钮点击），也可以是浏览器触发（图片错误弹窗提示）。
浏览器触发：
<img src="https://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg" width="100px" onerror="alert('图片加载失败')">
人为触发：
<button type="submit" onclick="return checkForm()">立即验证</button><br>

四、XSS漏洞：
成因：Web 应用程序对用户输入的数据未进行严格过滤或转义，导致攻击者能够将恶意脚本（如 JavaScript、HTML 等）注入到网页中，并被浏览器执行。
XSS攻击：跨站脚本攻击。攻击者把恶意的 JavaScript 代码（如弹窗、偷取信息）伪装成正常内容，插⼊到⽹⻚中。
XSS挑战实验level1
1、观察URL：
http://127.0.0.1/xss/level1.php?name=test
发现修改参数name，页面上也会跟着变化
2、查看源代码分析
分析发现，修改参数的值会出现在html的h标签里面，尝试修改为代码
3、构造payload
将出现在html标签里的内容转为代码，看看是否执行
在一个h标签里嵌套一个script标签，执行script内的代码
<script>;alert(123);<script>

五、防御：
1、前端校验：空值校验、格式校验、验证码校验
2、后端校验：用户输入的数据再次验证，用户身份验证
3、权限控制：用户身份验证，用户操作权限限制、防止越权
4、日志记录：记录用户输入等行为信息，追踪IP等

posted @ 2026-02-07 18:54 无锋夹克阅读(3) 评论(0) 收藏举报

刷新页面返回顶部

wfjack

web前端页面

公告