课程表和注册表单实例
1. 课程表实例
<!DOCTYPE html><html lang="zh-CN"><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是符合元素需多个标签进行描述 1. table:表格容器 2. caption: 表格标题 3. tr: 表格的行 4. td / th: 在tr内部，单元格;th常用于thead中，并且有加粗效果 --> <table border="1" width="400"> <caption>小学课程表</caption> <!-- 表头 --> <thead> <tr> <th>时间</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> </tr> </thead> <!-- 表体 --> <tbody> <tr> <td rowspan="3">上午</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> <td>英语</td> </tr> <tr> <!-- <td></td> --> <td>语文</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>数学</td> </tr> <tr> <!-- <td></td> --> <td>语文</td> <td>美术</td> <td>计算机</td> <td>英语</td> <td>数学</td> </tr> <!-- 第五行 --> <tr> <td colspan="6">中午</td> <!-- <td></td> --> <!-- <td></td> --> <!-- <td></td> --> <!-- <td></td> --> <!-- <td></td> --> </tr> <tr> <td rowspan="3">下午</td> <td>科学</td> <td>数学</td> <td>体育</td> <td>音乐</td> <td>思品</td> </tr> <tr> <!-- <td></td> --> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> <td>英语</td> </tr> <tr> <!-- <td></td> --> <td>语文</td> <td>英语</td> <td>数学</td> <td>语文</td> <td>数学</td> </tr> </tbody> </table></body></html>
2. 注册表单实例
<!DOCTYPE html><html lang="zh-CN"><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,fieldset,label,input,select+option,textarea, input+datalist+option,button --> <!-- 表单控件的容器 --> <form action="login.php" method="post"> <!-- 表单控件分组容器 --> <fieldset> <legend>用户注册</legend> <div class="username"> <label for="uname">账号:</label> <input type="text" name="username" placeholder="账号" id="uname" autofocus /> </div> <br/> <div class="email"> <label for="email">邮箱:</label> <input type="email" name="email" placeholder="邮箱" id="email" /> </div> <br/> <div class="psw"> <label for="psw">密码:</label> <input type="password" name="password" placeholder="******" id="password" /> </div> <br/> <div class="age"> <label for="age">年龄:</label> <input type="number" name="age" id="age" value="20" min="20" max="70" /> </div> <br/> <div class="birthday"> <label for="birthday">年龄:</label> <input type="date" name="birthday" id="birthday" min="1950-01-01" max="2003-01-20" /> </div> <br/> <div class="url"> <label for="blog">博客:</label> <input type="url" name="blog" id="blog" placeholder="http://baidu.com" /> </div> <br/> <!-- 搜索框比文本框多一个清空按钮 --> <div class="search"> <label for="keywords">搜索:</label> <input type="search" name="keywords" id="search" placeholder="输入关键字" /> </div> <br/> <div class="hide"> <input type="hidden" name="hide" value="hello,world!" /> </div> <div class="upload"> <label for="upload">头像：</label> <input type="file" name="user_pic" id="upload" accept="image/jpeg,image/png" /> <button type="button">上传</button> </div> <br/> <div class="gender"> <!-- for与默认值的input.id绑定 --> <label for="secret">性别:</label> <!-- name: 必须相同,以保住唯一性 --> <input type="radio" name="gender" value="male" id="male" /><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" checked /><label for="secret">保密</label> </div> <br/> <div class="hobby"> <label>兴趣:</label> <input type="checkbox" name="hobby[]" value="game" id="game" checked /><label for="game">游戏</label> <input type="checkbox" name="hobby[]" value="book" id="book" /><label for="book">看书</label> <input type="checkbox" name="hobby[]" value="basketball" id="basketball" /><label for="basketball">篮球</label> </div> <br/> <div class="edu"> <label for="edu">学历:</label> <select name="edu" id="edu" form=""> <option value="" selected disabled>--请选择--</option> <option value="2">初中</option> <option value="3">高中</option> <option value="4">专科</option> <option value="5">本科</option> <option value="6">硕士</option> </select> </div> <br/> <div class="like"> <label for="keyword">语言: </label> <input type="search" name="language" list="details" id="keyword" /> <!-- 预置值列表 --> <!-- ? input.list 和 datalist.id 进行绑定 --> <datalist id="details"> <option value="html">html</option> <option value="css">css</option> <option value="js">js</option> <option value="php">php</option> <option value="vue">vue</option> <option value="node">node</option> </datalist> </div> <br/> <div class="color"> <label for="color">背景:</label> <input type="color" name="bgcolor" id="color" value="#ffff00" /> </div> <br/> <div> <label for="comment">备注:</label> <textarea name="comment" id="comment" cols="30" rows="5" maxlength="200"> Hello world </textarea> </div> <button type="submit">注册</button> </fieldset> </form></body></html>
