网页编程基础-专业课外选修实验.docxVIP

专业课外选修实验

《网页编程根底》

实

验

报

告

学生：

学号：

教师：郝晓青

目录

TOC\o1-3\h\z\u实验一HTML根底、网页框架的建立 2

实验二HTML的深入与综合使用 9

实验三CSS的根本语法、属性和值 14

实验四CSS的深入 20

实验五JavaScript的根本用法、事件 29

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

实验七对象进一步、站点导航、网页时钟的设计 44

实验八浮动图片、购物程序的设计 50

实验一HTML根底、网页框架的建立

实验目的和要求

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

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

3、理解HTML的常用技术。

实验内容和步骤

实验⑴录入以下程序web1-1.html:

HTML

HEAD

TITLE学校概况/TITLE

/HEAD

BODY

H1学校概况/H1

H3学校简介/H3

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

P校内景点有：/P

电子科技大楼、通信大楼、沙河边、新图书馆、BR

计算机学院大楼、电子信息产业大厦、体育馆等BR

/BODY

/THML

实验结果显示如下：

对各标记的说明:

实验⑵调试以下程序web1-2.html:

html

head

titleNewPage1/title

/head

body

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

B让你的网页更加漂亮！/BBBRBR

I让你的网页更加漂亮！/IIBRBR

TT让你的网页更加漂亮！/TTTTBRBR

U让你的网页更加漂亮！/UUBRBR

BIG让你的网页更加漂亮！/BIGBIGBRBR

SMALL让你的网页更加漂亮！/SMALLSMALLBRBR

S让你的网页更加漂亮！/SSBRBR

BR

EM春眠不觉晓，处处闻啼鸟EM/EMBRBR

STRONG春眠不觉晓,处处闻啼鸟STRONG/STRONGBRBR

CITE春眠不觉晓,处处闻啼鸟CITE/CITEBRBR

CODE春眠不觉晓,处处闻啼鸟CODE/CODEBRBR

SAMP春眠不觉晓,处处闻啼鸟SAMP/SAMPBRBR

KBD春眠不觉晓,处处闻啼鸟KBD/KBDBRBR

VAR春眠不觉晓,处处闻啼鸟VAR/VARBRBR

DFN春眠不觉晓,处处闻啼鸟DFN/DFNBRBR

P春眠不觉晓,处处闻啼鸟/P

BR

FONTSIZE=1夜来风雨声,花落知多少(SIZE=1)/FONTBRBR

FONTSIZE=2夜来风雨声,花落知多少(SIZE=2)/FONTBRBR

FONTSIZE=3夜来风雨声,花落知多少(SIZE=3)/FONTBRBR

FONTSIZE=4夜来风雨声,花落知多少(SIZE=4)/FONTBRBR

FONTSIZE=5夜来风雨声,花落知多少(SIZE=5)/FONTBRBR

FONTSIZE=6夜来风雨声,花落知多少(SIZE=6)/FONTBRBR

FONTSIZE=7夜来风雨声,花落知多少(SIZE=7)/FONTBRBR

BR

SIZE=2

HRSIZE=2BR

SIZE=6

HRSIZE=6BR

SIZE=10

HRSIZE=10BR

WIDTH=100%

HRWIDTH=100%SIZE=8BR

WIDTH=100%

HRWIDTH=50%SIZE=8BR

WIDTH=100%

HRWIDTH=25%SIZE=8BR

BRBR

HRWIDTH=60%SIZE=8ALIGN=leftBR

HRWIDTH=60%SIZE=8ALIGN=centerBR

HRWIDTH=60%SIZE=8ALIGN=rightBR

BRBR

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

!这是关于八里小区住房情况的内容

被注释的文字不显示

BRBRBR

以下是著作权标志:

Pcopy;电子科大出版社/P

以下是商标符号:

Preg;使电子科大徽标/P

/body

/html

实验结果显示如下：

简要解