课程表
运行效果图：
代码：
<!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--><tableborder="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=""><!-- 单行文本框textid绑定for实现点击姓名即可输入提示文字placeholder必填项required自动获取焦点autofocus--><div><label for="name">姓名：</label><inputid="name"type="text"value=""placeholder="请输入姓名"requiredautofocus/></div><!-- 密码控件password --><div><label for="password">密码：</label><inputid="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 /><labelfor="secret">保密</label></div><!-- 复选框 --><div><label for="">爱好：</label><!-- 因为复选框会返回多个值，所以name属性应该使用数组的方式 --><input type="checkbox" name="hobby[]" id="news" checked /><labelfor="news">新闻</label><input type="checkbox" name="hobby[]" id="drama" /><label for="drama">戏剧</label><input type="checkbox" name="hobby[]" id="game" checked /><labelfor="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>
