HTML-小demo练习：我的课程表
1、我的课程表代码：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>我的课程表</title><style>table{text-align: center;}table>caption{font-size: 2rem;margin-bottom: 10px;}</style></head><body><table border="1" cellpadding="10" cellspacing="0" align="center"><caption>我的课程表</caption><thead><tr><th colspan="2"></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead><tbody><tr><td rowspan="4">上午</td><td>第一节</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>Vue</td><td>PHP</td><td colspan="2" rowspan="8">休息</td></tr><tr><td>第二节</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>Vue</td><td>PHP</td></tr><tr><td>第三节</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>Vue</td><td>PHP</td></tr><tr><td>第四节</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>Vue</td><td>PHP</td></tr><tr><td colspan="7">午休时间：12：00-2：00</td></tr><tr><td rowspan="3">下午</td><td>第一节</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>Vue</td><td>PHP</td></tr><tr><td>第二节</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>Vue</td><td>PHP</td></tr><tr><td>第三节</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>Vue</td><td>PHP</td></tr></tbody></table></body></html>
2、运行效果：
3、表格常见标签：
- table>caption\thead\tbody>tr>th\td
- 表格合并的属性：rowspan\colspan=”n”
- 表格边框：border=”n”:边框粗细 n阿拉伯数字，cellspacing=”n”:单元格和边框的间距；cellpadding=”n”:单元格内部与内容间距
HTML表单-注册小demo
1、注册表单代码:
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>注册表单</title><style>*{padding: 0;margin: 0;/* outline: 1px solid #FF0000; */}.register{margin: 30px auto;width: 400px;}form{padding: 10px 5px;border: 1px solid #2C3E50;display: grid;grid-template-columns: 1fr 2fr;grid-row-gap: 20px;grid-column-gap:15px ;}h2{text-align: center;margin-bottom: 10px;}form>:nth-child(2n+1):not(.btn){/* color:red; */text-align:justify;text-align-last: justify;}form .btn{grid-column-start: 2 span;margin: 0 60px;text-align: center;}form .btn button {width: 80px;margin-left: 20px;margin-right:20px}</style></head><body><div class="register"><h2>用户注册</h2><form action="" method="" enctype="application/x-www-form-urlencoded"><label for="username">账户:</label><input type="text" name="username" id="username" value="" placeholder="请输入你的账户……" required><label for="pwd">密码:</label><input type="password" name="pwd" value="" id="pwd" placeholder="请输入不少于6位密码" required><label for="age">年龄:</label><input type="number" name="age" value="" id="age"><label for="email">邮箱:</label><input type="email" name="email" value="" id="email" placeholder="admin@mail.com"><label for="tel">手机:</label><input type="tel" name="tel" value="" id="tel"><label for="sex1">性别:</label><div><label for="sex1">男</label><input type="radio" name="sex" value="1" id="sex1"><label for="sex2">女</label><input type="radio" name="sex" value="2" id="sex2"><label for="sex3">保密</label><input type="radio" name="sex" value="3" id="sex3" checked></div><label for="#">爱好：</label><div><input type="checkbox" name="loves[]" value="html" id="html"><label for="html">HTML</label><input type="checkbox" name="loves[]" value="css" id="css" checked><label for="css">css</label><input type="checkbox" name="loves[]" value="vue" id="vue"><label for="vue">Vue</label><input type="checkbox" name="loves[]" value="php" id="php" checked><label for="php">PHP</label></div><label for="">学历：</label><!-- <select name="edu" multiple size="2"> --><select name="edu"><optgroup label="初级教育"><option value ="初中" >初中</option><option value ="高中" selected>高中</option></optgroup><optgroup label="高等教育"><option value ="大学">大学</option><option value ="学士">研究生</option></optgroup></select><label for="userimg" >照片：</label><div><input type="hidden" name="MAX_FILE_SIZE" value="80000"><input type="file" name="user_img" value="" id="userimg"></div><label for="">自我介绍：</label><textarea rows="5" cols="10" style="resize:none;"></textarea><div class="btn"><button type="reset">重置</button><button type="submit">提交</button></div></form></div></body></html>
2、运行结果效果图：
3、表单常用标签：
- form标签：属性（action=”url”,method=”GET|POST”,enctype=”application/x-www-form-urlencoded”）
- input标签：type类型常见：text/password/radio/checkbox/file/mail/tel/number
- button标签：type类型：submit/reset/
- label标签：显示控件旁边为说明文字
- form表单可以通过id属性和form=”form-id的值”绑定form表单以外的元素标签控件