Web开发的基本技术1

W高校计算机专业课程Web开发的基本技术高校计算机专业·前端开发入门课程系统掌握现代Web核心技术栈TITLEPAGE01前端开发入门CONTENTS课程目录七大模块·从基础到工程化的完整学习路径01Web发展简史从ARPANET到万维网的关键里程碑；Web标准演进与开放生态形成02HTTP协议基础请求响应模型与核心方法语义；HTTP/1.1到HTTP/3的性能跃迁03HTML5语义化语义标签的正确使用与常见误用；可访问性与SEO的结构化基础04CSS3布局与响应式Flexbox与Grid的适用场景对比；移动优先与断点设计实战要点05JavaScript核心ES6+关键特性与异步编程模型；DOM操作与事件机制精要06浏览器原理与性能渲染流水线与重排重绘优化；CoreWebVitals指标解读07前后端协作与工程化RESTfulAPI设计与安全基础；构建工具链与CI/CD实践循序渐进·理论结合实践CHAPTER01Web发展简史从学术网络到全球信息平台从学术网络到全球信息平台HISTORYWeb的诞生：三大基石HTML·HTTP·Browser—超文本系统的工程化落地Web并非凭空出现，而是为解决科研机构信息共享难题而生的系统工程。HTML、HTTP与浏览器三者协同，才让超文本从理论变为可用平台。1989超文本构想提出TimBerners-Lee提交《InformationManagement:AProposal》，首次提出基于超文本的全球信息系统构想，获CERN批准启动开发。1990三大基石同步诞生首个Web服务器与WorldWideWeb浏览器完成，同步定义了HTML标记语言与HTTP传输协议，实现文档创建、链接跳转与远程获取闭环。1993Mosaic引爆普及NCSA发布Mosaic浏览器，支持图文混排显示，大幅降低使用门槛；同年CERN将WWW技术置于公有领域，为爆发式普及扫清法律障碍。Mosaic浏览器界面（1993）——首个支持图文混排的Web浏览器HTML定义结构·HTTP规定通信·浏览器负责渲染WWEB开发基本技术STANDARDSWeb标准：开放协作的基石W3C·WHATWG·ECMA—OpenStandardsfortheWebWeb标准不是某家公司的私有协议，而是由W3C、WHATWG、ECMA等组织通过多方协商制定的开放规范，保障了跨平台兼容与长期可维护性。W3C与WHATWG分工W3C主导CSS、Accessibility等标准，推动Web平台整体能力扩展；WHATWG专注HTMLLivingStandard，以持续迭代取代版本号模式。两者在HTML规范上曾有分歧，2019年达成合作备忘录，统一以WHATWG版本为准，结束长达十年的双轨并行局面。HTML5LivingStandardECMA与JavaScript标准化ECMAInternational负责ECMAScript标准（即JavaScript语言规范），自ES6(2015)起改为年度发布，确保语言特性稳定演进。TC39委员会采用提案四阶段流程（Stage0-4），社区反馈与厂商实现充分验证后才纳入正式标准，避免激进变更破坏现有代码。TC39Stage0Stage1Stage2Stage3Stage4MILESTONESWeb发展关键里程碑从静态文档到现代应用的三十年演进之路Web演进是技术突破与社会需求共振的结果：从静态文档到动态应用，从桌面专属到移动优先，每次跃迁都由底层协议、语言能力和用户行为共同驱动。010203041993Mosaic浏览器发布首个支持内嵌图片的图形化浏览器，使Web从纯文本学术工具转变为大众媒体，用户数两年内破百万。1995JavaScript诞生BrendanEich用10天设计出LiveScript，后更名JavaScript，赋予网页客户端交互能力，奠定动态Web基础。2004Ajax概念提出JesseJamesGarrett命名异步更新模式，Gmail等应用证明无需刷新即可实现复杂交互。2015ES6与HTTP/2let/const、箭头函数、Promise与二进制分帧、多路复用协议升级，标志现代Web技术栈全面成熟。每次跃迁都是前序技术积累与用户需求倒逼的共同结果——浏览器降低门槛、JS赋予交互、Ajax消灭刷新、ES6+HTTP/2奠定现代基石CHAPTER02HTTP协议基础Web通信的规则与演进理解HTTP，才能理解Web如何工作HTTPProtocolHTTP请求-响应模型无状态协议·请求驱动·可扩展架构HTTP采用无状态的请求-响应范式：客户端主动发起请求，服务器被动响应；每次交互独立，不依赖前序状态。这一简单模型支撑了Web的可扩展性与缓存机制。请求的四要素方法（Method）定义操作语义：GET获取、POST创建、PUT全量更新、PATCH局部修改、DELETE删除；方法选择直接影响缓存、幂等性与安全性。URL定位资源，Headers传递元信息（如Accept、Authorization），Body承载数据（仅POST/PUT/PATCH常用）；四者组合构成完整意图表达。GETPOSTPUTPATCHDELETE响应的三层结构状态码三位数字编码结果：2xx成功、3xx重定向、4xx客户端错误、5xx服务端错误；精准的状态码是自动化处理与错误诊断的基础。响应头声明内容类型、缓存策略、安全指令等；Body返回实际数据（HTML/JSON/二进制）；浏览器依据头部决定如何解析与渲染内容。2xx成功3xx重定向4xx客户端5xx服务端WWeb开发基础HTTPMETHODSHTTP方法语义与特性MethodSemantics&PropertiesHTTP方法不仅是动词，更是契约：其语义、幂等性与安全性共同定义了客户端与服务端的交互规则，误用会导致缓存失效、数据重复或安全漏洞。五大HTTP方法对比方法语义幂等安全典型用途GET获取资源表示✓✓查询列表/详情POST创建新资源或触发处理✗✗提交表单/上传文件PUT全量替换目标资源✓✗更新完整对象PATCH部分修改目标资源✗*✗更新单个字段DELETE删除指定资源✓✗移除数据NOTE*PATCH理论上可设计为幂等（如JSONPatch），但实践中通常视为非幂等；安全方法仅GET/HEAD，其余均可能修改服务器状态。幂等性指多次执行效果相同：GET/PUT/DELETE是幂等的，POST不是。安全性指不修改服务器状态：仅GET和HEAD是安全的。HTTP/1.1→HTTP/2：性能革命PerformanceRevolutionHTTP/2不是小修小补，而是从文本协议重构为二进制分帧层，通过多路复用、头部压缩和服务器推送三大机制，将Web性能提升至新量级。HTTP/1.1的瓶颈Bottlenecks01队头阻塞即使启用管道化，响应仍须按序返回；一个慢请求阻塞后续所有请求，迫使浏览器开6-8个TCP连接并发，增加握手开销。02头部冗余每个请求携带完整Cookie/User-Agent等头部，移动端弱网下头部占比可达30%以上，浪费带宽且延长首屏时间。HTTP/2的突破Breakthroughs01多路复用单TCP连接上并行传输多个请求/响应流，互不阻塞；连接数降至1个，TLS握手与拥塞控制开销大幅降低。02HPACK头部压缩+服务器推送动态表消除重复头部；服务器预判客户端所需资源主动推送，减少RTT；实测页面加载提速30%-50%。PROTOCOLHTTP/3：QUIC驱动的下一代协议QUIC·UDP·零队头阻塞HTTP/3将传输层从TCP切换至QUIC（UDP），从根本上消除TCP队头阻塞，并带来更快的连接建立与更强的网络适应性，是移动时代的必然演进。QUIC多路复用QUIC在UDP上实现可靠传输与多路复用：每个流独立重传，丢包只影响单个流而非整个连接；彻底解决TCP层的队头阻塞问题。0-RTT连接建立QUIC整合TLS1.3握手，首次连接1-RTT，后续连接0-RTT即可发送数据；相比TCP+TLS的3-RTT显著降低延迟。连接迁移通过ConnectionID标识会话，IP或端口变化（如WiFi切蜂窝）无需重建连接；移动场景下体验更连贯，避免视频通话中断。强制加密所有QUIC流量默认TLS1.3加密，中间设备无法窥探或篡改；提升隐私性的同时简化了HTTPS部署流程。</>{}<section>CHAPTER03HTML5语义化用正确的标签表达内容角色语义化不是装饰，而是让机器与人共同理解页面含义的基础契约。12SEMANTICS核心语义标签速查HTML5SemanticTagsReferenceHTML5语义标签不是视觉容器，而是内容角色的声明；正确使用能提升可访问性、SEO效果与团队协作效率，误用则适得其反。页面级结构标签<header>定义页眉或区块头部，可包含Logo、搜索框、导航；一个页面可有多个header（如文章内标题区），但<main>只能有一个且不可嵌套在article/aside/nav/footer中。<nav>仅包裹主要导航链接组；页脚杂项链接、面包屑通常不用nav；<footer>承载版权、联系方式等附属信息，可出现在article内部表示该文元数据。<main>页面唯一主体内容区，每个页面仅允许一个<main>元素，不可嵌套于article、aside、header、footer或nav之中，确保主内容区域清晰明确。内容组织标签<article>强调独立可分发性：RSS可抓取、打印自成一篇；用户评论若支持独立分享可用article，否则用<section>按主题分组。<aside>表示与主内容相关但非核心的信息（如术语解释、相关推荐）；<figure>+<figcaption>用于图文组合，不限于图片，图表、代码块亦适用。语义化常见误用与修正SemanticHTML—CommonMistakes&Corrections语义化错误的根源是将标签当作样式钩子而非内容角色声明；修正的关键是回归"这部分内容是什么"的本质判断，而非"它看起来像什么"。结构与标题误用✕误<divclass='nav'><divclass='nav'>包裹导航链接✓正<nav><ul><li>...<nav><ul><li>...<ul>/<ol>导航项本质是列表，必须用<ul>/<ol>包裹，读屏器才能播报"导航区域，共N项"。✕误h1后直接使用h4✓正严格按h1→h2→h3递进跳级会破坏文档大纲，导致辅助技术用户迷失层级关系。强调与列表误用✕误<strong>仅为加粗使用<strong>✓正font-weightCSSfont-weight控制样式<strong><em><b>/<i><strong>表示内容重要性（如警告词），<em>表示语气强调，<b>/<i>仅用于无强调意义的突出。✕误<br>用<br>换行模拟地址列表✓正<address><address>包裹联系信息<br><br>仅用于诗歌/歌词等真正需要强制换行的场景，绝不用于布局分隔。核心原则：内容决定标签，样式交给CSS。关掉CSS后纯文本仍能清晰分辨结构，才算合格。WWeb开发基本技术SEMANTICSChapter03语义化的实际价值：SEO与无障碍SemanticHTML—EngineeringImpact,NotJustBestPractice语义化不是道德正确，而是工程实效：它直接决定搜索引擎能否准确索引内容、辅助技术用户能否高效操作，进而影响流量与合规性。搜索引擎索引Google官方文档将<article>与<main>作为判断内容主次的关键信号；错误嵌套可能导致搜索结果摘要截断或排名降权。读屏器导航屏幕阅读器自动识别<nav>为导航区域、<form>为表单，用户可快捷键跳转；纯<div>页面迫使视障用户逐元素遍历，效率降低90%+。Lighthouse审计"缺少地标角色"与"标题层级混乱"位列Top3失败项；修复后平均得分提升15-25分，且无需改动视觉样式。机器可读时间<timedatetime='...'>让机器精确识别日期，新闻站可显示"发布于2小时前"；纯文本"今天"无法被解析，丧失时效性语义价值。读屏器利用语义地标（landmarks）快速定位页面区域，用户无需逐元素遍历即可跳转至导航、主内容或表单。核心结论语义化标签是零成本的性能优化——不改变视觉呈现，却让搜索引擎和辅助技术获得结构化理解，直接提升SEO排名与无障碍合规评分。CHAPTER04CSS3布局与响应式从浮动hack到原生二维布局掌握Flexbox与Grid，解锁现代网页布局的钥匙CSSLAYOUTFlexbox：一维布局利器单行或单列的元素排列与空间分配Flexbox专为单行或单列的元素排列与空间分配而生，通过主轴/交叉轴模型简化了对齐、分布与顺序控制，取代了float与table布局时代。核心概念与属性容器与轴向：display:flex创建弹性容器；flex-direction定义主轴（row/column）；justify-content控制主轴空间分布；align-items控制交叉轴对齐。子项三件套：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基准尺寸）；简写flex:1实现等宽分配。典型应用场景导航栏：justify-content:space-between让Logo与菜单两端对齐；gap属性替代margin实现均匀间距，避免首尾多余空白。卡片列表：align-items:stretch使同行卡片等高；flex-wrap:wrap自动换行；配合min-width实现响应式列数变化。主轴与交叉轴模型主轴交叉轴Item1Item2Item3flex-direction:row→justify-contentalign-itemsjustify-content主轴对齐align-items交叉轴对齐flex:1等宽分配CSSGRIDLAYOUTCSSGrid：二维布局革命真正的二维布局控制，告别hack时代CSSGrid首次让开发者能在CSS中直接定义行列轨道，实现真正的二维布局控制，告别了用float/position模拟网格的hack时代。01轨道定义与空间分配grid-template-columns/rows定义轨道数量与尺寸；fr单位按比例分配剩余空间（1fr2fr即1:2）；repeat(3,1fr)快速创建三等分列。gap统一设置行列间距；minmax(200px,1fr)实现弹性最小最大宽度，天然支持响应式而无需媒体查询。02区域命名与项目定位grid-template-areas用ASCII艺术式字符串定义布局区域（如'headerheader'/'sidebarmain'），子项grid-area赋值即可落位，代码可读性极高。grid-column/grid-row支持span关键字跨越多轨道；负线索引从末尾计数；auto-fill/auto-fit配合minmax实现自适应列数，一行代码搞定响应式网格。核心记忆：Grid容器管行列轨道，子项可跨行跨列定位；fr分配空间，areas命名区域，布局代码如草图般直观。LAYOUTDECISIONFlexboxvsGrid：如何选择？一维流式排列vs二维网格控制——按布局维度决策Flexbox与Grid不是替代关系而是互补：前者精于一维流式排列，后者强于二维网格控制；选择依据是布局维度而非新旧偏好。维度适用场景推荐方案典型用例一维元素沿单轴排列、空间动态分配Flexbox导航栏、按钮组、卡片行二维同时控制行列、精确区域划分Grid页面骨架、仪表盘、杂志排版混合整体网格+局部流式Grid嵌套Flex侧边栏布局中的表单控件对齐内容优先子项尺寸决定布局Flexbox标签云、不定宽按钮组布局优先预设轨道约束子项Grid固定列数的产品列表决策口诀：我是在排列一串东西（Flex），还是在画一张网格（Grid）？答案自然浮现。RESPONSIVEDESIGNPAGE20响应式设计核心原则移动优先·内容驱动断点·流体排版响应式设计的本质是内容适应容器，而非容器模仿设备；移动优先、内容驱动断点、流体排版是实现这一目标的三大支柱。移动优先（MobileFirst）基础样式面向最小屏幕，通过min-width媒体查询逐步增强；避免max-width向下覆盖导致的样式冗余与维护困难。内容驱动断点断点由内容在特定宽度下的可读性决定（如文字过挤、图片溢出），而非预设设备尺寸；320/768/1024/1440px仅为参考起点。流体排版与间距使用clamp()函数设定字号与间距的最小-理想-最大值，实现无断点的平滑缩放体验。ViewportMeta必配width=device-width,initial-scale=1确保移动端按设备宽度渲染；缺失则浏览器默认980px宽再缩放，文字微小难读。常用断点参考值320px·手机768px·平板1024px·小屏1440px·桌面CHAPTER05JavaScript核心从语法基础到异步编程模型asyncfunctionfetchData(){constres=awaitfetch(url);constdata=awaitres.json();returndata.map(item=>({id:item.id,name:item.title,done:false}));}constpipeline=[validate,transform,persist].reduce((fn,next)=>(...args)=>next(fn(...args)));MODERNJAVASCRIPTES6+核心特性精要块级作用域·简洁函数·结构化赋值·字符串插值ES6不是语法糖集合，而是JavaScript现代化的基石：块级作用域、简洁函数、结构化赋值与字符串插值共同提升了代码的可读性、安全性与表达力。01let/constconst

user={name:'Ada'};let

count=0;//块级作用域块级作用域消除var的函数作用域与提升陷阱；const声明引用不可变，传达"不应重赋值"意图，是日常开发的默认首选。02箭头函数const

double=x

=>

x*2;arr.map(n

=>

n+1);//词法this省略function关键字与单表达式return；绑定定义时的this，解决回调中this丢失问题，特别适合数组方法与事件处理器。03解构赋值const{name,age}=user;const[first,...rest]=arr;一行完成多值提取，支持默认值、重命名与嵌套解构，大幅减少临时变量与重复的属性访问代码。04模板字符串const

msg=`Hello${name}!`;//多行文本+表达式嵌入支持多行文本与任意表达式嵌入；标签模板还可实现国际化、SQL防注入等高级用途，远超字符串拼接能力。WWEB开发基本技术ASYNCJavaScript异步编程演进：回调到async/awaitCallback→Promise→Async/AwaitJavaScript异步模型从回调地狱走向Promise再到async/await，本质是用更直观的语法封装底层事件循环，让非阻塞IO的代码表达趋近同步思维。回调函数Callback最原始的异步模式，但多层嵌套形成"金字塔厄运"；错误处理分散、流程控制困难，促使Promise在ES6标准化。Promise链式调用.then()链式调用扁平化异步流，.catch()统一错误处理；但复杂分支仍需嵌套，且调试堆栈不直观。async/await语法糖ES2017让异步代码书写如同步：await暂停执行直到Promiseresolve，try/catch捕获rejected；编译器将其转译为Promise链。并发控制策略多个独立异步操作用Promise.all()并行执行；连续await会串行等待，性能差数倍；allSettled/race提供聚合与竞速语义。DOM操作与事件机制精要PerformanceEssentials&EventDelegationDOM是JS与页面的桥梁，但其API代价高昂；理解重排触发条件与事件传播模型，是写出高性能交互代码的前提。DOM操作性能要点修改DOM会触发重排/重绘：增删节点、改几何属性、读取offsetTop/clientWidth等均强制同步布局；批量操作用DocumentFragment暂存后一次性插入。避免布局抖动：不要循环中交替读写样式（如读offsetTop再改style.top）；先集中读取缓存，再集中写入；requestAnimationFrame确保写入在下一帧渲染前完成。事件委托与传播模型事件三阶段：捕获（window→target）→目标→冒泡（target→window）；addEventListener第三参数true为捕获阶段监听，默认false为冒泡阶段。事件委托：将监听器绑在静态父元素上，通过event.target判断实际触发源；减少监听器数量、自动覆盖动态新增子元素，是列表/表格交互的标准模式。事件传播三阶段CAPTUREwindowdocumentparentTARGETtargetBUBBLEparentdocumentwindow捕获阶段（向下）目标元素冒泡阶段（向上）事件委托：监听器绑在parent上，通过event.target捕获子元素事件实践原则：批量DOM写入用DocumentFragment·读写分离避免布局抖动·列表/表格交互优先事件委托EngineeringESModules：现代工具链的基石静态结构驱动前端工程化优化ESModules不仅是语法规范，更是整个前端工程化生态的契约基础：其静态结构使TreeShaking、代码分割、类型检查等优化成为可能。静态语法vs动态调用importexportrequire()import/export是编译时确定的静态语法，允许构建工具在打包前分析依赖图、剔除未使用导出（TreeShaking）；而CommonJS的require()是运行时动态调用，无法被静态分析。浏览器原生支持<scripttype='module'><scripttype='module'>自动defer执行、严格模式、独立作用域；但IE不支持且无打包能力，生产环境仍需Webpack/Vite等工具进行转换与优化。动态导入与代码分割import()动态import()返回Promise，支持按需加载与代码分割；配合路由懒加载可将首屏体积降低50%以上，是现代SPA性能优化的标配手段。生态配置与互操作package.json"type":"module"package.json中"type":"module"启用ESM；Node.js12+支持，但部分旧库仍为CJS；互操作需注意default导出差异，推荐统一使用ESM以获得最佳工具链支持。WebDevelopmentCOURSEMODULECHAPTER06浏览器原理与性能从解析到渲染的全链路优化理解浏览器如何工作，才能写出真正高性能的代码06TECHNICALDEEPDIVE浏览器渲染流水线详解BrowserRenderingPipeline·五阶段性能剖析浏览器将HTML/CSS转化为屏幕像素经历五个严格阶段，每个阶段的计算代价差异巨大；性能优化的本质是让变更尽可能停留在低代价阶段。1PARSEHTML解析器构建DOM树，CSS解析器构建CSSOM树；两者阻塞互斥（CSS未加载完不构建RenderTree），故关键CSS应内联或preload。2STYLECALCULATION合并DOM+CSSOM生成RenderTree；visibility:hidden节点保留占位，display:none节点完全剔除；此阶段触发于样式变更或DOM增删。3LAYOUT(REFLOW)COSTHIGHEST计算每个可见节点的精确几何信息（位置、大小）；修改width/margin/fontSize或读取offsetTop均触发；代价最高，应避免频繁读写交替。4PAINT&COMPOSITE60FPSPaint将节点转为位图图层；Composite由独立线程在GPU合成最终画面；仅transform/opacity变更可跳过Layout/Paint，实现60fps动画。DOM→RenderTree→Layout→Paint→Composite各阶段计算代价对比Layout极高PERFORMANCE重排重绘优化实战策略规避高代价操作·拥抱低成本变更性能优化不是记忆规则列表，而是理解代价模型后的主动设计：让高频变更避开Layout/Paint，让批量操作合并触发点，让GPU承担力所能及的工作。规避高代价操作避免布局抖动：不在循环中交替读取几何属性（如elem.offsetTop）与修改样式；先集中读取缓存到变量，再集中写入；或使用FastDOM库自动批处理。谨慎使用will-change：仅对即将动画的元素添加will-change:transform，且动画结束后移除；全局滥用会导致图层爆炸、内存飙升、合成线程过载。拥抱低成本变更动画首选transform与opacity：两者变更仅触发Composite阶段，由GPU处理且不阻塞主线程；配合translate3d(0,0,0)强制硬件加速。批量DOM更新：使用DocumentFragment暂存多个节点后一次性appendChild；或用innerHTML替换大段内容（注意XSS风险）；虚拟DOM框架已内置此优化。没有银弹——实测LighthousePerformance分数才是金标准。善用requestAnimationFrame确保写入时机正确。PERFORMANCECoreWebVitals：量化用户体验LCP·INP·CLS—Google页面体验核心指标CoreWebVitals将模糊的"快不快""卡不卡"转化为可测量、可优化的工程指标，是连接用户体验与搜索引擎排名的桥梁。良好需改进差LCP最大内容绘制视口内最大元素渲染完成时间<2.5s>4sINP交互到下次绘制用户操作到页面响应的延迟<200ms>500msCLS累积布局偏移页面生命周期内意外布局位移总和<0.1优化策略LCP优化：预加载关键资源、压缩图片、CDN加速、服务端渲染首屏INP优化：拆分长任务JS、延迟非关键脚本、使用WebWorker分流主线程CLS优化：为媒体元素设置width/height、预留广告位尺寸、避免字体加载重排业务影响CWV是Google排名因子之一，直接影响搜索可见度与流量获取LCP每降低1秒，转化率提升约20%CLS过高直接导致误点击与用户流失，40%用户放弃加载超3秒的页面Web开发基本技术Chapter07前后端协作与工程化从API设计到自动化交付打通前后端边界，理解真实项目如何运转07TECHNOLOGYRESTfulAPI设计原则与避坑资源为核心·方法即语义·状态码为反馈RESTful不是URL格式规范，而是一种以资源为核心、HTTP方法为动词、状态码为反馈的架构风格；其价值在于统一接口降低认知负荷与集成成本。六大设计原则资源为中心URL用名词复数（/users,/orders）；HTTP方法表达操作（GET查/POST增/PUT改/DELETE删）；避免动词（/getUser）。合理使用状态码200成功·201创建·204删除·400参数错·401未认证·403无权限·404不存在·500服务端错误；精准状态码是自动化处理基础。常见反模式与修正✗反模式：暴露JPAEntity等内部模型✓修正：使用DTO隔离内外结构，避免敏感字段泄露与内部重构波及客户端。✗反模式：循环调用单条接口获取列表✓修正：提供批量查询端点（POST/products/batch）。✗反模式：PUT/POST返回完整对象✓修正：遵循CQRS，写操作返204或ID，读操作独立GET。SECURITYWeb安全基础：XSS与CSRF防御前端安全两大威胁解析与防御实践前端安全不是后端专属责任：XSS与CSRF的攻击入口与防御前线均在浏览器侧，开发者必须理解其原理并在编码阶段主动设防。XSS：跨站脚本攻击CROSS-SITESCRIPTING攻击原理未转义的用户输入被当作HTML/JS执行（如评论区<script>标签）；存储型XSS持久化在服务器，反射型通过URL参数触发，DOM型由前端JS动态插入。防御三件套输出时按上下文转义（HTML属性/JS/CSS/URL各有规则）启用Content-Security-Policy限制脚本来源使用textContent替代innerHTML避免解析HTMLCSRF：跨站请求伪造CROSS-SITEREQUESTFORGERY攻击原理利用浏览器自动携带Cookie的特性，诱导已登录用户访问恶意页面发起伪造请求（如转账）；GET请求易被<img