如何做出一张八行六列的课程表?
准备工具:
vscode编译器
FastStone Capture取色器,用于颜色选取
<!-- 表格 (table)-->
<table border="1px" cellspacing="0px" cellpadding="5px" height="250px" width="450px">
<!-- 表格标题 -->
<caption style="font-weight: bold">
周一至周五课程安排
</caption>
<!-- 第一行、表头 -->
<thead>
<tr bgcolor="#DEFEFF">
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<!-- 内容 -->
<tbody align="center">
<!-- align=“cente”居中对齐 -->
<!-- 第二行 -->
<tr>
<!-- 上午 -->
<td rowspan="3" bgcolor="#87CEF8">上午</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 colspan="6" bgcolor="#DEDEDE">午间休息</td>
</tr>
<!-- 第六行 -->
<tr>
<td rowspan="2" bgcolor="#87CEF8">下午</td>
<td>英语</td>
<td>语文</td>
<td>体育</td>
<td>计算机</td>
<td>数学</td>
</tr>
<!-- 第七行 -->
<tr>
<td>计算机</td>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td>体育</td>
</tr>
</tbody>
<!-- 表格底部 -->
<tfoot>
<!-- 第八行 -->
<tr bgcolor="#8FEE8F">
<td>备注:</td>
<td colspan="5">每天下午18:00-12:00,进行晚自习</td>
</tr>
</tfoot>
</table>
2、如何做出一张简易的用户注册表单?
准备工具:
vscode编译器
<div>
<!-- 表单(form) -->
<h1>信息注册页面</h1>
<form action="" method="POST">
<!-- method==提交类型(详见:前端开发-html元素.svg里的method:提交类型) -->
<!-- label== 控件变迁-->
<!-- for===与指定控件的id属性进行绑定,实现点击标签时(“文本输入”),被绑定的标签自动获取焦点 -->
<!-- 文本输入框 -->
<label for="name">名字:</label>
<input type="text" id="name" />
<br /><br />
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" name="" id="password" />
<br /><br />
<!-- 单选框 -->
<div>
<label for="">性别:</label>
<input type="radio" name="Gender" id="male" />
<label for="male">男</label>
<input type="radio" name="Gender" id="female" />
<label for="female">女</label>
<input type="radio" name="Gender" id="secrecy" />
<label for="secrecy">保密</label> <br /><br />
</div>
<!-- 多选框 -->
<label for="">爱好:</label>
<input type="checkbox" name="" id="game" />
<label for="game">游戏</label>
<input type="checkbox" name="" id="read a book" />
<label for="read a book">看书</label>
<input type="checkbox" name="" id="Travel" />
<label for="Travel">旅游</label>
<input type="checkbox" name="" id="motion" />
<label for="motion">运动</label>
<input type="checkbox" name="" id="foodie" />
<label for="foodie">吃货</label>
</form>
<br />
<!-- 下拉列表 -->
<label for="">星座:</label>
<select name="constellation" id="">
<option value="scorpio">天蝎座</option>
<option value="aquarius">水瓶座</option>
<option value="leo">狮子座</option>
<option value="libra">天秤座</option>
<option value="Gemini">双子座</option>
</select>
<br /><br />
<!-- 邮件 -->
<div>
<label for="email">邮件:</label>
<input type="email" name="" id="email" />
</div>
<br />
<!-- 文本域 -->
<label for="remarks:">备注:</label><br />
<textarea name="remarks:" id="remarks:" cols="40" rows="10"></textarea>
<div>
<!-- 提交按钮 -->
<input type="button" value="提交" />
</div>
</div>