Website Development Rules

Performance

- Images are the #1 cause of slow sites — use WebP/AVIF, lazy-load below-the-fold, and set explicit width/height to prevent layout shift
Render-blocking CSS delays first paint — inline critical CSS in <head>, defer the rest
Third-party scripts (analytics, chat widgets) often add 500ms+ — load them with async or defer, audit regularly
Fonts cause invisible text flash (FOIT) — use font-display: swap and preload critical fonts
Measure with Lighthouse in incognito mode — extensions skew results

Mobile First

- Start CSS with mobile styles, add complexity with min-width media queries — easier to scale up than strip down
Touch targets need 44x44px minimum — fingers are imprecise, small buttons frustrate users
Test on real devices, not just browser DevTools — throttling simulation misses real-world jank
Horizontal scroll is a critical bug — test every page at 320px width minimum
INLINECODE5 meta tag is required: INLINECODE6

Accessibility

- Every <img> needs alt text — empty alt="" for decorative images, descriptive text for meaningful ones
Color contrast ratio 4.5:1 minimum for body text — use WebAIM contrast checker
Form inputs must have associated <label> elements — placeholders alone are not accessible
Keyboard navigation must work — test every interactive element with Tab key
Screen readers announce heading hierarchy — use H1-H6 in logical order, never skip levels

HTML Structure

- One <h1> per page only — it's the page title, not a styling tool
Use semantic elements: <nav>, <main>, <article>, <aside>, <footer> — they communicate structure to browsers and assistive tech
INLINECODE17 for actions, <a> for navigation — don't use divs with click handlers
External links should have rel="noopener" — prevents security vulnerability with INLINECODE20
Validate HTML — broken markup causes unpredictable rendering across browsers

CSS Patterns

- Avoid !important — it breaks cascade and makes debugging painful. Fix specificity instead
Use relative units (rem, em, %) over fixed px for text — respects user font size preferences
CSS custom properties (variables) reduce repetition — define colors and spacing once, use everywhere
Flexbox for 1D layouts, Grid for 2D — don't force one to do the other's job
Test without CSS loading — content should still be readable in plain HTML

Common Mistakes

- Missing favicon causes 404 spam in server logs — always include one, even a simple PNG
Not setting <html lang="en"> breaks screen reader pronunciation
Hardcoded http:// links break on HTTPS sites — use protocol-relative // or always INLINECODE29
Assuming JavaScript is available — core content should work without JS (progressive enhancement)
Forgetting print styles — add @media print for pages users might print (receipts, articles)

Before Launch

- Test all forms actually submit — broken contact forms lose leads silently
Check 404 page exists and is helpful — default server 404 looks unprofessional
Verify social sharing previews with Open Graph tags — test in Facebook/Twitter debuggers
Submit sitemap to Google Search Console — speeds up indexing
Set up uptime monitoring — know when your site goes down before users tell you

网站开发规则

性能

- 图片是网站加载缓慢的首要原因——使用WebP/AVIF格式，对首屏以下图片采用懒加载，并设置明确的宽高以防止布局偏移
阻塞渲染的CSS会延迟首次绘制——将关键CSS内联在中，其余部分延迟加载
第三方脚本（分析工具、聊天插件）通常会增加500毫秒以上——使用async或defer加载，并定期审查
字体导致不可见文本闪烁（FOIT）——使用font-display: swap并预加载关键字体
在无痕模式下使用Lighthouse进行测量——浏览器扩展会影响结果

移动优先

- 从移动端样式开始编写CSS，通过min-width媒体查询增加复杂度——扩展比缩减更容易
触摸目标至少需要44x44像素——手指操作不够精确，过小的按钮会让用户感到沮丧
在真实设备上测试，而不仅仅是浏览器开发者工具——节流模拟无法反映真实世界的卡顿
水平滚动是一个严重错误——至少以320像素宽度测试每个页面
viewport元标签是必需的：

无障碍访问

- 每个都需要alt文本——装饰性图片使用空alt=，有意义的图片使用描述性文本
正文文本的颜色对比度至少为4.5:1——使用WebAIM对比度检查器
表单输入必须有对应的元素——仅使用占位符无法满足无障碍要求
键盘导航必须正常工作——使用Tab键测试每个交互元素
屏幕阅读器会朗读标题层级——按逻辑顺序使用H1-H6，切勿跳级

HTML结构

- 每个页面只有一个
——它是页面标题，而非样式工具
使用语义化元素：
、
、
、
、
——它们向浏览器和辅助技术传达结构信息
操作使用
外部链接应添加rel=noopener——防止target=_blank带来的安全漏洞
验证HTML——错误的标记会导致不同浏览器出现不可预测的渲染结果

CSS模式

- 避免使用!important——它会破坏层叠规则，使调试变得困难。应修复选择器优先级
文本使用相对单位（rem、em、%）而非固定px——尊重用户的字体大小偏好
CSS自定义属性（变量）减少重复——定义一次颜色和间距，随处使用
一维布局使用Flexbox，二维布局使用Grid——不要强行让一种布局方式承担另一种的职责
测试无CSS加载的情况——内容在纯HTML下仍应可读

常见错误

- 缺少favicon会导致服务器日志中出现大量404错误——始终包含一个，即使是简单的PNG文件
未设置会破坏屏幕阅读器的发音
硬编码的http://链接在HTTPS网站上会失效——使用协议相对//或始终使用https://
假设JavaScript可用——核心内容应在无JS情况下正常工作（渐进增强）
忘记打印样式——为用户可能打印的页面（收据、文章）添加@media print

上线前

- 测试所有表单确实能提交——损坏的联系表单会悄悄丢失潜在客户
检查404页面是否存在且有用——默认的服务器404页面显得不专业
使用Open Graph标签验证社交分享预览——在Facebook/Twitter调试工具中测试
向Google Search Console提交站点地图——加快索引速度
设置运行监控——在用户告知之前了解网站何时宕机

Website现代网站构建

Website

Website Development Rules

Performance

Mobile First

Accessibility

HTML Structure

CSS Patterns

Common Mistakes

Before Launch

网站开发规则

性能

移动优先

无障碍访问

HTML结构

——它是页面标题，而非样式工具

CSS模式

常见错误

上线前

标签

通过对话安装

方式一：安装 SkillHub 和技能

方式二：设置 SkillHub 为优先技能安装源

通过命令行安装

下载

Website现代网站构建

Website

Website Development Rules

Performance

Mobile First

Accessibility

HTML Structure

CSS Patterns

Common Mistakes

Before Launch

网站开发规则

性能

移动优先

无障碍访问

HTML结构

——它是页面标题，而非样式工具

CSS模式

常见错误

上线前

标签

通过对话安装

方式一：安装 SkillHub 和技能

方式二：设置 SkillHub 为优先技能安装源

通过命令行安装

下载

相关推荐

self-improvement

self-improvement

self-improvement

self-improvement