HTML,CSS,JS
网页开发三剑客
HTML、CSS 和 JavaScript 是构建现代网站的三大核心技术。它们各司其职，共同创造出丰富、交互式的网页体验。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页开发三剑客：HTML、CSS 和 JavaScript</title><style>:root {--html-color: #e44d26;--css-color: #264de4;--js-color: #f7df1e;--dark-bg: #2d3748;--light-bg: #f7fafc;--text-dark: #2d3748;--text-light: #f7fafc;}* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);color: var(--text-dark);line-height: 1.6;min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 40px 0;margin-bottom: 40px;}h1 {font-size: 2.8rem;margin-bottom: 15px;background: linear-gradient(90deg, var(--html-color), var(--css-color), var(--js-color));-webkit-background-clip: text;background-clip: text;color: transparent;}.subtitle {font-size: 1.2rem;color: #666;max-width: 800px;margin: 0 auto;}.tech-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-bottom: 40px;}.tech-card {background: white;border-radius: 10px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;}.tech-card:hover {transform: translateY(-5px);}.card-header {padding: 20px;color: white;display: flex;align-items: center;}.html .card-header {background: var(--html-color);}.css .card-header {background: var(--css-color);}.js .card-header {background: var(--js-color);color: var(--text-dark);}.icon {font-size: 2.5rem;margin-right: 15px;}.card-content {padding: 25px;}.card-content h3 {margin-bottom: 15px;font-size: 1.4rem;}.card-content p {margin-bottom: 15px;}.example {background: #f8f9fa;border-left: 4px solid;padding: 15px;margin: 20px 0;border-radius: 0 5px 5px 0;}.html .example {border-left-color: var(--html-color);}.css .example {border-left-color: var(--css-color);}.js .example {border-left-color: var(--js-color);}.demo-area {background: white;border-radius: 10px;padding: 30px;margin-top: 40px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}.demo-title {text-align: center;margin-bottom: 30px;font-size: 1.8rem;}.demo-container {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 30px;}.demo-box {flex: 1;min-width: 300px;padding: 20px;border-radius: 8px;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);}.demo-html {border-top: 4px solid var(--html-color);}.demo-css {border-top: 4px solid var(--css-color);}.demo-js {border-top: 4px solid var(--js-color);}.interactive-demo {background: var(--dark-bg);color: var(--text-light);padding: 30px;border-radius: 10px;text-align: center;}.demo-button {background: var(--js-color);color: var(--text-dark);border: none;padding: 12px 25px;font-size: 1.1rem;border-radius: 5px;cursor: pointer;margin: 15px;transition: all 0.3s;font-weight: bold;}.demo-button:hover {background: #ffeb3b;transform: scale(1.05);}.color-box {width: 150px;height: 150px;background: #3498db;margin: 20px auto;border-radius: 8px;transition: all 0.5s;}.counter {font-size: 3rem;margin: 20px 0;color: var(--js-color);}footer {text-align: center;padding: 30px 0;margin-top: 40px;color: #666;border-top: 1px solid #eaeaea;}@media (max-width: 768px) {.tech-grid {grid-template-columns: 1fr;}h1 {font-size: 2.2rem;}}</style>
</head>
<body><div class="container"><header><h1>网页开发三剑客</h1><p class="subtitle">HTML、CSS 和 JavaScript 是构建现代网站的三大核心技术。它们各司其职，共同创造出丰富、交互式的网页体验。</p></header><div class="tech-grid"><div class="tech-card html"><div class="card-header"><div class="icon"></></div><div><h2>HTML</h2><p>超文本标记语言</p></div></div><div class="card-content"><h3>网页的骨架</h3><p>HTML（HyperText Markup Language）是网页的基础结构，负责定义网页的内容和语义。</p><div class="example"><h4>主要功能：</h4><ul><li>定义网页结构（标题、段落、列表等）</li><li>嵌入多媒体内容（图片、视频、音频）</li><li>创建超链接和导航</li><li>构建表单收集用户输入</li></ul></div><div class="example"><h4>示例代码：</h4><pre><!DOCTYPE html>
<html>
<head><title>我的网页</title>
</head>
<body><h1>欢迎来到我的网站</h1><p>这是一个段落文本。</p><img src="image.jpg" alt="示例图片">
</body>
</html></pre></div></div></div><div class="tech-card css"><div class="card-header"><div class="icon">{}</div><div><h2>CSS</h2><p>层叠样式表</p></div></div><div class="card-content"><h3>网页的外观</h3><p>CSS（Cascading Style Sheets）控制网页的视觉表现，负责布局、颜色、字体和动画效果。</p><div class="example"><h4>主要功能：</h4><ul><li>控制页面布局和响应式设计</li><li>设置颜色、字体和间距</li><li>创建动画和过渡效果</li><li>适配不同设备和屏幕尺寸</li></ul></div><div class="example"><h4>示例代码：</h4><pre>body {font-family: Arial, sans-serif;background-color: #f0f0f0;
}.container {width: 80%;margin: 0 auto;padding: 20px;
}.button {background-color: #3498db;color: white;padding: 10px 20px;border-radius: 5px;
}</pre></div></div></div><div class="tech-card js"><div class="card-header"><div class="icon">JS</div><div><h2>JavaScript</h2><p>网页的交互逻辑</p></div></div><div class="card-content"><h3>网页的行为</h3><p>JavaScript 是一种编程语言，为网页添加交互功能，使用户能够与页面元素进行动态交互。</p><div class="example"><h4>主要功能：</h4><ul><li>处理用户交互（点击、输入等）</li><li>动态修改页面内容和样式</li><li>发送和接收服务器数据</li><li>创建复杂的动画和游戏</li></ul></div><div class="example"><h4>示例代码：</h4><pre>// 改变文本内容
document.getElementById("demo").innerHTML = "Hello JavaScript!";// 处理按钮点击
document.getElementById("myButton").addEventListener("click", function() {alert("按钮被点击了!");
});// 简单的计算函数
function multiply(a, b) {return a * b;
}</pre></div></div></div></div><div class="demo-area"><h2 class="demo-title">三者协同工作示例</h2><div class="demo-container"><div class="demo-box demo-html"><h3>HTML 结构</h3><pre><div id="interactiveDemo"><h3>交互演示</h3><div class="color-box"></div><p>计数器: <span id="counter">0</span></p><button class="demo-button">点击我!</button>
</div></pre></div><div class="demo-box demo-css"><h3>CSS 样式</h3><pre>.color-box {width: 150px;height: 150px;background: #3498db;transition: all 0.5s;
}.demo-button {background: #f7df1e;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;
}</pre></div><div class="demo-box demo-js"><h3>JavaScript 逻辑</h3><pre>let count = 0;document.querySelector('.demo-button')
.addEventListener('click', function() {count++;document.getElementById('counter').textContent = count;// 改变颜色document.querySelector('.color-box').style.backgroundColor = getRandomColor();
});function getRandomColor() {// 生成随机颜色代码
}</pre></div></div><div class="interactive-demo"><h3>交互演示 - 点击按钮体验效果</h3><div class="color-box" id="demoBox"></div><p class="counter">计数器: <span id="demoCounter">0</span></p><button class="demo-button" id="demoButton">点击我!</button><p>每次点击按钮，计数器会增加，并且颜色方块会随机变色</p></div></div><footer><p>HTML、CSS 和 JavaScript 是前端开发的三大基石，掌握它们的关系和用法是成为网页开发者的第一步。</p><p>© 2023 网页开发三剑客介绍</p></footer></div><script>// 交互演示的JavaScript代码let count = 0;const demoButton = document.getElementById('demoButton');const demoCounter = document.getElementById('demoCounter');const demoBox = document.getElementById('demoBox');demoButton.addEventListener('click', function() {// 增加计数器count++;demoCounter.textContent = count;// 改变颜色demoBox.style.backgroundColor = getRandomColor();// 添加一点动画效果demoBox.style.transform = 'scale(1.1)';setTimeout(() => {demoBox.style.transform = 'scale(1)';}, 300);});function getRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}</script>
</body>
</html>
