• HTML 是房子的钢筋骨架，定义了哪里是客厅、哪里是卧室、哪里是门窗。
  • CSS 是房子的装修和粉刷，决定了每个房间的颜色、家具的摆放、墙壁的材质。
  • JavaScript 是房子的智能家居系统，实现了自动开关灯、调节温度、安保报警等动态功能。

下面我将为你详细讲解这三部分,并提供一个从零开始的完整示例。

HTML中网页设计需要的代码
（图片来源网络，侵删）

HTML (HyperText Markup Language) - 网页的骨架

HTML 使用一系列来描述网页内容的结构和含义。<h1> 表示一级标题，<p> 表示段落，<img> 表示图片。

基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
    <!-- 在这里引入 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 这里是网页的所有可见内容 -->
    <!-- 在这里引入 JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>

常用 HTML 标签：

名称 描述 示例
<h1> - <h6> 从一级到六级标题，重要性递减 <h1>主标题</h1>
<p> 段落 包含一段文本 <p>这是一个段落。</p>
<a> 锚点/链接 创建超链接 <a href="https://www.google.com">访问谷歌</a>
<img> 图像 在页面中嵌入一张图片 <img src="image.jpg" alt="图片描述">
<div> 容器 一个块级容器，用于组合其他元素 <div>...</div>
<span> 内联容器 器，用于对文本的一部分进行样式化 <span>高亮这段文本</span>
<ul> / <ol> / <li> 列表 无序列表 / 有序列表 / 列表项 <ul><li>项目一</li></ul>
<table> / <tr> / <td> 表格 表格 / 行 / 单元格 <table><tr><td>数据</td></tr></table>
<form> / <input> 表单 用于收集用户输入 <form><input type="text" name="username"></form>
<header> / <footer> / <nav> 语义化标签 页头 / 页脚 / 导航栏 <header>...</header>

CSS (Cascading Style Sheets) - 网页的样式

CSS 用于控制网页的视觉表现，包括布局、颜色、字体、间距等，它通过选择器找到 HTML 元素，然后应用声明来改变其样式。

基本语法：

选择器 {
  属性1: 值1;
  属性2: 值2;
}

常用 CSS 属性：

属性类别 常用属性 描述
文本 color, font-size, font-family, text-align 设置文本颜色、大小、字体、对齐方式
盒模型 width, height, margin, padding, border 控制元素的大小、外边距、内边距和边框
布局 display, position, float, flexbox, grid 控制元素的排列方式和位置（现代布局推荐 Flexbox 和 Grid）
背景 background-color, background-image 设置元素的背景颜色或图片
视觉效果 box-shadow, border-radius, opacity 添加阴影、圆角、透明度等效果

引入 CSS 的三种方式：

  1. 外部样式表 (推荐)：将 CSS 代码写入一个单独的 .css 文件，然后在 HTML 的 <head> 中通过 <link> 标签引入，这是最常用、最规范的方式。

    <link rel="stylesheet" href="style.css">

  2. 内部样式表：在 HTML 文件的 <head> 部分使用 <style> 标签编写 CSS。

    <head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>

  3. 内联样式：直接在 HTML 标签的 style 属性中编写 CSS，不推荐，因为它会分离内容和样式，难以维护。

    <p style="color: red; font-size: 20px;">这是一段红色文字。</p>

JavaScript - 网页的交互

JavaScript 是一种脚本语言，它让网页“活”起来，它可以响应用户的操作（如点击、输入）、修改网页内容、与服务器通信等。

基本语法：

// 1. 选择 HTML 元素
let element = document.getElementById("myButton");
// 2. 为元素添加事件监听器
element.addEventListener("click", function() {
  // 3. 当事件发生时，执行这里的代码
  alert("按钮被点击了！");
  document.body.style.backgroundColor = "yellow";
});

常用功能：

  • DOM 操作：动态地创建、修改或删除 HTML 元素。
  • 事件处理：响应用户的鼠标点击、键盘输入等行为。
  • 表单验证：在用户提交表单前检查输入是否合法。
  • 异步编程 (AJAX/Fetch)：在不刷新整个页面的情况下，从服务器获取数据并更新页面内容（现代开发多用 fetch API）。

引入 JavaScript 的方式：

通常将 JavaScript 代码放在一个单独的 .js 文件中，然后在 HTML 的 <body> 结束标签前通过 <script> 标签引入，这样做可以确保在 DOM（网页结构）完全加载后再执行脚本。

<!-- 在 body 标签结束前引入 -->
<script src="script.js"></script>
</body>
</html>

完整示例：一个简单的个人简介网页

下面是一个将 HTML、CSS 和 JavaScript 结合起来的完整示例。

文件结构

my-website/
├── index.html
├── style.css
└── script.js

index.html (结构)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">张三的个人主页</title>
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>你好，我是张三</h1>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#contact">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>我是一名热爱前端开发的程序员，喜欢创造美观且实用的网页。</p>
        </section>
        <section id="skills">
            <h2>我的技能</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
            </ul>
        </section>
        <section id="contact">
            <h2>联系我</h2>
            <p>邮箱: <a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
            <button id="theme-toggle">切换深色模式</button>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 张三的个人主页. All rights reserved.</p>
    </footer>
    <!-- 在 body 结束前引入外部 JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>

style.css (样式)

/* 全局样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
}
/* 头部样式 */
header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
header h1 {
    margin: 0;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    display: inline;
    margin: 0 15px;
}
nav a {
    color: #fff;
    text-decoration: none;
}
区域样式 */
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
section {
    padding: 2rem 0;
    border-bottom: 1px solid #eee;
}
section:last-child {
    border-bottom: none;
}
h2 {
    color: #333;
}
/* 按钮样式 */
button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}
button:hover {
    background-color: #0056b3;
}
/* 页脚样式 */
footer {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    background-color: #333;
    color: #fff;
}

script.js (交互)

// 等待整个 HTML 文档加载完毕后再执行脚本
document.addEventListener('DOMContentLoaded', function() {
    // 获取切换主题的按钮
    const themeToggleBtn = document.getElementById('theme-toggle');
    // 为按钮添加点击事件监听器
    themeToggleBtn.addEventListener('click', function() {
        // 切换 body 的 'dark-theme' 类
        document.body.classList.toggle('dark-theme');
        // 根据当前模式改变按钮文本
        if (document.body.classList.contains('dark-theme')) {
            themeToggleBtn.textContent = '切换浅色模式';
        } else {
            themeToggleBtn.textContent = '切换深色模式';
        }
    });
});

为了让深色模式生效，你还需要在 style.css 中添加以下样式：

/* 在 style.css 文件末尾添加 */
/* 深色模式样式 */
body.dark-theme {
    background-color: #222;
    color: #f4f4f4;
}
body.dark-theme main {
    background-color: #333;
    color: #f4f4f4;
}
body.dark-theme h2 {
    color: #f4f4f4;
}
body.dark-theme section {
    border-bottom-color: #555;
}

总结与进阶

  • 工具：现代前端开发通常会使用 VS Code 作为编辑器，并利用其强大的插件（如 Live Server，可以实时预览网页）。
  • 框架：对于复杂的项目，开发者会使用 CSS 框架（如 Bootstrap, Tailwind CSS）来加速样式开发，以及 JavaScript 框架（如 React, Vue, Angular）来构建复杂的用户界面。
  • 响应式设计：使用 CSS 的媒体查询，让你的网页在不同尺寸的设备（手机、平板、桌面）上都有良好的显示效果。

这个例子涵盖了网页设计最核心的代码知识,从理解并模仿这个例子开始，你将逐步掌握网页设计的精髓。