语言实验二 HTML语言应用

实验二 HTML语言应用

一、 实验目得:

 、掌握HTL语言文档结构

 、 了解基本得TM语言标记

3、掌握如何利用HL 语言编写静态网页

二、 实验要求

1、通过HTM语言应用练习掌握网页文件得基本结构

2、掌握利用常用得HTML 语言标记设计网页得方法

三、 相关知识点

1、 TL语言简介

HTML (Hyp e r e x M arkp angu e超文本标记语言)就是一种用来制作超文本文档得简单标记语言用HTM 编 得超文本文档称为HM文档它能独立于各种操作系统平台就是浏览器唯一可以处理得语言,任何一个动态网页技术所生成得结果页都就是TL语言文档,P、NET技术以不例外TML语言就是一系列用于格式化网页文本得标记所组成得浏览器会将这些标记转换成为对应得格式对文档中得文本进行格式化处理通常纯HT ML文档文件得扩展名为、 hml或、 htm

2、 TML语言文档结构

HTML语言文档通常由三对标记来构成一个HTL文档得结构它们就是:

<HTML〉

<A〉

头部信息

</HED

<OY〉

文档主体正文部分

〈/BODY>

</HTM

其中<TL〉在最外层表示这对标记间得内容就是H TM文档 〈HE A〉之间包括文档得头部信息如文档总标题等若不需头部信息则可省略此标记BDY〉标记表示正文内容得开始

 、HT 语言得标记

常用HTM语言标记得含义见教材28页表2、 2所示

四、 实验内容

1、编一个静态网页显示某网站用户得基本信息,包括用户名性别年龄身份证号爱好职业,工作单位等信息以两列表格得形式显示程序运行效果如图所示

程序保存为 2-1、 aspx。

程序清单如下:

% Page  g g”C" %>

<!DOCYP html PUBIC "-//3C//DTD XHTML  、 0  an itional  EN” "”

〈scr  t runat s  vr”〉

/ cript

html xn=””〉

<ha r  = se   r >

〈t i    >HTM语言应用/t  t l e>

〈/head〉

<bod>

〈f m  =”fom2   a"s   er”〉

<di〉

<cen er><h> 〈b网站用户基本信息〈/b<h2/center>

< ab  e orer="1” align=” nt    >

tr〉

<td width=  1"  lign"ceter >

〈fon si  e=   olor"00 f"〉用户名 </fon >

〈/t〉

td idth=”15”  lin="cn er"

〈fnt s  ze="3” color="#000f”〉张三/ nt〉

</t

/ 

〈tr>

〈  d width= 81" align="center”>

〈font siz =”" o  or="#000ff >性别:<fn

/td>

<t width="175” align=”cnter  >

< ont siz ="3" col =#000ff男/fnt

〈 t〉

<tr〉

<tr>

〈   idth=”8  "  lin=”ente  ">

f t siz ="3” c  r=000ff 〉年龄 〈/ont>

〈/td>

 d idt= 1 " alig="  et r

〈fon    e=”" color”0000f">3 〈 font

/td>

〈/tr

〈tr

td widh”8 "  lign=”center"〉

〈fnt size 3" col ="# 0ff身份证号 font><t>

<  d width=”175” alin= center”〉

<font siz ="3" c  or=0000ff"〉 23  127/font〉

〈/ >

/t >

<tr

〈td wi h”8  " alig”center 

font siz =”3" col ="000ff">爱好: 〈/font

</ d〉

〈td width="175  alin= cen r 

<font si  e=”  color=”000f”>体育、计算机〈 font>

〈/t〉

〈/tr〉

tr>

〈t widh=”8 " align="cent r >

〈font siz = 3" colo=”0 0ff"〉职业</fon >

/td

t w t”15" align="ceter

font size=”3" olor="#0000ff"〉学生〈/font>

〈/t〉

</r〉

〈tr〉

〈td ol pan= 2” a in= ce  er"〉

<a href="s  2—2、 aspx”〉下一页/ 〉

/td

< r

/abl e〉

<r /

<br /〉

aque ire  tion=” eft” scrlldelay=  0”>欢迎访问宜宾学院学生信息网站</marquee<b /〉

<div>

< orm

/ dy

〈 htl

[注] <  ef”s t2-2、 spx ">下一页/〉 中得网页为下一个即将要做得实验网页。

2 s t2- 、 asx程序清单如下所示

〈 Pae Lan  ge=  〉

 DCTYPE hml PBLIC -/W3//DTD XH  、 0 Trans  ti al//EN" ""> c  ipt unat=”  ve   〉

</ crip >

〈hml xmns="”〉

〈ead rna=” erer"〉

t i   eHTML语言应用〈/t i t l 

</he 〉

<b y>

<form id"for ” runat"serer”>

〈div

< ont siz = 5"〉最喜欢吃得水果/font〉

〈ol ype=”A

li苹果</li〉

<l  >梨</l  >

l 香蕉  i〉

<ol

br />

〈r /〉

〈a r ”st1—1、 asp”>返回〈/

</div>

/or〉

/body

/hml

点击“下一页"链接到st22、 apx将呈现如下页面:

3、将57页教材“上机实验题2"做在本次实验中。

五、 实验思考

1、HML页面得基本结构就是怎么样得?

2、简述如何利用HML 语言标记定义一个4 行4列得表格?

六、 课后设计作业(选做

 、根据控件得使用方法做出如图所示得效果职业字段包含教育业、金融业、其她等选项并用代码实现对提交按钮得定义

2、 用控件实现上传文件得操作,将上述代码改写成上传文件到D:\uploa文件下