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>