Skip to content

Html基础实验

1 实验类型

验证型，2学时，必选实验

2 实验目的

掌握Html页面调试流程；学习HTML语法和常见标记；掌握如何使用HTML创建网页结构

3 实验要求

验证参考代码；修改参考代码，实现自己的设计；将关键结果截图及源代码整理成实验报告

4 实验环境

Windows7+、浏览器（推荐Microsoft Edge/Chrome/Firefox等）、Visual Studio Code(VS Code)

5 实验步骤

创建工作目录：{盘符}:/{学号}/exp2_1

基本调试流程

创建一个Html文件并在浏览器中测试，步骤如下：

  1. 使用VS Code打开工作目录

  2. 创建源代码文件{工作目录}\HelloTest\Hello.html

  3. 编写HTML代码，参考代码如下：

    Hello Html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <html><!-- 开始标签 -->

<head>
  <title> 一个简单的html示例 </title> <!-- 头部标签 -->
</head>

<body><!--主体文件开始 -->
  <center><!--使页面居中显示 -->
    <h1>欢迎光临我的主页</h1>
    <br>
    <hr>
    <font size="7" color="red">这是我第一次做主</font>
  </center>
</body><!--主体文件结束-->

</html><!--结尾标签 - ->

  4. 在浏览器中打开Hello.html并观察页面效果

  5. 在浏览器中打开(快捷键F12)开发者工具在各选项卡中观察Hello.html的不同方面并熟悉各项功能

注：最常用的几个选项卡有：Elements，Source，Network等

常见标签

编写代码，练习Html中常见标签的使用方法，步骤如下：

以Hello.html为模板练习调试以下标签，每个练习保存一个单独的文件

html的主体标签<body>

创建页面：html_body.html，在<body>中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置，参考代码如下：

body标签
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<html>

<head>
  <title>Body标签</title>
</head>

<body text="#000000" link="#000000" alink="#000000" vlink="#000000" background="gifnam.gif" bgcolor="#000000"
  leftmargin=3 topmargin=2 bgproperties="fixed">
</body>

</html>

颜色的设定

颜色值是一个关键字或一个RGB格式的数字。应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor="#336699" 用英文名字表示颜色时直接写名字。如 bgcolor=green ，RGB颜色可以有四种表达形式:：

  • #rrggbb (如，#00cc00)
  • #rgb (如，#0c0)
  • rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0))
  • rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如， rgb(0%,80%,0%)

换行标签<br>

创建页面：html_br.html，使用<br>标签，参考代码如下：

br标签
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<html>

<head>
  <title>无换行示例</title>
</head>

<body>
  无换行标记：登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
  <br>有换行标记：<br>登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。
</body>

段落标签<p>及属性

创建页面：html_p.html，使用<p>标签，参考代码如下：

p标签
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>

<head>
  <title>测试分段控制标签</title>
</head>

<body>
  <p>花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，
    就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。</p>
  <p align="right">或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。</p>
  <p align=center>而美丽苦短的花期</p>
  <p align="left">却是那最后悲伤的秋风挽歌中的瞬间插曲。</p>
</body>

</html>

原样显示文字标签<pre>

创建页面：html_pre.html，使用<pre>标签，参考代码如下：

pre标签
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>

<head>
  <title>原样显示文字标签</title>
</head>

<body>
  <pre>
  白日依山尽，黄河入海流。
  欲穷千里目，更上一层楼。
  </pre>
</body>

</html>

居中对齐标签<center>

创建页面：html_center.html，使用<center>标签，参考代码如下：

center标签
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>

<head>
  <title>居中对齐标签</title>
</head>

<body>
  <center>《送孟浩然之廣陵》<p>故人西辭黃鶴樓，煙花三月下揚州。
      孤帆遠影碧山盡，惟見長江天際流。</center>
</body>

</html>

标题文字标签<hn>

创建页面：html_hn.html，使用<hn>标签，参考代码如下：

hn标签
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>

<head>
  <title>设定各级标题</title>
</head>

<body>
  <h1 align="center">一级标题。</h1>
  <h2>二级标题。</h2>
  <h3>三级标题。</h3>
  <h4>四级标题。</h4>
  <h5 align="right">五级标题。</h5>
  <h6 align="left">六级标题。</h6>
</body>

</html>

超链接<a>

  1. 锚点

    创建页面：html_a_a.html ，包含锚点lb及其它若干锚点，参考代码如下：

    页内链接锚点
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    <html>

<head>
  <title>唐诗欣赏</title>
</head>

<body>
  <a name="top">
    <h2>唐诗欣赏</h2>
  </a>
  <a name="lb"><!-- 定义锚点lb -->
    <h2>李白</h2>
  </a>
  <a href="#t.2" target="_blank">清平調三首</a><br>
  <a href="#t.1">長干行</a><br>
  <a href="#t.3">月下獨酌</a>
  <hr><br><br>
  <h3><a name="t.2">清平調三首</a> </h3>
  雲想衣裳花想容，<br>春風拂檻露華濃。<br>若非群玉山頭見，<br>會向瑤台月下逢。
  <br>一枝紅艷露凝香，<br>雲雨巫山枉斷腸。<br>借問漢宮誰得似？<br>可憐飛燕倚新妝。
  <br>名花傾國兩相歡，<br>常得君王帶笑看。<br>解釋春風無限恨，<br>沈香亭北倚闌干。
  <h3><a name="t.1">長干行</a> </h3>
  <pre>
  妾髮初覆額，<br>折花門前劇。<br>郎騎竹馬來，<br>遶床弄青梅。<br>同居長干里，
  <br>兩小無嫌猜。<br>十四為君婦，<br>羞顏未嘗開。<br>低頭向暗壁，<br>千喚不一回。
  <br>十五始展眉，<br>願同塵與灰。<br>常存抱柱信，<br>豈上望夫臺。<br>十六君遠行，
  <br>瞿塘灩澦堆。<br>五月不可觸，<br>猿鳴天上哀。<br>門前遲行跡，<br>一一生綠苔。
  <br>苔深不能掃，<br>落葉秋風早。<br>八月蝴蝶來，<br>雙飛西園草。<br>感此傷妾心，
  <br>坐愁紅顏老。<br>早晚下三巴，<br>預將書報家。<br>相迎不道遠，<br>直至長風沙。
  </pre>
  <a href="#top">唐诗欣赏</a>
  <br><br>
  <h3><a name="t.3">月下獨酌</a> </h3>
  <pre>
  花間一壺酒，<br>獨酌無相親。<br>舉杯邀明月，<br>對影成三人。<br>月既不解飲，
  <br>影徒隨我身。<br>暫伴月將影，<br>行樂須及春。<br>我歌月裴回，<br>我舞影零亂。
  <br>醒時同交歡，<br>醉後各分散。<br>永結無情遊，<br>相期邈雲漢。</pre>
</body>

</html>

    创建页面：html_a_b.html，链接页面html_a_b.html中的lb锚点，参考代码如下：

    跨页链接锚点
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    <html>

<head>
  <title>李白</title>
</head>

<body>
  <center><a href="html_a_a.html#lb">
      <h1 align="center">
        <font color="#339933">李白</font>
      </h1>
    </a>
    <font color="#339933" size="+2">李白（701~762），<br>字太白，号青莲居士。
      <br>祖籍陇西成纪（今甘肃省天水市附近的秦安县），<br>隋朝末年其先租因罪住在中亚细亚。
      <br>李白的家世和出生地至今还是个谜，<br>学术界说法不一。<br>
      一说李白就诞生在安西都护府所辖的碎叶城，<br>五岁时随父迁到绵州昌隆县青莲乡。<br>
      <p>李白性情豪放，<br>喜爱纵横家的作风，
        <br>爱好任侠之事，轻视财货。<br>早年在蜀中度过。他的父亲是个富商。
        <br>李白二十五岁开始漫游全国，<br>走过湖北，江西，河南，山东等地.<br>
      </p>
      <p><a NAME="libai">李白蔑视权贵</a>，
        <br>传说他喝醉酒，<br>曾在玄宗面前使高力士给他脱靴。<br>高力士认为这是很大的耻辱，
        <br>就摘取李白诗句激怒杨贵妃。 <br>玄宗每次让李白做官，杨贵妃就加以阻止。
        <br>李白知道玄宗的亲信对他有意见，<br>于是恳求还家。<br>玄宗赐给他财物，放他开.<br>
      </p>
      <p>李白是我国唐代伟大的浪漫主义诗人，<br>被誉为“诗仙”。
        <br>他的诗豪迈瑰丽，诗里有突破现实的幻想。 <br>也有对当时民生疾苦的反映和对政治黑暗的抨击。
        <br>他的散文具有清新明朗，<br>奔放流畅的特点。
      </p>
    </font>
  </center>
</body>

</html>

  2. 外部链接

    创建页面：html_a_out.html, 链接外部网站，常见协议如下：

    服 务 URL格式 描 述
    WWW http://"地址" 进入万维网站点
    Ftp ftp://"" 进入文件传输协议
    Telnet telnet://"" 启动Telnet方式
    Gopher gopher://"" 访问一个gopher服务器
    News news://"" 启动新闻讨论组
    Email email://"" 启动邮件

  3. 发送E-mail

    1
    <a href="mailto:E-mali 地址: subject=邮件主题">描述文字</a>
    属性 描 述
    Subject 电子邮件主题
    Cc 抄送收件人
    Body 主题内容
    Bcc 暗送收件人

  4. 链接FTP

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <html>

<head>
  <title>链接ftp主机</title>
</head>

<body>
  <p> <a href=ftp://ftp.pku.edu.cn>北京大学ftp站点</a> </p>
</body>

</html>

图片<img>

  1. 创建页面：html_img.html，普通插入图片(使用自己电脑上图片替换链接图片)，参考代码如下：

    插入图片
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <html>

<head>
  <title>普通插入图片</title>
</head>

<body>
  <center>
    <h2>爱在深秋</h2><img src="img/chatgpt.png">
  </center>
</body>

</html>

  2. 创建页面：html_img_space.html，设定上下左右空白位置，参考代码如下：

    左右空白
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <html>

<head>
  <title>设定图像与文本之间的距离</title>
</head>

<body>
  <img src="img/chatgpt.png" align="left" hspace="20" vspace="20">
</body>

</html>

  3. 创建页面：html_img_align，设定字画对其方式，参考代码如下：

    对其方式
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    <html>

<head>
  <title>控制图像相对于文字基准线的水平对齐方式</title>
</head>

<body>
  <img src="img/chatgpt.png" align="left">
  此图像相对于文字基准线为靠上对齐的多行文字<br>试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；
  枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿不
  肯睡去呢？ 他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，您得到帘
  下去找， 您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！朦胧的岂独月呢；
  岂独鸟呢？但是， 咫尺天涯，教我如何耐得？<br>我拚着千呼万唤；你能够出来么？
  <br>这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，已足沦肌浃髓而有余。
  我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，以志这一段因缘。但我于中西的
  画都是门外汉， 所说的话不免为内行所笑。——那也只好由他了。
  <p>
    <hr color="#00ff00"><img src="img/chatgpt.png" align="right">
    此图像相对于文字基准线为靠上的多行文字对齐<br>试想在圆月朦胧之夜，海棠是这样的妩媚而嫣润；
    枝头的好鸟为什么却双栖而各梦呢？在这夜深人静的当儿，那高踞着的一只八哥儿，又为何尽撑着眼皮儿
    不肯睡去呢？ 他到底等什么来着？舍不得那淡淡的月儿么？舍不得那疏疏的帘儿么？不，不，不，
    您得到帘下去找， 您得向帘中去找——您该找着那卷帘人了？他的情韵风怀，原是这样这样的哟！
    朦胧的岂独月呢； 岂独鸟呢？但是，咫尺天涯，教我如何耐得？<br>我拚着千呼万唤；你能够出
    来么？ <br>这页画布局那样经济，设色那样柔活，故精采足以动人。虽是区区尺幅，而情韵之厚，
    已足沦肌浃髓而有余。 我看了这画。瞿然而惊：留恋之怀，不能自已。故将所感受的印象细细写出，
    以志这一段因缘。 但我于中西的画都是门外汉，所说的话不免为内行所笑。——那也只好由他了。
  <p>
    <hr color="#00ff00"><img src="img/chatgpt.png" align="top">
    此图像相对于文字基准线为顶部单行对齐
  <p>
    <hr color="#00ff00">
    <img src="img/chatgpt.png" align=bottom>
    此图像相对于文字基准线为底线单行对齐
  </p>
  <p>
    <hr color="#00ff00">
  <p><img src="img/chatgpt.png" align="middle">
    此图像相对于文字基准线为置中单行对齐</p>
</body>

</html>

  4. 图片大小设定

    创建页面：html_img_size.html，设定图片大小，参考代码如下：

    图片大小
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    <html>

<head>
  <title>图像大小的设定</title>
</head>

<body>
  <center>
    <p>缩小图像
    <p><img src="img/chatgpt.png" width="350" height="200">
    <p>原图显示
    <p><img src="img/chatgpt.png" width="400" height="236">
    <p>放大图像
    <p><img src="img/chatgpt.png" width="500" height="250">
    </p>
  </center>
</body>

</html>

  5. 图像边框的设定

    创建页面：html_img_border.html，设定图片边框，参考代码如下：

    图片边框
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    <html>

<head>
  <title>设定图像的边框</title>
</head>

<body>
  <center>
    <div align="center">
      <pre><img src="img/chatgpt.png" border="10"></pre>
    </div>
</body>

</html>

  6. 图像的超链接

    创建页面：html_img_a.html，设定图片的超链接，参考代码如下：

    图片的超链接
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <html>

<head>
  <title>使用图像为选取的对象</title>
</head>

<body>
  <p align="center">&nbsp;</p>
  <h1 align="center">图片的超链接</h1>
  <p>
    <center>
      <a href="http://www.sohu.com/" target="_blank">
        <img alt="搜狐网站" src="img/chatgpt.png">
      </a>
      <p>
        <a href="http://www.baidu.com/"><img alt="百度搜索" src="img/chatgpt.png"></a>
      <p>
        <a href="http://www.sina.com.cn"><img alt="新浪网站" src="img/chatgpt.png"></a>
    </center>
</body>

</html>

  7. 用<img>标签插入avi文件

    创建页面：html_img_avi.html，用<img>标签插入avi文件，参考代码如下：

    插入avi
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    <html>

<head>
  <title>设定图像的边框</title>
</head>

<body>
  <center>
    <p align="center"><img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover"></p>
  </center>
</body>

</html>

滚动<marquee>

  1. 滚动字幕<marquee>

    属 性 描 述
    align 指定对齐方式top,middle,bottom
    scroll 单向运动
    slide 如幻灯片,一格格的，效果是文字一接触左边就停止。
    alternate 左右往返运动
    bgcolor 设定文字卷动范围的背景颜色
    loop 设定文字卷动次数，其值可以是正整数或 infinite表示无限次 默认为无限循环
    height 设定字幕高度
    width 设定字幕宽度
    scrollamount 指定每次移动的速度,数值越大速度越快
    scrolldelay 文字每一次滚动的停顿时间，单位是毫秒。时间越短滚动越快
    hspace 指定字幕左右空白区域的大小
    vspace 指定字幕上下空白区域的大小
    direction 设定文字的卷动方向,left表示向左,right表示向右,up表示往上滚动
    behavior 指定移动方式，scroll表示滚动播出，slibe表示滚动到一方后停止，
    alternate 表示滚动到一方后向相反方向滚动。

    创建页面：html_marquee.html，使用<marquee>实现滚动字幕，参考代码如下：

    滚动字幕
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    <!DOCTYPE html>
<html>

<head>
  <title>Marquee</title>
</head>

<body>
  <div>
    <marquee bgcolor="Green" direction="left" loop="" >
      <div style="height:100px;color:white;">水平文字</div>
    </marquee>
    <marquee bgcolor="blue" direction="up" loop="">
      <div style="height:100px;color:yellow;text-align: center;">垂直文字</div>
    </marquee>
  </div>
</body>

</html>

浮动窗口<iframe>

  1. 一般应用

    创建页面：html_iframe.html，使用<iframe>实现浮动窗口，参考代码如下：

    浮动窗口
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    <html>

<head>
  <title>浮动框架</title>
</head>

<body bgcolor="#E1FFE1">
  <center>
    <iframe src="html_img.html" name="aa" width="600" height="400" marginwidth="30" 
    marginheight="20" align="middle" allowtransparency="true"> 这是一个浮动窗口</iframe>
    <p><a href="html_a_a.html" target="aa">超链接</a></p>
    <p><a href="html_hn.html" target="aa">标题</a></p>
    <p><a href="html_marquee.html" target="aa">滚动</a></p>
  </center>
</body>

</html>

  2. 自适应窗口高度

    创建页面：html_iframe_fit.html，使用<iframe>实现自适应窗口高度，参考代码如下：

    自适应窗口高度
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <html>

<head>
  <title>浮动框架</title>
  <script>
    var lastHeight;
    function initL() {
      aaac(); lastHeight = left.document.body.scrollHeight;
      setInterval(function () {
        if (left.document.body.scrollHeight != lastHeight) {
          aaac(); lastHeight = left.document.body.scrollHeight + 0;
        }
      }, 1);
    }
    function aaac() {
      document.all('left').height = left.document.body.scrollHeight + 0;
    }
  </script>
</head>

<body bgcolor="#E1FFE1">
  <center>
    <iframe src="html_img.html" name="aa" width="600" height="400" marginwidth="30" marginheight="20" align="middle"
      allowtransparency="true" onload="initL()"> 这是一个浮动窗口</iframe>
    <p><a href="html_a_a.html" target="aa">超链接</a></p>
    <p><a href="html_hn.html" target="aa">标题</a></p>
    <p><a href="html_marquee.html" target="aa">滚动</a></p>
  </center>
</body>

</html>

综合

表单与表格

本课程综合实验以学生选课系统为基础组织实验内容，后续实验中提到该系统中的表不再赘述，具体表结构如下：

学生表结构

字段 类型 约束 备注
no varchar(20) primary key 学号
name varchar(20) not null 姓名
gender varchar(2) 性别
age int 年龄
dept varchar(20) 所在系

课程表结构

字段 类型 约束 备注
no varchar(20) primary key 编号
name varchar(200) not null 课程名
PreNo varchar(20) 先修课
credit numeric(10,1) 学分

foreign key(PreNo) references Course(No)

学生选课表结构

字段 类型 约束 备注
CourseNo varchar(20) 课程号
StuNo varchar(20) 学号
Grade numeric(10,1) 成绩

primary key(StuNo, CourseNo),foreign key(StuNo) references Student(No),foreign key(CourseNo) references Course(No)

  1. 创建页面：student_form.html，使用<form>等标签实现学生表的表单界面（用于输入），参考代码如下：

    表单界面
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
</head>

<body>
  <h3>学生表</h3>
  <div>
    <form action="#">
      <div>
        <label for="no">学号:</label>
        <input type="text" id="no" name="no" placeholder="请输入学号..">
      </div>
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名..">
      </div>
      <div>
        <label for="gender">性别:</label>
        <input type="text" id="gender" name="gender" placeholder="请输入性别..">
      </div>
      <div>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" placeholder="请输入年龄..">
      </div>
      <div>
        <label for="dept">所在系:</label>
        <input type="text" id="dept" name="dept" placeholder="请输入所在系..">
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</body>

</html>

  2. 创建页面：student_table.html，使用<table>等标签实现学生表的表格界面（用于输出），参考代码如下：

    表格界面
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>学生表</title>
</head>

<body>
  <h3>学生表</h3>
  <table id="STUDENT" border="1" width="100%">
    <thead>
      <th>
        <input type="checkbox">
      </th>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>所在系</th>
      <th>操作</th>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox"></td>
        <td>200215121</td>
        <td>李勇</td>
        <td>男</td>
        <td>20</td>
        <td>CS</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>200215122</td>
        <td>刘晨</td>
        <td>女</td>
        <td>19</td>
        <td>CS</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>200215123</td>
        <td>王敏</td>
        <td>女</td>
        <td>18</td>
        <td>MA</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>200515125</td>
        <td>张立</td>
        <td>男</td>
        <td>19</td>
        <td>IS</td>
        <td><a href="javascript:void()">修改</a></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

拓展练习

  1. 修改实验中页面背景颜色等属性，体会标签与属性的作用

  2. 为课程表建立表单界面和表格界面，可参考学生表