🧩 HTML 编写注意事项 · CSS 使用说明

一份面向现代前端开发的简明指南，涵盖语义、可访问性、性能、布局与最佳实践。

📄 HTML 编写注意事项

1. 语义化 HTML 核心

使用正确的标签表达内容结构，而非滥用 <div> 和 <span>。

            <!-- ❌ 不推荐 -->
            <div class="header"><div class="nav">...</div></div>
            <div class="main"><div class="article">...</div></div>

            <!-- ✅ 推荐 -->
            <header>
            <nav>...</nav>
            </header>
            <main>
            <article>...</article>
            </main>
        

好处：SEO 友好、可访问性提升、代码可维护性高。
常用语义标签：<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time> 等。

2. 文档结构与 Meta 信息

始终声明 <!DOCTYPE html> 触发标准模式。
设置 <html lang="zh-CN"> 正确标识页面语言。
<meta charset="UTF-8"> 必须放在 <head> 最前面。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是移动端适配的基石。
提供有意义的 <title>（60 字符内）和 <meta description>（150~160 字符）。

3. 可访问性 (A11y) 重要

为图片提供 alt 属性；装饰性图片可用 alt=""。
使用 <button> 或 <a> 而非 <div role="button">，确保键盘可操作。
表单控件关联 <label for="id"> 或使用 aria-label。
使用 aria-* 属性增强复杂组件的语义（如 aria-expanded, aria-controls）。
确保颜色对比度符合 WCAG 2.1 AA 级（文本 4.5:1，大文本 3:1）。

4. 性能与加载优化

CSS 放在 <head> 中，使用 <link rel="stylesheet"> 阻止 FOUC。
JS 脚本放在 <body> 底部，或使用 defer / async 属性。
图片使用 loading="lazy" 实现懒加载，srcset 配合 sizes 提供响应式图片。
使用 <link rel="preconnect"> 提前连接第三方源（如 Google Fonts、CDN）。
避免过多外部请求，合并 CSS/JS 文件，使用字体子集或系统字体。

5. 表单与交互

每个 <input> 都有对应的 <label>，并设置 for 属性。
使用 type="email", type="number", type="tel" 等原生输入类型，提升移动端体验。
必填字段使用 required，并配合 aria-required="true"。
提供清晰的错误提示，并关联到对应输入框（使用 aria-describedby）。

6. 其他常见规范

标签名和属性名使用小写，属性值使用双引号。
自闭合标签（如 <img>, <input>, <br>）不需要闭合斜杠（HTML5 风格）。
缩进使用 2 或 4 空格，保持层级清晰。
使用  标注复杂模块，提高可读性。
避免内联样式，将样式抽离到 CSS 文件中。

🎨 CSS 使用说明

1. 基本语法与引入方式

            /* 选择器 { 属性: 值; } */
            h1 {
            color: #2563eb;
            font-size: 2rem;
            }
        

行内样式（不推荐）：<div style="color:red">
内部样式（用于演示/单页）：<style>...</style> 放在 <head>
外部样式（推荐）：<link rel="stylesheet" href="style.css">

2. 选择器与优先级

常用选择器

元素：div, p
类：.class
ID：#id（尽量少用）
属性：[type="text"]
伪类：:hover, :nth-child()
伪元素：::before, ::after
组合：ul > li, .card .title

优先级 (从高到低)

!important（谨慎使用）
内联样式 (style 属性)
ID 选择器 (#id)
类、属性、伪类 (.class, [attr], :hover)
元素、伪元素 (div, ::before)

💡 尽量使用类选择器，保持低特异性，便于覆盖。

3. 盒模型基础

💡 核心建议： 全局设置 box-sizing: border-box; 让宽高包含 padding 和 border，更符合直觉。

            /* 重置盒模型 */
            *, *::before, *::after {
            box-sizing: border-box;
            }
        

content-box（默认）：宽度只包含内容，padding 和 border 会撑大元素。
border-box：宽度包含 content + padding + border，布局更可控。

4. 布局：Flexbox

一维布局模型，适合导航、卡片排列、居中、间距分配等。

            .container {
            display: flex;
            flex-direction: row;       /* row | column */
            justify-content: center;    /* 主轴对齐 */
            align-items: center;        /* 交叉轴对齐 */
            gap: 1rem;                /* 间距 (推荐) */
            flex-wrap: wrap;           /* 换行 */
            }
        

5. 布局：CSS Grid

二维布局模型，适合页面整体结构、复杂网格、画廊等。

            .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);  /* 3列等宽 */
            grid-template-rows: auto 200px;
            gap: 1.5rem;
            grid-auto-rows: minmax(120px, auto);
            }
        

6. 响应式设计必备

使用 @media 查询针对不同视口应用样式。
移动优先：先写移动端样式，再用 min-width 逐步增强。
使用相对单位：rem（字体）、%、vw/vh、clamp()。
结合 Flexbox/Grid 的 auto、fr、minmax() 实现流动布局。

            /* 移动优先：基础样式 */
            .card { padding: 1rem; }

            /* 平板 */
            @media (min-width: 768px) {
            .card { padding: 2rem; }
            }

            /* 桌面 */
            @media (min-width: 1024px) {
            .card { padding: 3rem; }
            }
        

7. 常用技巧与性能优化

命名规范：推荐 BEM（Block__Element--Modifier）或语义化类名（如 .nav__item--active）。
避免 !important：通过提高选择器特异性或调整顺序来解决冲突。
CSS 自定义属性（变量）：--primary-color: #2563eb; 方便主题管理。
减少重绘/回流：使用 transform 和 opacity 做动画，避免改变 width/height/top/left。
压缩 CSS：生产环境使用工具（如 cssnano、clean-css）移除空格和注释。
使用 will-change：仅在必要时提示浏览器优化（如 will-change: transform;）。

📌 开发者工具： Chrome DevTools 的 Elements 面板可实时调试样式，Performance 面板分析重绘/回流，Lighthouse 可检测可访问性与性能问题。

8. CSS 与 HTML 协作要点

避免使用 id 作为样式钩子（用 class 更可复用）。
保持样式与结构分离：不要在 HTML 中写 <style> 或内联样式（除非必要）。
利用 data-* 属性与 CSS 属性选择器结合，实现动态样式（如 [data-active="true"]）。
使用 @import 需谨慎，会增加请求次数；推荐使用 <link> 合并或构建工具。

📋 速查表

分类	推荐做法	避免
HTML 结构	语义化标签、清晰的 heading 层级	滥用 div/span、跳级使用 h1~h6
可访问性	alt、label、aria-*、键盘可操作	纯图片无文字、无焦点样式、缺少表单关联
CSS 组织	BEM 命名、CSS 变量、组件化	深嵌套（> 3层）、!important 滥用
布局	Flexbox / Grid、相对单位、gap	float 布局、table 布局（非表格数据）
响应式	移动优先、clamp()、媒体查询断点	固定 px 宽度、忽略触摸目标大小
性能	图片懒加载、CSS/JS 压缩、减少请求	大尺寸未压缩图片、过多 @import

⚡ 持续迭代 · 保持学习 · 实践出真知