HTML5与CSS3基础

Web开发专题 · 掌握Web前端开发的基石技能

专题：Python Web开发系统学习

关键词：Python, Web开发, HTML5, CSS3, 语义化标签, Flexbox, Grid, 响应式设计, 前端基础

一、HTML5基础

1. HTML文档结构

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准语言。每个HTML文档都以文档类型声明（DOCTYPE）开头，告知浏览器使用HTML5标准来渲染页面。完整的HTML文档由 <html> 根元素包裹，内含 <head> 和 <body> 两大区域。head区域存放元数据、标题、样式引用和脚本链接，body区域则包含所有对用户可见的内容。

<!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>
    <h1>你好，世界！</h1>
    <p>这是我的第一个HTML5页面。</p>
</body>
</html>

其中 meta charset="UTF-8" 指定字符编码为UTF-8，确保中文和其他特殊字符正确显示。viewport 元标签则是响应式设计的基石，保证页面在移动设备上按比例缩放。

2. 语义化标签

HTML5引入了大量语义化标签，旨在用标签名称本身传达内容的意义，而非仅仅使用无意义的 <div> 进行布局。语义化标签有助于搜索引擎理解页面结构、提升可访问性（方便屏幕阅读器），也使代码更易维护。

<header>    <!-- 页面或区块的头部，通常包含导航、Logo、标题 -->
<nav>       <!-- 导航链接区域 -->
<main>      <!-- 页面主体内容，每个页面仅使用一次 -->
<section>   <!-- 文档中的独立节/区段 -->
<article>   <!-- 独立的文章、博客帖、评论等内容块 -->
<aside>     <!-- 侧边栏或与主内容间接相关的内容 -->
<footer>    <!-- 页面或区块的底部，包含版权、联系方式 -->

良好实践：使用语义化标签构建的页面，即使没有CSS样式，内容结构依然清晰可读。搜索引擎在抓取页面时，会优先关注 <main> 和 <article> 中的内容以确定页面主题。

3. 文本元素

HTML提供丰富的文本标记元素：标题标签 <h1> 至 <h6> 定义六级标题，其中 <h1> 最为重要，每页通常只使用一次。段落标签 <p> 定义文本段落。<span> 是行内容器，用于对文本片段应用样式或脚本。<strong> 表示重要内容（默认加粗），<em> 表示强调内容（默认斜体）。

<h1>一级标题（最重要）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是一个段落，包含<strong>重要文本</strong>和<em>强调文本</em>。</p>
<p>使用<span style="color:red;">span标签</span>可以对行内元素单独设置样式。</p>

4. 链接与图片

<a> 标签创建超链接，通过 href 属性指定目标URL，target="_blank" 在新标签页打开链接。<img> 标签嵌入图片，src 指定图片路径，alt 提供替代文本（对SEO和无障碍访问至关重要）。

<!-- 超链接 -->
<a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN Web文档</a>
<a href="/about.html">关于我们（相对路径）</a>
<a href="#section2">跳转到页面内锚点</a>

<!-- 图片 -->
<img src="images/logo.png" alt="网站Logo" width="200" height="100">
<img src="photos/photo.jpg" alt="风景照片" style="max-width:100%;">

5. 列表

HTML支持三种列表：无序列表 <ul>（项目符号）、有序列表 <ol>（编号）和定义列表 <dl>（术语及描述）。列表项分别使用 <li> 和 <dt>/<dd> 表示。

<!-- 无序列表 -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步：打开编辑器</li>
    <li>第二步：编写代码</li>
    <li>第三步：保存文件</li>
</ol>

<!-- 定义列表 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于构建网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于控制网页表现。</dd>
</dl>

6. 表格

表格由 <table> 元素创建，<thead> 定义表头区域，<tbody> 定义主体区域。<tr> 表示行，<th> 表示表头单元格（默认加粗居中），<td> 表示普通数据单元格。使用 colspan 和 rowspan 属性可以合并单元格。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>

二、HTML5表单

1. 表单元素

表单是用户与网站交互的核心方式。<form> 元素用于创建表单区域，action 属性指定数据提交地址，method 属性指定HTTP方法（GET或POST）。常用的表单控件包括文本框 <input>、下拉菜单 <select>、文本域 <textarea> 和按钮 <button>。

<form action="/submit" method="POST">
    <!-- 文本输入 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">

    <!-- 下拉菜单 -->
    <label for="city">城市：</label>
    <select id="city" name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>

    <!-- 文本域 -->
    <label for="intro">个人简介：</label>
    <textarea id="intro" name="intro" rows="4"></textarea>

    <!-- 提交按钮 -->
    <button type="submit">提交</button>
</form>

<label> 标签与表单控件绑定，提升可用性——点击标签文字即可聚焦对应的输入框。绑定方式有两种：使用 for 属性指向控件的 id，或将控件嵌套在 <label> 内部。

2. input类型

HTML5为 <input> 元素引入了丰富的 type 属性值，不同类型的输入框在移动设备上会弹出对应的虚拟键盘，提升输入体验。

类型	说明	示例
text	普通文本输入	<input type="text">
password	密码输入（内容遮蔽）	<input type="password">
email	电子邮件地址（自动校验格式）	<input type="email">
number	数字输入（上下箭头调节）	<input type="number" min="0" max="100">
date	日期选择器	<input type="date">
file	文件上传	<input type="file" accept="image/*">
checkbox	复选框（多选）	<input type="checkbox">
radio	单选按钮	<input type="radio" name="gender">

<!-- 复选框与单选按钮示例 -->
<fieldset>
    <legend>兴趣爱好（多选）</legend>
    <input type="checkbox" id="hobby1" name="hobby" value="reading">
    <label for="hobby1">阅读</label>
    <input type="checkbox" id="hobby2" name="hobby" value="coding">
    <label for="hobby2">编程</label>
</fieldset>

<fieldset>
    <legend>性别（单选）</legend>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
</fieldset>

3. 表单验证属性

HTML5提供了内建的表单验证机制，无需JavaScript即可实现基本的输入校验。required 标记必填字段，pattern 用正则表达式校验格式，minlength 和 maxlength 限制输入长度，min 和 max 限制数值范围。当验证失败时，浏览器会自动显示错误提示信息。

<form>
    <!-- 必填字段 -->
    <input type="text" required placeholder="此项必填">

    <!-- 正则验证（11位手机号） -->
    <input type="text" pattern="[0-9]{11}" placeholder="请输入11位手机号">

    <!-- 长度限制 -->
    <input type="text" minlength="2" maxlength="20" placeholder="2-20个字符">

    <!-- 数值范围 -->
    <input type="number" min="18" max="120" value="18">

    <button type="submit">提交</button>
</form>

4. 表单提交与method属性

表单的 method 属性决定数据如何发送到服务器：GET 方法将表单数据附加在URL查询字符串中（适合搜索等幂等操作），POST 方法将数据放在请求体中（适合登录、注册等包含敏感信息的操作）。enctype 属性在文件上传时必须设置为 multipart/form-data。

三、CSS3基础

1. CSS引入方式

CSS有三种引入方式：内联样式（通过元素的 style 属性直接书写）、内部样式表（在 <head> 中使用 <style> 标签）和外部样式表（通过 <link> 标签引入独立的 .css 文件）。推荐使用外部样式表，实现结构与表现的分离，便于维护和缓存复用。

<!-- 内联样式（不推荐滥用） -->
<p style="color: red; font-size: 16px;">红色文字</p>

<!-- 内部样式表 -->
<style>
    p { color: blue; }
</style>

<!-- 外部样式表（推荐） -->
<link rel="stylesheet" href="styles/main.css">

2. 选择器

CSS选择器用于精确匹配页面元素。类选择器（.class）可复用，ID选择器（#id）页面唯一，标签选择器（tag）影响所有同类元素。属性选择器（[attr=value]）按HTML属性匹配，伪类（:hover、:first-child、:nth-child()）匹配元素的特殊状态，伪元素（::before、::after）创建虚拟元素。组合选择器通过空格（后代）、>（子元素）、+（相邻兄弟）和 ~（通用兄弟）实现精确层级匹配。

/* 类选择器 */
.card { border: 1px solid #ddd; }

/* ID选择器（慎用，避免过度特异性） */
#header { background: #333; }

/* 标签选择器 */
a { color: #3498db; text-decoration: none; }

/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }

/* 伪类 */
a:hover { color: #e67e22; }
li:first-child { font-weight: bold; }
li:nth-child(even) { background: #f5f5f5; }

/* 伪元素 */
.quote::before { content: "\201C"; }
.quote::after { content: "\201D"; }

/* 组合选择器 */
.container > .item { /* 直接子元素 */ }
h2 + p { /* h2后面的第一个段落 */ }
.card ~ .card { /* 同级后续元素 */ }

3. 盒模型

CSS盒模型（Box Model）是理解布局的基础。每个元素视为一个矩形盒子，从内到外依次为：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。通过 box-sizing 属性可以切换盒模型计算方式：content-box（默认，width只包含内容区）和 border-box（推荐，width包含内容区+padding+border）。

/* 标准盒模型：width = 内容宽度 */
.box-content {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    /* 实际占据宽度 = 200 + 20*2 + 2*2 = 244px */
}

/* 替代盒模型：width = 总宽度 */
.box-border {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #333;
    /* 实际占据宽度 = 200px（内容区自动收缩为156px） */
}

4. 背景与颜色

CSS支持多种颜色表示法：十六进制（#e67e22）、RGB（rgb(230, 126, 34)）、RGBA（rgba(230, 126, 34, 0.8)，带透明度）和HSL（hsl(28, 80%, 52%)）。background 属性可以设置纯色背景、渐变背景或背景图片。CSS3的渐变色包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。

/* 纯色背景 */
.bg-solid { background: #3498db; }

/* 渐变色背景 */
.bg-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 多重背景 */
.bg-multiple {
    background:
        url('overlay.png') no-repeat center,
        linear-gradient(45deg, #f093fb, #f5576c);
}

/* 背景图片设置 */
.bg-image {
    background: url('bg.jpg') no-repeat center/cover;
}

5. 字体与文本

font-family 定义字体栈，浏览器依次查找可用字体。安全字体组合如 font-family: "Microsoft YaHei", "PingFang SC", sans-serif; 确保中文正常显示。font-size 设置字号，line-height 控制行高（推荐值1.6-1.8提升可读性），text-align 设置对齐方式，text-decoration 控制下划线/删除线。使用 @font-face 可以引入自定义字体文件（如WOFF2格式）。

body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

h1 {
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;  /* 字间距 */
}

p {
    text-indent: 2em;     /* 首行缩进 */
    text-align: justify;  /* 两端对齐 */
}

四、CSS3布局

1. 浮动布局

float 属性最初用于实现文字环绕图片效果，后被广泛用于页面布局。元素设置 float: left 或 float: right 后会脱离文档流，后续元素会环绕排列。clear 属性用于清除浮动影响，常见技巧是在父容器末尾添加一个 clearfix 伪元素以防止父容器高度塌陷。

/* 经典两栏浮动布局 */
.left-sidebar {
    float: left;
    width: 250px;
}
.main-content {
    float: left;
    width: calc(100% - 270px);
    margin-left: 20px;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 或者使用overflow触发BFC */
.parent { overflow: hidden; }

2. Flexbox弹性布局

Flexbox（弹性盒布局）是一维布局模型，解决了传统布局在垂直居中、等分布局等场景中的痛点。通过设置 display: flex 将容器变为弹性容器，其直接子元素自动变为弹性项目。justify-content 控制主轴对齐（flex-start、center、space-between、space-around），align-items 控制交叉轴对齐（stretch、center、flex-start、flex-end）。Flexbox非常适合导航栏、卡片列表、表单布局等场景。

/* 水平垂直居中 */
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

/* 等分布局 */
.equal-grid {
    display: flex;
    gap: 20px;
}
.equal-grid > .item {
    flex: 1;  /* 每个项目等宽 */
}

/* 导航栏 */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* 圣杯布局主体 */
.layout {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.layout > main {
    display: flex;
    flex: 1;
}
.layout > main > nav { width: 200px; }
.layout > main > article { flex: 1; }

3. Grid网格布局

CSS Grid是二维布局系统，可同时控制行和列，是迄今为止最强大的CSS布局方案。通过 display: grid 创建网格容器，grid-template-columns 和 grid-template-rows 定义网格轨道，fr 单位实现弹性比例分配。gap 设置网格间距。Grid布局在复杂页面结构（如仪表盘、图库、杂志式布局）中优势尤为突出。

/* 三列等宽网格 */
.three-col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 经典Dashboard布局 */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    min-height: 100vh;
}
.dashboard-header { grid-area: header; }
.dashboard-sidebar { grid-area: sidebar; }
.dashboard-main { grid-area: main; }
.dashboard-aside { grid-area: aside; }
.dashboard-footer { grid-area: footer; }

/* 自适应卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

4. 定位

position 属性控制元素的定位方式：static（默认，按正常文档流排列）、relative（相对自身原始位置偏移，不脱离文档流）、absolute（脱离文档流，相对于最近的已定位祖先元素定位）、fixed（脱离文档流，相对于视口定位，滚动时不移动）。sticky 是粘性定位，在滚动到阈值前表现为relative，之后表现为fixed。配合 top、right、bottom、left 和 z-index 控制具体位置和层叠顺序。

/* 固定头部 */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* 模态框居中 */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
}

/* 粘性侧边栏 */
.sticky-sidebar {
    position: sticky;
    top: 80px;  /* 滚动到距顶部80px时固定 */
}

/* 相对定位微调 */
.relative-box {
    position: relative;
    top: -5px;  /* 向上偏移5px */

5. 响应式设计

响应式设计（Responsive Web Design）使网页在不同设备上都能获得最佳浏览体验。核心三要素：流式网格（使用百分比/fr 等相对单位）、弹性图片（max-width: 100%）和媒体查询（@media）。媒体查询通过 min-width/max-width 等条件应用不同样式，常见的断点包括手机（480px以下）、平板（768px-1024px）和桌面（1024px以上）。推荐采用"移动优先"策略，先编写移动端样式，再用 min-width 逐步增强。

/* 移动优先响应式设计 */

/* 基础样式（移动端） */
.container { padding: 15px; }
.sidebar { display: none; }

/* 平板及以上 */
@media (min-width: 768px) {
    .container { padding: 30px; }
    .sidebar { display: block; width: 250px; }
    .layout { display: flex; }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

/* 大屏幕 */
@media (min-width: 1440px) {
    .container { padding: 40px; }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a2e; color: #e0e0e0; }
}

五、CSS3动画与过渡

1. transition过渡效果

transition 属性允许CSS属性值在变化时平滑过渡，而非瞬间切换。其语法为 transition: property duration timing-function delay。可过渡的属性包括颜色、大小、位置、透明度等。ease、linear、ease-in、ease-out 和 cubic-bezier() 函数控制动画速度曲线。合理使用过渡效果能显著提升交互体验，但应注意避免对 width 和 height 等触发重排的属性做过渡（性能较差）。

/* 按钮悬停过渡效果 */
.btn {
    background: #3498db;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

/* 卡片悬停阴影过渡 */
.card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transform: translateY(-4px);
}

/* 延迟显示效果 */
.tooltip {
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;  /* 0.2s延迟 */
}
.parent:hover .tooltip {
    opacity: 1;
}

2. @keyframes关键帧动画

@keyframes 规则定义更复杂的多步骤动画序列，通过百分比或 from/to 关键字描述中间状态。animation 属性调用动画，支持 name（动画名称）、duration（持续时间）、timing-function（速度曲线）、delay（延迟）、iteration-count（播放次数，可设为 infinite 无限循环）和 direction（方向，如 alternate 来回播放）。

/* 定义动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 应用动画 */
.animated-element {
    animation: fadeInUp 0.6s ease-out forwards;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

.notification-badge {
    animation: pulse 2s ease-in-out infinite;
}

/* 多个动画组合 */
.complex-animation {
    animation:
        fadeInUp 0.6s ease-out,
        pulse 2s ease-in-out 0.6s infinite;
}

3. transform变换

transform 属性允许对元素进行平移（translate()）、旋转（rotate()）、缩放（scale()）和倾斜（skew()）操作。变换基于 transform-origin 指定的原点（默认中心点）。3D变换（translateZ、rotateX、rotateY、perspective）可创建三维立体效果。多个变换函数可以组合使用，浏览器会按从右到左的顺序应用。

/* 2D变换 */
.scale-hover:hover { transform: scale(1.1); }
.rotate-icon:hover { transform: rotate(90deg); }
.slide-in { transform: translateX(-100%); }

/* 3D变换 */
.card-3d {
    perspective: 1000px;
}
.card-3d-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.card-3d:hover .card-3d-inner {
    transform: rotateY(180deg);
}

/* 组合变换 */
.combined-transform {
    transform: translateX(50px) rotate(45deg) scale(1.2);
    /* 注意书写顺序影响结果 */
}

4. 动画性能优化

动画性能直接影响用户体验。应优先对 transform 和 opacity 属性做动画，因为它们由GPU合成，不触发重排（reflow）和重绘（repaint）。避免对 width、height、top、left 等布局属性做动画。使用 will-change 属性提前告知浏览器哪些元素将变化，但不要滥用。对于复杂动画，可考虑使用 requestAnimationFrame 替代 setInterval。

/* 性能优化实践 */

/* 好：只改变transform和opacity */
.good-animation {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 差：改变布局属性 */
.bad-animation {
    transition: width 0.3s ease, height 0.3s ease, top 0.3s ease;
}

/* 合理使用will-change */
.will-animate {
    will-change: transform, opacity;
}

/* 利用硬件加速 */
.hw-accelerated {
    transform: translateZ(0);  /* 触发GPU合成层 */
}

六、前端开发最佳实践

1. 语义化HTML的重要性

语义化HTML是高质量前端开发的基石。它让搜索引擎更准确地理解页面内容（SEO优化），让屏幕阅读器等辅助技术更有效地导航页面（无障碍访问），也让开发者更容易阅读和维护代码。例如，使用 <nav> 而非 <div class="nav">，使用 <button> 而非 <div onclick="...">。良好的语义化HTML是"渐进增强"策略的基础——即使CSS或JavaScript加载失败，内容本身依然可访问。

核心原则：选择最合适的HTML元素来表达内容的含义，而非根据默认样式来选择。样式可以随时改变，但语义结构应当始终准确。

2. CSS命名规范（BEM）

BEM（Block Element Modifier）是一种广受认可的CSS命名方法论，通过 block__element--modifier 的命名模式避免样式冲突，提高代码可维护性。Block代表独立组件，Element是组件的组成部分，Modifier表示变体或状态。BEM使CSS选择器特异性保持扁平化，避免深层嵌套。

/* BEM命名示例 */

/* Block：独立组件 */
.card { }
.card__title { }
.card__description { }
.card__image { }
.card__button { }

/* Modifier：变体状态 */
.card--featured { }
.card--dark { }
.card__button--primary { }
.card__button--disabled { }

/* HTML结构对应 */
<div class="card card--featured">
    <h3 class="card__title">特色卡片</h3>
    <p class="card__description">描述文字</p>
    <button class="card__button card__button--primary">确认</button>
</div>

3. 浏览器兼容性

不同浏览器对CSS特性的支持程度存在差异。开发时应查阅 Can I Use 确认目标浏览器的支持情况。对于较新的CSS特性（如Grid、CSS Variables），可添加厂商前缀（-webkit-、-moz- 等）或使用 @supports 进行特性检测。推荐使用PostCSS + Autoprefixer等工具自动处理前缀。对于不支持CSS Grid的旧浏览器，可提供Flexbox作为降级方案。

/* 特性检测回退 */
.container {
    display: flex;           /* 通用方案 */
}
@supports (display: grid) {
    .container {
        display: grid;       /* 现代浏览器使用Grid */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 自动添加前缀示例（由Autoprefixer处理） */
.card {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

4. 响应式设计原则

响应式设计的核心原则是按内容适配设备，而非为特定设备单独开发。遵循"移动优先"策略，先设计最小屏幕尺寸的布局，再通过媒体查询逐步增加复杂度。使用相对单位（rem、em、%、vw、vh）而非固定像素，确保布局弹性伸缩。图片和媒体资源使用 max-width: 100% 防止溢出，并可结合 <picture> 元素和 srcset 属性为不同分辨率提供不同尺寸的资源。触摸设备应考虑足够大的点击目标（至少44x44px）。

/* 响应式设计核心模式 */

/* 1. 弹性图片 */
img {
    max-width: 100%;
    height: auto;
}

/* 2. 相对单位 */
html { font-size: 16px; }
@media (min-width: 768px) {
    html { font-size: 18px; }
}
h1 { font-size: 2rem; }  /* 随基础字号变化 */

/* 3. 响应式容器布局 */
.page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .page-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1024px) {
    .page-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

核心总结：HTML5提供了丰富的语义化标签和表单控件，构建了清晰的内容结构；CSS3则通过强大的选择器、盒模型、Flex/Grid布局、过渡动画和媒体查询，赋予了页面精美的视觉表现和自适应的交互体验。掌握HTML5与CSS3是成为合格Web开发者的第一步，也是后续学习JavaScript、前端框架和全栈开发的重要基石。