3.表格练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- border边框 cellspacing单元格间距 cellspacing单元格距内容的距离--> <table align="center" border="1" cellspacing="10" cellpadding="10"> <caption>表格标题</caption> <!-- tr表示行 th表头 td表示列 --> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>1</td> <td>张三</td> <td>28</td> </tr> <tr> <td>2</td> <td>尼古拉赵四</td> <td>29</td> </tr> </table> <table border="" cellspacing="" cellpadding=""> <!--colspan跨列--> <tr><td align="center"colspan="2">1-1</td><td rowspan="2">1-3</td></tr> <tr><td rowspan="2">2-1</td><td>2-2</td></tr> <tr><td align="center"colspan="2">3-2</td></tr> </table> </body> </html>
显示效果：
4.表单练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- action服务器地址 method提交方式 --> <form action="http://www.tmooc.cn" method="get"> <!-- 文本框 name是对传递过去的参数做介绍 id唯一标识 value值设置文本框的值--> 名字：<input type="text" name="username" placeholder="请输入用户名" id="" value=""/> <br/> 密码：<input type="password" name="pwd" placeholder="请输入您的密码" id="" value=""/> <hr> 性别：<input type="radio" checked="checked" name="gender" id="" value="m" />男 <input type="radio" name="gender" id="" value="f" />女 <hr> <!-- 多选和单选类似 --> 爱好: <input type="checkbox" checked="checked" name= "hobby" id="" value="cy" />抽烟 <input type= "checkbox" name="hobby" id="" value="hj" />喝酒 <input type="checkbox" name= "hobby" id="" value="tt" />烫头 <!-- label扩充点击范围 --> <input type="checkbox" name="hobby" id="dbj" value="dbj"/> <label for="dbj">大保健</label> <hr > <!-- 日期选择器 --> 生日：<input type="date" name="birthday" id="birthday" /> <input type="submit" value="注册"/> <hr > <!-- 文件选择器 --> 靓照：<input type="file" name="pic" id="pic" /> </form> </body> </html>
显示效果：
5.图片练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- alt：图片不能显示时显示文本 --> <img alt="这显示不出来" src="a1.jpg"> <!-- title：鼠标悬停时显示的文本 --> <img width="100" height="100" title="这是个头像" src="../2.jpg"> <img width="100" height="100" src="abc/3.png"> <img width="20%" height="20%" src="../imgs/4.jpg"> <!-- 绝对路径访问站外资源，又称为图片盗链 好处：节省本站资源 坏处：有可能找不到图片--> <img width="20%" height="20%" src="http://cdn.tmooc.cn/bsfile//courseImg///280c6025caa14649ba86b3561db92066.jpg"> </body> </html>
显示效果：
