Web开发技术文档

1. 简介：Web开发基础

Web开发是构建网站和Web应用程序的过程。它通常涉及前端（用户可见部分）和后端（服务器、数据库等）。本章节将带您了解Web开发的基本概念和所需技术栈。

一个完整的Web应用通常由HTML、CSS和JavaScript共同协作完成。HTML负责内容结构，CSS负责样式呈现，而JavaScript则负责实现页面的动态交互。

2. HTML基础：构建网页结构

2.1 HTML文档结构

HTML（超文本标记语言）是Web页面的骨架。每个HTML文档都遵循一个基本结构，包括<!DOCTYPE html>声明、<html>根元素、<head>头部信息和<body>主体内容。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个简单的段落。</p>
</body>
</html>

2.2 常用HTML标签

HTML提供了丰富的标签来组织内容，例如标题标签<h1>到<h6>，段落标签<p>，链接标签<a>，图像标签<img>等。

3. CSS样式：美化页面

3.1 CSS选择器与属性

CSS（层叠样式表）用于控制Web页面的外观和布局。通过选择器，我们可以精确地选中HTML元素，并应用各种样式属性，如颜色、字体、大小和边距。


/* 选中所有段落并设置文本颜色 */
p {
    color: #333;
    font-size: 16px;
    margin-bottom: 10px;
}

/* 选中ID为"header"的元素 */
#header {
    background-color: #f0f0f0;
    padding: 20px;
}

/* 选中class为"button"的元素 */
.button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}

3.2 盒模型与布局

CSS盒模型是理解元素在页面上如何占据空间的关键。每个HTML元素都被视为一个矩形盒子，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。

4. JavaScript：实现交互功能

4.1 JavaScript基础语法

JavaScript是一种强大的脚本语言，用于实现Web页面的动态行为和交互功能。它可以修改HTML内容、CSS样式，响应用户事件，并与服务器进行数据交换。


// 在控制台输出一条消息
console.log("Hello, JavaScript!");

// 获取HTML元素并修改其文本内容
document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("message").textContent = "按钮被点击了！";
});

// 定义一个函数
function calculateSum(a, b) {
    return a + b;
}

let result = calculateSum(5, 3);
console.log("和是: " + result); // 输出 "和是: 8"

4.2 DOM操作与事件处理

通过DOM（文档对象模型），JavaScript可以访问和操作HTML文档的各个部分。事件处理则允许我们对用户的行为（如点击、鼠标移动、键盘输入）做出响应。

5. 响应式设计：适应多设备

响应式Web设计（RWD）是一种使网站能够适应不同屏幕尺寸和设备（如手机、平板、桌面）的技术。它主要通过CSS媒体查询和弹性布局实现。


/* 当屏幕宽度小于600px时应用以下样式 */
@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
    nav ul li {
        width: 100%; /* 导航项在小屏幕上占满一行 */
        text-align: center;
    }
}