行动建议：尝试修改上述代码中的文字内容，添加新的段落和图片链接，并在浏览器中打开`index.html`文件查看实时效果。

第三步：用CSS为网站添加样式

当你的网页有了内容，接下来就是让它变得好看。CSS的核心是“选择器”和“属性”。

2. 基础样式编写：在`style.css`中尝试添加以下规则：

```css

/ 1. 重置基础样式并设置全局字体 /

{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

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

line-height: 1.6;

color: 333;

background-color: f8f9fa;

max-width: 800px;

margin: 20px auto;

padding: 20px;

/ 2. 为标题添加样式 /

h1 {

color: 2c3e50;

text-align: center;

margin-bottom: 20px;

border-bottom: 2px solid 3498db;

padding-bottom: 10px;

/ 3. 为导航栏添加样式 /

nav {

background-color: ecf0f1;

text-align: center;

padding: 10px;

margin-bottom: 30px;

border-radius: 5px;

nav a {

color: 2980b9;

text-decoration: none;

margin: 0 15px;

font-weight: bold;

nav a:hover {

color: e74c3c;

text-decoration: underline;

/ 4. 为主内容区添加样式 /

main {

background-color: white;

padding: 25px;

border-radius: 8px;

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

section, article {

margin-bottom: 25px;

/ 5. 为图片添加响应式样式 /

img {

max-width: 优质成分; / 确保图片不超过容器宽度 /

height: auto;

display: block;

margin: 15px auto;

border-radius: 4px;

/ 6. 为页脚添加样式 /

footer {

text-align: center;

margin-top: 40px;

color: 7f8c8d;

font-size: 0.9em;

```

3. 关键概念：

选择器：如 `body`、`h1`、`nav a`，用于选中你要样式化的HTML元素。

属性和值：如 `color: 333;`，`color`是属性，`333`是值。

盒模型：理解每个元素的 `margin`（外间距）、`border`（边框）、`padding`（内间距）、`content`（内容）是进行布局的基础。

Flexbox布局：当你需要更灵活地排列元素（如水平居中、等分空间）时，这是下一个必学的CSS模块。通过为容器设置 `display: flex;` 即可开始。

行动建议：修改颜色代码、边距和字体大小，观察网页的变化。尝试让导航栏的链接水平排列。

第四步：用JavaScript实现简单交互

让网页“动”起来，从蕞直观的交互开始。

1. 连接JavaScript：在HTML的``结束标签前，我们已通过 `` 引入了脚本文件。打开`script.js`。

2. 第一个交互脚本：在`script.js`中添加以下代码，实现一个点击按钮改变文本的功能。

```javascript

// 1. 等待整个HTML文档加载完毕后再执行代码

document.addEventListener('DOMContentLoaded', function {

// 2. 获取页面上的元素

const changeTextButton = document.getElementById('changeTextBtn');

const demoParagraph = document.getElementById('demoText');

// 3. 检查元素是否存在，避免错误

if (changeTextButton && demoParagraph) {

// 4. 为按钮添加“点击”事件监听器

changeTextButton.addEventListener('click', function {

// 5. 当按钮被点击时，执行这个函数

demoParagraph.textContent = '你好！你已经通过JavaScript改变了这段文字！';

demoParagraph.style.color = 'e74c3c';

demoParagraph.style.fontWeight = 'bold';

alert('内容已更新！');

});

// 另一个示例：控制台日志

console.log('页面加载完成，脚本已运行！');

});

```

3. 更新HTML以配合JS：回到`index.html`，在`