网站技术

所属领域：信息与通信技术
适合人群：零基础到备赛选手、前端与全栈方向学习者、自学爱好者
本仓库定位：网站技术是本项目的主赛道，本仓库另有中文保姆级教程、全中文赛题解析与离线学习支持，均在首页可达；本篇是全技能库中的项目级速览，细节请读主教程。

一、项目是什么

网站技术项目考察选手按设计稿与需求交付高质量网站的能力：从语义化结构与样式还原，到交互脚本、动态功能与内容管理，再到可访问性、性能优化与部署。它的核心词是“像素级还原加工程规范”：设计稿是需求，还原度、代码质量、多设备表现与规范符合度共同决定分数。 它不是“会做网页”就够的选手赛：自动检测工具会验证代码与行为，人工评审会看还原细节与使用体验，任何一层糊弄都会被看见。 项目对速度敏感：任务量大、页面多、时限紧，打字速度、快捷键熟练度与组件复用习惯直接换算成分数。同时它也是成果最直观的项目，页面就在那里，好不好一眼可见。

二、竞赛怎么比

典型赛程为四天，常见模块结构如下：

1. 界面还原：按设计稿用语义化 HTML 与 CSS 完成静态页，字体、间距、配色、阴影精确对齐。
2. 响应式实现：移动优先，合理设置断点，多尺寸设备下布局与可读性一致。
3. 前端交互：用原生 JavaScript 与指定框架实现表单校验、轮播、筛选、动效与状态管理。
4. 动态与内容管理：按当届要求实现后端功能或定制开源内容管理系统，完成模板与数据绑定。
5. 可访问性改造：语义结构、替代文本、键盘可达、焦点与对比度，按国际可访问性指南自查修复。
6. 构建与部署：用包管理与构建工具完成开发、打包、优化与部署，配合版本管理。
7. 接力协作：部分届次采用接力形式，前后手交接质量直接影响团队总分。 评分由自动检测与人工评审两部分构成：自动部分验证结构、行为与规范，人工部分评还原度、体验与代码质量。因此先保结构分、再攻还原细节、给自动检测留出自查时间，是赛场策略的核心。 任务书与设计稿的每个标注都是需求：字号行高是需求，断点行为是需求，键盘操作顺序也是需求，漏一条就丢一条的分。

三、核心能力域

能力体系可分三层：基础层决定下限，核心层决定上限，支撑层决定稳定性。逐条对照，缺哪补哪。 基础层：

1. HTML 语义化：结构标签、表单与验证属性、媒体元素、文档大纲。
2. CSS 核心：层叠与盒模型、选择器与优先级、Flexbox 与 Grid、过渡与动画。
3. JavaScript 核心：DOM 操作、事件模型、异步请求、ES6 常用特性。
4. 还原基本功：读设计稿、测量尺寸、取色、字体与间距体系的换算。
5. 工具基础：浏览器开发者工具的检查与调试、编辑器效率、npm 包管理。 核心层：
6. 响应式工程：移动优先、断点体系、相对单位、图片自适应与多倍图。
7. CSS 工程：Sass 等预处理器的变量与嵌套、BEM 类命名思想、样式复用与主题化。
8. 前端框架：按当届指定框架完成组件化开发与状态管理，如 React 或 Vue 类技术栈。
9. 构建工具：Vite 或 Webpack 类工具的配置、热更新、打包与产物优化。
10. 动态与CMS：模板引擎与数据绑定、内容管理系统的主题定制与字段扩展。
11. 可访问性：语义与地标、ARIA 常用模式、键盘导航、对比度与焦点管理。
12. 性能优化：资源压缩与合并、懒加载、缓存策略、Lighthouse 类审计与指标改善。 支撑层：
13. 还原自检流程：与设计稿并排比对的逐层检查法。
14. 代码质量：命名、结构与注释一致，写出评审看得懂的代码。
15. 版本与交付纪律：小步提交、分支规范、部署前检查单。
16. 速度与耐力：打字与快捷键的肌肉记忆，长时间编码的手部健康。

四、从零到赛场的精通路线

阶段一：入门（约 1 至 2 个月） 目标：打通 HTML、CSS、JavaScript 地基，建立还原意识。 主线内容：语义化标签与表单；盒模型与常见布局；完成第一个像素级还原的静态页并逐层比对。 配套任务：每天一页临摹；开发者工具的元素、网络与调试面板练熟。 常见弯路：全用无语义标签堆页面，视觉像了，结构分全丢。 验收标准：不看资料手写语义化页面，还原度经并排比对无明显偏差。

阶段二：基础固化（约 2 至 3 个月） 目标：响应式与交互能力成型。 主线内容：移动优先与断点体系专项；Sass 与命名规范；原生 JavaScript 完成表单校验、轮播与筛选等常见交互。 配套任务：每周一个多页小站，覆盖三档设备宽度；可访问性自查清单开始使用。 常见弯路：只在自己那块屏幕看效果，断点行为从没验证过。 验收标准：一个小站能在窄中宽三档设备下表现一致，交互无控制台报错。

阶段三：进阶专项（约 3 至 4 个月） 目标：框架与工程链打通，动态与优化补齐。 主线内容：指定框架的组件化与状态管理；构建工具全流程；CMS 或后端模板入门；性能审计与优化专项。 配套任务：限时还原训练，整站四小时起练；每个项目做一次性能审计并改善指标；第一轮接力演练。 常见弯路：框架会写但打包部署不熟，最后一步总翻车。 验收标准：一个含框架、构建与部署的完整站点能在一日内交付，审计指标明显改善。

阶段四：竞赛级打磨（约 3 个月，循环进行） 目标：把能力转化为稳定得分，打磨速度与细节。 主线内容：真题风格全真模拟，含自动检测自查环节；组件与样式模板库成型；接力交接与互检训练。 配套任务：体能与手部保护，长时间编码强度大；按当届指定框架与工具定向补强。 常见弯路：只追新页面不回头修旧页，失分点反复出现。 验收标准：模拟赛稳定达到目标分数线，还原度、规范与性能三类失分都能归因。

五、每日与每周训练体系

每日（2 至 4 小时）：三十分钟文档或规范精读，其余全部写码；当天临摹一页并做并排比对。 每日收尾：十分钟整理组件与样式片段，更新模板库。 每周固定：一次限时整站任务，从切图到部署全流程，含自评表。 每周复盘：错题归因，更新模板库与检查单；精读一篇框架或可访问性主题文章。 每月大考：一次全真模拟赛，含自动检测与人工互评打分；重做旧站并限时压缩。 休息与体能：手腕与视力保护，定时远眺与手部放松。 赛前两周：只做熟练技术栈保持手感，冻结新依赖，核对环境、网络与离线资料。

六、自测清单

1. 能不看资料手写语义化页面结构，说明每处标签的选型理由。
2. 能按设计稿完成像素级还原，并排比对无明显偏差。
3. 能用 Flexbox 与 Grid 实现常见响应式布局，三档设备表现一致。
4. 能用原生 JavaScript 完成表单校验、轮播与筛选等常见交互。
5. 能用指定框架完成组件化页面并管理状态与数据流。
6. 能配置构建工具完成开发、打包与部署全流程。
7. 能按可访问性清单自查并修复结构、键盘与对比度问题。
8. 能用性能审计工具定位瓶颈并改善加载指标。

七、常见失误与避坑

1. 只追还原不顾代码：评审同时看代码质量，乱写的样式经不起多设备检验。
2. 单屏思维：不换设备与浏览器验证，响应式与兼容问题赛场翻车。
3. 忽略可访问性：这块分值稳定且方法明确，不做等于白丢。
4. 复制粘贴依赖：模板黏出来的代码在变体任务里立刻露馅，原理必须懂。
5. 速度欠账：打字与快捷键不练，任务量大的赛场上速度就是隐形分数。

八、资源地图

1. 世界技能组织官网：当届网站技术项目的职业标准与指定技术栈文件，为第一依据。
2. 本仓库主教程与赛题库：中文保姆级教程、全中文赛题解析，可直接离线阅读。
3. 权威 Web 文档：MDN 类文档站点，HTML、CSS、JavaScript 的第一手参考。
4. 标准与指南：W3C 规范与国际可访问性指南的快速参考。
5. 框架与工具官方文档：指定前端框架、构建工具与 CMS 的官方教程。
6. 设计资源：开放设计稿临摹库与开源设计系统，用于日常还原训练。
7. 审计工具：性能与可访问性检测工具的官方使用指南。
8. 同好互评与校内接力赛：交叉评审与接力演练是对抗性最强的练习。

十、分阶段训练任务清单

阶段一

1. 响应式落地页——三档断点还原设计稿，完成标准：视觉一致交互可用
2. 表单与校验——前端校验与提交处理，完成标准：异常输入全拦截
3. 性能优化专项——图片压缩与懒加载，完成标准：Lighthouse 性能分达标
4. 无障碍与语义化——标签语义与可访问性，完成标准：审计项通过
5. 前后端联调——接口对接与状态管理，完成标准：全流程可用
6. 跨浏览器验证——主流内核检查，完成标准：样式行为一致

阶段二

7. 响应式落地页——三档断点还原设计稿，完成标准：视觉一致交互可用
8. 表单与校验——前端校验与提交处理，完成标准：异常输入全拦截
9. 性能优化专项——图片压缩与懒加载，完成标准：Lighthouse 性能分达标
10. 无障碍与语义化——标签语义与可访问性，完成标准：审计项通过
11. 前后端联调——接口对接与状态管理，完成标准：全流程可用
12. 跨浏览器验证——主流内核检查，完成标准：样式行为一致

阶段三

13. 响应式落地页——三档断点还原设计稿，完成标准：视觉一致交互可用
14. 表单与校验——前端校验与提交处理，完成标准：异常输入全拦截
15. 性能优化专项——图片压缩与懒加载，完成标准：Lighthouse 性能分达标
16. 无障碍与语义化——标签语义与可访问性，完成标准：审计项通过
17. 前后端联调——接口对接与状态管理，完成标准：全流程可用
18. 跨浏览器验证——主流内核检查，完成标准：样式行为一致

阶段四

19. 响应式落地页——三档断点还原设计稿，完成标准：视觉一致交互可用
20. 表单与校验——前端校验与提交处理，完成标准：异常输入全拦截
21. 性能优化专项——图片压缩与懒加载，完成标准：Lighthouse 性能分达标
22. 无障碍与语义化——标签语义与可访问性，完成标准：审计项通过
23. 前后端联调——接口对接与状态管理，完成标准：全流程可用
24. 跨浏览器验证——主流内核检查，完成标准：样式行为一致

十一、高频考点与关键参数速查

1. 语义化标签——结构与样式分离
2. 移动优先——小屏样式做基础
3. 关键渲染路径——首屏速度靠资源优化
4. 表单安全——前端校验不可信后端必须再验
5. 资源压缩——图片是页面体积大头
6. 渐进增强——核心功能不依赖新特性

十二、工具材料与软件清单

工具

• 浏览器开发者工具：调试与性能
• 性能审计：Lighthouse
• 版本对比工具：样式回归检查

材料或平台

• 实训主机：本地与部署环境
• 设计稿库：还原练习素材

软件与系统

• VS Code：主力编辑器
• 构建工具：Vite 或 Webpack
• 前端框架：React 或 Vue

十三、赛场应试策略与评分思维

1. 先通读任务与评分表，圈出每项验收方式
2. 环境快照先拍，出问题能回滚
3. 按依赖关系排交付顺序，基础服务先行
4. 每完成一项立即按验收方式自验
5. 配置变更随手记录，文档与操作同步
6. 时间留二成缓冲给排错与复验
7. 密码与权限合规设置，安全项不当小节
8. 收工前全链路复验一遍再提交

十四、说明

本篇为独立整理的学习框架与经验总结，仅供自学交流；指定框架、工具与接力形式以当届竞赛公布为准。 赛项设置、标准文本与评分细节以世界技能组织及当届竞赛官方文件为准。

配套资源

• 项目图解：精通路线图 · 核心能力域
• 模拟训练：在线交互训练（十题评分），本目录内也有独立 HTML 文件可离线打开
• 总纲课视频：观看总纲课（约两至三分钟，中文解说）
• 以上配套内容为独立整理的学习辅助，赛项标准以世界技能组织官方文件为准。