Web设计示例1：基础概念与实践 🎨

1. HTML 结构

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>欢迎来到 Web 设计示例</h1>
    <p>这是一个展示基础 HTML/CSS/JavaScript 的简单页面。</p>
    <a href="/web-design/example-2">点击这里了解更高级的布局技巧</a>
</body>
</html>

2. CSS 样式

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    color: #333;
    padding: 20px;
}

h1 {
    color: #0066cc;
}

3. JavaScript 交互

document.querySelector('h1').addEventListener('click', function() {
    alert('你点击了标题！这是 JavaScript 的基本交互示例');
});

HTML_基础结构

扩展阅读

CSS_布局设计

小贴士

使用  注释你的 HTML 代码
通过 /* */ 添加 CSS 注释
用 // 进行 JavaScript 单行注释

JavaScript_交互效果