作业内容: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>