2.1 代码编辑器

这是你书写代码的主要工具。推荐使用：

Visual Studio Code (VS Code)：目前较流行、对新手 友好的免费编辑器。它支持语法高亮、代码提示、内置终端和无数扩展插件，能极大提升编码效率。

Sublime Text 或 Atom：也是出众的轻量级选择。

2.2 网页浏览器

除了日常使用的Chrome、Firefox、Edge，请务必学会使用它们的“开启者工具”（通常按F12键打开）。这是你调试代码、查看网页结构、实时修改样式的神器。

2.3 本地环境

只需将你的HTML、CSS、JS文件保存在电脑的同一个文件夹中，然后用浏览器直接打开HTML文件，就能预览你的网页效果。

第三步：动手实践——从第一个HTML页面开始

让我们创建一个 简单的网页，体验从无到有的过程。

3.1 创建项目文件夹与文件

1. 在电脑上新建一个文件夹，命名为 `my-first-website`。

2. 在此文件夹内，新建一个文本文档，重命名为 `index.html`（注意扩展名必须是`.html`）。

3. 再新建一个文本文档，重命名为 `style.css`。

3.2 编写基础HTML结构

用VS Code打开 `index.html` 文件，输入以下代码。这是每个HTML页面的标准开头：

```html

欢迎来到我的小站！

这是我的第一个网页，我正在学习网页设计。

`, `

`, ``, ``：分别是标题、段落、超链接和图片标签。

保存文件后，双击 `index.html`，你将在浏览器中看到一个非常基础但完整的网页。

第四步：添加样式——用CSS美化你的页面

现在，页面只有默认的黑色文字和白色背景。让我们用CSS来装扮它。

4.1 编写基础CSS样式

打开 `style.css` 文件，输入以下代码：

```css

/ 重置一些默认样式并设置全局字体 /

{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;

/ 设置整个页面的背景和文字颜色 /

body {

background-color: f5f7fa;

color: 333;

line-height: 1.6;

padding: 20px;

max-width: 800px;

margin: 40px auto; / 使页面内容居中 /

/ 美化主标题 /

h1 {

color: 2c3e50;

text-align: center;

margin-bottom: 30px;

padding-bottom: 10px;

border-bottom: 2px solid 3498db;

/ 美化段落 /

p {

font-size: 1.1em;

margin-bottom: 15px;

padding: 10px;

background-color: white;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

/ 美化链接 /

a {

color: 3498db;

text-decoration: none; / 去掉下划线 /

font-weight: bold;

a:hover {

color: 2980b9;

text-decoration: underline; / 鼠标悬停时显示下划线 /

/ 美化图片 /

img {

display: block;

max-width: ; / 确保图片响应式，不超出容器 /

height: auto;

margin: 20px auto;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0,0,0,0.15);

```

保存 `style.css` 文件，然后刷新浏览器中的 `index.html` 页面。你会发现页面瞬间变得美观、有层次感了。这就是CSS的力量。

第五步：学习布局——用CSS构建页面结构

一个漂亮的网页需要有清晰的布局。现代网页设计主要使用 Flexbox 和 Grid 两种布局模型。对于初学者，建议先从 Flexbox 入手，它非常适合处理一维布局（沿水平或垂直方向排列项目）。

5.1 创建一个简单的导航栏

在 `index.html` 的 `` 内，`

` 标签之前，添加一个导航栏结构：

```html

```

5.2 使用Flexbox布局导航栏

在 `style.css` 文件中添加以下样式：

```css

/ 导航栏样式 /

navbar {

display: flex; / 启用Flexbox布局 /

justify-content: space-between; / 主轴（水平）对齐：两端对齐 /

align-items: center; / 交叉轴（垂直）对齐：居中对齐 /

background-color: 2c3e50;

padding: 15px 30px;

border-radius: 8px;

margin-bottom: 40px;

logo {

color: white;

font-size: 1.5em;

font-weight: bold;

nav-links {

display: flex;

list-style: none; / 去掉列表默认的圆点 /

nav-links li {

margin-left: 25px;

nav-links a {

color: ecf0f1;

nav-links a:hover {

color: 3498db;

```

刷新页面，一个水平分布、居中对齐的导航栏就出现了。通过调整 `justify-content` 和 `align-items` 的属性值，你可以轻松实现不同的排列效果。

第六步：持续精进——下一步学习建议

完成以上步骤，你已经成功创建了一个结构清晰、样式美观的静态网页。为了继续提升，建议你：

1. 深入学习HTML5语义化标签：如 `

`, `

`, `

`, `

`, `