HTML实验报告

太原工业大学

经管系

实验报告

专业 市场营销

课程名称 XXXXXXXX

学号 123456789

姓名张赛

辅导教师成绩

第二篇：HTML实验一指导书只读

《网页编程基础》教学大纲…………………………………………………………1

实验一 HTML基础、网页框架建立………………………………………………..2

实验二 HTML的剩余于综合使用……………………………………………………10

实验三 CSS的基本语法、属性和值………………………………………………..13

实验四 CSS的深入…………………………………………………………………..17

实验五 JavaScript的基本语法、事件……………………………………………23

实验六 JavaScript内置对象、自定义对象………………………………………28

实验七站点导航、网页时钟设计…………………………………………………33

实验八浮动图片、购物程序的设计……………………………………………..38

跨专业课外选修实验《网页编程基础》教学大纲（32学时）

——郝晓青

一、培养目标

HTML这门基础的标识语言是一门实践性要求很高的课程，它要求学生能熟练掌握其操作，灵活的应用，将理论学习的知识不断的应用于实践中，创造出富有特色的网页，发挥学生的创造里。网页编程主要分为客户端和服务器编程，客户端的编程主要是JavaScript编程，服务器端的编程目前主要是3P技术，即：ASP、PHP和JSP。

HTML技术可以使程序员轻松地编写出静态网页。但静态网页越来越适应不了新的挑战，于是SUN公司创建了一种脚本语言JavaScript，它可以和简单的HTML结合而方便地产生动态效果。在加上CSS（Cascading Style Sheets）中文意思为层叠样式表单的编程，主要是HTML技术、CSS技术和JavaScript技术。本实验主要是从这三方面出发，要求学生掌握其基本编程的能力。

二、适用专业

非计算机专业本、专科学生。

三、实验内容和学时安排

软、硬件环境（软件：Windows 9x/20##、XP，硬件：多媒体电脑）

四、实验内容

实验一 HTML基础、网页框架的建立（4学时）

[实验目的和要求]

1、熟悉HTML的基本框架：掌握HTML的几种简单而重要的常用标记处理。

2、熟悉Web网页的编辑方法和基本操作。

3、理解HTML的常用技术。

[实验必读]

用HTML编写的文档又叫超文本文件，由于HTML文件是普通的ASCII文件，所以只要有一个字符编辑器就可以编写网页文件。你可以充分利用手头已有的编辑工具（记事本、写字版等）来完成这项工作。在最初学习编写HTML文件时，并不需要网络服务器，只要有一个可以编辑HTML文件的编辑器和一个可浏览HTML文件的浏览器就可以了。当你写好一段HTML文件后，应该先把它保存起来，并要为这个文件起个名字，起文件名要特别注意：

1、若在DOS系统中，扩展名要用“htm”；若在UNIX系统中，扩展名要用“html”.因为绝大多数的网络软件要求文件具备这样的扩展名。

2、在文件名中不要使用空格和特殊字符。

3、在UNIX系统中，文件名中的字母大小写是敏感的。

可以通过双击html文件或启动IE浏览器来打开文件。下面是一些重要标记：

★HTML文件结构（Document Structures）

<html>文件的全部内容</html>

<head>头元素，元素属性和内容</head>

<title>网页名称或标题</title>

<body>体元素，元素属性和内容</body>

<HTML>

<HEAD>

</HEAE>

<BODY>

HEML文件的正文写在这里．．．．．．

</BODY>

</HTML>

★语言字符集（Charsets）的信息

us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-20##-jp, x-sjis,

x-euc-jp, euc-kr, iso-20##-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,

x-cns11643-2, big5

可在HTML文件中设置MIME字符集信息。

在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言（language encoding）。但是如果HTML文件里写明了设置，浏览器就会自动设置语言选项。

尤其是主页里用到了字符实体（entities），则该主页就应该写明字符集信息。

否则，在浏览该主页时，若未正确设置语言选项，显示将可能混乱。

★背景色彩和文字色彩

bgcolor ——背景色彩

text ——非可链接文字的色彩

link ——可链接文字的色彩

alink ——正被点击的可链接文字的色彩

vlink ——已经点击（访问）过的可链接文字的色彩 #=rrggbb

色彩是用16进制的红—绿—蓝（red—green—blue, RGB）值来表示。

16进制的数码有：0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f。

背景图象<body background=”image-URL”>

★页面空白（Margin）

页面左边的空白<body leftmargin=#>

页面上方的空白（天头）<body topmargin=#> #=margin amount

★链接（Link）基本语法

这是一个

<a href=”samp/link.html”>链接的例子</a>。

点一下带下划线的文字！

这是一个链接的例子。点一下带下划线的文字！跳转到页面的另外一个地方

<a href=”#jump-test”>跳转到下一个”链接点”</a>

<a name=”jump-test”>下一个链接点</a>

跳转到下一个”链接点”

下一个链接点

跳转到另一个页面的某个地方

跳转到另一个页面的<a href=”samp/ink.html#jump-test”>某个地方</a>。

跳转到另一个页面的某个地方。

★ 开一个新的（浏览器）窗口（Target Window）

开一个新窗口！

</a>

开一个新窗口！

★ 标尺线 <hr>

<hr>

-----------------------------------

------------------------------------

------------------------------------

<hr align=#> #=left, right

-------------------------------------

<hr noshade> (无渐变)

#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：

Black, Olive(橄榄色)，Teal(茶色)，Red，Blue，Maroon(栗色)，Navy(海蓝)，Gray（灰色），

Lime(石灰色)，Fuchsia(紫红色)，White，Green，Purple(紫色)，Silver，Yellow，Aqua(浅绿)

[实验内容和步骤]

（1）录入以下程序web1-1.html：

<HTML>

<HEAD>

</HEAD>

<BODY>

<PRE>被誉为“中国民族电子工业摇篮”的电子科技大学坐落在历史悠久。风光绮丽的文化古都--都。1956年，根据周恩来总理亲自部署有上海交通大学。华南工学院和南京工学院的电子类学科搬迁合并，建立了新中国第一所新兴电子信息高等学府，电子科技大学前身--成都电讯工程学院。学校1960年被列为全国重点大学；1997年首批成为“211工程”重点学校；20##年9月，步入部省重点共建大学行列。</PRE>

校内景点有:

电子科大主楼，通信大楼，沙河边，新图书馆， 计算机学院大楼，电子信息产业大厦，体育馆等

</BODY>

</HTML>

=====================================================================

（2）调试以下程序web1-2.html：

<html>

<head>

</head>

<body>

让你的网页更加漂亮！-------------------------------------缺省

让你的网页更加漂亮！-----------------------------------------B

让你的网页更加漂亮！-------------------------------------------I

<TT>让你的网页更加漂亮！</TT>---------------------------------------TT

让你的网页更加漂亮！------------------------------------------U

<BIG>让你的网页更加漂亮！</BIG>----------------------------------------BIG

让你的网页更加漂亮！------------------------------SMALL

<S>让你的网页更加漂亮！</S>----------------------------------------S

春眠不觉晓，处处闻啼鸟----------EM

春眠不觉晓，处处闻啼鸟-----------------STRONG

<CITE>-春眠不觉晓，处处闻啼鸟----------CITE</CITE>

<CODE>春眠不觉晓，处处闻啼鸟--------------CODE</CODE>

<SAMP>春眠不觉晓，处处闻啼鸟--------------SAMP</SAMP?

<KBD>春眠不觉晓，处处闻啼鸟-------KBD</KBD>

<VAR>春眠不觉晓，处处闻啼鸟-------------VAR</VAR>

<DFN>春眠不觉晓，处处闻啼鸟-----------------DFN</DFN>

春眠不觉晓，处处闻啼鸟

夜来风雨声，花落知多少(SIZE=1)

夜来风雨声，花落知多少(SIZE=2)

夜来风雨声，花落知多少(SIZE=3)

夜来风雨声，花落知多少(SIZE=4)

夜来风雨声，花落知多少(SIZE=5)

夜来风雨声，花落知多少(SIZE=6)

夜来风雨声，花落知多少(SIZE=7)

SIZE=2

SIZE=6

SIZE=10

WIDTH=100%

WIDTH=100%

WIDTH=100%

对下面两行的内容使用了注释标记

<！--这是关于八里小区住房情况的内容—>

被注释的文字不显示

以下是著作权标志：

&copy：电子科大出版社

以下是商标符号：

&reg:使用电子科大徽标

</body>

</html>

显示结果：

（3）调试以下程序web1-3.html:

<html>

<head>

</head>

<body>

位于成都的<A HREF=”http://WWW.UESTC.EDU.CN”>电子科技大学</a>,是一所以工为主，理工渗透，理，工，管，文协调发展的教育部直属高校

A.被誉为“中国民族电子工业摇篮”的电子科技大学坐落在历史悠久，风光绮丽的文化古都—成都。

B.1956年，根据周恩来总理亲自部署有上海交通大学。华南工学院和南京工学院的电子类学科搬迁合并，建立了新中国第一所新兴电子信息高等学府，电子科技大学前身--成都电讯工程学院。

C. 学校1960年被列为全国重点大学；1997年首批成为“211工程”重点学校；20##年9月，步入部省重点共建大学行列。

</body>

</html>

（4）调试并运行以下程序web1-4.html

<html>

<head>

<title>跨专业课外选修实验</title>

</head>

<body>

<h1>跨专业课外选修实验</h1>

<!—体会有序列表-à

<OL>

<LI>实验一：HTML 基础，网页框架的建立

<LI>实验二：HTML的深入与综合使用

<LI>实验三：CSS的基本语法，属性和值

<LI>…………………………………………………..

<LI>……………………………………………………

</OL>

<!—体会无序列表-à

<UL>

<LI>实验一：HTML基础，网页框架的建立

<LI>实验二：HTML的深入与综合使用

<LI>实验三：CSS的基本语法，属性和值

<LI>…………………………………………………….

<LI>……………………………………………………..

</UL>

<!—体会在列表中加入连接--à

<OL>

<LI><A HREF=”FILE1.HTML”>实验一：HTML基础，网页框架的建立</A>

<LI><A HREF=”FILE2.HTML”>实验二：HTML的深入与综合使用</A>

<LI><A HREF=”FILE13HTML”>实验三：CSS的基本语法，属性和值</A>

</OL>

<body>

</html>

显示结果：

=-====================================================================

总结；

有序列表(Ordered List)在列表项(List Item)前显示有数字或字母。定义有序列表使用有序列表标记符<OL></OL>和列表项标记<LI></LI>。

无序列表(Unordered List)在列表号前显示有特殊符号。

定义无序列表使用无序列表标记符<UL></UL>和列表项标记符<LI></LI>。

指向外部网页的链接，使用绝对URL，采用完整的地址使用A标记符HREF属性，设置对目标的链接

相关推荐

HTML实验报告

第二篇：HTML实验一指导书只读

专栏推荐