Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:优秀
运行效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格</title>
<style>
th {
background-color: rgb(255, 0, 157);
}
</style>
</head>
<body>
<!-- 表格元素table 表格的边框cellspacing 表格内容与边框的间距cellpadding-->
<table
border="1"
cellspacing="0"
cellpadding="5"
width="500"
style="text-align: center;"
>
<!-- 表头 -->
<thead>
<tr>
<!-- th是td的升级版,添加了加粗和剧中效果 -->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!-- 表的主体 -->
<tbody>
<tr>
<!-- 单元格垂直合并rowspan,只能放在td中 -->
<td rowspan="4" style="color: red;">上午</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>语文</td>
<td>体育</td>
<td>政治</td>
<td>历史</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>体育</td>
<td>政治</td>
<td>历史</td>
<td>化学</td>
</tr>
<tr>
<!-- 单元格垂直合并rowspan,只能放在td中 -->
<td rowspan="4" style="color: red;">下午</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>数学</td>
<td>物理</td>
<td>数学</td>
<td>数学</td>
<td rowspan="2">周会</td>
</tr>
<tr>
<td>数学</td>
<td>物理</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<!-- 单元格水平合并clospan,只能放在td中 -->
<td colspan="6">
好好学习,天天向上
</td>
</tr>
</tbody>
</table>
</body>
</html>
运行效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>注册表单</title>
</head>
<body>
<h3>注册</h3>
<!-- 表单元素 -->
<form action="">
<!-- 单行文本框text
id绑定for实现点击姓名即可输入
提示文字placeholder
必填项required
自动获取焦点autofocus
-->
<div>
<label for="name">姓名:</label>
<input
id="name"
type="text"
value=""
placeholder="请输入姓名"
required
autofocus
/>
</div>
<!-- 密码控件password -->
<div>
<label for="password">密码:</label>
<input
id="password"
type="password"
value=""
placeholder="请输入密码"
required
/>
</div>
<!--单选按钮radio, 单选按钮name属性必须一致,默认属性checked -->
<div>
<label for="secret">性别:</label>
<input id="" type="radio" name="gender" /><label for="">男</label>
<input id="" type="radio" name="gender" /><label for="">女</label>
<input id="secret" type="radio" name="gender" checked /><label
for="secret"
>保密</label
>
</div>
<!-- 复选框 -->
<div>
<label for="">爱好:</label>
<!-- 因为复选框会返回多个值,所以name属性应该使用数组的方式 -->
<input type="checkbox" name="hobby[]" id="news" checked /><label
for="news"
>新闻</label
>
<input type="checkbox" name="hobby[]" id="drama" /><label for="drama"
>戏剧</label
>
<input type="checkbox" name="hobby[]" id="game" checked /><label
for="game"
>游戏</label
>
</div>
<!-- 上传文件file -->
<div>
<label for="user_img">头像:</label>
<input id="user_img" type="file" name="user_img" />
<!-- 隐藏域hidden 此属性规定对元素进行隐藏,隐藏的元素不会被显示
限制上传文件大小8288608byte=8M
-->
<input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
<!-- 用户ID一般通过隐藏域发送到服务器 -->
<input type="hidden" name="user_id" value="1010" />
</div>
<!-- 下拉列表/预定义复选框 -->
<div>
<label for="user_source">来源:</label>
<!-- 将文本框与下拉列表进行绑定list -->
<input id="user_source" type="text" list="source" />
<datalist id="source">
<option value="网络">网络</option>
<option value="介绍">介绍</option>
<option value="其他">其他</option>
</datalist>
</div>
<!-- 单选下拉框 -->
<div>
<label for="user_edu">学历:</label>
<!-- 事件属性:用on开始跟一个事件名称,它的值是js的表达式 -->
<select name="edu" id="user_edu" oninput="alert(this.value)">
<option value="初中">初中</option>
<!-- selected: 设置默认值 -->
<option value="高中" selected>高中</option>
<option value="大学">大学</option>
<option value="研究生">研究生</option>
<option value="其他">其他</option>
</select>
</div>
<!-- 日期选择框 -->
<div>
<label for="brithday">生日:</label>
<input id="brithday" type="date" />
</div>
<!-- 邮箱 -->
<div>
<label for="email">电子邮箱:</label>
<input id="email" type="email" placeholder="445627221@qq.com" />
</div>
<!-- 年龄 -->
<div>
<label for="age">年龄:</label>
<!-- 最小值18,最大值60,每次增加或减少5,默认值18 -->
<input id="age" type="number" min="18" max="60" step="5" value="18" />
</div>
<!-- 调色板 -->
<div>
<label for="pick_color">喜欢的颜色是:</label>
<input type="color" name="pick_color" />
</div>
<div>
<button>提交</button>
</div>
</form>
</body>
</html>