Web服务端实验（第二章）

c323u2bdf

已于 2022-10-30 23:27:22 修改

阅读量235

点赞数 1

分类专栏： HTML 文章标签：前端 java servlet

于 2022-10-13 15:26:33 首次发布

本文链接：https://blog.csdn.net/qq_60212533/article/details/127274297

版权

HTML 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

1.列表标签

代码：

<!--实验1标签列表-->
<html>
    <head>
        <meta charest="UTF-8">
    </head>
    <body>
        <b>以下是所用的教材</b>
        <ul>
            <li>数据库系统原理</li>
            <li>操作系统</li>
            <li>软件工程</li>
        </ul>
        <b>今天要上的课</b>
        <ol>
            <li>局域网工程</li>
            <li>Java程序设计</li>
            <li>数据结构</li>
        </ol>
        <dl>
            <dt>
                <b>WWW</b>
            </dt>
            <dd>WWW是指World Wide Web</dd>
        </dl>
    </body>
</html>

2.表格标签

代码：

<!--实验2表格列表-->
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <table border="5" bordercolor="blue" align="center">
            <caption>专业设置及在校生人数表</caption>
            <tr bgcolor="#87cefa ">
                <td><b>学院名</b></td>
                <td colspan="4"><b>专业及人数</b></td>
            </tr>
            <tr>
                <td rowspan="6">计算机学院</td>
                <td colspan="4" bgcolor="#BFEFFF" align="center">计算机科学与技术专业</td>
            </tr>
            <tr>
                <td>2006级</td>
                <td>2007级</td>
                <td>2008级</td>
                <td>2009级</td>
            </tr>
            <tr>
                <td>300人</td>
                <td>200人</td>
                <td>150人</td>
                <td>120人</td>
            </tr>
            <tr>
                <td colspan="4" bgcolor="#BFEFFF" align="center">软件工程专业</td>
            </tr>
            <tr>
                <td>2006级</td>
                <td>2007级</td>
                <td>2008级</td>
                <td>2009级</td>
            </tr>
            <tr>
                <td>100人</td>
                <td>80人</td>
                <td>50人</td>
                <td>40人</td>
            </tr>
            <tr>
                <td rowspan="3">外语学院</td>
                <td colspan="4" bgcolor="#BFEFFF" align="center">英语专业</td>
            </tr>
            <tr>
                <td>2006级</td>
                <td>2007级</td>
                <td>2008级</td>
                <td>2009级</td>
            </tr>
            <tr>
                <td>100人</td>
                <td>80人</td>
                <td>50人</td>
                <td>40人</td>
            </tr>
        </table>
    </body>
</html>

3.表单标签

代码：

<!--实验3表单列表-->
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <form>
            <fieldset>
                <legend>欢迎注册</legend>
            输入账号(文本框):<input type="text" name="comment" rows="1" cols="15"><br>
            输入密码(密码框):<input type="password" name="pass" rows="1" cols="15"><br/>
            选择性别(单选按钮):<input type="radio" name="xb" checked>男 <input type="radio" name="xb">女<br/>
            选择爱好(单选按钮):
            <input type="checkbox" name="ah" value="1">唱歌 
            <input type="checkbox" name="ah" value="2">跳舞 
            <input type="checkbox" name="ah" value="3" checked>打球 
            <input type="checkbox" name="ah" value="4">打游戏<br/>
            填写个人简介：<textarea name="comment" rows="4" cols="20"></textarea><br/>
            选择家乡(下拉列表):<br/>
            <select name="城市">
                <option value="上海">上海</option>
                <option value="北京">北京</option>
                <option value="深圳">深圳</option>
            </select >
            <br/><br/><br/><br/>
            <input type="submit" name="pk_submit" value="注册"/>
            <input type="reset" name="Rese_submie" value="清空"/>
            <input type="button" name="button" value="普通按钮"/>
            </fieldset>
        </form>
    </body>
</html>

浏览器显示效果如下：

4.框架标签

代码：（共六个文件）

(1)demo8_10.html

<!--实验四框架标签-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>框架标签</title>
    </head>
        <frameset rows="80%,20%">
            <frameset cols="33%,67%">
                <frame src="demo8_10_left.html" name="demo8_10_left"></frame>
                <frame src="demo8_10_right.html" name="demo8_10_right"></frame>
            </frameset>
            <frame src="demo8_10_footer.html"></frame>
        </frameset>
</html>

(2)demo8_10_left.html

<!--左部分-->
<html>
    <head>
        <meta charest="UTF=8">
    </head>
    <body>
        <h3><a href="demo8_10_right_1.html" target="demo8_10_right">第一章</a></h3>
        <h3><a href="demo8_10_right_2.html" target="demo8_10_right">第二章</a></h3>
    </body>
</html>

(3)demo8_10_right.html

<!--右部分-->
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
    </body>
</html>

(4)demo8_10_right_1.html

<!--第一章-->
<html>
    <head>
        <meta charest="UTf-8">
    </head>
    <body>
        <h1>第一章 绪论</h1>
        <p>本章简述课程的要点...</p>
        <a href="demo8_10_right.html">返回</a>
    </body>
</html>

(5)demo8_10_right_2.html

<!--第二章-->
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <head>
        <h1>第二章</h1>
        <p>本章简述...</p>
        <p><a href="demo8_10_right.html">返回</a></p>
    </head>
</html>

(6)demo8_10_footer.html

<!--底部-->
<html>
    <head>
        <meta charest="UTF-8">
    </head>
    <body>
        <h2>联系人地址：test@gu.com</h2>
    </body>
</html>

c323u2bdf

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录