使用 HTML、CSS、JavaScript 和现代框架构建、调试和部署网站,遵循生产最佳实践。
快速参考: need.见:HTML/CSS问题.html-css.md.JavaScript types.javascript.md.React/Next.js
功能概述
快速参考: need.见:HTML/CSS问题.html-css.md.JavaScript types.javascript.md.React/Next.js是一项面向实际任务的技能,主要用于Performance.md.Crible R.。它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式,核对必要参数、依赖环境与输出内容,并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景,可作为自动化工作流的一部分,也便于后续检查、调整和扩展。
- 从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;
结果检查与注意事项
涉及批量任务时,还应保存进度,避免中断后重复操作。该技能适合用于一次性任务,也可以接入自动化工作流,与其他技能或上层代理配合完成更完整的业务链路;在组合使用时,应明确每一步的输入输出关系,并避免不同步骤之间出现参数冲突。
快速参考
| 需求 | 参见 |
|---|---|
| HTML/CSS 问题 | html-css.md |
| JavaScript 模式 | javascript.md |
| React/Next.js/框架相关 | frameworks.md |
| 部署至生产环境 | deploy.md |
| 性能/SEO/a11y | performance.md |
关键规则
- DOCTYPE 至关重要 — 缺少
将触发怪异模式(quirks mode),导致布局不可预测地崩溃 - CSS 特异性优于层叠 —
.class选择器无论声明顺序如何,均会覆盖元素选择器 - 使用
===,而非==— 类型强制转换会导致"0" == false返回true - 循环中慎用 async/await —
forEach不支持 await;应改用for...of或Promise.all - CORS 是服务端行为 — 无法通过客户端修复;需在服务端配置
Access-Control-Allow-Origin响应头 - 响应式 = viewport meta 标签 — 若缺少
,移动端将按桌面宽度渲染页面 - 表单提交未调用
preventDefault→ 页面将刷新;务必在提交事件处理器中调用e.preventDefault() - 图片需设置尺寸 — 缺少
width/height属性将引发布局偏移(CLS 惩罚) - 必须使用 HTTPS,否则资源被拦截 — 混合内容(HTTPS 页面中加载 HTTP 资源)会被浏览器阻止
- 环境变量可能泄露 — 以
NEXT_PUBLIC_*开头的变量会暴露至客户端;切勿以此方式传递敏感信息
常见需求处理方式
“让它具备响应式” → 采用移动优先(mobile-first)CSS 并配合媒体查询;在 320px、768px、1024px 等关键断点进行测试
“部署到生产环境” → 查阅 deploy.md 获取 Vercel / Netlify / VPS 等部署模式
“修复 CORS 错误” → 服务端必须返回相应 CORS 头;若无法控制服务端,可考虑通过同源代理中转请求
“提升性能” → 使用 Lighthouse 进行审计;重点关注 LCP、CLS、FID 指标;对视口以下图片启用懒加载
“添加 SEO 支持” → 每页设置独立的 title 和 description、使用语义化 HTML、添加 Open Graph 标签、生成 sitemap.xml
框架选型决策树
- 静态内容为主,构建速度优先 → Astro 或纯 HTML
- 博客/文档类项目,需支持 MDX → Astro 或 Next.js App Router
- 交互式应用,含用户认证功能 → Next.js 或 Remix
- 需要完整 SSR/ISR 控制能力 → Next.js
- 简单 SPA,无需 SEO 支持 → Vite + React/Vue
热门AI工具
相关专题
本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。
0
2026.10.22
本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。
0
2026.10.22
本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。
0
2026.10.22
本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。
0
2026.10.22
本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。
0
2026.10.22
本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。
0
2026.10.22
本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查,覆盖本地环境、Docker及多平台用法,帮助Go开发者快速上手。
0
2026.10.22
PHP2Shell漏洞是什么,哪些PHP版本和运行环境会受到影响,服务器应该如何检测与修复?本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤,以及修复验证、临时缓解和应急响应方案。
0
2026.10.22
热门下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.5万人学习
共6课时 | 54.7万人学习
