Web Development技能使用说明
2026-03-27
新闻来源：网淘吧
围观:11
电脑广告
手机广告
快速参考
| 需求 | 参见 |
|---|---|
| HTML/CSS 问题 | html-css.md |
| JavaScript 模式 | javascript.md |
| React/Next.js/框架 | frameworks.md |
| 部署到生产环境 | deploy.md |
| 性能/SEO/无障碍访问 | performance.md |
关键规则
- DOCTYPE 很重要— 缺失<!DOCTYPE html>会触发怪异模式；布局会不可预测地崩溃
- CSS 特异性优先于层叠—.class无论顺序如何，都会覆盖元素选择器
- ===不是==类型转换导致"0" == false结果为真
- 循环中的异步/等待—forEach不会等待；请使用for...of或Promise.all
- CORS是服务器端的问题— 没有客户端解决方案；需在服务器上配置Access-Control-Allow-Origin响应式布局需要视口元标签
- — 若缺少<meta name="viewport">，移动端会以桌面宽度渲染表单未使用
- preventDefault— 页面会重新加载；需在提交处理函数中调用e.preventDefault()图像需要指定尺寸— 缺少
- Images need dimensions— Missing宽度/高度导致布局偏移（CLS 惩罚）
- HTTPS 或被阻止— 混合内容（HTTPS 页面上的 HTTP 资源）会被浏览器阻止
- 环境变量泄露—NEXT_PUBLIC_*会暴露给客户端；切勿为密钥添加此前缀
常见请求
"使其具有响应式"→ 采用移动优先的 CSS 和媒体查询；在 320px、768px、1024px 下进行测试"部署到生产环境"→ 请参阅deploy.md了解 Vercel/Netlify/VPS 的部署模式"修复 CORS 错误"→ 服务器必须发送头部信息；如果无法控制服务器，则通过同源代理"提升性能"→ 进行 Lighthouse 审计；重点关注 LCP、CLS、FID；对首屏以下的图片进行懒加载"添加 SEO"→ 每页标题/描述、语义化HTML、OG标签、sitemap.xml
框架选择决策树
- 静态内容，快速构建→ Astro 或原生 HTML
- 使用 MDX 的博客/文档→ Astro 或 Next.js App Router
- 带认证的交互式应用→ Next.js 或 Remix
- 完全控制 SSR/ISR→ Next.js
- 简单 SPA，无需 SEO→ Vite + React/Vue
微信扫一扫，打赏作者吧～文章底部电脑广告
手机广告位-内容正文底部
上一篇：Chart Image技能使用说明
下一篇：Agent Council技能使用说明
