文档介绍：淮海工学院计算工程学院
实验报告书
课程名： Web 应用开发技术
题目：实验 1 HTML 网页设计基础
班级：
学号：
姓名：
评语：
成绩：指导教师：
批阅时间：年月日
《Web 应用开发技术》实验报告 - 0 -
实验 1 HTML 网页设计基础
一实验目的
 了解 Web 设计和 Web 应用程序开发所需的开发工具的安装与设置
 理解 URL 的结构和 HTTP 协议的基本工作原理
 掌握发布网页的常用方法
二实验内容和要求
实验内容：
Google Chrome 浏览器，并使用 Google Chrome 浏览器和 IE 浏览器查看网页（如
/）的源代码，然后使用浏览器开发者工具熟悉 HTTP 协议的工作原
理；
Notepad++编辑器并使用 Notepad++编辑器完成教材“ 上机实验”一节的实验
内容；
W3CValidators 页面对步骤 2 中的网页使用上传文件和直接输入的方式进行验证，
分析产生错误的原因并更正！
实验扩展：
XAMPP 软件包，并测试安装是否成功；发布上面步骤中创建的网页即素材
文件到本地 Apache 服务器上，并进行验证。
实验要求：
“实验内容”部分，并记录实验步骤和结果填写在“实验
步骤”、“实验结果”相应部分；
“实验扩展”部分；
，完成实验报告“思考题”部分内容。
三实验步骤
安装 Chrome 浏览器并且查看网页源代码
《Web 应用开发技术》实验报告 - 1 -
利用开发者工具进行查看
利用 ie 查看网页和源代码
《Web 应用开发技术》实验报告 - 2 -
Ie 的开发者工具
安装 notepad++
《Web 应用开发技术》实验报告 - 3 -

完成实验内容
实验代码：
<html>
<head>
<title>初恋这件小事</title>
</head>
<body>
<h1>初恋这件小事</h1>
《Web 应用开发技术》实验报告 - 4 -
<h3>百科名片</h3>
<img src="" width="139" height="200" />
<p>初恋这件小事《初恋这小事》.....</p>
<h3>目录</h3>
<ul>
<li>影片简介</li>
<li>剧情简介</li>
<li>经典台词</li>
<li>影片歌曲插曲</li>
<li>影片歌词中文翻译</li>
</ul>
<h3>影片简介</h3>
<p>《初恋这件小事》海报集（9 张）......</p>
<p>毫无疑问，《暹罗之恋......》</p>
</body>
</html>
利用 Google 查看网页
访问 W3CValidators 页面利用文件上传可直接输入验证网页文件
《Web 应用开发技术》实验报告 - 5 -
《Web 应用开发技术》实验报告