完成表格的跨行合并功能
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨行合并</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <!--width="410"--> <caption ><h1>学习内容</h1></caption> <!--<Hr color="red">--> <!--表头--> <thead> <tr bgcolor="#deb887"> <th>序号</th> <th>学习课程名称</th> <th>课时</th> <th>类别</th> </tr> </thead> <!--表格主体--> <tbody> <tr> <td width="50" >1</td> <td width="200">HTML</td> <td width="70">2</td> <td width="50" rowspan="3">前端课程</td> </tr> <tr> <td>2</td> <td>CSS</td> <td>3</td> </tr> <tr> <td>3</td> <td>JavaScript</td> <td>3</td> </tr> <tr> <td>4</td> <td>PHP</td> <td>3</td> <td rowspan="3">后端课程</td> </tr> <tr> <td>5</td> <td>ThinkPHP</td> <td>3</td> </tr> </tbody> </table> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
2. 独立完成一个用户注册表单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <H1>用户注册</H1> <form action method="get"> <p> <label for="username">帐号：</label> <input type="text" id="username" name="username" placeholder="最多8个字符" required autofocus> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="由6－10位数字及字母组成" required> </p> <p> <label for="male">性别：</label> <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="secrecy" id="secrecy" checked> <label for="secrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 制作一个简易的后台首页
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理</title> </head> <body> <h2>后台管理</h2> <ul style="float;left"> <li> <a href="demo1.html" target="main">用户管理</a> </li> <li> <a href="demo2.html" target="main">商品设置</a> </li> <li> <a href="demo3.html" target="main">系统设置</a> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4、上述代码中涉及知识点注释总结：
# HTML中的常用标签
* 标题: <h1> ~ <h6>
* 段落: <p>
* 链接: <a href="" target="">
* 图像: <img src="" alt="">
* 列表: <ul> + <li>, <ol> + <li>, <dl><dt><dd>
* 表格: <table><thead><tbody><tr><td>
* 表单: <form><label><input>
* 框架: <iframe src="" width="" height="">
* 通用: <div><span>
* 容器: <header><nav><main><article><section><footer>
通过今晚的课程，初步了解了以上标签的使用方法，认识到自己对知识点掌握的还不够熟练，还需在实践中多多练习，加深印象！