HTML5 + CSS3 基础

SunnyFan大约 10 分钟约 3101 字

HTML5 + CSS3 基础

简介

HTML（超文本标记语言）和 CSS（层叠样式表）是 Web 开发的基石。HTML5 引入了语义化标签、表单增强和多媒体支持，CSS3 带来了弹性布局、动画和响应式设计。掌握 HTML5 + CSS3 是前端开发的第一步，也是构建现代 Web 应用的基础。

特点

1.语义化标签 — header/nav/main/section/article
2.Flexbox 布局 — 一维弹性布局
3.CSS 变量 — 自定义属性实现主题化
4.媒体查询 — 响应式设计适配多端

HTML5 语义化

页面结构

<!-- 语义化 HTML5 页面结构 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 语义化页面</title>
</head>
<body>
    <!-- 页头 -->
    <header>
        <nav>
            <a href="/" class="logo">MyApp</a>
            <ul>
                <li><a href="/home">首页</a></li>
                <li><a href="/about">关于</a></li>
                <li><a href="/contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <!-- 主内容 -->
    <main>
        <!-- 英雄区域 -->
        <section class="hero">
            <h1>欢迎来到 MyApp</h1>
            <p>构建现代 Web 应用的最佳实践</p>
            <button>开始使用</button>
        </section>

        <!-- 特色区域 -->
        <section class="features">
            <article class="feature-card">
                <h3>高性能</h3>
                <p>优化的加载速度和渲染性能</p>
            </article>
            <article class="feature-card">
                <h3>响应式</h3>
                <p>完美适配桌面、平板和手机</p>
            </article>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <p>&copy; 2024 MyApp. All rights reserved.</p>
    </footer>
</body>
</html>

表单增强

<!-- HTML5 表单类型和验证 -->
<form id="registerForm">
    <!-- 文本输入 -->
    <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" required placeholder="请输入姓名" minlength="2">
    </div>

    <!-- 邮箱 -->
    <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" required placeholder="user@example.com">
    </div>

    <!-- 数字 -->
    <div class="form-group">
        <label for="age">年龄</label>
        <input type="number" id="age" min="18" max="120" step="1">
    </div>

    <!-- 日期 -->
    <div class="form-group">
        <label for="birthday">生日</label>
        <input type="date" id="birthday">
    </div>

    <!-- 颜色选择 -->
    <div class="form-group">
        <label for="color">主题色</label>
        <input type="color" id="color" value="#0078D4">
    </div>

    <!-- 下拉 -->
    <div class="form-group">
        <label for="role">角色</label>
        <select id="role">
            <option value="">请选择</option>
            <option value="admin">管理员</option>
            <option value="editor">编辑</option>
            <option value="viewer">查看者</option>
        </select>
    </div>

    <button type="submit">注册</button>
</form>

CSS3 核心特性

Flexbox 布局

/* Flexbox 弹性布局 */
.container {
    display: flex;
    justify-content: space-between;  /* 主轴对齐 */
    align-items: center;             /* 交叉轴对齐 */
    gap: 16px;                       /* 间距 */
    flex-wrap: wrap;                 /* 换行 */
}

/* 导航栏 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar .logo { font-size: 20px; font-weight: bold; }

.navbar ul {
    display: flex;
    gap: 24px;
    list-style: none;
}

/* 卡片网格 */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card-grid .card {
    flex: 1 1 300px;  /* 最小300px，自动填充 */
    max-width: calc(33.333% - 14px);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
}

/* 居中布局 */
.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

CSS 变量与主题

/* CSS 自定义属性（变量） */
:root {
    --primary-color: #0078D4;
    --primary-hover: #005A9E;
    --background: #ffffff;
    --surface: #f5f5f5;
    --text: #1a1a1a;
    --text-secondary: #666666;
    --border: #e0e0e0;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --font-size-base: 14px;
    --spacing: 16px;
}

/* 暗色主题 */
[data-theme="dark"] {
    --primary-color: #60CDFF;
    --primary-hover: #3D9BFF;
    --background: #1f1f1f;
    --surface: #2d2d2d;
    --text: #ffffff;
    --text-secondary: #999999;
    --border: #444444;
}

/* 使用变量 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--font-size-base);
    color: var(--text);
    background: var(--background);
    line-height: 1.6;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--spacing);
    box-shadow: var(--shadow);
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    padding: 8px 24px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

响应式设计

/* 媒体查询 — 响应式断点 */
/* 移动优先 */

/* 默认（手机）*/
.container { padding: 12px; }
.card-grid .card { flex: 1 1 100%; }

/* 平板（≥768px）*/
@media (min-width: 768px) {
    .container { padding: 24px; max-width: 720px; margin: 0 auto; }
    .card-grid .card { flex: 1 1 calc(50% - 10px); }
}

/* 桌面（≥1024px）*/
@media (min-width: 1024px) {
    .container { max-width: 1200px; }
    .card-grid .card { flex: 1 1 calc(33.333% - 14px); }
}

CSS Grid 布局

/* CSS Grid — 二维布局 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 三等分 */
    grid-template-rows: auto;
    gap: 20px;
    padding: 20px;
}

/* 响应式网格 — auto-fill 自动填充 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* 复杂网格布局 — 后台管理页面 */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    min-height: 100vh;
}

.dashboard-header { grid-area: header; }
.dashboard-sidebar { grid-area: sidebar; }
.dashboard-main { grid-area: main; }

/* 命名网格线 */
.named-grid {
    display: grid;
    grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];
    grid-template-rows: [header-start] 60px [header-end main-start] 1fr [main-end];
}

/* 对齐方式 */
.grid-item {
    justify-self: center;  /* 水平居中 */
    align-self: center;    /* 垂直居中 */
}

CSS 定位体系

/* 定位详解 */
/* 1. static — 默认，文档流 */
/* 2. relative — 相对自身偏移 */
/* 3. absolute — 相对最近的定位祖先 */
/* 4. fixed — 相对视口 */
/* 5. sticky — 滚动到阈值时固定 */

/* 粘性定位 — 顶部导航栏 */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 居中定位 */
.centered-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* 层叠上下文（z-index） */
/* 每个定位元素 + opacity < 1 + transform + filter 都会创建新的层叠上下文 */
.parent {
    position: relative;
    z-index: 1;  /* 创建新的层叠上下文 */
}

.parent .child {
    z-index: 999;  /* 只在 parent 的层叠上下文内有效 */
}

CSS 动画

/* 过渡动画 */
.button {
    transition: all 0.3s ease;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* 加载旋转 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 24px; height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

现代 CSS 特性

/* 容器查询 — 基于父容器尺寸响应 */
.card-container {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 400px) {
    .card { flex-direction: row; }
    .card .card-image { width: 200px; }
}

/* :has() 选择器 — 父选择器 */
/* 当表单中有 focus 的 input 时 */
form:has(input:focus) {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.2);
}

/* 当卡片包含图片时 */
.card:has(img) {
    grid-column: span 2;
}

/* 颜色混合 */
.accent-color {
    color: color-mix(in srgb, var(--primary-color), white 20%);
}

/* 嵌套规则（CSS Native Nesting）*/
.navbar {
    background: white;
    padding: 12px 24px;

    & .logo {
        font-size: 20px;
        font-weight: bold;
        color: var(--primary-color);
    }

    & ul {
        display: flex;
        gap: 16px;
        list-style: none;

        & li a {
            text-decoration: none;
            color: var(--text);

            &:hover {
                color: var(--primary-color);
            }
        }
    }
}

/* clamp() — 流式排版 */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);  /* 最小 1.5rem，最大 3rem */
}

.container {
    width: clamp(320px, 90%, 1200px);
    margin: 0 auto;
}

BEM 命名规范

/* BEM — Block Element Modifier */
/* Block: 独立的功能块 */
/* Element: 块的组成部分 */
/* Modifier: 块或元素的状态/变体 */

/* 基础 */
.btn { /* Block */ }
.btn__icon { /* Element */ }
.btn--primary { /* Modifier */ }
.btn--large { /* Modifier */ }
.btn__icon--disabled { /* Element + Modifier */ }

/* 实际示例 */
.user-card { /* Block */
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.user-card__avatar { /* Element */
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.user-card__name { /* Element */
    font-size: 16px;
    font-weight: 600;
}

.user-card--active { /* Modifier */
    border-color: var(--primary-color);
}

.user-card__name--highlighted { /* Element Modifier */
    color: var(--primary-color);
}

/* BEM 好处：
   1. 样式隔离，避免冲突
   2. 层级关系清晰
   3. 便于维护和复用 */

CSS 性能优化

/* 1. 使用 will-change 提示浏览器 */
.animated-element {
    will-change: transform, opacity;
}

/* 2. 使用 transform 代替 top/left 做动画 */
/* 差 — 触发重排 */
.moving-bad {
    transition: top 0.3s, left 0.3s;
}

/* 好 — 只触发合成层 */
.moving-good {
    transition: transform 0.3s;
    transform: translateX(100px);
}

/* 3. contain 属性优化 */
.card {
    contain: content; /* 限制浏览器渲染范围 */
}

/* 4. 避免 @import（阻塞渲染）*/
/* 差 */
/* @import url('base.css'); */

/* 好 — 在 HTML 中用 link 标签 */
/* <link rel="stylesheet" href="base.css"> */

/* 5. 硬件加速 */
.gpu-accelerated {
    transform: translateZ(0); /* 强制 GPU 渲染 */
    backface-visibility: hidden;
}

<!-- 无障碍最佳实践 -->

<!-- 1. 语义化标签 -->
<nav aria-label="主导航">
    <ul>
        <li><a href="/" aria-current="page">首页</a></li>
        <li><a href="/about">关于</a></li>
    </ul>
</nav>

<!-- 2. 图片替代文本 -->
<img src="chart.png" alt="2024年销售额增长趋势图" loading="lazy">

<!-- 3. 表单关联 -->
<label for="email">邮箱</label>
<input type="email" id="email" aria-describedby="email-hint" required>
<span id="email-hint" class="hint">我们不会公开您的邮箱</span>

<!-- 4. 按钮语义 -->
<button type="button" aria-label="关闭对话框">
    <svg aria-hidden="true">...</svg>
</button>

<!-- 5. 弹窗 -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <h2 id="dialog-title">确认删除</h2>
    <p>确定要删除这条记录吗？</p>
    <button>取消</button>
    <button>确认</button>
</div>

<!-- 6. 跳过导航（Skip Link）-->
<a href="#main-content" class="skip-link">跳到主内容</a>
<main id="main-content">...</main>

<!-- 7. ARIA 实时区域（动态内容）-->
<div aria-live="polite" aria-atomic="true">
    <!-- 动态更新的内容，如搜索结果数量 -->
</div>

<!-- 8. 适当的 heading 层级 -->
<h1>页面标题</h1>
    <h2>区域标题</h2>
        <h3>子区域标题</h3>
<!-- 不要跳级，如 h1 直接到 h3 -->

优点

1.标准化 — W3C 标准，所有浏览器支持
2.语义化 — HTML5 标签提高可读性和 SEO
3.灵活布局 — Flexbox/Grid 解决复杂布局
4.响应式 — 媒体查询适配多种设备

缺点

1.浏览器兼容 — CSS3 新特性在旧浏览器可能不支持
2.全局作用 — CSS 样式全局生效，大项目容易冲突
3.缺少逻辑 — 原生 CSS 无法进行条件判断和循环
4.调试困难 — 复杂的层叠和继承关系难以追踪

总结

HTML5 + CSS3 是前端开发的基础。HTML5 核心是语义化标签（header/nav/main/section），CSS3 核心是 Flexbox 布局和 CSS 变量。响应式设计用媒体查询，动画用 transition 和 keyframes。建议使用 CSS 变量管理主题色，移动优先编写媒体查询。