在网站设计的学习过程中，理论与实践的结合至关重要。第三章的动手实践部分旨在帮助学习者将理论知识转化为实际操作能力。本文将提供第三章动手实践部分的详细答案，帮助大家更好地理解和掌握网站设计的基础技能。

实践一：HTML基础结构搭建

题目要求：创建一个基本的HTML页面，包含标题、段落和图片。

答案：

<!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>这是一个简单的段落，用于展示HTML的基本结构。</p>
<img src="example.jpg" alt="示例图片">
</body>
</html>

解析：

  • <!DOCTYPE html>：声明文档类型为HTML5。
  • <html lang="zh-CN">：定义文档的语言为中文。
  • <head>：包含页面的元数据，如字符集和标题。
  • <body>：包含页面的主要内容，如标题、段落和图片。

实践二：CSS样式应用

题目要求：为上述HTML页面添加CSS样式，设置标题颜色为蓝色，段落字体大小为16px。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的段落，用于展示HTML的基本结构。</p>
<img src="example.jpg" alt="示例图片">
</body>
</html>

解析：

  • <style>：在<head>部分添加CSS样式。
  • h1 { color: blue; }：设置<h1>标签的文本颜色为蓝色。
  • p { font-size: 16px; }：设置<p>标签的字体大小为16像素。

实践三：JavaScript交互功能

题目要求：在页面中添加一个按钮，点击按钮时弹出一个提示框，显示“你好，世界！”。

答案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的段落，用于展示HTML的基本结构。</p>
<img src="example.jpg" alt="示例图片">
<button onclick="alert('你好，世界！')">点击我</button>
</body>
</html>

解析：

  • <button>：创建一个按钮元素。
  • onclick="alert('你好，世界！')"：为按钮添加点击事件，点击时弹出一个提示框，显示“你好，世界！”。

通过以上三个实践，学习者可以初步掌握HTML、CSS和JavaScript的基本用法，为后续更复杂的网站设计打下坚实的基础。希望这些答案能够帮助大家更好地理解和应用网站设计的基础知识。