作业内容：1. 制作一张课程表，或者商品列表，用户信息表，要求用到行与列的合并 2. 制作一张用户注册表单，要求用到常用的表单控件

1.制作一张课程表

笔记：
制作表格应用<table>标签，其中<tr>表示行，<td>表示列。

<border>表示表格边框。
cellspacing可以设置表格边框，可设置为0，将表格边框折叠。
cellpadding可设置表格内容和表格边框的距离。

<caption>标签可对表格标题进行设置。可在style中将font-weight设置为bolder，加粗表格标题。设置margin-bottom，使得表格标题和表格有距离，使表格更美观。

其中rowspan和colspan可对表格的行和列单元格进行合并，用法就是找到要合并的单元格位置起点设置要合并的单元格数量。

<table border="1" cellspacing="0" cellpadding="5" width="80%">
    <caption style="font-weight: bolder; margin-bottom: 1em;">课程表</caption>
    <tr>
        <th>时间</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="lightblue">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
        <td>美术</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>音乐</td>
        <td>历史</td>
        <td>英语</td>
        <td>数学</td>
    </tr>
    <tr>
        <td rowspan="2" bgcolor="lightgreen">下午</td>
        <td>语文</td>
        <td>英语</td>
        <td>历史</td>
        <td>数学</td>
        <td>美术</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>数学</td>
        <td>美术</td>
        <td>英语</td>
        <td>数学</td>
    </tr>
    <tr>
        <td colspan="6" bgcolor="red">备注：早上8点上课，下午两点开始上课。</td>
    </tr>
</table>

2.制作一张用户注册表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <form style="display: grid; gap: 0.5em;">
        <!-- 文本输入框 -->
        <fieldset>
            <legend>必填项</legend>
            <div>
                <label  for="username">帐号:</label>
                <input type="text" id="username" placeholder="不能为空">
            </div>
            <div>
                <label  for="password">密码:</label>
                <input type="password" id="password" placeholder="必须同时包含字母和数字">
            </div>
            <div>
                <label  for="email">邮箱:</label>
                <input type="email" id="email" placeholder="格式为：xxx@xx.com">
            </div>
        </fieldset>
        <!-- 单选按钮：多选1 -->
        <div>
            <label  for="secret">性别:</label>
            <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
            <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
            <input type="radio" name="gender" value="secret" id="secret" /><label for="female">保密</label>
        </div>
        <!-- 复选框 -->
        <div>
            <label for="">爱好</label>
            <input type="checkbox" name="hobby[]" id="programmer" checked><label for="programmer">编程</label>
            <input type="checkbox" name="hobby[]" id="game" ><label for="game">游戏</label>
            <input type="checkbox" name="hobby[]" id="shot" ><label for="shot">摄影</label>
        </div>
        <!-- 下拉列表 -->
        <select name="level" id="">
            <option value="1">铜牌会员</option>
            <option value="2">银牌会员</option>
            <option value="3" selected>金牌会员</option>
            <option value="4">钻石会员</option>
        </select>
        <!-- 输入框+下拉列表 -->
        <div>
            <label for="">关键字：</label>
            <input type="search" name="search" id="" list="key"/>
            <datalist id="key">
                <option value="html"></option>
                <option value="css"></option>
                <option value="javascript"></option>
            </datalist>
        </div>
        <div>
            <button>提交</button>
        </div>
    </form>
</body>
</html>

3.简单的地图显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map</title>
</head>
<body>
    <a href="https://j.map.baidu.com/61/g" target="map">北京</a>
    <a href="https://j.map.baidu.com/5f/7" target="map">合肥</a>
    <a href="https://j.map.baidu.com/45/g" target="map">上海</a>
    <hr/>
    <iframe srcdoc="<em>地图显示区</em>" frameborder="1" width="500" height="500" name="map"></iframe>
</body>
</html>

表格、表单以及简单的地图显示(iframe)

1.制作一张课程表

2.制作一张用户注册表单

3.简单的地图显示

更多相关文章

随机推荐