HTML第一課——基礎知識普及【2】

時間 2019-12-08

標籤 html 一課基礎知識普及欄目 HTML 简体版

原文原文鏈接

關注公衆號：自動化測試實戰html

img標籤瀏覽器

咱們先看一下文檔結構：網絡

這裏咱們文件當前位置就是lesson.html，因此如今咱們img屬性src給的值要進入imgs文件夾，因此咱們能夠用相對路徑來表示，看代碼：less

<!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屬性，好比剛纔的圖片比較大，咱們如今修改圖片的大小，只須要：ui

<img src="imgs/0.png" width="5%" height="5%">

若是你但願本身的圖片是網絡上的圖片，那隻須要粘貼你但願放上去的圖片地址，好比，放百度的背景，那麼只須要看一下百度的地址：搜索引擎

而後複製這個地址，粘貼到你的src路徑裏：spa

<img src="https://www.baidu.com/img/bd_logo1.png" width="50%" height="50%">

可是要注意，若是圖片寫的是網絡上的圖片，要必須肯定有網，否則圖片是不顯示的。code

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>