HTML结构代码
<!doctype html>
<html lang="zh-CN" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>周末创意黑客松 | AI助力公益</title>
<meta name="description" content="周末创意黑客松 · 主题：AI助力公益。本周六 9:00-21:00 于城市创新中心举行。3-5 人组队（可现场组队），需提交 Demo 与 3 分钟路演。提供导师、餐饮与 Wi‑Fi。立即报名并查看日程。" />
<meta name="robots" content="index,follow" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="#0ea5e9" />
<link rel="canonical" href="https://example.com/" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta property="og:title" content="周末创意黑客松 | AI助力公益" />
<meta property="og:description" content="周末创意黑客松 · 本周六 9:00-21:00 · 城市创新中心。组队 3-5 人，提交 Demo 与 3 分钟路演。提供导师、餐饮与 Wi‑Fi。" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="周末创意黑客松 | AI助力公益" />
<meta name="twitter:description" content="周末创意黑客松 · 本周六 9:00-21:00 · 城市创新中心。3-5 人组队，提交 Demo 与 3 分钟路演。提供导师、餐饮与 Wi‑Fi。" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
<style>
/* 1) 基础重置与变量 */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body,h1,h2,h3,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,canvas{max-width:100%;display:block}
input,button,textarea,select{font:inherit}
:root{
--maxw:1120px;
--radius:12px;
--radius-sm:8px;
--ring:0 0 0 3px rgba(34,211,238,.35);
--space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;
--bg:#0b1020; --surface:#11162a; --elev:#0f1426; --border:#26304a; --fg:#e7f1ff; --muted:#a7b4d7;
--primary:#22d3ee; --primary-2:#60a5fa; --accent:#7c3aed;
--gradient:
radial-gradient(1000px 400px at 20% -10%, rgba(34,211,238,.25), transparent 60%),
radial-gradient(1000px 400px at 80% 0%, rgba(124,58,237,.25), transparent 60%),
linear-gradient(180deg, #0b1020 0%, #0f172a 100%);
}
@media (prefers-color-scheme: light){
:root{
--bg:#f7f9ff; --surface:#ffffff; --elev:#f2f6ff; --border:#d6def2; --fg:#0b1020; --muted:#4b587a;
--gradient: radial-gradient(800px 300px at 20% -10%, rgba(34,211,238,.20), transparent 65%),
radial-gradient(800px 300px at 80% 0%, rgba(96,165,250,.18), transparent 65%),
linear-gradient(180deg, #f7fbff 0%, #eef3ff 100%);
}
}
html,body{height:100%}
body{
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
color:var(--fg); background:var(--bg);
text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; line-height:1.6;
}
:root{color-scheme:light dark}
/* 2) 布局与通用样式 */
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-4)}
.skip-link{
position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
position:fixed; left:var(--space-4); top:var(--space-4); width:auto; height:auto; padding:.5rem .75rem; z-index:1000;
background:var(--surface); color:var(--fg); border-radius:var(--radius-sm); outline:2px solid var(--primary);
}
/* 3) 头部导航 */
.site-header{
position:sticky; top:0; z-index:50;
background:color-mix(in oklab, var(--bg) 80%, transparent);
border-bottom:1px solid var(--border);
backdrop-filter:saturate(1.2) blur(10px);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:64px}
.logo{
font-weight:700; letter-spacing:.2px; color:var(--fg); text-decoration:none;
}
nav ul{display:flex; align-items:center; gap:clamp(.5rem, 2vw, 1rem)}
nav a{color:var(--fg); text-decoration:none; opacity:.9}
nav a:hover, nav a:focus{opacity:1}
/* 4) 按钮 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.75rem 1rem; border-radius:999px; border:1px solid transparent; text-decoration:none; font-weight:600; transition:.2s ease}
.btn:focus-visible{box-shadow:var(--ring)}
.btn-primary{
background:linear-gradient(135deg, var(--primary), var(--primary-2));
color:#001019; text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{transform:translateY(-1px); filter:saturate(1.1)}
.btn-secondary{
background:var(--surface); color:var(--fg); border-color:var(--border)
}
.btn-secondary:hover{background:var(--elev)}
.btn-ghost{
color:var(--primary); background:transparent; border-color:color-mix(in oklab, var(--primary) 30%, var(--border));
}
.btn-ghost:hover{background:color-mix(in oklab, var(--primary) 10%, transparent)}
.btn.small{padding:.5rem .75rem; font-size:.95rem}
/* 5) Hero */
.hero{
position:relative; overflow:hidden; isolation:isolate;
background:var(--gradient);
padding-block:clamp(3rem, 8vw, 6rem);
border-bottom:1px solid var(--border);
}
.hero .bg-decor{
position:absolute; inset:-10% -20% -20% -20%; z-index:-1; opacity:.35;
background:
radial-gradient(1200px 1200px at 120% -10%, rgba(34,211,238,.15), transparent 40%),
repeating-linear-gradient(90deg, rgba(96,165,250,.08) 0 1px, transparent 1px 60px),
repeating-linear-gradient(0deg, rgba(124,58,237,.08) 0 1px, transparent 1px 60px);
mask:linear-gradient(180deg, #000 40%, transparent 100%);
}
.eyebrow{
font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
color:var(--primary); letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; margin-bottom:.5rem;
}
h1{
font-size:clamp(2rem, 6vw, 3rem); line-height:1.2; font-weight:800; margin-bottom:var(--space-3);
}
.hero .meta{
display:flex; align-items:center; gap:.75rem; color:var(--muted); font-family:"JetBrains Mono", ui-monospace, monospace;
margin-bottom:var(--space-5);
}
.cta-group{display:flex; gap:var(--space-3); flex-wrap:wrap}
.perks{
margin-top:var(--space-5); display:flex; gap:var(--space-4); flex-wrap:wrap; color:var(--muted);
}
.perks li{display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .75rem; border:1px solid var(--border); border-radius:999px; background:color-mix(in oklab, var(--surface) 70%, transparent)}
.perks li::before{content:"✓"; color:var(--primary); font-weight:800}
/* 6) 内容区块 */
section{padding-block:clamp(2rem, 6vw, 3rem)}
h2{font-size:clamp(1.5rem, 3vw, 2rem); line-height:1.3; margin-bottom:var(--space-4)}
.rules .rule-list{display:grid; gap:.75rem}
.rules .rule-list li{
padding:1rem 1rem 1rem 2.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
position:relative;
}
.rules .rule-list li::before{
content:"#"; position:absolute; left:.9rem; top:1rem; color:var(--accent); font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:700;
}
/* 时间轴 */
.timeline{display:grid; gap:1rem; position:relative}
.timeline li{
display:grid; grid-template-columns:6ch 1fr; gap:1rem; align-items:start; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
position:relative;
}
.timeline time{
font-family:"JetBrains Mono", ui-monospace, monospace; color:var(--primary-2); font-weight:700;
}
/* 7) 表单 */
.form{display:grid; gap:1rem}
.form .grid{display:grid; gap:1rem}
@media (min-width:720px){ .form .grid{grid-template-columns:repeat(2,1fr)} }
label{display:grid; gap:.5rem; font-weight:600}
input[type="text"], input[type="email"], select, textarea{
width:100%; padding:.75rem .9rem; color:var(--fg); background:var(--elev); border:1px solid var(--border); border-radius:var(--radius-sm);
}
input::placeholder, textarea::placeholder{color:color-mix(in oklab, var(--muted) 80%, transparent)}
input:focus, select:focus, textarea:focus{outline:none; box-shadow:var(--ring); border-color:color-mix(in oklab, var(--primary) 40%, var(--border))}
.radio-group{display:flex; gap:1rem}
.disclaimer{color:var(--muted); font-size:.95rem}
/* 8) 页脚 */
.site-footer{border-top:1px solid var(--border); background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--surface) 85%, transparent))}
.footer-grid{display:grid; gap:2rem; padding-block:var(--space-6)}
@media (min-width:860px){ .footer-grid{grid-template-columns:1.2fr .8fr} }
.notice-list{display:grid; gap:.5rem; color:var(--muted)}
.legal{padding-block:var(--space-4); border-top:1px solid var(--border); color:var(--muted); font-size:.95rem; text-align:center}
/* 9) 降级与无障碍 */
@media (prefers-reduced-motion: reduce){
*{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}
</style>
</head>
<body>
<a class="skip-link" href="#main">跳到主要内容</a>
<header class="site-header">
<div class="container nav">
<a class="logo" href="#" aria-label="周末创意黑客松首页">周末创意黑客松</a>
<nav aria-label="主导航">
<ul class="nav-list">
<li><a href="#about">简介</a></li>
<li><a href="#rules">规则</a></li>
<li><a href="#schedule">日程</a></li>
<li><a class="btn btn-primary" href="#register">立即报名</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<!-- Hero / 简介 -->
<section class="hero" id="about">
<div class="container">
<p class="eyebrow">AI助力公益</p>
<h1>周末创意黑客松</h1>
<p class="meta" aria-label="时间与地点">
<span class="time">本周六 9:00–21:00</span>
<span aria-hidden="true">•</span>
<span class="place">城市创新中心</span>
</p>
<div class="cta-group" role="group" aria-label="主要操作">
<a class="btn btn-primary" href="#register">立即报名</a>
<a class="btn btn-ghost" href="#schedule">查看日程</a>
</div>
<ul class="perks" aria-label="活动保障">
<li>导师指导</li>
<li>提供餐饮</li>
<li>高速 Wi‑Fi</li>
</ul>
<div class="bg-decor" aria-hidden="true"></div>
</div>
</section>
<!-- 规则 -->
<section class="rules" id="rules" aria-labelledby="rules-title">
<div class="container">
<h2 id="rules-title">参赛规则</h2>
<ul class="rule-list">
<li>3–5 人组队，支持现场组队</li>
<li>需提交可运行 Demo</li>
<li>进行 3 分钟现场路演</li>
</ul>
</div>
</section>
<!-- 日程 -->
<section class="schedule" id="schedule" aria-labelledby="schedule-title">
<div class="container">
<h2 id="schedule-title">活动日程</h2>
<ol class="timeline" role="list">
<li>
<time datetime="09:00">09:00</time>
<div>签到 & 破冰</div>
</li>
<li>
<time datetime="10:00">10:00</time>
<div>主题发布 & 组队</div>
</li>
<li>
<time datetime="12:00">12:00</time>
<div>午餐</div>
</li>
<li>
<time datetime="13:00">13:00</time>
<div>编码冲刺（导师巡回指导）</div>
</li>
<li>
<time datetime="18:00">18:00</time>
<div>晚餐</div>
</li>
<li>
<time datetime="19:00">19:00</time>
<div>提交 Demo 截止</div>
</li>
<li>
<time datetime="19:30">19:30</time>
<div>3 分钟路演</div>
</li>
<li>
<time datetime="21:00">21:00</time>
<div>评审 & 颁奖</div>
</li>
</ol>
</div>
</section>
<!-- 报名 -->
<section class="register" id="register" aria-labelledby="register-title">
<div class="container">
<h2 id="register-title">报名</h2>
<form class="form" action="#" method="post" novalidate>
<div class="grid">
<label>
姓名
<input type="text" name="name" required autocomplete="name" placeholder="请输入姓名" />
</label>
<label>
邮箱
<input type="email" name="email" required autocomplete="email" inputmode="email" placeholder="you@example.com" />
</label>
<label>
团队人数
<select name="team_size" required>
<option value="" selected disabled>请选择</option>
<option value="3">3 人</option>
<option value="4">4 人</option>
<option value="5">5 人</option>
<option value="solo">待组队</option>
</select>
</label>
<label>
是否需要现场组队
<div class="radio-group" role="radiogroup" aria-label="现场组队">
<label><input type="radio" name="onsite_team" value="yes" /> 是</label>
<label><input type="radio" name="onsite_team" value="no" checked /> 否</label>
</div>
</label>
</div>
<label>
项目简介
<textarea name="message" rows="4" placeholder="简要描述你的想法或项目（选填）"></textarea>
</label>
<button class="btn btn-primary" type="submit">提交报名</button>
<p class="disclaimer">提交即表示同意参赛须知。</p>
</form>
</div>
</section>
</main>
<footer class="site-footer" role="contentinfo">
<div class="container footer-grid">
<section aria-labelledby="notice-title">
<h3 id="notice-title">参赛须知</h3>
<ul class="notice-list">
<li>请自备开发设备与必要账号权限。</li>
<li>提交作品需为原创或已获得授权。</li>
<li>遵守场地安全与公共秩序。</li>
<li>遵循数据与隐私保护规范。</li>
</ul>
<a class="btn btn-ghost small" href="#rules">查看完整规则</a>
</section>
<section aria-labelledby="contact-title">
<h3 id="contact-title">联系表单</h3>
<form class="form small" action="#" method="post" novalidate>
<label>
邮箱
<input type="email" name="contact_email" required autocomplete="email" placeholder="you@example.com" />
</label>
<label>
留言
<textarea name="contact_message" rows="3" required placeholder="请留下你的问题或合作意向"></textarea>
</label>
<button class="btn btn-secondary" type="submit">发送</button>
</form>
</section>
</div>
<div class="container legal">
<p>© <span id="year"></span> 周末创意黑客松</p>
</div>
</footer>
<script>
// 更新页脚年份
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
代码说明
-
结构设计思路
- 采用语义化结构：header、nav、main、section、footer，便于可访问性与SEO。
- 层级清晰：H1 用于页面主标题，H2 用于各模块（规则、日程、报名）。
- CTA 明确：Hero 区提供“立即报名”“查看日程”双按钮，并在导航中重复“立即报名”以提高转化。
-
关键标签的作用说明
- meta viewport、color-scheme、theme-color：移动端与深浅色支持、PWA 状态栏配色。
- Open Graph/Twitter Card：社交分享摘要图与标题。
- nav[aria-label]、role="group"、skip-link：提升键盘导航与读屏器体验。
- time[datetime]：日程时间的机器可读化，有利于语义和潜在聚合。
-
样式设计要点
- 科技风：深色基底 + 蓝青紫渐变 + 网格/径向光晕背景，按钮为蓝青渐变并带轻微悬浮反馈。
- 使用 CSS 变量与 clamp 尺寸，保证主题可调与响应式排版。
- 可访问性：高对比度文本、清晰 focus ring、prefers-reduced-motion 降级。
- 响应式：容器最大宽度，表单在 >=720px 时两列，页脚在 >=860px 时双列。
-
浏览器兼容性说明
- 主要使用现代特性（flex/grid、color-mix、clamp、backdrop-filter）。在不支持 color-mix/backdrop-filter 的浏览器中会优雅降级为普通颜色/半透明背景，不影响可用性。
- 支持现代主流浏览器（Chromium、Firefox、Safari、Edge）。IE 已废弃，不在支持范围。
使用建议
-
后续开发方向
- 将表单 action 指向后端接口或无后端服务（如 Formspree/Netlify Forms），并在前端加入基础校验与提交状态提示。
- 添加活动实际日期与地图定位，可引入地图组件或嵌入式地图以便参会者导航。
- 增加评审标准、奖项设置、合作伙伴 LOGO 模块。
-
可能的扩展方案
- 多语言切换：在 html[lang] 与文案层面抽离字典，增加语言切换控件。
- 结构化数据：确认具体日期后添加 JSON‑LD Event（需提供准确 startDate/endDate 与地址）。
- 主题切换：在 CSS 变量基础上添加显式的深浅色开关并持久化到 localStorage。
-
最佳实践提醒
- 替换 canonical、OG/Twitter 图片与 URL 为实际域名与资源地址。
- 确认“本周六”对应的具体年月日后在描述与可能的结构化数据中保持一致，避免误导收录。
- 保持图片资源的懒加载与合适的尺寸，若后续加入图片请加上 width/height 以减少CLS。
