实验网页设计基础Word格式文档下载.docx
《实验网页设计基础Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《实验网页设计基础Word格式文档下载.docx(14页珍藏版)》请在冰豆网上搜索。
实验1HTML网页设计基础
一实验目的
●了解Web设计和Web应用程序开发所需的开发工具的安装与设置
●理解URL的结构和HTTP协议的基本工作原理
●掌握发布网页的常用方法
二实验内容和要求
实验内容:
1.安装GoogleChrome浏览器,并使用GoogleChrome浏览器和IE浏览器查看网页(如http:
//210.28.32.167/)的源代码,然后使用浏览器开发者工具熟悉HTTP协议的工作原理;
2.安装Notepad++编辑器并使用Notepad++编辑器完成教材“1.5上机实验”一节的实验内容;
3.访问W3CValidators页面对步骤2中的网页使用上传文件和直接输入的方式进行验证,分析产生错误的原因并更正!
实验扩展:
4.安装/设置XAMPP软件包,并测试安装是否成功;
发布上面步骤中创建的网页即素材文件到本地Apache服务器上,并进行验证。
实验要求:
1.所有参与实验同学独立完成“实验内容”部分,并记录实验步骤和结果填写在“实验步骤”、“实验结果”相应部分;
2.学有余力的同学可尝试完成“实验扩展”部分;
3.所有参与实验同学均需参阅资料,完成实验报告“思考题”部分内容。
三实验步骤
安装Chrome浏览器并且查看网页源代码
利用开发者工具进行查看
利用ie查看网页和源代码
Ie的开发者工具
安装notepad++
完成实验内容
实验代码:
<
html>
head>
<
title>
初恋这件小事<
/title>
/head>
body>
h1>
/h1>
h3>
百科名片<
/h3>
imgsrc="
love.jpg"
width="
139"
height="
200"
/>
p>
初恋这件小事《初恋这小事》.....<
/p>
目录<
ul>
<
li>
影片简介<
/li>
剧情简介<
经典台词<
影片歌曲插曲<
影片歌词中文翻译<
/ul>
《初恋这件小事》海报集(9张)......<
毫无疑问,《暹罗之恋......》<
/body>
/html>
利用Google查看网页
访问W3CValidators页面利用文件上传可直接输入验证网页文件
拓展:
安装XAMPP文件并进行文件上传
4实验结果
直接上传和直接输入的警告和错误原因:
五思考题
1.HTML网页中的doctype的作用是什么?
如何指定HTML5网页的doctype?
如何指定HTML4.01Transitional格式的网页。
答:
doctype的作用是用来声明,网页的格式规范内容,使浏览器能过正确的呈现网页的内容。
Html5的doctype不需要引用DTD直接在第一行写
!
DOCTYPEhtml>
即可;
而HTML4.01Transitional需要引用DTD,因为因为HTML4.01基于SGML。
DTD规定了标记语言的规则,这样浏览器才能正确地呈现内容。
所以在第一行加入
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
"
http:
//www.w3.org/TR/html4/loose.dtd"
>
2.本课程目前所学过的元素/标记中,哪些属于block元素?
哪些属于Inline元素?
像
form>
/form>
div>
/div>
ol>
/ol>
这些属于block元素
/br>
font>
/font>
img>
sup>
这样的属于inline元素
3.为什么center和font等标记被废弃掉?
如何实现center和font等标记所起的作用?
因为他们的用途纯粹是用来展示画面服务的,可以用css来代替这些标签
4.访问w3school网站,浏览其中有关HTML的参考资源,查阅有关“全局属性”的文档。