4月3日课程 HTML常用元素
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML常用元素演示</title> </head> <body> <!-- 页眉 --> <header> <nav> <ul> <li><a href="">导航1</a></li> <li><a href="">导航2</a></li> <li><a href="">导航3</a></li> </ul> </nav> </header> <!-- 主体 --> <div class="container"> <aside> <div> <ol> <li><a href="">排名01</a></li> <li><a href="">排名02</a></li> <li><a href="">排名03</a></li> <li><a href="">排名04</a></li> <li><a href="">排名05</a></li> <li><a href="">排名06</a></li> <li><a href="">排名07</a></li> <li><a href="">排名08</a></li> <li><a href="">排名09</a></li> <li><a href="">排名10</a></li> </ol> </div> </aside> <main> <div class="table"> <table border="1" cellspacing="0" align="center" width="500"> <caption style="margin-bottom: 10px;font-size:1.5rem;"> HTML表格元素 </caption> <colgroup> <col bgcolor="lightblue"></col> <col></col> <col></col> <col></col> <col></col> </colgroup> <thead bgcolor="lightgreen"> <th>序号</th> <th>名称</th> <th>内容</th> <th>描述</th> <th>备注</th> </thead> <tbody> <tr> <td rowspan="2">内容01</td> <td>内容02</td> <td>内容03</td> <td>内容04</td> <td>内容05</td> </tr> <tr> <td>内容02</td> <td>内容03</td> <td>内容04</td> <td>内容05</td> </tr> </tbody> <tbody bgcolor="gray"> <tr> <td>内容01</td> <td>内容02</td> <td>内容03</td> <td>内容04</td> <td>内容05</td> </tr> <tr> <td>内容01</td> <td>内容02</td> <td>内容03</td> <td>内容04</td> <td>内容05</td> </tr> <tr> <td>内容01</td> <td>内容02</td> <td>内容03</td> <td>内容04</td> <td>内容05</td> </tr> </tbody> <tfoot> <tr> <td>表格底部：</td> <td colspan="4">表格底部</td> </tr> </tfoot> </table> </div> <hr> <!-- 表单--> <div class="form"> <h3>用户注册</h3> <form action=""> <section> <label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="6至10位数字字母组合" required><br> </section> <section> <label for="password">密 码：</label><input type="password" id="password" name="password" placeholder="8至18位数字字母组合" required> </section> <section> <label for="secret">性 别：</label> <input type="radio" name="gender" id="male" value="1"><label for="male">男</label> <input type="radio" name="gender" id="female" value="0"><label for="female">女</label> <input type="radio" name="gender" id="secret" value="3" checked><label for="secret">保密</label> </section> <section> <div class="box"> <label for="programme">兴 趣：</label> <input type="checkbox" name="hobby[]" id="game"><label for="game">游戏</label> <input type="checkbox" name="hobby[]" id="sleep"><label for="sleep">睡觉</label> <input type="checkbox" name="hobby[]" id="programme" checked><label for="programme">编程</label> </div> </section> <section> <label for="remark">签 名：</label> <textarea name="remark" id="remark" cols="30" rows="1"></textarea> </section> <section> <button type="submit">提交</button> </section> </form> </div> </main> </div> <!-- 页脚 --> <footer> <section> <ul> <li><a href="">网站地图01</a></li> <li><a href="">网站地图02</a></li> <li><a href="">网站地图03</a></li> <li><a href="">网站地图04</a></li> </ul> </section> </footer> </body></html>
