HTML第一課——基礎知識普及【2】
關註公眾號：自動化測試實戰
-
img標簽
我們先看一下文檔結構：
這裏我們文件當前位置就是lesson.html，所以現在我們img屬性src給的值要進入imgs文件夾，所以我們可以用相對路徑來表示，看代碼：
<!DOCTYPE html>
<html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="imgs/0.png">
</body>
</html> 上面src後面跟的就是相對路徑。
頁面顯示：
src除了用來設置圖片路徑以外，還用來設置alt屬性，alt屬性是用來給搜索引擎用的，以便你寫的頁面可以被搜索引擎搜索到。此外它還有width和height屬性，比如剛才的圖片比較大，我們現在修改圖片的大小，只需要：
<img src="imgs/0.png" width="5%" height="5%">如果你希望自己的圖片是網絡上的圖片，那只需要粘貼你希望放上去的圖片地址，比如，放百度的背景，那麽只需要看一下百度的地址：
然後復制這個地址，粘貼到你的src路徑裏：
<img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%"> 但是要註意，如果圖片寫的是網絡上的圖片，要必須確定有網，不然圖片是不顯示的。
-
ul li標簽
這兩個標簽是列表。
<!DOCTYPE html>
<html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>
</html> 顯示：
你可能會說除了ul li還有ol li，不用管那麽多，記住這個就夠了。
記住，只要頁面中有固定樣式的列表，那就用ul li，比如：
不信大家就去天貓看一下。
-
table
表格。之前說過了，以今天的為準。tr代表行，td代表列。
<table>
<tr>
<td>第1行1列</td>
<td>第1行2列</td>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
</tr>
</table>顯示：
如果想顯示邊框，可以加個border屬性：
<table border="1">...</table>還要知道，table已經用的很少了，因為存在瀏覽器的兼容性，很多時候都被ul li代替了。大家會想到上次還說的tbody現在卻沒有寫，其實即使我們不寫瀏覽器也會幫我們加上：
上圖中的tbody就是瀏覽器默認給我們加上的。此外，如果是表的第一行，需要加粗顯示的話，可以將tr改為th：
<table border="1">
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
</tr>
</table>th用來做表頭，默認字體居中顯示。
還有caption作為表格的標題：
<table border="1">
<caption>表格標題</caption>
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
</tr>
</table>tbody和caption等這些都不用記。
合並表格：
<table border="1">
<caption>表格標題</caption>
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
<th>分數</th>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
<td>10</td>
</tr>
<tr>
<td colspan="2">總成績</td>
<td>20</td>
</tr>
</table>我們給td標簽加了colspan="2"，就可以合並兩行了：
最後給大家看一個例子，圖片來自https://nba.hupu.com/teams：
<!DOCTYPE html>
<html>
<head>
<title>第一節課</title>
<meta charset="UTF-8"/>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="https://www.baidu.com/img/bd_logo1.png" width="10%" height="10%">
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<table border="1">
<caption>表格標題</caption>
<tr>
<th>第1行1列</th>
<th>第1行2列</th>
<th>分數</th>
<th>一整行</th>
</tr>
<tr>
<td><img src="imgs/0.png"></td>
<td><img src="imgs/1.png"></td>
<td><img src="imgs/2.png"></td>
<td rowspan="3"><img src="imgs/logo.png"></td>
</tr>
<tr>
<td><img src="imgs/3.png"></td>
<td><img src="imgs/4.png"></td>
<td><img src="imgs/5.png"></td>
</tr>
<tr>
<td><img src="imgs/6.png"></td>
<td><img src="imgs/7.png"></td>
<td><img src="imgs/8.png"></td>
</tr>
</table>
</body>
</html>顯示：
寫會了上面這個例子，table這裏就沒什麽問題啦~
大家想學就得加把勁，自己不努力誰也教不會。
HTML第一課——基礎知識普及【2】