【自学java笔记#第五十三天#】javaweb day01 简单的HTML

一、HTML页面的基本组成部分

 

 二、一些常用的标签及注意事项

 

 三、课后练习1

1、form标签和table标签的综合使用

<!DOCTYPE html>
<html lang="ch_CN">
<head>
    <meta charset="UTF-8">
    <title>课后练习</title>
</head>
<body>
<form action="http://192.168.1.105:8080" method="get">
    <h1 align="center">登录页面</h1>
    <table align="center">
        <tr>
            <td>管理者姓名：</td>
            <td><input type="text" name="username"/></td>
        </tr>

        <tr>
            <td>管理编号：</td>
            <td><input type="text" name="id"/></td>
        </tr>

        <tr>
            <td>所属部门：</td>
            <td><input type="text" name="department"/></td>
        </tr>

        <tr>
            <td>办公电话：</td>
            <td><input type="text" name="tel"/></td>
        </tr>

        <tr>
            <td>登录密码：</td>
            <td><input type="password" name="password"/></td>
        </tr>

        <tr>
            <td>权限分配：</td>
                <td><select name="assignment">
                        <option value="none">--编辑权限--</option>
                        <option value="manager">经理</option>
                        <option value="employee">普通职员</option>
                    </select>
                </td>
        </tr>

        <tr>
            <td>模块选择：</td>
            <td>
                <input type="radio" value="useradmin" name="function">用户管理
                <input type="radio" value="infoadmin" name="function">信息资讯管理
                <input type="radio" value="resoadmin" name="function">资源管理
                <input type="radio" value="analysis" name="function">统计分析
                <input type="radio" value="other" name="function">辅助功能
            </td>
        </tr>

        <tr>
            <td><input type="reset" value="取消"/></td>
            <td><input type="submit" value="确定"/></td>
        </tr>
    </table>
</form>
</body>
</html>

2、页面效果

 

 3、运行结果

 

 4、注意事项

下拉列表没有name属性，只有value属性。写了name属性很容易导致错误，也就是页面无法跳转。

四、课后练习2

1、iframe标签和a标签的综合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课后练习2</title>
</head>
<body>
    <iframe src="6.表格标签.html" width="800" height="500" name="new"></iframe>

    <ul>
        <li><a href="../imgs/4.jpg" target="new">美女1</a></li>
        <li><a href="../imgs/5.jpg" target="new">美女2</a></li>
        <li><a href="../imgs/6.jpg" target="new">美女3</a></li>
        <li><a href="../imgs/7.jpg" target="new">美女4</a></li>
    </ul>
</body>
</html>

2、未点超链接的效果

 

 3、点了超链接的效果

 

posted @ 2020-08-06 19:55  一只奶鹿  阅读(146)  评论(0)    收藏  举报