HTML5樣式鏈接表格

發(fā)布時間：2020-02-27 06:39:22 來源：網(wǎng)絡閱讀：362 作者：yeleven 欄目：移動開發(fā)

HTML樣式

1.標簽：

<link> 資源引用

2.屬性：

rel = "stylesheet" 外部樣式表

type = "text/css" 引用文檔的類型

margin-left 邊距

外部樣式表：

        <link rel="stylesheet" type="text/css" href="mystyle.css">

內(nèi)部樣式表：

        <style>
            body{
                background-color:red;
            }
            p{
                margin-left:20px;
            }
        </style>

內(nèi)聯(lián)樣式表：

        <p >

HTML鏈接

1.鏈接數(shù)據(jù)：

文本鏈接

                <a href="www.baidu.com">百度</a>

圖片鏈接

                <a href="
                    <img src="1.jpg">
                 </a>

2.屬性：

href屬性：指向另一個文檔的鏈接

name屬性：創(chuàng)建文檔內(nèi)的鏈接

                <a name="tips">hello</a>
                <a href="#tips">跳轉(zhuǎn)到hello</a> //在百度百科里面使用的非常多

3.img標簽屬性：

alt:替換文本屬性（在圖片不能正常顯示時替換為文本"1.jpg_logo"）

                <img src="1.jpg" width="500px" height="500px" alt="1.jpg_logo">

HTML表格

<table> 定義表格

<caption> 定義表格標題

<th> 定義表格表頭

<tr> 定義表格的行

<td> 定義表格的單元

<thead> 定義表格的頁眉

<tbody> 定義表格的主體

<tfoot> 定義表格的頁腳

<col> 定義表格的列屬性

1.表格的表頭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的表頭</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>單元1</th>
            <th>單元2</th>
            <th>單元3</th>
        </tr>
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
    </table>
</body>
</html>

2.沒有邊框的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沒有邊框的表格</title>
</head>
<body>
    <table>
        <tr>
            <th>單元1</th>
            <th>單元2</th>
            <th>單元3</th>
        </tr>
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
        <tr>
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
    </table>
</body>
</html>

3.空單元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空單元格</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>單元1</th>
            <th>單元2</th>
            <th>單元3</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

4.帶有標題的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帶有標題的表格------加p元素</title>
</head>
<body>
<p>帶標題的表格</p>
<table border="1">
    <tr>
        <th>單元1</th>
        <th>單元2</th>
        <th>單元3</th>
    </tr>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帶有標題的表格------加caption</title>
</head>
<body>
<table border="1">
    <caption>帶標題的表格</caption>
    <tr>
        <th>單元1</th>
        <th>單元2</th>
        <th>單元3</th>
    </tr>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
</table>
</body>
</html>

5.表格的內(nèi)標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的內(nèi)標簽</title>
</head>
<body>
<table border="1">
    <tr>
        <td>表格1</td>
        <td>表格2</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>蘋果</li>
                <li>菠蘿</li>
                <li>香蕉</li>
            </ul>
        </td>
        <td>
            好想吃啊
        </td>
    </tr>
</table>
</body>
</html>

6.單元格邊距（cellpadding）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單元格邊距</title>
</head>
<body>
<table border="1">
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格4</td>
        <td>單元格5</td>
        <td>單元格6</td>
    </tr><br/>
</table>
<table border="1" cellpadding="10">
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格4</td>
        <td>單元格5</td>
        <td>單元格6</td>
    </tr>
</table>
</body>
</html>

7.單元格間距（cellspacing）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單元格間距</title>
</head>
<body>
<table border="1">
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格4</td>
        <td>單元格5</td>
        <td>單元格6</td>
    </tr><br/>
</table>
<table border="1" cellspacing="10">
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格4</td>
        <td>單元格5</td>
        <td>單元格6</td>
    </tr>
</table>
</body>
</html>

8.表格內(nèi)的背景顏色和圖像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的背景顏色</title>
</head>
<body>
<table border="1" bgcolor="aqua">
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格4</td>
        <td>單元格5</td>
        <td>單元格6</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的背景圖像</title>
</head>
<body>
<table border="1" background="1.jpg" cellpadding="100">
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
        <td>單元格3</td>
    </tr>
    <tr>
        <td>單元格4</td>
        <td>單元格5</td>
        <td>單元格6</td>
    </tr>
</table>
</body>
</html>

向AI問一下細節(jié)

HTML5樣式 鏈接 表格

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

HTML5樣式鏈接表格