网页制作与网站建设实验报告：HTML CSS+DIV

引言

随着互联网技术的飞速发展，网页制作和网站建设已成为现代信息技术的重要组成部分。本实验旨在通过实际操作，掌握HTML、CSS以及DIV布局的基本知识和技能，为今后的网页设计和开发打下坚实的基础。

实验目的

熟悉HTML语言的基本结构和常用标签。
掌握CSS样式表的应用方法，包括选择器、属性和值等。
学习使用DIV进行页面布局设计，实现响应式网页设计。
通过实际项目，提升解决实际问题的能力。

实验环境

操作系统：Windows 10
浏览器：Google Chrome
开发工具：Visual Studio Code
其他辅助工具：W3C Markup Validation Service（用于验证HTML代码的正确性）

实验内容与步骤

1. HTML基本结构

我们创建一个简单的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>  
</body>  
</html>

2. CSS样式表的应用

我们学习如何在HTML文件中应用CSS样式表。可以通过内联样式、内部样式表和外部样式表三种方式来实现。这里以外部样式表为例：

创建一个名为styles.css的文件，并添加一些样式：

body {  
font-family: Arial, sans-serif;  
background-color: #f0f0f0;  
}  
  
h1 {  
color: #333;  
}  
  
p {  
color: #666;  
}

在HTML文件中引入这个CSS文件：

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

3. DIV布局设计

使用DIV元素进行页面布局是现代网页设计中常用的方法。下面是一个简单示例，展示如何使用DIV来创建一个包含头部、导航栏、内容区和页脚的页面布局：

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>DIV布局示例</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
<div class="container">  
<header>  
<h1>网站标题</h1>  
</header>  
<nav>  
<ul>  
<li><a href="#">首页</a></li>  
<li><a href="#">关于我们</a></li>  
<li><a href="#">服务</a></li>  
<li><a href="#">联系我们</a></li>  
</ul>  
</nav>  
<main>  
<h2>主要内容</h2>  
<p>这里是页面的主要内容区域。</p>  
</main>  
<footer>  
<p>&copy; 2023 我的公司</p>  
</footer>  
</div>  
</body>  
</html>

对应的CSS文件styles.css可以如下编写：

body {  
font-family: Arial, sans-serif;  
background-color: #f0f0f0;  
margin: 0;  
padding: 0;  
}  
  
.container {  
width: 80%;  
margin: 0 auto;  
background-color: #fff;  
padding: 20px;  
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
}  
  
header, nav, main, footer {  
margin-bottom: 20px;  
}  
  
nav ul {  
list-style: none;  
padding: 0;  
}  
  
nav ul li {  
display: inline;  
margin-right: 10px;  
}

实验结果与分析

通过本次实验，我们成功创建了一个简单的网页，并应用了CSS样式表和DIV布局。具体结果如下：

HTML文件结构清晰，语义明确。
CSS样式表成功应用，页面视觉效果良好。
DIV布局实现了页面的基本结构，响应式效果良好。

结论

通过本次实验，我们掌握了HTML、CSS以及DIV布局的基本知识和技能。这些知识为我们今后的网页设计和开发打下了坚实的基础。同时，我们也学会了如何通过实践来解决实际问题，提高了自己的动手能力和解决问题的能力。未来，我们可以进一步深入学习前端开发技术，不断提升自己的技术水平。

网页制作与网站建设实验报告HTML CSS+DIV