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】