HTML实验报告

时间：2024.4.14

武夷学院实验报告课程名称：电子商务网站设计与开发_ 项目名称：_基于HTML的网页设计姓名：林元卿专业：旅游管理班级：3班学号：20136031005

HTML实验报告

实验操作成绩（百分制）__________ 实验指导教师签字：__________

HTML实验报告

）实验报告成绩（百分制）__________ 实验指导教师签字：__________

HTML实验报告

第二篇：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属性，设置对目标的链接

更多相关推荐：

MPI和OpenMP程序设计实验报告: 一实验目的及要求熟悉MPI编程环境掌握MPI编程基本函数及MPI的相关通信函数用法掌握MPI的主从模式及对等模式编程熟悉OpenMP编程环境初步掌握基于OpenMP的多线程应用程序开发掌握OpenMP相关函数以...
mpi矩阵乘法实验报告: 多核平台下的并行计算课程实验报告姓名李传祥学号20xx00301094班级计算机12级菁英班并行技术MPI并行化思路假设矩阵乘法为ABC让每个进程计算乘积向量x的不同部分特别地p个进程中的每一个计算x中的100...
实验二-快速排序的mpi并行程序: 实验二快速排序的MPI并行程序一实验时间20xx年11月5日二实验名称快速排序的mpi并行化设计三内容与要求1内容快速排序以下简称快排是对冒泡排序的一种改进它的思想是通过一趟排序将要排序的数据分割成独立的两部分...
mpi实验虚拟机环境下两节点的MPI集群搭建-20xx0504-终稿: 信息学院实验报告注每学期至少有一次设计性实验每学期结束请任课教师按时按量统一交到教学秘书处
linux实验报告: LINUX实验报告专业班级学号姓名实验一实验名称Linux基本命令的使用实验时间2学时实验目的熟练使用Linux字符界面窗口系统的常用命令实验内容一Linux操作基础1重新启动linux或关机poweroffs...

gis实验报告3: 实验报告课程名称：城市地理信息系统概论系部名称：建筑学系专业班级：城市规划10-1班学生姓名：学号：指导教师：黑龙江工程学院教务处制
MapGis作图实验报告: 计算机制图实验报告系别国土资源系班级土管082班学号083932232姓名提交时间新疆农业大学经济与管理学院一实验目的此次实验的目的在于学会使用MapGIS软件掌握土地资源调查与评价基本原理与方法并掌握如何利用...
地理信息系统(Mapgis)实习报告: 土地信息学系统课程设计报告书课程名称土地信息系统专业班级土地资源管理0634091学号063409134学生姓名张强指导教师李艳马文明20xx年12月15日目录一概述31课程设计的意义和目的32土地信息系统简介...
mapgis实验报告: 巨鹿整饰地图屏幕数字化MapGis地图屏幕数字化实习目的掌握栅格图像配准图像格式转换图例板建立属性结构建立及地图屏幕数字化的方法和步骤实习内容利用给定的土地利用遥感影像图文件名巨鹿整饰JPG转换为MapGIS的...
mapgis实验报告1-王洁: 实验编号120xx年9月26日资源与环境学院20xx级5班实验名称数据编辑姓名王洁20xx100532成绩同组人指导教师辜寄蓉1实验目的和要求掌握数据点线区系统库编辑和拓扑处理的方法和流程2基本原理点是地图数据...
mapgis实验报告: 地质工程系MAPGIS实验报告1实验报告实验名称编辑线属性实验对象线的属性实验目的修改连接某物属性用Excel输出线或点面的属性数据实验步骤一修改线属性具体步骤1在修改之前要将线层勾上即2单击线编辑中参数编辑中...
Mapgis实验报告: Mapgis实验报告一实验员胡蝶班级学号1002601时间20xx4指导教师周青山老师实验名称地图投影的制作判别和变换实验地点湖南城市学院实验楼418实验原理mapgisenvi软件的基本操作方法实验材料和条件...

热门关注

大作业-计算机控制技术实验报告-基于Matlab的PID控制算法仿真(深圳大学)

PID控制系统的Simulink仿真实验报告

PID控制实验报告

计算机控制PID实验报告

pcm编译码实验报告