qw
/
soilgd


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069
							<!-- 
    这是一个HTML综合学习文档模板，包含了HTML5的基本结构、文本标签、多媒体标签、表单元素、HTML5语义化标签等内容。
    每个部分都配有详细注释，便于学习和理解。
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 设置字符编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置视口，保证移动端自适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>HTML综合学习文档</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局样式重置 */
        /* 目的：消除不同浏览器对HTML元素的默认样式（如margin, padding）差异，确保页面在各种浏览器下有一致的基础外观 */
        /* 作用于所有元素 (*) */
        * {
            margin: 0;
            /* 移除所有元素的外边距 */
            padding: 0;
            /* 移除所有元素的内边距 */
            box-sizing: border-box;
            /* 改变盒模型：元素的width和height包含border和padding，便于布局计算 */
        }

        /* CSS 变量定义 (Custom Properties) */
        /* 目的：创建可重用的值，方便进行主题切换（如亮色/暗色模式）和统一管理颜色、阴影、圆角等设计属性 */
        /* :root 伪类选择器代表文档的根元素（通常是 <html>），在这里定义的变量可在整个文档中使用 */
        :root {
            --primary: #4361ee;
            /* 主色调，通常用于主要按钮、链接、高亮区域 */
            --secondary: #3f37c9;
            /* 次要色调，用于次要按钮或作为主色调的补充 */
            --accent: #4cc9f0;
            /* 强调色，用于需要突出显示的元素 */
            --light: #f8f9fa;
            /* 浅色，常用于背景或浅色文本 */
            --dark: #212529;
            /* 深色，常用于深色文本或深色背景 */
            --success: #4CAF50;
            /* 成功/正确状态的颜色 */
            --warning: #ff9800;
            /* 警告/注意状态的颜色 */
            --danger: #f44336;
            /* 危险/错误状态的颜色 */
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* 预定义的阴影效果，增加元素层次感 */
            --border-radius: 8px;
            /* 预定义的边框圆角大小，用于创建圆角卡片、按钮等 */
            --transition: all 0.3s ease;
            /* 预定义的过渡动画，使属性变化更平滑 */
            --text-light: #f8f9fa;
            /* 浅色文本颜色 */
            --text-dark: #212529;
            /* 深色文本颜色 */
            --bg: #f5f7fa;
            /* 页面默认背景色 */
            --card-bg: #ffffff;
            /* 卡片（Card）组件的背景色 */
            --header-bg: #4361ee;
            /* 页头（Header）的背景色 */
            --sidebar-bg: #f0f2f5;
            /* 侧边栏（Sidebar）的背景色 */
        }

        /* 暗色主题变量覆盖 */
        /* 目的：当 body 或根元素被添加 'dark-theme' 类时，覆盖 :root 中定义的某些变量值，实现暗色主题 */
        /* 通常通过JavaScript动态切换此class来实现主题切换 */
        .dark-theme {
            --bg: #1a1a2e;
            /* 暗色背景 */
            --card-bg: #16213e;
            /* 暗色卡片背景 */
            --text-dark: #f0f0f0;
            /* 暗色主题下使用浅色文本 */
            --header-bg: #0f3460;
            /* 暗色页头背景 */
            --sidebar-bg: #1a1a2e;
            /* 暗色侧边栏背景 */
        }

        /* 页面基础布局样式 */
        /* 目的：使用 CSS Grid 布局模型构建整个页面的响应式结构 */
        /* 采用网格布局，定义了明确的区域划分 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* 定义字体栈 */
            line-height: 1.6;
            /* 定义行高，改善文本可读性 */
            color: var(--text-dark);
            /* 设置默认文本颜色，使用CSS变量 */
            background-color: var(--bg);
            /* 设置页面背景色，使用CSS变量 */
            min-height: 100vh;
            /* 最小高度为视口高度的100%，确保内容少时也能撑满屏幕 */
            display: grid;
            /* 启用 CSS Grid 布局 */
            /* 定义网格的列：第一列固定280px（通常用于侧边栏），第二列占据剩余所有空间(1fr) */
            grid-template-columns: 280px 1fr;
            /* 定义网格的行：第一行固定70px（页头），第二行占据剩余空间(1fr)（主要内容区），第三行固定50px（页脚） */
            grid-template-rows: 70px 1fr 50px;
            /* 定义网格区域的名称和布局：
       "header header"  -> 页头跨越两列
       "sidebar main"   -> 第一列是侧边栏，第二列是主内容区
       "footer footer"  -> 页脚跨越两列
       这些名称（header, sidebar, main, footer）将被 grid-area 属性引用 */
            grid-template-areas:
                "header header"
                "sidebar main"
                "footer footer";
            /* 为 body 元素本身应用过渡效果，当切换主题（如添加/移除 dark-theme class）时，颜色等属性会平滑变化 */
            transition: var(--transition);
        }

        /* 页头 (Header) 样式 */
        /* 使用 grid-area: header; 将此元素放置在由 grid-template-areas 定义的 'header' 区域 */
        header {
            grid-area: header;
            /* 将此元素放置在名为 'header' 的网格区域内 */
            background: var(--header-bg);
            /* 背景色使用CSS变量 */
            color: var(--text-light);
            /* 文本颜色使用CSS变量 */
            padding: 0 2rem;
            /* 左右内边距为2rem，上下为0 */
            display: flex;
            /* 使用 Flexbox 布局来排列页头内部元素 */
            justify-content: space-between;
            /* 子元素在主轴（水平）上分散对齐，第一个靠左，最后一个靠右 */
            align-items: center;
            /* 子元素在交叉轴（垂直）上居中对齐 */
            box-shadow: var(--shadow);
            /* 添加预定义的阴影效果 */
            z-index: 100;
            /* 设置较高的堆叠顺序，确保页头在其他内容之上（尤其在滚动时） */
        }

        /* logo 样式 */
        /* 专门针对页头内的logo元素（通常是一个类名为logo的元素） */
        .logo {
            font-size: 1.8rem;
            /* 设置logo文字大小 */
            font-weight: bold;
            /* 设置logo文字加粗 */
            display: flex;
            /* 使用 Flexbox 布局，方便图标和文字并排 */
            align-items: center;
            /* 内部元素（如图标和文字）垂直居中 */
            gap: 10px;
            /* 定义logo内部子元素之间的间距为10px */
            /* 例如，如果logo包含一个图标和一个文字，这个gap会让它们之间有10px的空隙 */
        }

        /* 主题切换按钮样式 */
        /* 定义一个用于切换亮色/暗色主题的按钮的外观 */
        .theme-toggle {
            background: var(--accent);
            /* 背景色使用CSS变量 --accent (强调色) */
            color: var(--text-dark);
            /* 文本颜色使用CSS变量 --text-dark (深色文本) */
            border: none;
            /* 移除默认边框 */
            padding: 8px 15px;
            /* 设置上下8px，左右15px的内边距 */
            border-radius: 20px;
            /* 设置20px的圆角，使按钮呈胶囊或圆形 */
            cursor: pointer;
            /* 鼠标悬停时显示为手型光标，表示可点击 */
            font-weight: 500;
            /* 字体粗细设置为中等偏粗 */
            display: flex;
            /* 使用Flexbox布局，便于内部元素（如图标和文字）对齐 */
            align-items: center;
            /* 内部元素在交叉轴（垂直方向）上居中对齐 */
            gap: 8px;
            /* 内部子元素之间保持8px的间距 */
            transition: var(--transition);
            /* 应用预设的过渡效果，使背景色等属性变化更平滑 */
        }

        /* 主题切换按钮悬停状态 */
        /* 当鼠标悬停在按钮上时的样式 */
        .theme-toggle:hover {
            background: #3fb8da;
            /* 背景色变为一个特定的蓝色（比--accent稍深），提供视觉反馈 */
            /* 注意：这里没有使用变量，而是固定值，可能为了提供更具体的悬停效果 */
        }

        /* 侧边栏样式 */
        /* 定义页面左侧边栏（通常用于导航）的整体样式 */
        aside {
            grid-area: sidebar;
            /* 将此元素放置在CSS Grid布局中名为'sidebar'的区域 */
            background: var(--sidebar-bg);
            /* 背景色使用CSS变量 --sidebar-bg */
            padding: 20px;
            /* 设置20px的内边距 */
            overflow-y: auto;
            /* 当内容超出容器高度时，允许垂直滚动（出现滚动条） */
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            /* 右侧添加1px宽的浅色（透明度10%）实线边框，作为与主内容区的分隔 */
        }

        /* 侧边栏内的一个分组区域 */
        /* 用于将侧边栏内容分组，例如“导航”、“工具”等 */
        .sidebar-section {
            margin-bottom: 25px;
            /* 每个分组下方留出25px的外边距，增加分组间的空间 */
        }

        /* 侧边栏分组标题样式 */
        .sidebar-section h3 {
            color: var(--primary);
            /* 标题文字颜色使用主色调 --primary */
            margin-bottom: 15px;
            /* 标题下方留出15px外边距 */
            padding-bottom: 8px;
            /* 标题下方填充8px */
            border-bottom: 2px solid var(--accent);
            /* 在标题下方添加2px宽的强调色实线，增强视觉层次 */
        }

        /* 侧边栏链接列表样式 */
        /* 定义导航链接列表的通用样式 */
        .sidebar-links {
            list-style: none;
            /* 移除列表项前的默认符号（如圆点） */
        }

        /* 侧边栏列表项样式 */
        .sidebar-links li {
            margin-bottom: 8px;
            /* 每个列表项下方留出8px外边距 */
        }

        /* 侧边栏链接样式 */
        .sidebar-links a {
            text-decoration: none;
            /* 移除链接的下划线 */
            color: var(--text-dark);
            /* 链接文字颜色使用深色文本 --text-dark */
            display: block;
            /* 使链接显示为块级元素，占据整行宽度，增加可点击区域 */
            padding: 8px 12px;
            /* 设置上下8px，左右12px的内边距 */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 --border-radius */
            transition: var(--transition);
            /* 应用过渡效果，使悬停时的变化更平滑 */
        }

        /* 侧边栏链接悬停状态 */
        .sidebar-links a:hover {
            background: var(--primary);
            /* 悬停时，背景色变为主色调 --primary */
            color: white;
            /* 悬停时，文字颜色变为白色，提高对比度 */
        }

        /* 侧边栏链接中的图标样式 */
        /* 假设链接中包含使用图标字体（如Font Awesome）的 <i> 标签 */
        .sidebar-links a i {
            width: 25px;
            /* 为图标设置固定的25px宽度 */
            text-align: center;
            /* 确保图标在设定的宽度内水平居中 */
            /* 这使得所有图标对齐整齐，改善视觉效果 */
        }

        /* 主内容区样式 */
        /* 定义页面中央主要区域的样式 */
        main {
            grid-area: main;
            /* 将此元素放置在CSS Grid布局中名为'main'的区域 */
            padding: 2rem;
            /* 设置2rem的内边距 */
            overflow-y: auto;
            /* 当内容超出容器高度时，允许垂直滚动（出现滚动条） */
        }

        /* 内容卡片样式 */
        /* 定义页面中用于包裹独立内容块（如表单、信息展示区）的卡片容器样式 */
        .section-card {
            background: var(--card-bg);
            /* 背景色使用卡片背景色 --card-bg */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 --border-radius */
            box-shadow: var(--shadow);
            /* 添加预设的阴影效果 --shadow，增加立体感和层次 */
            padding: 1.8rem;
            /* 设置1.8rem的内边距 */
            margin-bottom: 2rem;
            /* 卡片下方留出2rem的外边距，使卡片之间有足够间隔 */
            transition: var(--transition);
            /* 应用过渡效果，例如在主题切换时颜色变化更平滑 */
        }

        /* 卡片内一级标题样式 */
        .section-card h2 {
            color: var(--primary);
            /* 标题文字颜色使用主色调 --primary */
            margin-bottom: 1.5rem;
            /* 标题下方留出1.5rem外边距 */
            padding-bottom: 0.8rem;
            /* 标题下方填充0.8rem */
            border-bottom: 2px solid var(--accent);
            /* 在标题下方添加2px宽的强调色实线 */
            display: flex;
            /* 使用Flexbox布局 */
            align-items: center;
            /* 内部元素（如图标和文字）在交叉轴（垂直方向）上居中对齐 */
            gap: 10px;
            /* 内部子元素（如图标和文字）之间保持10px的间距 */
        }

        /* 卡片内二级标题样式 */
        .section-card h3 {
            color: var(--secondary);
            /* 标题文字颜色使用次要色调 --secondary */
            margin: 1.2rem 0 0.8rem;
            /* 设置上外边距1.2rem，左右外边距0，下外边距0.8rem */
        }

        /* 表格样式 */
        /* 定义表格的整体外观和布局 */
        table {
            width: 100%;
            /* 表格宽度占满其父容器 */
            border-collapse: collapse;
            /* 合并表格边框，使相邻单元格的边框合并为一条线 */
            margin: 1.2rem 0;
            /* 上下外边距为1.2rem，左右为0 */
            background: var(--card-bg);
            /* 背景色使用卡片背景色变量 */
            box-shadow: var(--shadow);
            /* 添加预设的阴影效果，增加立体感 */
            border-radius: var(--border-radius);
            /* 设置圆角，使表格边缘更柔和 */
            overflow: hidden;
            /* 隐藏溢出的内容，确保圆角和阴影效果在边框内显示 */
        }

        /* 表格表头和表格数据单元格的通用样式 */
        table th,
        table td {
            padding: 0.9rem;
            /* 单元格内边距为0.9rem */
            text-align: left;
            /* 文本左对齐 */
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            /* 每个单元格下方添加一条浅色（透明度10%）细线分隔 */
        }

        /* 表格表头样式 */
        table th {
            background-color: var(--primary);
            /* 表头背景色使用主色调 */
            color: white;
            /* 表头文字颜色为白色，提高对比度 */
        }

        /* 表格行悬停状态样式 */
        table tr:hover {
            background-color: rgba(0, 0, 0, 0.03);
            /* 当鼠标悬停在行上时，背景色变为非常浅的灰色（透明度3%） */
        }

        /* 表单样式 */
        /* 表单控件分组容器，用于管理标签和输入框的间距 */
        .form-group {
            margin-bottom: 1.2rem;
            /* 每个表单组下方留出1.2rem的外边距 */
        }

        /* 表单标签样式 */
        label {
            display: block;
            /* 显示为块级元素，独占一行 */
            margin-bottom: 0.5rem;
            /* 标签下方留出0.5rem的外边距 */
            font-weight: 500;
            /* 字体加粗 */
        }

        /* 输入框、选择框、文本域的通用样式 */
        input,
        select,
        textarea {
            width: 100%;
            /* 宽度占满其父容器 */
            padding: 0.8rem;
            /* 内边距为0.8rem */
            border: 1px solid #ddd;
            /* 1px宽的浅灰色边框 */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 */
            font-size: 1rem;
            /* 字体大小 */
            background: var(--card-bg);
            /* 背景色使用卡片背景色 */
            color: var(--text-dark);
            /* 文字颜色使用深色文本变量 */
            transition: var(--transition);
            /* 应用过渡效果，使获得焦点时的变化更平滑 */
        }

        /* 输入框、选择框、文本域获得焦点时的样式 */
        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--accent);
            /* 边框颜色变为强调色 */
            outline: none;
            /* 移除浏览器默认的轮廓线 */
            box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.3);
            /* 在边框外添加一层半透明的蓝色（--accent色）光晕（3px宽） */
        }

        /* 按钮通用样式 */
        button,
        .btn {
            background: var(--primary);
            /* 背景色使用主色调 */
            color: white;
            /* 文字颜色为白色 */
            border: none;
            /* 移除默认边框 */
            padding: 0.8rem 1.5rem;
            /* 上下内边距0.8rem，左右1.5rem */
            border-radius: var(--border-radius);
            /* 应用预设的圆角 */
            cursor: pointer;
            /* 鼠标悬停时显示为手型光标 */
            font-size: 1rem;
            /* 字体大小 */
            font-weight: 500;
            /* 字体加粗 */
            transition: var(--transition);
            /* 应用过渡效果 */
            display: inline-flex;
            /* 显示为行内Flexbox容器，便于图标和文字对齐 */
            align-items: center;
            /* 内部元素（如图标）垂直居中对齐 */
            gap: 8px;
            /* 内部子元素（如图标和文字）之间保持8px间距 */
        }

        /* 按钮悬停状态样式 */
        button:hover,
        .btn:hover {
            background: var(--secondary);
            /* 悬停时背景色变为次要色调 */
            transform: translateY(-2px);
            /* 向上轻微移动2px，模拟“按下”效果，增强交互感 */
        }

        /* 特定功能按钮样式 */
        .btn-success {
            /* 成功/确认按钮 */
            background: var(--success);
        }

        .btn-warning {
            /* 警告/注意按钮 */
            background: var(--warning);
        }

        .btn-danger {
            /* 危险/删除按钮 */
            background: var(--danger);
        }

        /* 列表样式 */
        /* 无序列表和有序列表的通用样式 */
        ul,
        ol {
            margin-left: 1.8rem;
            /* 左侧外边距1.8rem，形成缩进 */
            margin-bottom: 1.2rem;
            /* 下方外边距1.2rem */
        }

        /* 列表项样式 */
        li {
            margin-bottom: 0.5rem;
            /* 每个列表项下方留出0.5rem外边距 */
        }

        /* 页脚样式 */
        footer {
            grid-area: footer;
            /* 将此元素放置在CSS Grid布局中名为'footer'的区域 */
            background: var(--dark);
            /* 背景色使用深色变量 */
            color: var(--text-light);
            /* 文字颜色使用浅色文本变量 */
            text-align: center;
            /* 文本居中对齐 */
            padding: 1rem;
            /* 内边距1rem */
            display: flex;
            /* 使用Flexbox布局 */
            justify-content: center;
            /* 内容在主轴（水平）上居中对齐 */
            align-items: center;
            /* 内容在交叉轴（垂直）上居中对齐 */
        }

        /* 实用工具类 (Utility Classes) */
        /* 提供快速布局和样式的辅助类 */

        .flex {
            display: flex;
            /* 快速应用Flexbox布局 */
            gap: 1rem;
            /* 子元素间默认间距1rem */
            flex-wrap: wrap;
            /* 允许子元素换行 */
        }

        .grid {
            display: grid;
            /* 快速应用Grid布局 */
            /* 创建一个响应式网格：自动填充列，每列最小250px，最大1fr（均分剩余空间） */
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            /* 网格项之间的间距1.5rem */
        }

        .text-center {
            text-align: center;
            /* 文本居中对齐 */
        }

        .mt-2 {
            margin-top: 2rem;
            /* 上外边距2rem */
        }

        .mb-2 {
            margin-bottom: 2rem;
            /* 下外边距2rem */
        }

        .p-3 {
            padding: 1.5rem;
            /* 内边距1.5rem */
        }

        /* 示例框样式 - 用于突出显示示例内容 */
        .example-box {
            background: rgba(67, 97, 238, 0.1);
            /* 非常浅的蓝色背景（透明度10%） */
            border-left: 4px solid var(--primary);
            /* 左侧添加4px宽的主色调实线，作为视觉引导 */
            padding: 1.2rem;
            /* 内边距1.2rem */
            margin: 1.2rem 0;
            /* 上下外边距1.2rem */
            /* 设置圆角：左上角0度，其他三个角使用预设圆角，形成特殊视觉效果 */
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
        }

        /* 代码块样式 - 用于展示代码片段 */
        .code-block {
            background: #2d2d2d;
            /* 深灰色背景，模拟代码编辑器 */
            color: #f8f8f2;
            /* 浅色文字，提高可读性 */
            padding: 1.2rem;
            /* 内边距1.2rem */
            border-radius: var(--border-radius);
            /* 应用圆角 */
            margin: 1.2rem 0;
            /* 上下外边距1.2rem */
            overflow: auto;
            /* 内容溢出时允许滚动（特别是水平滚动） */
            font-family: 'Courier New', monospace;
            /* 使用等宽字体，适合代码显示 */
        }

        /* 标签示例样式 - 可能用于展示HTML标签或分类标签 */
        .tag-example {
            background: var(--light);
            /* 背景色使用浅色变量 */
            padding: 15px;
            /* 内边距15px */
            border-radius: var(--border-radius);
            /* 应用圆角 */
            margin: 15px 0;
            /* 上下外边距15px */
        }

        /* 响应式设计：小屏幕下布局调整 */
        /* 使用媒体查询，当屏幕宽度小于或等于 900px 时应用以下规则 */
        @media (max-width: 900px) {

            /* 调整整体页面布局 */
            body {
                /* 将网格布局的列数从多列（可能包含侧边栏）改为单列 */
                grid-template-columns: 1fr;
                /* 重新定义网格区域的排列顺序，使内容垂直堆叠 */
                grid-template-areas:
                    "header"
                    /* 顶部导航栏 */
                    "main"
                    /* 主内容区域（现在占据整个宽度） */
                    "footer";
                /* 页脚 */
                /* 注意：'sidebar' 区域在此布局中被移除 */
            }

            /* 隐藏侧边栏 */
            aside {
                display: none;
                /* 将侧边栏完全隐藏，不占用任何空间 */
            }

            /* 显示移动端菜单按钮 */
            .mobile-menu-btn {
                display: block;
                /* 将原本可能隐藏的移动端菜单按钮显示出来 */
                /* 这个按钮通常用于在小屏幕上点击以展开/收起侧边栏（如果实现的话） */
            }
        }

        /* 进一步适配更小的屏幕（如手机竖屏） */
        /* 当屏幕宽度小于或等于 600px 时应用以下规则 */
        @media (max-width: 600px) {

            /* 调整 Flex 布局容器的方向 */
            .flex {
                flex-direction: column;
                /* 将 Flex 容器的主轴方向改为垂直（从上到下） */
                /* 这使得原本水平排列的子元素在小屏幕上垂直堆叠，避免内容过窄或换行混乱 */
            }

            /* 调整 Grid 布局容器的列数 */
            .grid {
                /* 将网格布局强制变为单列 */
                grid-template-columns: 1fr;
                /* 无论之前定义的 minmax 如何，现在每行只显示一个网格项 */
                /* 这确保了在非常窄的屏幕上，网格项能完整显示且易于点击 */
            }
        }
    </style>
</head>

<body>
    <!-- 页头区域，包含logo和主题切换按钮 -->
    <header>
        <div class="logo">
            <i class="fab fa-html5"></i>
            <span>HTML综合学习文档</span>
        </div>
        <button class="theme-toggle" id="themeToggle">
            <i class="fas fa-moon"></i>
            <span>暗色模式</span>
        </button>
    </header>

    <!-- 侧边栏导航，包含各章节锚点 -->
    <aside>
        <div class="sidebar-section">
            <h3><i class="fas fa-book"></i> HTML基础</h3>
            <ul class="sidebar-links">
                <li><a href="#basic-structure"><i class="fas fa-code"></i> 基本结构标签</a></li>
                <li><a href="#text-tags"><i class="fas fa-heading"></i> 文本标签</a></li>
                <li><a href="#multimedia"><i class="fas fa-image"></i> 多媒体标签</a></li>
                <li><a href="#links"><i class="fas fa-link"></i> 超链接标签</a></li>
                <li><a href="#tables"><i class="fas fa-table"></i> 表格标签</a></li>
                <li><a href="#lists"><i class="fas fa-list"></i> 列表标签</a></li>
            </ul>
        </div>
        <div class="sidebar-section">
            <h3><i class="fas fa-edit"></i> 表单元素</h3>
            <ul class="sidebar-links">
                <li><a href="#forms"><i class="fas fa-window-maximize"></i> 表单基础</a></li>
                <li><a href="#inputs"><i class="fas fa-keyboard"></i> 输入类型</a></li>
                <li><a href="#html5-forms"><i class="fab fa-html5"></i> HTML5表单</a></li>
            </ul>
        </div>
        <div class="sidebar-section">
            <h3><i class="fas fa-star"></i> HTML5特性</h3>
            <ul class="sidebar-links">
                <li><a href="#html5-tags"><i class="fas fa-tags"></i> 语义化标签</a></li>
                <li><a href="#html5-media"><i class="fas fa-play-circle"></i> 音视频</a></li>
                <li><a href="#html5-apis"><i class="fas fa-cogs"></i> 新API</a></li>
            </ul>
        </div>
    </aside>

    <!-- 主内容区域，包含各知识点详细内容 -->
    <main>
        <!-- HTML基本结构部分 -->
        <section id="basic-structure" class="section-card">
            <h2><i class="fas fa-code"></i> HTML基本结构标签</h2>
            <!-- 基本结构标签表格 -->
            <table>
                <thead>
                    <tr>
                        <th>标签名</th>
                        <th>定义</th>
                        <th>说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>&lt;html&gt;&lt;/html&gt;</td>
                        <td>HTML标签</td>
                        <td>页面中最大的标签，称为根标签</td>
                    </tr>
                    <tr>
                        <td>&lt;head&gt;&lt;/head&gt;</td>
                        <td>文档的头部</td>
                        <td>必须设置title标签</td>
                    </tr>
                    <tr>
                        <td>&lt;title&gt;&lt;/title&gt;</td>
                        <td>文档的标题</td>
                        <td>页面标题</td>
                    </tr>
                    <tr>
                        <td>&lt;body&gt;&lt;/body&gt;</td>
                        <td>文档的主体</td>
                        <td>包含文档的所有内容</td>
                    </tr>
                </tbody>
            </table>
            <!-- 基本结构代码示例 -->
            <h3>基本结构示例：</h3>
            <div class="code-block">
                &lt;!DOCTYPE html&gt;
                &lt;html lang="zh-CN"&gt;
                &lt;head&gt;
                &lt;meta charset="UTF-8"&gt;
                &lt;title&gt;页面标题&lt;/title&gt;
                &lt;/head&gt;
                &lt;body&gt;
                &lt;h1&gt;我的第一个网页&lt;/h1&gt;
                &lt;p&gt;欢迎来到我的网站！&lt;/p&gt;
                &lt;/body&gt;
                &lt;/html&gt;
            </div>
        </section>
        <!-- 文本标签部分 -->
        <section id="text-tags" class="section-card">
            <h2><i class="fas fa-heading"></i> 文本标签</h2>
            <!-- 标题标签示例 -->
            <h3>标题标签 &lt;h1&gt; 到 &lt;h6&gt;</h3>
            <div class="tag-example">
                <h1>一级标题</h1>
                <h2>二级标题</h2>
                <h3>三级标题</h3>
                <h4>四级标题</h4>
                <h5>五级标题</h5>
                <h6>六级标题</h6>
            </div>
            <!-- 文本格式化标签表格 -->
            <h3>文本格式化标签</h3>
            <table>
                <thead>
                    <tr>
                        <th>语义</th>
                        <th>标签</th>
                        <th>说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>加粗</td>
                        <td>&lt;strong&gt; 或 &lt;b&gt;</td>
                        <td>推荐使用 &lt;strong&gt; 语义更强烈</td>
                    </tr>
                    <tr>
                        <td>倾斜</td>
                        <td>&lt;em&gt; 或 &lt;i&gt;</td>
                        <td>推荐使用 &lt;em&gt; 语义更强烈</td>
                    </tr>
                    <tr>
                        <td>删除线</td>
                        <td>&lt;del&gt; 或 &lt;s&gt;</td>
                        <td>推荐使用 &lt;del&gt; 语义更强烈</td>
                    </tr>
                    <tr>
                        <td>下划线</td>
                        <td>&lt;ins&gt; 或 &lt;u&gt;</td>
                        <td>推荐使用 &lt;ins&gt; 语义更强烈</td>
                    </tr>
                </tbody>
            </table>
            <!-- 文本格式化标签示例 -->
            <div class="tag-example">
                <p><strong>加粗文本</strong> 和 <b>加粗文本</b></p>
                <p><em>倾斜文本</em> 和 <i>倾斜文本</i></p>
                <p><del>删除线文本</del> 和 <s>删除线文本</s></p>
                <p><ins>下划线文本</ins> 和 <u>下划线文本</u></p>
            </div>
            <!-- div和span标签示例 -->
            <h3>&lt;div&gt; 和 &lt;span&gt; 标签</h3>
            <div class="tag-example">
                <div style="background: #e0e0e0; padding: 10px; margin-bottom: 10px;">
                    这是一个div块级元素，通常用于布局容器
                </div>
                <p>这是一段文本，其中<span style="color: red; font-weight: bold;">span元素</span>用于对文本的一部分进行样式设置。</p>
            </div>
        </section>
        <!-- 多媒体标签部分 -->
        <section id="multimedia" class="section-card">
            <h2><i class="fas fa-image"></i> 多媒体标签</h2>
            <!-- 图像标签说明与示例 -->
            <h3>图像标签 &lt;img&gt;</h3>
            <div class="flex">
                <div style="flex: 1;">
                    <h4>图像属性：</h4>
                    <ul>
                        <li><strong>src</strong>：图像路径（必须）</li>
                        <li><strong>alt</strong>：替代文本（图像无法显示时）</li>
                        <li><strong>title</strong>：悬停提示文本</li>
                    </ul>
                    <h4 class="mt-2">路径示例：</h4>
                    <div class="example-box">
                        <p>&lt;img src="image.jpg" alt="描述"&gt; <span style="color: green;">// 同一级路径</span></p>
                        <p>&lt;img src="images/image.jpg"&gt; <span style="color: green;">// 下一级路径</span></p>
                        <p>&lt;img src="../image.jpg"&gt; <span style="color: green;">// 上一级路径</span></p>
                    </div>
                </div>
                <div style="flex: 1; text-align: center;">
                    <img src="https://via.placeholder.com/300x200" alt="占位图像" title="这是一个示例图像"
                        style="max-width: 100%; border-radius: var(--border-radius);">
                    <p class="text-center mt-2">示例图像</p>
                </div>
            </div>
            <!-- 音频标签说明与示例 -->
            <h3>音频标签 &lt;audio&gt;</h3>
            <div class="flex">
                <div style="flex: 1;">
                    <h4>属性：</h4>
                    <ul>
                        <li><strong>src</strong>：音频URL（必须）</li>
                        <li><strong>controls</strong>：显示控制面板</li>
                        <li><strong>loop</strong>：循环播放</li>
                        <li><strong>autoplay</strong>：自动播放</li>
                    </ul>
                </div>
                <div style="flex: 1;">
                    <audio controls style="width: 100%;">
                        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
                        您的浏览器不支持音频元素。
                    </audio>
                </div>
            </div>
            <!-- 视频标签说明与示例 -->
            <h3>视频标签 &lt;video&gt;</h3>
            <div class="flex">
                <div style="flex: 1;">
                    <h4>属性：</h4>
                    <ul>
                        <li><strong>src</strong>：视频URL（必须）</li>
                        <li><strong>controls</strong>：显示控制面板</li>
                        <li><strong>muted</strong>：静音播放</li>
                        <li><strong>loop</strong>：循环播放</li>
                        <li><strong>autoplay</strong>：自动播放</li>
                        <li><strong>poster</strong>：加载等待画面</li>
                    </ul>
                </div>
                <div style="flex: 1;">
                    <video controls width="100%" poster="https://via.placeholder.com/300x200">
                        <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
                            type="video/mp4">
                        您的浏览器不支持视频元素。
                    </video>
                </div>
            </div>
        </section>
        <!-- 表单部分 -->
        <section id="forms" class="section-card">
            <h2><i class="fas fa-window-maximize"></i> 表单元素</h2>
            <!-- 表单标签属性表格 -->
            <h3>表单域 &lt;form&gt;</h3>
            <table>
                <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                        <th>作用</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>action</td>
                        <td>url地址</td>
                        <td>指定处理表单数据的服务器URL</td>
                    </tr>
                    <tr>
                        <td>method</td>
                        <td>get/post</td>
                        <td>设置表单数据的提交方式</td>
                    </tr>
                    <tr>
                        <td>name</td>
                        <td>名称</td>
                        <td>指定表单名称，区分多个表单</td>
                    </tr>
                </tbody>
            </table>
            <!-- 输入元素示例表单 -->
            <h3>输入元素 &lt;input&gt;</h3>
            <form id="exampleForm" class="tag-example">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <div style="display: flex; gap: 15px; margin-top: 8px;">
                        <label style="display: flex; align-items: center; gap: 5px;">
                            <input type="radio" name="gender" value="male" checked> 男
                        </label>
                        <label style="display: flex; align-items: center; gap: 5px;">
                            <input type="radio" name="gender" value="female"> 女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>兴趣爱好：</label>
                    <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 8px;">
                        <label style="display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox" name="hobby" value="reading"> 阅读
                        </label>
                        <label style="display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox" name="hobby" value="sports"> 运动
                        </label>
                        <label style="display: flex; align-items: center; gap: 5px;">
                            <input type="checkbox" name="hobby" value="music"> 音乐
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="country">国家：</label>
                    <select id="country" name="country">
                        <option value="">请选择国家</option>
                        <option value="china">中国</option>
                        <option value="usa">美国</option>
                        <option value="uk">英国</option>
                        <option value="japan">日本</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bio">个人简介：</label>
                    <textarea id="bio" name="bio" rows="4" placeholder="请输入个人简介"></textarea>
                </div>
                <div class="form-group">
                    <label for="avatar">上传头像：</label>
                    <input type="file" id="avatar" name="avatar">
                </div>
                <div class="flex">
                    <button type="submit" class="btn"><i class="fas fa-paper-plane"></i> 提交</button>
                    <button type="reset" class="btn btn-danger"><i class="fas fa-redo"></i> 重置</button>
                    <button type="button" class="btn btn-success"><i class="fas fa-download"></i> 保存</button>
                </div>
            </form>
        </section>
        <!-- HTML5语义化标签与表单增强部分 -->
        <section id="html5-tags" class="section-card">
            <h2><i class="fas fa-tags"></i> HTML5语义化标签</h2>
            <!-- 语义化标签结构示例 -->
            <div class="tag-example" style="position: relative; height: 300px;">
                <header style="background: var(--primary); color: white; padding: 10px; text-align: center;">
                    &lt;header&gt; - 页面头部
                </header>
                <nav style="background: var(--secondary); color: white; padding: 10px; margin: 10px 0;">
                    &lt;nav&gt; - 导航栏
                </nav>
                <div style="display: flex; gap: 10px; height: 200px;">
                    <article style="background: #e0f7fa; flex: 3; padding: 10px;">
                        &lt;article&gt; - 主要内容
                        <section style="background: #bbdefb; margin: 10px 0; padding: 10px;">
                            &lt;section&gt; - 内容区块
                        </section>
                    </article>
                    <aside style="background: #ffecb3; flex: 1; padding: 10px;">
                        &lt;aside&gt; - 侧边栏
                    </aside>
                </div>
                <footer
                    style="background: var(--dark); color: white; padding: 10px; text-align: center; margin-top: 10px;">
                    &lt;footer&gt; - 页脚
                </footer>
            </div>
            <!-- HTML5表单增强示例 -->
            <h3>HTML5表单增强</h3>
            <form class="tag-example">
                <div class="grid">
                    <div class="form-group">
                        <label for="email">邮箱：</label>
                        <input type="email" id="email" placeholder="请输入邮箱" required>
                    </div>
                    <div class="form-group">
                        <label for="url">个人网站：</label>
                        <input type="url" id="url" placeholder="请输入网址">
                    </div>
                    <div class="form-group">
                        <label for="date">出生日期：</label>
                        <input type="date" id="date">
                    </div>
                    <div class="form-group">
                        <label for="color">主题色：</label>
                        <input type="color" id="color" value="#4361ee">
                    </div>
                    <div class="form-group">
                        <label for="range">音量：</label>
                        <input type="range" id="range" min="0" max="100" value="50">
                    </div>
                    <div class="form-group">
                        <label for="search">搜索：</label>
                        <input type="search" id="search" placeholder="搜索内容">
                    </div>
                </div>
                <button type="submit" class="btn">提交HTML5表单</button>
            </form>
        </section>
    </main>
    <!-- 页脚区域，版权信息 -->
    <footer>
        <p>&copy; 2023 HTML综合学习文档 | 包含HTML5所有核心特性</p>
    </footer>
    <script>
        // 主题切换功能：点击按钮切换暗色/亮色主题
        document.getElementById('themeToggle').addEventListener('click', function () {
            document.body.classList.toggle('dark-theme');
            if (document.body.classList.contains('dark-theme')) {
                this.innerHTML = '<i class="fas fa-sun"></i> 亮色模式';
            } else {
                this.innerHTML = '<i class="fas fa-moon"></i> 暗色模式';
            }
        });
        // 表单提交演示，阻止默认提交并弹窗提示
        document.getElementById('exampleForm').addEventListener('submit', function (e) {
            e.preventDefault();
            alert('表单已提交（演示功能）');
        });
        // 页面锚点平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>

</html>