制作课程表
<!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> <table border="1" width="80%" cellspacing="0" cellpadding="5" align="center"> <caption> <h3>学生课程表</h3> </caption> <thead> <tr bgcolor="lightskyblue"> <th>时间</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 上午的课程 --> <tbody align="center"> <tr> <td rowspan="4" 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>英语</td> <td>语文</td> <td>数学</td> <td>历史</td> <td>地理</td> </tr> <tr> <td>英语</td> <td>语文</td> <td>数学</td> <td>历史</td> <td>地理</td> </tr> </tbody> <tbody> <tr bgcolor="lightgreen" align="center"> <td colspan="6">中午休息</td> </tr> </tbody> <tbody> <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> </tbody> <tfoot> <tr bgcolor="lightSgray"> <td>备注：</td> <td colspan="5">在15:00-16:00自习写作业，写完作业在回家</td> </tr> </tfoot> </table> </body></html>
简单表单的制作
<!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 action="" method="get"> <!-- 单行文本框 --> <div> <lable for="username">账号：</lable> <input type="text" id="username" required placeholder="必填项" /> </div> <!-- 密码框 --> <div> <lable for="password">密码：</lable> <input type="password" id="password" required placeholder="必须是字母+数字"/> </div> <!-- 邮件文本框 --> <div> <lable for="emil">邮箱：</lable> <!-- placeholder提示信息占位符 --> <input type="emil" id="emil" placeholder="demo@mail.com" /> </div> <!-- 整值文本框 --> <div> <lable for="number">年龄：</lable> <input type="number" id="number" value="18" /> </div> <!-- 单选按钮:多选一 --> <div> <lable for="username">性别：</lable> <input type="radio" name="gender" value="male" id="male" checked /><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="secret">保密</label> </div> <!-- 复选框 --> <div> <lable for="username">兴趣爱好：</lable> <!-- 因为允许同时提交多个值，所以name属性要写成数组格式 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked/><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="draw" id="draw" checked/><label for="draw">画画</label> <input type="checkbox" name="hobby[]" value="book" id="book" /><label for="book">读书</label> <input type="checkbox" name="hobby[]" value="sport" id="sport" /><label for="sport">运动</label> </div> <!-- 下拉列表 --> <div> <label for="education">学历：</label> <select name="education" id="education"> <option value="1">高中</option> <option value="2">大专</option> <option value="3">专科</option> <option value="4">本科</option> </select> </div> <!-- 提交按钮 --> <div> <button type="submit">提交</button> </div> </form> </body></html>
