shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 2026-03-28 20:59

Browse Source
This commit is contained in:
树萌芽
2026-03-28 20:59:52 +08:00
parent e21d58e603
commit 1c81d4e6ea
611 changed files with 27847 additions and 65061 deletions
Download Patch File Download Diff File Expand all files Collapse all files

662
InfoGenie-frontend/public/toolbox/学习工具/HTML的div标签指南/index.html Normal file
View File

@@ -0,0 +1,662 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML div元素全面指南</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
line-height: 1.6;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.main-content {
flex: 3;
min-width: 300px;
}
.sidebar {
flex: 1;
min-width: 250px;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 20px;
margin-bottom: 20px;
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.card-header {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
h1, h2, h3 {
color: #2c3e50;
margin-bottom: 15px;
}
h1 {
text-align: center;
margin-bottom: 25px;
color: #2980b9;
font-size: 2.5rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
h2 {
color: #3498db;
font-size: 1.8rem;
}
h3 {
color: #2980b9;
font-size: 1.4rem;
}
p {
margin-bottom: 15px;
}
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
font-size: 0.9rem;
}
.highlight {
color: #e74c3c;
font-weight: bold;
}
.demo-box {
border: 2px dashed #3498db;
padding: 15px;
margin: 15px 0;
background-color: #f8f9fa;
border-radius: 5px;
}
.demo-div {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
.demo-container {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 15px 0;
}
.demo-item {
background: #3498db;
color: white;
padding: 15px;
border-radius: 5px;
text-align: center;
flex-grow: 1;
min-width: 80px;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
margin: 15px 0;
}
.grid-item {
background: #9b59b6;
color: white;
padding: 15px;
border-radius: 5px;
text-align: center;
}
.flex-container {
display: flex;
justify-content: space-between;
margin: 15px 0;
}
.flex-item {
background: #2ecc71;
color: white;
padding: 15px;
border-radius: 5px;
width: 30%;
text-align: center;
}
.table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.table th, .table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.table th {
background-color: #3498db;
color: white;
}
.table tr:nth-child(even) {
background-color: #f2f2f2;
}
.nav-menu {
display: flex;
background: #2c3e50;
border-radius: 5px;
overflow: hidden;
margin: 15px 0;
}
.nav-item {
padding: 12px 20px;
color: white;
text-decoration: none;
transition: background 0.3s;
}
.nav-item:hover {
background: #3498db;
}
.btn {
display: inline-block;
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
border: none;
cursor: pointer;
transition: background 0.3s;
margin: 5px;
}
.btn:hover {
background: #2980b9;
}
.badge {
display: inline-block;
background: #e74c3c;
color: white;
padding: 3px 8px;
border-radius: 10px;
font-size: 0.8rem;
margin-left: 5px;
}
.alert {
padding: 15px;
border-radius: 5px;
margin: 15px 0;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert-warning {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
padding: 30px;
border-radius: 10px;
max-width: 500px;
width: 90%;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
}
.footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #ddd;
color: #7f8c8d;
font-size: 0.9rem;
}
.tag {
display: inline-block;
background: #ecf0f1;
color: #2c3e50;
padding: 2px 8px;
border-radius: 3px;
font-family: monospace;
font-size: 0.9rem;
margin: 0 3px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.flex-container {
flex-direction: column;
}
.flex-item {
width: 100%;
margin-bottom: 10px;
}
h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="card">
<h1><i class="fas fa-cube"></i> HTML <span class="tag">&lt;div&gt;</span> 元素全面指南</h1>
<p><span class="tag">&lt;div&gt;</span> 是 HTML 中最常用、最通用的容器元素。它是 "division"（分割）的缩写，用于将文档分割成独立的部分，没有特定的语义含义，主要用于布局和样式化。</p>
</div>
<div class="container">
<div class="main-content">
<!-- 基础功能 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-bars"></i>-->
<h2>1. 基础功能：作为通用容器</h2>
</div>
<p><span class="tag">&lt;div&gt;</span> 是一个块级元素，用于将 HTML 文档划分为独立的区块，便于应用样式和布局。</p>
<div class="code-example">
&lt;div id="header"&gt;这是页头&lt;/div&gt;<br>
&lt;div id="main-content"&gt;<br>
&nbsp;&nbsp;&lt;div class="article"&gt;文章1&lt;/div&gt;<br>
&nbsp;&nbsp;&lt;div class="article"&gt;文章2&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;div id="footer"&gt;这是页脚&lt;/div&gt;
</div>
<div class="demo-box">
<h3>示例：div作为容器</h3>
<div style="background-color: #e8f4f8; padding: 15px; margin-bottom: 10px; border-left: 4px solid #3498db;">
这是一个带有样式的div容器
</div>
<div style="background-color: #f9f3e9; padding: 15px; border-left: 4px solid #e67e22;">
这是另一个带有不同样式的div容器
</div>
</div>
</div>
<!-- 布局功能 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-th-large"></i>-->
<h2>2. 布局功能</h2>
</div>
<p>使用 <span class="tag">&lt;div&gt;</span> 创建页面布局，结合 CSS 实现各种布局技术。</p>
<h3>2.1 传统浮动布局</h3>
<div class="demo-box">
<div style="overflow: hidden;">
<div style="float: left; width: 30%; background: #3498db; color: white; padding: 15px; margin-right: 10px;">
左侧边栏 (float: left)
</div>
<div style="float: right; width: 30%; background: #9b59b6; color: white; padding: 15px;">
右侧边栏 (float: right)
</div>
<div style="background: #2ecc71; color: white; padding: 15px;">
主要内容区域 (自适应宽度)
</div>
</div>
</div>
<h3>2.2 Flexbox 布局</h3>
<div class="flex-container demo-box">
<div class="flex-item">Flex 项目 1</div>
<div class="flex-item">Flex 项目 2</div>
<div class="flex-item">Flex 项目 3</div>
</div>
<h3>2.3 CSS Grid 布局</h3>
<div class="demo-grid demo-box">
<div class="grid-item">网格项目 1</div>
<div class="grid-item">网格项目 2</div>
<div class="grid-item">网格项目 3</div>
<div class="grid-item">网格项目 4</div>
<div class="grid-item">网格项目 5</div>
<div class="grid-item">网格项目 6</div>
</div>
</div>
<!-- 分组与样式化 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-paint-brush"></i>-->
<h2>3. 分组与样式化</h2>
</div>
<p>使用 <span class="tag">&lt;div&gt;</span> 对相关元素进行分组，以便统一应用样式。</p>
<div class="demo-box">
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; margin-bottom: 15px;">
<h3 style="color: white; margin-top: 0;">带背景渐变的分组</h3>
<p>这个div包含标题和段落，并应用了渐变背景。</p>
<button class="btn" style="background: rgba(255,255,255,0.2); border: 1px solid white;">了解更多</button>
</div>
<div style="border: 2px solid #f39c12; padding: 15px; border-radius: 5px; background-color: #fff9e6;">
<h3 style="color: #f39c12;">带边框的分组</h3>
<p>这个div有自定义边框和背景色，用于突出显示内容。</p>
</div>
</div>
</div>
<!-- 交互功能 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-mouse-pointer"></i>-->
<h2>4. 交互功能</h2>
</div>
<p>通过 JavaScript 为 <span class="tag">&lt;div&gt;</span> 添加交互功能。</p>
<div class="demo-box">
<h3>4.1 点击事件</h3>
<div id="clickable-div" style="background: #3498db; color: white; padding: 15px; border-radius: 5px; cursor: pointer; text-align: center; margin-bottom: 10px;">
点击这个div，我会改变颜色和文本
</div>
<h3>4.2 悬停效果</h3>
<div id="hover-div" style="background: #2ecc71; color: white; padding: 15px; border-radius: 5px; text-align: center; transition: all 0.3s;">
鼠标悬停在我上面试试
</div>
<h3>4.3 显示/隐藏内容</h3>
<button id="toggle-btn" class="btn">显示/隐藏内容</button>
<div id="toggle-content" style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin-top: 10px; display: none;">
这个内容可以通过按钮显示或隐藏。这是通过切换div的display属性实现的。
</div>
</div>
</div>
<!-- 模拟其他元素 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-shapes"></i>-->
<h2>5. 模拟其他元素</h2>
</div>
<p><span class="tag">&lt;div&gt;</span> 可以结合CSS模拟其他元素的功能。</p>
<div class="demo-box">
<h3>5.1 模拟按钮</h3>
<div class="btn" style="display: inline-block;">看起来像按钮的div</div>
<h3>5.2 模拟卡片</h3>
<div style="border: 1px solid #ddd; border-radius: 8px; overflow: hidden; max-width: 300px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
<div style="height: 150px; background: linear-gradient(to right, #3498db, #2c3e50);"></div>
<div style="padding: 15px;">
<h4 style="margin-top: 0;">卡片标题</h4>
<p>这是一个使用div创建的卡片组件，具有图片区域和内容区域。</p>
<div class="btn" style="padding: 8px 16px; font-size: 0.9rem;">查看详情</div>
</div>
</div>
<h3>5.3 模拟表格</h3>
<div class="table">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); background: #3498db; color: white;">
<div style="padding: 10px; font-weight: bold;">姓名</div>
<div style="padding: 10px; font-weight: bold;">年龄</div>
<div style="padding: 10px; font-weight: bold;">城市</div>
</div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<div style="padding: 10px; border-bottom: 1px solid #ddd;">张三</div>
<div style="padding: 10px; border-bottom: 1px solid #ddd;">28</div>
<div style="padding: 10px; border-bottom: 1px solid #ddd;">北京</div>
</div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<div style="padding: 10px;">李四</div>
<div style="padding: 10px;">34</div>
<div style="padding: 10px;">上海</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
<!-- 属性总结 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-list-alt"></i>-->
<h2>div 常用属性</h2>
</div>
<p><span class="tag">&lt;div&gt;</span> 支持所有HTML全局属性：</p>
<ul style="padding-left: 20px; margin-bottom: 15px;">
<li><span class="highlight">id</span> - 唯一标识符</li>
<li><span class="highlight">class</span> - 类名，用于CSS和JS选择</li>
<li><span class="highlight">style</span> - 内联样式</li>
<li><span class="highlight">title</span> - 提示文本</li>
<li><span class="highlight">data-*</span> - 自定义数据属性</li>
</ul>
<p>以及所有HTML事件属性：</p>
<ul style="padding-left: 20px;">
<li><span class="highlight">onclick</span> - 点击事件</li>
<li><span class="highlight">onmouseover</span> - 鼠标悬停</li>
<li><span class="highlight">onload</span> - 加载完成</li>
<li>等等...</li>
</ul>
</div>
<!-- 最佳实践 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-check-circle"></i>-->
<h2>使用最佳实践</h2>
</div>
<div class="alert alert-success">
<p><i class="fas fa-lightbulb"></i> <strong>使用语义化元素替代</strong>：当有更合适的语义化元素时（如&lt;header&gt;、&lt;section&gt;、&lt;article&gt;等），应优先使用它们。</p>
</div>
<div class="alert alert-warning">
<p><i class="fas fa-exclamation-triangle"></i> <strong>避免过度嵌套</strong>：减少不必要的div嵌套，保持HTML结构简洁。</p>
</div>
<div class="alert alert-success">
<p><i class="fas fa-lightbulb"></i> <strong>合理使用类名</strong>：使用有意义的类名，遵循命名规范（如BEM）。</p>
</div>
<div class="alert alert-warning">
<p><i class="fas fa-exclamation-triangle"></i> <strong>避免仅用于样式</strong>：尽量使用CSS而不是额外的div来实现纯样式效果。</p>
</div>
</div>
<!-- 示例组件 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-code"></i>-->
<h2>div 构建的组件</h2>
</div>
<h3>导航菜单</h3>
<div class="nav-menu">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">产品</a>
<a href="#" class="nav-item">服务</a>
<a href="#" class="nav-item">关于我们</a>
<a href="#" class="nav-item">联系</a>
</div>
<h3>消息提示</h3>
<div class="alert alert-success">
<strong>成功！</strong> 操作已成功完成。
</div>
<div class="alert alert-warning">
<strong>警告！</strong> 请检查您的输入。
</div>
<h3>标签/徽章</h3>
<div style="margin: 10px 0;">
<span>通知 <span class="badge">5</span></span>
<span style="margin-left: 15px;">消息 <span class="badge">12</span></span>
</div>
</div>
<!-- 模态框 -->
<div class="card">
<div class="card-header">
<!-- <i class="fas fa-window-maximize"></i>-->
<h2>div 模态框示例</h2>
</div>
<p>使用div创建的模态对话框</p>
<button id="open-modal" class="btn" style="width: 100%;">打开模态框</button>
</div>
</div>
</div>
<!-- 模态框结构 -->
<div id="modal-overlay" class="modal-overlay">
<div class="modal">
<h2>这是一个模态框</h2>
<p>这个模态框完全使用div元素创建，通过CSS定位和JavaScript控制显示/隐藏。</p>
<p>模态框是网页中常见的UI组件，通常用于显示重要信息或收集用户输入。</p>
<div style="text-align: right; margin-top: 20px;">
<button id="close-modal" class="btn">关闭</button>
</div>
</div>
</div>
<div class="footer">
<p>© 2023 HTML div元素全面指南 | 使用单个HTML文件演示div元素的所有主要功能</p>
<p>div是一个通用容器，没有特定语义，但却是现代网页布局的基石。</p>
</div>
<script>
// 交互演示代码
document.addEventListener('DOMContentLoaded', function() {
// 1. 点击div改变颜色
const clickableDiv = document.getElementById('clickable-div');
let colorChanged = false;
clickableDiv.addEventListener('click', function() {
if (!colorChanged) {
this.style.background = '#e74c3c';
this.innerHTML = '你点击了我！现在我是红色的';
colorChanged = true;
} else {
this.style.background = '#3498db';
this.innerHTML = '点击这个div，我会改变颜色和文本';
colorChanged = false;
}
});
// 2. 悬停div效果
const hoverDiv = document.getElementById('hover-div');
hoverDiv.addEventListener('mouseover', function() {
this.style.background = '#27ae60';
this.style.transform = 'scale(1.05)';
this.innerHTML = '鼠标悬停中...';
});
hoverDiv.addEventListener('mouseout', function() {
this.style.background = '#2ecc71';
this.style.transform = 'scale(1)';
this.innerHTML = '鼠标悬停在我上面试试';
});
// 3. 显示/隐藏内容
const toggleBtn = document.getElementById('toggle-btn');
const toggleContent = document.getElementById('toggle-content');
let isVisible = false;
toggleBtn.addEventListener('click', function() {
if (!isVisible) {
toggleContent.style.display = 'block';
isVisible = true;
} else {
toggleContent.style.display = 'none';
isVisible = false;
}
});
// 4. 模态框控制
const openModalBtn = document.getElementById('open-modal');
const closeModalBtn = document.getElementById('close-modal');
const modalOverlay = document.getElementById('modal-overlay');
openModalBtn.addEventListener('click', function() {
modalOverlay.style.display = 'flex';
});
closeModalBtn.addEventListener('click', function() {
modalOverlay.style.display = 'none';
});
// 点击模态框外部关闭
modalOverlay.addEventListener('click', function(e) {
if (e.target === modalOverlay) {
modalOverlay.style.display = 'none';
}
});
});
</script>
</body>
</html>