<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML开发手册</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-blue: #2c3e50;
--secondary-blue: #3498db;
--light-blue: #e1f0fa;
--accent-blue: #2980b9;
--highlight-blue: #3a9bdc;
--success-blue: #1abc9c;
--warning-blue: #f39c12;
--danger-blue: #e74c3c;
--light-gray: #f8f9fa;
--medium-gray: #e9ecef;
--dark-gray: #6c757d;
--white: #ffffff;
--border-radius: 6px;
--box-shadow: 0 4px 12px rgba(0,0,0,0.1);
--transition: all 0.3s ease;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f7fa;
min-height: 100vh;
position: relative;
}
.header-section {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white);
padding: 3rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.header-section::after {
content: '';
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
height: 100px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23f5f7fa' fill-opacity='1' d='M0,64L120,58.7C240,53,480,43,720,48C960,53,1200,75,1320,85.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
z-index: 2;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.header-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 10;
}
h1 {
font-size: 2.8rem;
margin-bottom: 1.2rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.subtitle {
font-size: 1.4rem;
opacity: 0.9;
margin-bottom: 1.5rem;
}
.search-box {
max-width: 500px;
margin: 0 auto;
position: relative;
}
.search-box input {
width: 100%;
padding: 0.9rem 1.2rem;
border-radius: 50px;
border: none;
font-size: 1rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
outline: none;
}
.search-box button {
position: absolute;
right: 6px;
top: 6px;
background: var(--secondary-blue);
border: none;
padding: 0.5rem 1.2rem;
border-radius: 50px;
color: var(--white);
cursor: pointer;
transition: var(--transition);
}
.search-box button:hover {
background: var(--accent-blue);
}
/* 主网格布局 */
.main-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 2rem;
padding: 2rem 2rem 3rem;
max-width: 1400px;
margin: 0 auto;
}
/* 导航菜单 */
.nav-section {
position: sticky;
top: 2rem;
height: fit-content;
background: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
}
.nav-header {
padding: 1.2rem 1.5rem;
background: linear-gradient(135deg, var(--secondary-blue), var(--accent-blue));
color: var(--white);
font-weight: 600;
}
.nav-list {
list-style: none;
padding: 1rem 0;
}
.nav-item {
border-bottom: 1px solid var(--medium-gray);
}
.nav-item:last-child {
border-bottom: none;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.9rem 1.5rem;
color: var(--primary-blue);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
position: relative;
}
.nav-link i {
margin-right: 12px;
color: var(--secondary-blue);
font-size: 1.1rem;
width: 24px;
text-align: center;
}
.nav-link:hover {
background: var(--light-blue);
color: var(--accent-blue);
}
.nav-link:hover::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: var(--accent-blue);
}
.nav-link.active {
background: var(--light-blue);
color: var(--accent-blue);
font-weight: 600;
}
.nav-link.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: var(--accent-blue);
}
/* 主内容区 */
.content-section {
background: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
}
.section {
padding: 2.5rem;
border-bottom: 1px solid var(--medium-gray);
}
.section:last-child {
border-bottom: none;
}
h2 {
font-size: 1.8rem;
margin-bottom: 1.8rem;
color: var(--primary-blue);
position: relative;
padding-bottom: 0.8rem;
}
h2::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 4px;
background: linear-gradient(to right, var(--secondary-blue), var(--accent-blue));
border-radius: 2px;
}
h3 {
font-size: 1.5rem;
margin: 2rem 0 1rem;
color: var(--accent-blue);
}
h4 {
font-size: 1.2rem;
margin: 1.5rem 0 0.8rem;
color: var(--accent-blue);
}
/* 卡片样式 */
.card {
background: var(--light-gray);
border: 1px solid var(--medium-gray);
border-radius: var(--border-radius);
padding: 1.8rem;
margin-bottom: 1.8rem;
position: relative;
transition: var(--transition);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(52, 152, 219, 0.15);
}
.code-block {
background: #1e2a38;
color: #f8f8f2;
padding: 1.5rem;
border-radius: var(--border-radius);
font-family: 'Fira Code', 'Source Code Pro', monospace;
margin: 1.3rem 0;
overflow-x: auto;
font-size: 15px;
position: relative;
}
.code-block-header {
display: flex;
justify-content: space-between;
align-items: center;
color: #95a5a6;
margin-bottom: 0.8rem;
font-size: 0.9rem;
}
.copy-btn {
background: rgba(255,255,255,0.1);
color: #95a5a6;
border: none;
padding: 0.4rem 0.8rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
transition: var(--transition);
}
.copy-btn:hover {
background: var(--secondary-blue);
color: white;
}
/* 示例区域 */
.example-box {
background: var(--light-blue);
border-left: 4px solid var(--accent-blue);
padding: 1.5rem;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
margin: 1.5rem 0;
position: relative;
overflow: hidden;
}
.tag-name {
font-family: monospace;
color: #c7254e;
background: #f9f2f4;
border-radius: 4px;
padding: 0.3rem 0.6rem;
font-size: 0.95em;
display: inline-block;
margin: 0 0.3rem;
}
/* 表单样式 */
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.6rem;
font-weight: 500;
color: var(--primary-blue);
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
width: 100%;
padding: 0.9rem;
border: 1px solid var(--medium-gray);
border-radius: var(--border-radius);
font-size: 1rem;
transition: var(--transition);
background: var(--white);
font-family: inherit;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
select {
background-image: linear-gradient(45deg, transparent 50%, var(--accent-blue) 50%),
linear-gradient(135deg, var(--accent-blue) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
appearance: none;
cursor: pointer;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 0.9rem 1.8rem;
background: var(--secondary-blue);
color: var(--white);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 1rem;
font-weight: 500;
text-align: center;
transition: var(--transition);
text-decoration: none;
}
.btn:hover {
background: var(--accent-blue);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
border: 2px solid var(--secondary-blue);
color: var(--secondary-blue);
}
.btn-outline:hover {
background: var(--secondary-blue);
color: var(--white);
}
/* 表格样式 */
.reference-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
background: var(--white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.reference-table th,
.reference-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--medium-gray);
}
.reference-table th {
background: linear-gradient(135deg, var(--secondary-blue), var(--accent-blue));
color: var(--white);
font-weight: 600;
}
.reference-table tr:last-child td {
border-bottom: none;
}
.reference-table tr:nth-child(even) {
background-color: var(--light-gray);
}
.reference-table tr:hover {
background-color: #e1f0fa;
}
/* 页脚 */
footer {
text-align: center;
padding: 2.5rem;
color: var(--dark-gray);
font-size: 0.95rem;
background: var(--primary-blue);
color: var(--white);
}
footer p {
margin: 0.5rem 0;
}
footer a {
color: var(--light-blue);
text-decoration: none;
transition: var(--transition);
}
footer a:hover {
color: var(--secondary-blue);
}
/* 响应式设计 */
@media (max-width: 992px) {
.main-grid {
grid-template-columns: 1fr;
}
.nav-section {
position: static;
}
}
@media (max-width: 768px) {
.header-section {
padding: 2rem 0;
}
h1 {
font-size: 2.2rem;
}
.subtitle {
font-size: 1.2rem;
}
.section {
padding: 1.8rem;
}
}
/* 进度指示器 */
.progress-container {
height: 5px;
background: var(--medium-gray);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, var(--secondary-blue), var(--accent-blue));
width: 0%;
transition: width 0.2s ease-out;
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition);
box-shadow: 0 4px 12px rgba(41, 128, 185, 0.3);
z-index: 999;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--secondary-blue);
transform: translateY(-5px);
}
.back-to-top i {
color: var(--white);
font-size: 1.5rem;
}
/* 通知弹窗 */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
background: var(--white);
border-radius: var(--border-radius);
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
transform: translateX(120%);
transition: transform 0.4s ease;
z-index: 1001;
display: flex;
align-items: center;
border-left: 4px solid var(--success-blue);
}
.notification.show {
transform: translateX(0);
}
.notification i {
margin-right: 10px;
color: var(--success-blue);
font-size: 1.2rem;
}
</style>
</head>
<body>
<!-- 进度条 -->
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- 返回顶部按钮 -->
<div class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</div>
<!-- 通知弹窗 -->
<div class="notification" id="notification">
<i class="fas fa-check-circle"></i>
<span id="notificationText">操作成功！</span>
</div>
<!-- 页面头部 -->
<header class="header-section">
<div class="container">
<div class="header-content">
<h1>HTML全面开发手册</h1>
<p class="subtitle">完整的HTML参考指南与实用示例</p>
<div class="search-box">
<input type="text" placeholder="搜索HTML元素、属性或技巧...">
<button>搜索</button>
</div>
</div>
</div>
</header>
<!-- 主内容区域 -->
<div class="container">
<div class="main-grid">
<!-- 导航菜单 -->
<nav class="nav-section">
<div class="nav-header">
<h3>HTML参考目录</h3>
</div>
<ul class="nav-list">
<li class="nav-item"><a href="#overview" class="nav-link active"><i class="fas fa-home"></i> HTML概述</a></li>
<li class="nav-item"><a href="#structure" class="nav-link"><i class="fas fa-file-code"></i> 文档结构</a></li>
<li class="nav-item"><a href="#text" class="nav-link"><i class="fas fa-font"></i> 文本元素</a></li>
<li class="nav-item"><a href="#lists" class="nav-link"><i class="fas fa-list"></i> 列表</a></li>
<li class="nav-item"><a href="#tables" class="nav-link"><i class="fas fa-table"></i> 表格</a></li>
<li class="nav-item"><a href="#forms" class="nav-link"><i class="fas fa-edit"></i> 表单与输入</a></li>
<li class="nav-item"><a href="#media" class="nav-link"><i class="fas fa-image"></i> 媒体元素</a></li>
<li class="nav-item"><a href="#semantic" class="nav-link"><i class="fas fa-code"></i> 语义化标签</a></li>
<li class="nav-item"><a href="#metadata" class="nav-link"><i class="fas fa-tags"></i> 元数据</a></li>
<li class="nav-item"><a href="#attributes" class="nav-link"><i class="fas fa-tag"></i> 全局属性</a></li>
<li class="nav-item"><a href="#examples" class="nav-link"><i class="fas fa-laptop-code"></i> 完整示例</a></li>
<li class="nav-item"><a href="#best-practices" class="nav-link"><i class="fas fa-star"></i> 最佳实践</a></li>
</ul>
</nav>
<!-- 主内容区 -->
<main class="content-section">
<!-- HTML概述 -->
<section id="overview" class="section">
<h2>HTML概述</h2>
<div class="card">
<h3>什么是HTML？</h3>
<p>HTML（超文本标记语言）是构建网页的标准标记语言。它使用标签来描述网页的结构和内容，如文本、图像、链接等。</p>
<div class="code-block">
<div class="code-block-header">
<span>HTML基本结构</span>
<button class="copy-btn">复制代码</button>
</div>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个HTML页面</h1>
<p>欢迎访问我的网站！</p>
</body>
</html>
</div>
</div>
<div class="card">
<h3>HTML文档基本结构</h3>
<p>每个HTML文档都必须包含以下基本元素：</p>
<ul>
<li><span class="tag-name"><!DOCTYPE html></span> - 文档类型声明</li>
<li><span class="tag-name"><html></span> - 文档根元素</li>
<li><span class="tag-name"><head></span> - 元数据容器</li>
<li><span class="tag-name"><title></span> - 页面标题</li>
<li><span class="tag-name"><body></span> - 页面内容容器</li>
</ul>
</div>
</section>
<!-- 表单与输入 -->
<section id="forms" class="section">
<h2>表单与输入元素</h2>
<div class="card">
<h3>表单基础</h3>
<p><span class="tag-name"><form></span> 元素用于创建表单，包含各种输入控件。</p>
<div class="example-box">
<form>
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" id="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="email">电子邮箱：</label>
<input type="email" id="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<button type="submit" class="btn">提交</button>
</form>
</div>
<div class="code-block">
<div class="code-block-header">
<span>基础表单代码</span>
<button class="copy-btn">复制代码</button>
</div>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" placeholder="请输入姓名">
<label for="email">电子邮箱：</label>
<input type="email" id="email" placeholder="请输入邮箱">
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码">
<button type="submit">提交</button>
</form>
</div>
</div>
<div class="card">
<h3>下拉列表</h3>
<p><span class="tag-name"><select></span> 元素创建下拉选择列表。</p>
<div class="reference-table">
<table>
<tr>
<th>属性</th>
<th>描述</th>
<th>示例</th>
</tr>
<tr>
<td>name</td>
<td>下拉框的名称（表单提交时使用）</td>
<td><select name="country"></td>
</tr>
<tr>
<td>id</td>
<td>唯一标识符</td>
<td><select id="country-select"></td>
</tr>
<tr>
<td>multiple</td>
<td>允许多选</td>
<td><select multiple></td>
</tr>
<tr>
<td>size</td>
<td>可见选项数</td>
<td><select size="5"></td>
</tr>
<tr>
<td>disabled</td>
<td>禁用下拉框</td>
<td><select disabled></td>
</tr>
</table>
</div>
<h4>基本下拉框</h4>
<div class="example-box">
<div class="form-group">
<label for="fruit">选择水果：</label>
<select id="fruit" name="fruit">
<option value="">-- 请选择 --</option>
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
<option value="orange">橙子</option>
<option value="grape">葡萄</option>
</select>
</div>
</div>
<h4>分组下拉框</h4>
<div class="example-box">
<div class="form-group">
<label for="car">选择车型：</label>
<select id="car" name="car">
<option value="">-- 请选择 --</option>
<optgroup label="德系车">
<option value="bmw">宝马</option>
<option value="benz">奔驰</option>
<option value="audi">奥迪</option>
</optgroup>
<optgroup label="日系车">
<option value="toyota">丰田</option>
<option value="honda">本田</option>
<option value="nissan">日产</option>
</optgroup>
</select>
</div>
</div>
<h4>多选下拉框</h4>
<div class="example-box">
<div class="form-group">
<label for="skills">选择技能：</label>
<select id="skills" name="skills" multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
<p><small>按住Ctrl键(Windows)或Command键(Mac)选择多个选项</small></p>
</div>
</div>
</div>
</section>
<!-- 完整表单示例 -->
<section id="examples" class="section">
<h2>完整表单示例</h2>
<div class="card">
<h3>用户注册表单</h3>
<p>包含各种表单元素的完整示例：</p>
<div class="example-box">
<form id="registration-form">
<h3>基本信息</h3>
<div class="form-group">
<label for="reg-name">姓名：</label>
<input type="text" id="reg-name" placeholder="请输入姓名" required>
</div>
<div class="form-group">
<label for="reg-email">电子邮箱：</label>
<input type="email" id="reg-email" placeholder="请输入邮箱" required>
</div>
<div class="form-group">
<label for="reg-password">密码：</label>
<input type="password" id="reg-password" placeholder="设置密码" required minlength="6">
</div>
<h3>个人信息</h3>
<div class="form-group">
<label for="reg-country">国家：</label>
<select id="reg-country" name="country" required>
<option value="">-- 选择国家 --</option>
<option value="cn">中国</option>
<option value="us">美国</option>
<option value="jp">日本</option>
<option value="kr">韩国</option>
<option value="uk">英国</option>
</select>
</div>
<div class="form-group">
<label for="reg-language">语言：</label>
<select id="reg-language" name="language">
<option value="zh">中文</option>
<option value="en">英语</option>
<option value="es">西班牙语</option>
<option value="fr">法语</option>
</select>
</div>
<div class="form-group">
<label for="reg-interests">兴趣爱好：</label>
<select id="reg-interests" name="interests" multiple size="5">
<option value="reading">阅读</option>
<option value="sports">体育</option>
<option value="music">音乐</option>
<option value="travel">旅行</option>
<option value="coding">编程</option>
</select>
</div>
<h3>账户类型</h3>
<div class="form-group">
<label for="reg-account">账户类型：</label>
<select id="reg-account" name="account" required>
<option value="free">免费账户</option>
<option value="basic">基础账户</option>
<option value="premium">高级账户</option>
</select>
</div>
<div class="form-group">
<label for="reg-terms">接受条款：</label>
<input type="checkbox" id="reg-terms" required>
我同意<a href="#">服务条款</a>和<a href="#">隐私政策</a>
</div>
<div class="form-group">
<button type="submit" class="btn">注册账户</button>
<button type="reset" class="btn btn-outline">重置表单</button>
</div>
</form>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<p>HTML开发手册 © 2023 | 完整的HTML参考指南</p>
<p>在实际项目中结合具体需求使用这些元素和技巧</p>
<p>创建者: HTML开发团队 | <a href="#">联系我们</a> | <a href="#">反馈建议</a></p>
</footer>
</main>
</div>
</div>
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 复制功能实现
document.querySelectorAll('.copy-btn').forEach(button => {
button.addEventListener('click', function() {
const codeBlock = this.closest('.code-block');
const text = codeBlock.innerText.replace('复制代码', '');
navigator.clipboard.writeText(text).then(() => {
showNotification('代码已复制到剪贴板！');
}).catch(err => {
console.error('复制失败: ', err);
showNotification('复制失败，请重试', 'warning');
});
});
});
// 滚动进度条
window.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (scrollTop / scrollHeight) * 100;
document.getElementById('progressBar').style.width = scrolled + '%';
});
// 返回顶部按钮
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopBtn.classList.add('visible');
} else {
backToTopBtn.classList.remove('visible');
}
});
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 导航菜单活动状态
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.section');
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= (sectionTop - 100)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === current) {
link.classList.add('active');
}
});
});
// 表单验证
document.getElementById('registration-form').addEventListener('submit', function(e) {
e.preventDefault();
showNotification('表单提交成功！(本示例仅作演示)', 'success');
});
});
// 显示通知
function showNotification(message, type = 'success') {
const notification = document.getElementById('notification');
const notificationText = document.getElementById('notificationText');
// 设置通知内容
notificationText.textContent = message;
// 设置通知样式
if (type === 'success') {
notification.style.borderLeftColor = '#1abc9c';
notification.querySelector('i').className = 'fas fa-check-circle';
notification.querySelector('i').style.color = '#1abc9c';
} else if (type === 'warning') {
notification.style.borderLeftColor = '#f39c12';
notification.querySelector('i').className = 'fas fa-exclamation-triangle';
notification.querySelector('i').style.color = '#f39c12';
}
// 显示通知
notification.classList.add('show');
// 3秒后隐藏通知
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
</script>
<!-- 引入Font Awesome图标库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
</body>
</html>
index.html