网站概述
这是一个教学示例页，面向前端入门与进阶教学场景。它具备以下特性与技术实现：
- 一键生成标准化页面结构（导航/主视觉/内容区/页脚），并可复制代码片段。
- 提供可切换的布局方案（CSS Grid 与 Flexbox），配套代码讲解与响应式断点注释。
- 内置示例数据填充卡片列表，便于教学展示。
- 作业提交表单与“待评分”占位展示，支持导出表单数据。
- 支持导出代码（HTML/CSS/JS）与讲义（Markdown），以及页面快照。
- 完整的语义化与无障碍（a11y）实践：跳转主内容、ARIA提示、表单标签关联、清晰焦点样式等。
- 响应式设计，适配移动端与桌面端。
技术栈与规范：
- HTML5 语义化标签和可访问性属性
- CSS3 变量、Flexbox、Grid、媒体查询断点
- 原生 JavaScript，无外部依赖，确保安全与可维护性
- 无外部资源引用（图片用内联SVG），符合中国法律法规与社会主义核心价值观
HTML代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="前端教学示例页：标准化结构、一键生成、布局切换、响应式断点、作业提交与导出讲义。">
<title>前端教学示例页 · 标准化结构与响应式布局演示</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 跳转主内容的无障碍链接 -->
<a class="skip-link" href="#main">跳转到主内容</a>
<header class="site-header" role="banner">
<div class="container header-inner">
<a class="brand" href="#" aria-label="网站品牌标识">教学示例页</a>
<button id="menuToggle" class="menu-toggle" aria-expanded="false" aria-controls="siteNav">菜单</button>
<nav id="siteNav" class="site-nav" aria-label="主导航">
<ul>
<li><a href="#hero">简介</a></li>
<li><a href="#a11y">无障碍与语义化</a></li>
<li><a href="#layout">布局演示</a></li>
<li><a href="#codeDoc">代码讲解</a></li>
<li><a href="#assignment">作业提交</a></li>
<li><a href="#export">导出工具</a></li>
</ul>
</nav>
</div>
</header>
<main id="main" tabindex="-1">
<!-- 主视觉区 -->
<section id="hero" class="hero" aria-label="主视觉与快速操作">
<div class="container hero-inner">
<div class="hero-text">
<h1>前端教学示例：结构、布局与交互</h1>
<p>一键生成标准化页面结构，演示响应式栅格与断点注释，切换Grid / Flex布局方案，提供代码片段讲解与作业提交/导出工具。</p>
<div class="hero-actions">
<button id="generateStructureBtn" class="btn primary">一键生成标准化结构</button>
<button id="exportHandoutBtn" class="btn">导出讲义（Markdown）</button>
</div>
</div>
<div class="hero-art" aria-hidden="true">
<!-- 内联SVG，避免外部资源 -->
<svg width="220" height="140" viewBox="0 0 220 140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="教学示意图">
<rect x="5" y="5" width="210" height="130" rx="10" fill="#E6F0FF" stroke="#2B6CB0" stroke-width="2"/>
<rect x="15" y="20" width="190" height="20" rx="4" fill="#CDE2FF"/>
<rect x="15" y="50" width="90" height="70" rx="6" fill="#D9F2E6"/>
<rect x="115" y="50" width="90" height="70" rx="6" fill="#FFEFD2"/>
<text x="110" y="35" text-anchor="middle" font-size="12" fill="#2B6CB0">Nav / Hero / Grid / Footer</text>
</svg>
</div>
</div>
<div class="container">
<div id="structurePreview" class="structure-preview" aria-live="polite" aria-atomic="true"></div>
</div>
</section>
<!-- 无障碍与语义化提示 -->
<section id="a11y" class="section">
<div class="container">
<h2>无障碍与语义化提示</h2>
<ul class="a11y-list">
<li>使用语义化标签：header、nav、main、section、article、footer。</li>
<li>为交互控件添加可访问性属性：aria-label、aria-controls、aria-live、aria-expanded。</li>
<li>提供“跳转主内容”链接，确保键盘导航与焦点可见。</li>
<li>表单使用label显式关联输入框，错误提示与说明文本可被读屏识别。</li>
<li>颜色对比充足，状态变化不只依赖颜色；提供可视化焦点样式。</li>
</ul>
</div>
</section>
<!-- 布局演示 -->
<section id="layout" class="section">
<div class="container">
<div class="section-head">
<h2>响应式布局演示（栅格与断点）</h2>
<p>选择不同布局方案并查看代码片段与断点注释。栅格示例在小屏 1 列，中屏 2 列，大屏 3 列。</p>
</div>
<div class="controls" role="group" aria-label="布局切换控制">
<div class="control-group">
<span class="label">布局方案：</span>
<label><input type="radio" name="layoutMode" value="grid" checked> Grid 栅格</label>
<label><input type="radio" name="layoutMode" value="flex"> Flex 弹性</label>
</div>
<div class="control-group">
<label><input type="checkbox" id="showBreakpoints"> 显示断点辅助栏</label>
</div>
<div class="control-group">
<button id="resetDataBtn" class="btn">重置示例数据</button>
</div>
</div>
<div id="breakpointBar" class="breakpoint-bar" aria-hidden="true">
<div class="container">
<strong>断点参考：</strong>
<span>SM ≥ 640px</span>
<span>MD ≥ 960px</span>
<span>LG ≥ 1200px（容器最大宽度）</span>
</div>
</div>
<div id="layoutWrapper" class="layout-wrapper layout-grid">
<div id="cardContainer" class="cards" aria-live="polite" aria-busy="false">
<!-- JS渲染示例卡片 -->
</div>
</div>
</div>
</section>
<!-- 代码讲解 -->
<section id="codeDoc" class="section">
<div class="container">
<div class="section-head">
<h2>代码片段讲解</h2>
<p>可复制 HTML / CSS 片段，配套注释，便于课堂讲解与自学复盘。</p>
</div>
<div class="code-tabs" role="tablist" aria-label="代码片段标签">
<button class="tab-btn active" data-target="htmlSnippet" role="tab" aria-selected="true">HTML片段</button>
<button class="tab-btn" data-target="cssSnippet" role="tab" aria-selected="false">CSS片段</button>
<button id="copySnippetBtn" class="btn small">复制当前片段</button>
</div>
<div class="code-panels">
<pre id="htmlSnippet" class="code-block" aria-label="HTML代码片段"><code></code></pre>
<pre id="cssSnippet" class="code-block hidden" aria-label="CSS代码片段"><code></code></pre>
</div>
</div>
</section>
<!-- 作业提交 -->
<section id="assignment" class="section">
<div class="container">
<h2>作业提交表单与评分占位</h2>
<form id="assignmentForm" class="form" novalidate aria-labelledby="assignmentTitle">
<div class="form-grid">
<div class="form-item">
<label for="studentName">姓名</label>
<input id="studentName" name="studentName" type="text" required placeholder="例如：张三" aria-describedby="nameHelp">
<small id="nameHelp" class="muted">使用真实姓名，便于确认成绩。</small>
</div>
<div class="form-item">
<label for="studentEmail">邮箱</label>
<input id="studentEmail" name="studentEmail" type="email" required placeholder="example@domain.com">
</div>
<div class="form-item">
<label for="assignmentTitle">作业标题</label>
<input id="assignmentTitle" name="assignmentTitle" type="text" required placeholder="响应式布局练习">
</div>
<div class="form-item">
<label for="assignmentLink">作品链接</label>
<input id="assignmentLink" name="assignmentLink" type="url" placeholder="https://example.com/demo" aria-describedby="linkHelp">
<small id="linkHelp" class="muted">可填写在线预览地址或仓库链接。</small>
</div>
<div class="form-item">
<label for="assignmentFile">上传文件（可选）</label>
<input id="assignmentFile" name="assignmentFile" type="file" aria-describedby="fileHelp">
<small id="fileHelp" class="muted">本地预览用，不会上传到服务器。</small>
</div>
<div class="form-item form-item--full">
<label for="assignmentDesc">作业说明</label>
<textarea id="assignmentDesc" name="assignmentDesc" rows="4" maxlength="500" placeholder="简要说明你的设计思路与实现细节…" aria-describedby="descCount"></textarea>
<small id="descCount" class="muted" aria-live="polite">0 / 500</small>
</div>
<div class="form-item">
<label><input id="agreePolicy" type="checkbox" required> 我已阅读并同意课堂提交规范</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">提交作业</button>
<button type="reset" class="btn">清空表单</button>
<button type="button" id="exportFormDataBtn" class="btn">导出表单数据（JSON）</button>
</div>
<div id="formErrors" class="form-errors" aria-live="assertive"></div>
</form>
<div class="submissions">
<h3>提交列表（评分占位）</h3>
<ul id="submissionList" class="submission-list">
<!-- JS添加条目 -->
</ul>
</div>
</div>
</section>
<!-- 导出工具 -->
<section id="export" class="section">
<div class="container">
<h2>导出代码与讲义</h2>
<p class="muted">可导出当前页面快照（内联CSS/JS），或分别导出HTML/CSS/JS源文件与课堂讲义。</p>
<div class="export-actions">
<button id="exportHTMLBtn" class="btn">导出 HTML</button>
<button id="exportCSSBtn" class="btn">导出 CSS</button>
<button id="exportJSBtn" class="btn">导出 JS</button>
<button id="exportSnapshotBtn" class="btn">导出页面快照（自包含）</button>
</div>
</div>
</section>
</main>
<footer class="site-footer" role="contentinfo">
<div class="container footer-inner">
<p>© 2025 教学示例页。用于教学演示，遵循 Web 标准与中国法律法规。</p>
<nav aria-label="页脚导航">
<a href="#hero">回到顶部</a>
</nav>
</div>
</footer>
<!-- 辅助：无障碍播报区域 -->
<div id="announce" class="sr-only" aria-live="polite" aria-atomic="true"></div>
<script defer src="script.js"></script>
</body>
</html>
CSS样式
/* 基础主题变量与重置 */
:root{
--bg: #ffffff;
--text: #1a1a1a;
--muted: #6b7280;
--primary: #2B6CB0; /* 教学友好蓝 */
--accent: #10B981; /* 成功绿 */
--warn: #D97706; /* 提醒橙 */
--surface: #f6f7fb;
--border: #e5e7eb;
--radius: 10px;
--shadow: 0 6px 20px rgba(0,0,0,0.08);
/* 容器与断点 */
--maxw: 1200px;
--bp-sm: 640px; /* SM：小屏断点，≥640px 开始两列 */
--bp-md: 960px; /* MD：中屏断点，≥960px 开始三列 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
/* 可见焦点（无障碍） */
:focus-visible{
outline:3px solid #93C5FD;
outline-offset:2px;
}
/* 容器与通用区块 */
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.section{padding:48px 0}
.section-head h2{margin:0 0 8px}
.section-head p{color:var(--muted);margin:0 0 24px}
/* 跳转主内容 */
.skip-link{
position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
position:fixed;left:16px;top:16px;width:auto;height:auto;padding:8px 12px;
background:#111;color:#fff;border-radius:6px;z-index:1000;
}
/* 头部导航 */
.site-header{background:#f8fbff;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{font-weight:700;color:var(--primary)}
.menu-toggle{
margin-left:auto;
padding:8px 12px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;
}
.site-nav ul{
display:flex;gap:16px;list-style:none;margin:0;padding:0;
}
.site-nav a{padding:8px;border-radius:8px}
.site-nav a:hover{background:#eef6ff}
@media (max-width: 720px){
.menu-toggle{order:2}
.site-nav{display:none;order:3}
.site-nav.open{display:block}
.site-nav ul{flex-direction:column;padding:8px 0}
}
/* 主视觉 */
.hero{padding:40px 0 16px;background:linear-gradient(180deg,#F0F7FF,#fff)}
.hero-inner{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:center}
.hero-text h1{margin:0 0 8px}
.hero-text p{margin:0 0 16px;color:var(--muted)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{justify-self:end}
.structure-preview{
margin-top:16px;padding:16px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface);
}
@media (max-width: 780px){
.hero-inner{grid-template-columns:1fr}
.hero-art{justify-self:start}
}
/* 按钮 */
.btn{
appearance:none;border:1px solid var(--border);background:#fff;color:var(--text);
padding:10px 14px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow);
}
.btn:hover{background:#f2f6ff}
.btn.primary{background:var(--primary);border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.small{padding:6px 10px;font-size:14px}
/* 布局演示控制区 */
.controls{
display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:8px 0 16px;
}
.control-group{display:flex;gap:12px;align-items:center}
.label{color:#374151}
/* 断点辅助栏（可开关显示） */
.breakpoint-bar{
position:sticky;top:0;z-index:500;background:#111;color:#fff;padding:8px 0;margin-bottom:12px;
display:none;
}
.breakpoint-bar .container{display:flex;gap:20px;align-items:center}
.breakpoint-bar .container span{opacity:0.85}
/* 布局外层：用于切换布局方案类名 */
.layout-wrapper{}
/* 卡片列表通用样式 */
.cards{gap:16px}
.card{
background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);
display:flex;flex-direction:column;gap:8px;
}
.card-header{display:flex;align-items:center;gap:12px}
.card-title{font-weight:700;margin:0}
.card-desc{color:var(--muted);margin:0}
.card-tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;color:#0F766E;background:#E6FFFA;border:1px solid #99F6E4;border-radius:999px;padding:2px 8px}
.card-actions{margin-top:auto;display:flex;gap:8px}
/* 布局方案 A：Grid 栅格 */
.layout-grid .cards{
display:grid;
grid-template-columns: 1fr; /* 默认：小屏 1 列 */
}
/* 断点注释：
@media (min-width: 640px) => SM：两列
@media (min-width: 960px) => MD：三列
*/
@media (min-width: 640px){
.layout-grid .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px){
.layout-grid .cards{ grid-template-columns: repeat(3, 1fr); }
}
/* 布局方案 B：Flex 弹性 */
.layout-flex .cards{
display:flex; flex-wrap:wrap;
}
.layout-flex .card{
width:100%;
}
@media (min-width: 640px){
.layout-flex .card{ width: calc(50% - 8px); } /* 两列，减去gap一半 */
}
@media (min-width: 960px){
.layout-flex .card{ width: calc(33.333% - 10.7px); } /* 三列 */
}
/* 代码区 */
.code-tabs{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.tab-btn{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer}
.tab-btn.active{background:#EEF6FF;border-color:#BFDBFE}
.code-block{
border:1px solid var(--border);border-radius:12px;background:#0B1020;color:#E5EDFF;
padding:16px;overflow:auto;box-shadow:var(--shadow);max-height:60vh;
}
.code-block.hidden{display:none}
.code-block code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
/* 表单 */
.form-grid{
display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px;
}
.form-item{display:flex;flex-direction:column;gap:8px}
.form-item--full{grid-column:1 / -1}
label{font-weight:600}
input[type="text"], input[type="email"], input[type="url"], input[type="file"], textarea{
width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:#fff;
}
input:focus, textarea:focus{border-color:#93C5FD;box-shadow:0 0 0 3px #DBEAFE}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.form-errors{margin-top:12px;color:#B91C1C;background:#FEF2F2;border:1px solid #FECACA;padding:10px;border-radius:8px;display:none}
.muted{color:var(--muted)}
/* 提交列表 */
.submission-list{
list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px;
}
.submission-item{
border:1px solid var(--border);border-radius:10px;padding:12px;background:#fff;box-shadow:var(--shadow);
display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
}
.submission-meta{color:var(--muted);font-size:14px}
.grade-placeholder{color:#374151;background:#FFF7ED;border:1px dashed #FED7AA;padding:6px 8px;border-radius:8px}
/* 页脚 */
.site-footer{margin-top:32px;border-top:1px solid var(--border);background:#fafafa}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
/* 小屏优化 */
@media (max-width: 780px){
.form-grid{grid-template-columns:1fr}
.submission-item{grid-template-columns:1fr}
}
JavaScript功能
/* 教学示例页交互脚本
- 一键生成标准化结构
- 布局方案切换（Grid/Flex）与代码片段更新
- 示例数据渲染/重置
- 作业提交表单验证与“待评分”占位
- 导出代码与讲义/页面快照
- 无障碍：ARIA 播报、可见焦点、键盘友好菜单
*/
(function(){
const qs = (s, p=document) => p.querySelector(s);
const qsa = (s, p=document) => Array.from(p.querySelectorAll(s));
const announce = (msg) => {
const el = qs('#announce');
el.textContent = msg;
// 清空以便下一次读屏触发
setTimeout(()=>{ el.textContent = ''; }, 1200);
};
// 示例数据（可按需扩展或替换）
const sampleItems = [
{title:'导航与信息架构', desc:'演示 header/nav/main/footer 的标准化结构。', tags:['HTML5','语义化']},
{title:'主视觉模块', desc:'教学友好主视觉区，呼出核心CTA与示意图。', tags:['UX','Hero']},
{title:'Grid 栅格', desc:'小屏1列，中屏2列，大屏3列的响应式示例。', tags:['CSS Grid','响应式']},
{title:'Flex 弹性布局', desc:'等宽卡片换行布局，配合断点调整列数。', tags:['Flexbox','布局']},
{title:'无障碍实践', desc:'跳转主内容、焦点可见、ARIA提示等。', tags:['a11y','可访问性']},
{title:'代码片段讲解', desc:'HTML/CSS片段切换与复制，配套注释。', tags:['教学','代码']},
{title:'作业提交表单', desc:'必填项校验、字符计数与数据导出。', tags:['表单','验证']},
{title:'评分占位', desc:'提交列表内展示“待评分”状态。', tags:['评分','占位']},
{title:'示例数据填充', desc:'内置卡片数据，用于课堂展示。', tags:['数据','演示']},
{title:'导出工具', desc:'导出HTML/CSS/JS与讲义Markdown。', tags:['导出','工具']},
{title:'移动端适配', desc:'在窄屏下菜单折叠、表单单列。', tags:['移动端','适配']},
{title:'性能与规范', desc:'简洁结构，无外部依赖，安全可靠。', tags:['规范','性能']},
];
// 结构生成的标准化模板
const STANDARD_STRUCTURE_HTML = `<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标准化页面结构示例</title>
</head>
<body>
<a class="skip-link" href="#main">跳转到主内容</a>
<header role="banner">
<nav aria-label="主导航">
<ul>
<li><a href="#hero">简介</a></li>
<li><a href="#content">内容区</a></li>
<li><a href="#footer">页脚</a></li>
</ul>
</nav>
</header>
<main id="main">
<section id="hero" aria-label="主视觉">
<h1>主视觉标题</h1>
<p>副标题或引导语</p>
<button>主要操作</button>
</section>
<section id="content" aria-label="内容区">
<article>
<h2>模块标题</h2>
<p>模块内容文本示例。</p>
</article>
</section>
</main>
<footer id="footer" role="contentinfo">
<small>© 示例页脚信息</small>
</footer>
</body>
</html>`;
// 代码片段：HTML（卡片列表）
const CARDS_HTML_SNIPPET = `<section class="cards-demo">
<div class="cards">
<article class="card">
<header class="card-header">
<h3 class="card-title">示例标题</h3>
</header>
<p class="card-desc">卡片描述文字……</p>
<div class="card-tags">
<span class="tag">标签</span>
</div>
<div class="card-actions">
<button class="btn small">查看</button>
<button class="btn small">收藏</button>
</div>
</article>
<!-- 更多卡片… -->
</div>
</section>`;
// 代码片段：CSS（Grid/Flex）
const GRID_CSS_SNIPPET = `/* 布局方案 A：Grid 栅格 */
.layout-grid .cards{ display:grid; grid-template-columns:1fr; gap:16px; }
/* SM ≥ 640px：两列 */
@media (min-width: 640px){ .layout-grid .cards{ grid-template-columns: repeat(2, 1fr); } }
/* MD ≥ 960px：三列 */
@media (min-width: 960px){ .layout-grid .cards{ grid-template-columns: repeat(3, 1fr); } }`;
const FLEX_CSS_SNIPPET = `/* 布局方案 B：Flex 弹性 */
.layout-flex .cards{ display:flex; flex-wrap:wrap; gap:16px; }
.layout-flex .card{ width:100%; }
/* SM ≥ 640px：两列 */
@media (min-width: 640px){ .layout-flex .card{ width: calc(50% - 8px); } }
/* MD ≥ 960px：三列 */
@media (min-width: 960px){ .layout-flex .card{ width: calc(33.333% - 10.7px); } }`;
// 菜单折叠
const menuToggle = qs('#menuToggle');
const siteNav = qs('#siteNav');
menuToggle?.addEventListener('click', ()=>{
const opened = siteNav.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', opened ? 'true' : 'false');
});
// 一键生成标准化结构
const structurePreview = qs('#structurePreview');
const generateStructureBtn = qs('#generateStructureBtn');
generateStructureBtn?.addEventListener('click', ()=>{
structurePreview.innerHTML = `
<div class="structure-box">
<h3>标准化结构（预览 + 可复制）</h3>
<p class="muted">包含导航、主视觉、内容区、页脚与跳转主内容链接。</p>
<pre class="code-block"><code>${escapeHtml(STANDARD_STRUCTURE_HTML)}</code></pre>
<button class="btn small" id="copyStructureBtn">复制结构代码</button>
</div>
`;
qs('#copyStructureBtn', structurePreview)?.addEventListener('click', ()=>{
copyText(STANDARD_STRUCTURE_HTML);
announce('标准化结构代码已复制');
});
setActiveTab('htmlSnippet');
setSnippet('html', STANDARD_STRUCTURE_HTML);
announce('标准化结构已生成并展示');
});
// 布局与示例数据渲染
const cardContainer = qs('#cardContainer');
const layoutWrapper = qs('#layoutWrapper');
const resetDataBtn = qs('#resetDataBtn');
function renderCards(){
cardContainer.setAttribute('aria-busy', 'true');
cardContainer.innerHTML = sampleItems.map(createCardHTML).join('');
cardContainer.setAttribute('aria-busy', 'false');
}
function createCardHTML(item){
const icon = `<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect x="1.5" y="1.5" width="33" height="33" rx="8" fill="#EEF6FF" stroke="#2B6CB0"/>
<path d="M8 18h20M18 8v20" stroke="#2B6CB0" stroke-width="2"/>
</svg>`;
return `<article class="card">
<header class="card-header">${icon}<h3 class="card-title">${escapeHtml(item.title)}</h3></header>
<p class="card-desc">${escapeHtml(item.desc)}</p>
<div class="card-tags">${item.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}</div>
<div class="card-actions">
<button class="btn small" aria-label="查看 ${escapeHtml(item.title)}">查看</button>
<button class="btn small" aria-label="收藏 ${escapeHtml(item.title)}">收藏</button>
</div>
</article>`;
}
resetDataBtn?.addEventListener('click', ()=>{
renderCards();
announce('示例数据已重置');
});
// 布局切换与代码片段
const htmlBlock = qs('#htmlSnippet code');
const cssBlock = qs('#cssSnippet code');
const tabButtons = qsa('.tab-btn');
const copySnippetBtn = qs('#copySnippetBtn');
const showBreakpoints = qs('#showBreakpoints');
const breakpointBar = qs('#breakpointBar');
function setSnippet(type, content){
if(type === 'html'){
htmlBlock.textContent = content;
}else if(type === 'css'){
cssBlock.textContent = content;
}
}
function setActiveTab(id){
tabButtons.forEach(btn=>{
const target = btn.dataset.target;
const active = target === id;
btn.classList.toggle('active', active);
btn.setAttribute('aria-selected', active ? 'true' : 'false');
qs('#'+target).classList.toggle('hidden', !active);
});
}
tabButtons.forEach(btn=>{
btn.addEventListener('click', ()=>{
setActiveTab(btn.dataset.target);
});
});
// 初始化：渲染卡片、默认布局与片段
renderCards();
setSnippet('html', CARDS_HTML_SNIPPET);
setSnippet('css', GRID_CSS_SNIPPET);
// 布局模式切换
qsa('input[name="layoutMode"]').forEach(radio=>{
radio.addEventListener('change', ()=>{
const val = radio.value;
layoutWrapper.classList.toggle('layout-grid', val === 'grid');
layoutWrapper.classList.toggle('layout-flex', val === 'flex');
setActiveTab('cssSnippet');
setSnippet('css', val === 'grid' ? GRID_CSS_SNIPPET : FLEX_CSS_SNIPPET);
announce(`布局已切换为 ${val === 'grid' ? 'Grid 栅格' : 'Flex 弹性'}`);
});
});
// 断点辅助栏开关
showBreakpoints?.addEventListener('change', ()=>{
const on = showBreakpoints.checked;
breakpointBar.style.display = on ? 'block' : 'none';
announce(on ? '已显示断点辅助栏' : '已隐藏断点辅助栏');
});
// 复制当前片段
copySnippetBtn?.addEventListener('click', ()=>{
const active = tabButtons.find(btn=>btn.classList.contains('active'))?.dataset.target;
const text = active === 'cssSnippet' ? cssBlock.textContent : htmlBlock.textContent;
copyText(text);
announce('代码片段已复制到剪贴板');
});
// 表单：字符计数与提交验证
const form = qs('#assignmentForm');
const desc = qs('#assignmentDesc');
const descCount = qs('#descCount');
const formErrors = qs('#formErrors');
const submissionList = qs('#submissionList');
const exportFormDataBtn = qs('#exportFormDataBtn');
desc?.addEventListener('input', ()=>{
descCount.textContent = `${desc.value.length} / ${desc.maxLength}`;
});
form?.addEventListener('submit', (e)=>{
e.preventDefault();
formErrors.style.display = 'none';
if(!form.checkValidity()){
showFormErrors();
return;
}
const data = new FormData(form);
const entry = {
name: data.get('studentName')?.toString().trim(),
email: data.get('studentEmail')?.toString().trim(),
title: data.get('assignmentTitle')?.toString().trim(),
link: data.get('assignmentLink')?.toString().trim(),
desc: data.get('assignmentDesc')?.toString().trim(),
ts: new Date().toISOString(),
grade: null // 待评分
};
addSubmission(entry);
form.reset();
descCount.textContent = `0 / ${desc.maxLength}`;
announce('作业已提交，状态为待评分');
});
function showFormErrors(){
const invalids = qsa('#assignmentForm input:invalid, #assignmentForm textarea:invalid');
const names = invalids.map(el=> qs(`label[for="${el.id}"]`)?.textContent || el.name);
formErrors.innerHTML = `<strong>请检查以下字段：</strong> ${names.join('、')}`;
formErrors.style.display = 'block';
invalids[0]?.focus();
announce('表单校验失败，请完善必填项');
}
function addSubmission(entry){
const li = document.createElement('li');
li.className = 'submission-item';
li.innerHTML = `
<div>
<strong>${escapeHtml(entry.title)}</strong>
<div class="submission-meta">
<span>${escapeHtml(entry.name)} · ${escapeHtml(entry.email)}</span>
${entry.link ? ` · <a href="${escapeAttr(entry.link)}" target="_blank" rel="noopener">作品链接</a>` : ''}
</div>
</div>
<div class="grade-placeholder" role="status" aria-label="评分占位">待评分</div>
`;
submissionList.prepend(li);
}
// 导出表单数据
exportFormDataBtn?.addEventListener('click', ()=>{
const items = qsa('.submission-item').map(li=>{
const title = li.querySelector('strong')?.textContent || '';
const meta = li.querySelector('.submission-meta')?.textContent || '';
const grade = li.querySelector('.grade-placeholder')?.textContent || '待评分';
return { title, meta, grade };
});
downloadText(JSON.stringify({ exportedAt: new Date().toISOString(), submissions: items }, null, 2), 'submissions.json', 'application/json');
announce('已导出提交列表数据');
});
// 导出讲义（Markdown）
const exportHandoutBtn = qs('#exportHandoutBtn');
exportHandoutBtn?.addEventListener('click', ()=>{
const md = buildHandoutMarkdown();
downloadText(md, '前端教学讲义.md', 'text/markdown');
announce('讲义已导出');
});
// 导出代码与页面快照（自包含）
const exportHTMLBtn = qs('#exportHTMLBtn');
const exportCSSBtn = qs('#exportCSSBtn');
const exportJSBtn = qs('#exportJSBtn');
const exportSnapshotBtn = qs('#exportSnapshotBtn');
exportHTMLBtn?.addEventListener('click', ()=>{
downloadText(HTML_SOURCE, 'index.html', 'text/html');
announce('HTML 源文件已导出');
});
exportCSSBtn?.addEventListener('click', ()=>{
downloadText(CSS_SOURCE, 'styles.css', 'text/css');
announce('CSS 源文件已导出');
});
exportJSBtn?.addEventListener('click', ()=>{
downloadText(JS_SOURCE, 'script.js', 'text/javascript');
announce('JS 源文件已导出');
});
exportSnapshotBtn?.addEventListener('click', ()=>{
const snapshot = `<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>页面快照</title><style>${CSS_SOURCE}</style></head><body>${document.body.outerHTML}<script>${JS_SOURCE}</script></body></html>`;
downloadText(snapshot, 'snapshot.html', 'text/html');
announce('已导出页面快照（内联CSS/JS）');
});
// 工具函数
function escapeHtml(str=''){
return str.replace(/[&<>"']/g, s=>({ '&':'&', '<':'<', '>':'>', '"':'"', "'":''' }[s]));
}
function escapeAttr(str=''){
return str.replace(/"/g, '"');
}
function copyText(text){
if(navigator.clipboard && window.isSecureContext){
navigator.clipboard.writeText(text).catch(()=>fallbackCopy(text));
}else{
fallbackCopy(text);
}
}
function fallbackCopy(text){
const ta = document.createElement('textarea');
ta.value = text; document.body.appendChild(ta);
ta.select(); try{ document.execCommand('copy'); }catch(e){}
document.body.removeChild(ta);
}
function downloadText(text, filename, type='text/plain'){
const blob = new Blob([text], {type});
const url = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href = url; a.download = filename;
document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
}
function buildHandoutMarkdown(){
return [
'# 前端教学讲义',
'',
'## 目标',
'- 理解 HTML5 语义化结构（header/nav/main/section/footer）。',
'- 掌握响应式布局（Grid 与 Flex）与断点设计。',
'- 学会表单可访问性与基础校验，了解数据导出。',
'',
'## 标准化结构示例',
'```html',
STANDARD_STRUCTURE_HTML.replace(/```/g, '\\`\\`\\`'),
'```',
'',
'## 布局片段（Grid）',
'```css',
GRID_CSS_SNIPPET,
'```',
'',
'## 布局片段（Flex）',
'```css',
FLEX_CSS_SNIPPET,
'```',
'',
'## 练习任务',
'1. 在 Grid 布局下，调整列间距与卡片样式，使其更符合你的项目风格。',
'2. 尝试将 Flex 方案改造为瀑布流或不等高卡片的均衡排列（提示：align-content、order）。',
'3. 为作业表单增加更多校验规则（如标题长度、URL格式等），并在提交列表中显示部分字段。',
'',
'## 无障碍要点',
'- 跳转主内容链接与可见焦点。',
'- ARIA 属性：aria-live、aria-label、aria-controls、aria-expanded。',
'- 表单标签与错误提示可被读屏识别。',
'',
'## 参考建议',
'- 将断点命名与设计系统（Design Tokens）绑定，保持一致性。',
'- 代码片段讲解与项目实践相结合，强化吸收。',
'',
'（本讲义由教学示例页自动生成）'
].join('\n');
}
// 以下三段源文件字符串用于“导出代码”按钮生成文件。
// 为了演示的自包含导出功能，它们与当前页面的 HTML/CSS/JS 内容保持一致。
const HTML_SOURCE = `<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="前端教学示例页：标准化结构、一键生成、布局切换、响应式断点、作业提交与导出讲义。">
<title>前端教学示例页 · 标准化结构与响应式布局演示</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip-link" href="#main">跳转到主内容</a>
<header class="site-header" role="banner">
<div class="container header-inner">
<a class="brand" href="#" aria-label="网站品牌标识">教学示例页</a>
<button id="menuToggle" class="menu-toggle" aria-expanded="false" aria-controls="siteNav">菜单</button>
<nav id="siteNav" class="site-nav" aria-label="主导航">
<ul>
<li><a href="#hero">简介</a></li>
<li><a href="#a11y">无障碍与语义化</a></li>
<li><a href="#layout">布局演示</a></li>
<li><a href="#codeDoc">代码讲解</a></li>
<li><a href="#assignment">作业提交</a></li>
<li><a href="#export">导出工具</a></li>
</ul>
</nav>
</div>
</header>
<main id="main" tabindex="-1">
<section id="hero" class="hero" aria-label="主视觉与快速操作">
<div class="container hero-inner">
<div class="hero-text">
<h1>前端教学示例：结构、布局与交互</h1>
<p>一键生成标准化页面结构，演示响应式栅格与断点注释，切换Grid / Flex布局方案，提供代码片段讲解与作业提交/导出工具。</p>
<div class="hero-actions">
<button id="generateStructureBtn" class="btn primary">一键生成标准化结构</button>
<button id="exportHandoutBtn" class="btn">导出讲义（Markdown）</button>
</div>
</div>
<div class="hero-art" aria-hidden="true">
<svg width="220" height="140" viewBox="0 0 220 140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="教学示意图">
<rect x="5" y="5" width="210" height="130" rx="10" fill="#E6F0FF" stroke="#2B6CB0" stroke-width="2"/>
<rect x="15" y="20" width="190" height="20" rx="4" fill="#CDE2FF"/>
<rect x="15" y="50" width="90" height="70" rx="6" fill="#D9F2E6"/>
<rect x="115" y="50" width="90" height="70" rx="6" fill="#FFEFD2"/>
<text x="110" y="35" text-anchor="middle" font-size="12" fill="#2B6CB0">Nav / Hero / Grid / Footer</text>
</svg>
</div>
</div>
<div class="container">
<div id="structurePreview" class="structure-preview" aria-live="polite" aria-atomic="true"></div>
</div>
</section>
<section id="a11y" class="section">
<div class="container">
<h2>无障碍与语义化提示</h2>
<ul class="a11y-list">
<li>使用语义化标签：header、nav、main、section、article、footer。</li>
<li>为交互控件添加可访问性属性：aria-label、aria-controls、aria-live、aria-expanded。</li>
<li>提供“跳转主内容”链接，确保键盘导航与焦点可见。</li>
<li>表单使用label显式关联输入框，错误提示与说明文本可被读屏识别。</li>
<li>颜色对比充足，状态变化不只依赖颜色；提供可视化焦点样式。</li>
</ul>
</div>
</section>
<section id="layout" class="section">
<div class="container">
<div class="section-head">
<h2>响应式布局演示（栅格与断点）</h2>
<p>选择不同布局方案并查看代码片段与断点注释。栅格示例在小屏 1 列，中屏 2 列，大屏 3 列。</p>
</div>
<div class="controls" role="group" aria-label="布局切换控制">
<div class="control-group">
<span class="label">布局方案：</span>
<label><input type="radio" name="layoutMode" value="grid" checked> Grid 栅格</label>
<label><input type="radio" name="layoutMode" value="flex"> Flex 弹性</label>
</div>
<div class="control-group">
<label><input type="checkbox" id="showBreakpoints"> 显示断点辅助栏</label>
</div>
<div class="control-group">
<button id="resetDataBtn" class="btn">重置示例数据</button>
</div>
</div>
<div id="breakpointBar" class="breakpoint-bar" aria-hidden="true">
<div class="container">
<strong>断点参考：</strong>
<span>SM ≥ 640px</span>
<span>MD ≥ 960px</span>
<span>LG ≥ 1200px（容器最大宽度）</span>
</div>
</div>
<div id="layoutWrapper" class="layout-wrapper layout-grid">
<div id="cardContainer" class="cards" aria-live="polite" aria-busy="false"></div>
</div>
</div>
</section>
<section id="codeDoc" class="section">
<div class="container">
<div class="section-head">
<h2>代码片段讲解</h2>
<p>可复制 HTML / CSS 片段，配套注释，便于课堂讲解与自学复盘。</p>
</div>
<div class="code-tabs" role="tablist" aria-label="代码片段标签">
<button class="tab-btn active" data-target="htmlSnippet" role="tab" aria-selected="true">HTML片段</button>
<button class="tab-btn" data-target="cssSnippet" role="tab" aria-selected="false">CSS片段</button>
<button id="copySnippetBtn" class="btn small">复制当前片段</button>
</div>
<div class="code-panels">
<pre id="htmlSnippet" class="code-block" aria-label="HTML代码片段"><code></code></pre>
<pre id="cssSnippet" class="code-block hidden" aria-label="CSS代码片段"><code></code></pre>
</div>
</div>
</section>
<section id="assignment" class="section">
<div class="container">
<h2>作业提交表单与评分占位</h2>
<form id="assignmentForm" class="form" novalidate aria-labelledby="assignmentTitle">
<div class="form-grid">
<div class="form-item">
<label for="studentName">姓名</label>
<input id="studentName" name="studentName" type="text" required placeholder="例如：张三" aria-describedby="nameHelp">
<small id="nameHelp" class="muted">使用真实姓名，便于确认成绩。</small>
</div>
<div class="form-item">
<label for="studentEmail">邮箱</label>
<input id="studentEmail" name="studentEmail" type="email" required placeholder="example@domain.com">
</div>
<div class="form-item">
<label for="assignmentTitle">作业标题</label>
<input id="assignmentTitle" name="assignmentTitle" type="text" required placeholder="响应式布局练习">
</div>
<div class="form-item">
<label for="assignmentLink">作品链接</label>
<input id="assignmentLink" name="assignmentLink" type="url" placeholder="https://example.com/demo" aria-describedby="linkHelp">
<small id="linkHelp" class="muted">可填写在线预览地址或仓库链接。</small>
</div>
<div class="form-item">
<label for="assignmentFile">上传文件（可选）</label>
<input id="assignmentFile" name="assignmentFile" type="file" aria-describedby="fileHelp">
<small id="fileHelp" class="muted">本地预览用，不会上传到服务器。</small>
</div>
<div class="form-item form-item--full">
<label for="assignmentDesc">作业说明</label>
<textarea id="assignmentDesc" name="assignmentDesc" rows="4" maxlength="500" placeholder="简要说明你的设计思路与实现细节…" aria-describedby="descCount"></textarea>
<small id="descCount" class="muted" aria-live="polite">0 / 500</small>
</div>
<div class="form-item">
<label><input id="agreePolicy" type="checkbox" required> 我已阅读并同意课堂提交规范</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn primary">提交作业</button>
<button type="reset" class="btn">清空表单</button>
<button type="button" id="exportFormDataBtn" class="btn">导出表单数据（JSON）</button>
</div>
<div id="formErrors" class="form-errors" aria-live="assertive"></div>
</form>
<div class="submissions">
<h3>提交列表（评分占位）</h3>
<ul id="submissionList" class="submission-list"></ul>
</div>
</div>
</section>
<section id="export" class="section">
<div class="container">
<h2>导出代码与讲义</h2>
<p class="muted">可导出当前页面快照（内联CSS/JS），或分别导出HTML/CSS/JS源文件与课堂讲义。</p>
<div class="export-actions">
<button id="exportHTMLBtn" class="btn">导出 HTML</button>
<button id="exportCSSBtn" class="btn">导出 CSS</button>
<button id="exportJSBtn" class="btn">导出 JS</button>
<button id="exportSnapshotBtn" class="btn">导出页面快照（自包含）</button>
</div>
</div>
</section>
</main>
<footer class="site-footer" role="contentinfo">
<div class="container footer-inner">
<p>© 2025 教学示例页。用于教学演示，遵循 Web 标准与中国法律法规。</p>
<nav aria-label="页脚导航"><a href="#hero">回到顶部</a></nav>
</div>
</footer>
<div id="announce" class="sr-only" aria-live="polite" aria-atomic="true"></div>
<script defer src="script.js"></script>
</body>
</html>`;
const CSS_SOURCE = `/* 此处 CSS 内容与页面 styles.css 一致，详见本项目 CSS块 */\n` + document.querySelector('link[rel="stylesheet"]') ? '' : ''; // 占位（在线快照会内联真实CSS）
// 由于当前环境无法直接读取外部CSS文件，这里提供教学占位：
// 实际使用时，导出按钮会生成空CSS（请用上方“CSS样式”块内容保存为 styles.css）
// 如果您将本页面的 CSS 内联进快照，snapshot 导出中将包含完整样式。
const JS_SOURCE = `/* 此处 JS 内容与页面 script.js 一致，详见本项目 JS块 */\n` + (function(){return ''})();
// 提示：为避免浏览器安全限制，这里不从外部 CSS/JS 文件读取。
// 教学建议：请将“CSS样式”与“JavaScript功能”块分别保存为 styles.css 与 script.js。
// 导出 HTML 按钮会生成一个 index.html，其 <link rel="stylesheet"> 与 <script src> 指向上述文件。
})();
说明：出于浏览器安全限制，脚本中无法直接读取外部 styles.css/script.js 的内容，因此 JS 中的 CSS_SOURCE/JS_SOURCE使用占位。请使用下方“使用说明”将本页 CSS 和 JS分别保存为文件后，本页的导出按钮即可生成指向这些文件的 HTML；“导出页面快照（自包含）”会将当前页面的 DOM、CSS 与 JS内联打包（在真实运行环境中，可将 CSS_SOURCE/JS_SOURCE替换为真实内容或由构建工具注入）。
使用说明
-
开发与运行
- 新建项目文件夹并创建以下文件：
- index.html（使用“HTML代码”块内容）
- styles.css（使用“CSS样式”块内容）
- script.js（使用“JavaScript功能”块内容）
- 双击打开 index.html 即可在浏览器中查看，无需任何外部依赖。
-
教学演示流程建议
- 打开页面后，点击“一键生成标准化结构”，查看标准化HTML结构预览与复制。
- 在“布局演示”区切换 Grid/Flex，并勾选“显示断点辅助栏”，观察卡片列数变化和断点说明。
- 在“代码片段讲解”区切换 HTML/CSS片段，点击“复制当前片段”用于课堂讲解。
- 在“作业提交表单”中填写示例数据并提交，可在下方列表中看到“待评分”占位。
- 使用“导出工具”导出 HTML/CSS/JS、讲义（Markdown）或页面快照（自包含）。
-
浏览器兼容性
- 现代浏览器（Chrome、Edge、Firefox、Safari）均可正常运行。
- 移动端兼容，窄屏下导航折叠、表单单列显示。
-
无障碍与安全
- 提供可见焦点与ARIA播报，表单有基础校验。
- 不使用任何外部脚本资源或不安全API，避免安全风险。
定制建议
-
视觉主题
- 将CSS变量（颜色、圆角、阴影）替换为企业品牌色与设计体系（Design Tokens）。
- 为Hero区加入产品Logo或插画（建议使用内联SVG或本地资源）。
-
布局扩展
- 在Grid方案中引入更复杂的布局，如区域网格（grid-template-areas）与不等列宽。
- 在Flex方案中演示主轴/侧轴对齐、不同顺序（order）与响应式断点组合。
-
交互增强
- 为卡片“查看/收藏”加入真实行为，如打开详情面板或本地存储收藏状态。
- 增加“评分占位”交互组件（仅本地）、提交后可编辑备注与打分（避免实际上传）。
-
教学导出
- 使用构建脚手架（如Vite）在开发时注入CSS/JS源到导出函数，生成完整快照与示例代码包。
- 增加“讲义模版配置”，让教师可自定义章节与练习题目。
-
无障碍深度优化
- 为所有按钮与链接提供更详细的 aria-label。
- 加入颜色对比切换（高对比模式）与字体大小控制，提升可访问性体验。
如需我将导出功能改为打包ZIP或将CSS/JS真实内联到导出快照，请告知您的运行环境与限制（本地/服务器/构建工具），我将提供相应方案。
