html的body内标签之图片及表格

时间：2017-08-20 22:11:09 阅读：417 评论：0 收藏：0 [点我收藏+]

1. img (src,alt,title)

列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="1.png">
</body>
</html>

运行结果：

技术分享

2.自己测试跳转的效果吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.oldboyedu.com">
        <img src="1.png" title="大美女" style="height:200px;width:200px" alt="美女">
    </a>
</body>
</html>

3.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.oldboyedu.com">
        <img src="1.png" title="大美女" style="height:200px;width:200px" alt="美女">
    </a>
    <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>
    <ol>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ol>
    <dl>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
    </dl>
</body>
</html>

运行结果：

技术分享

4. 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </table>
</body>
</html>

运行结果：

技术分享

5. 表头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <table border="1">
        <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>


        </tbody>


    </table>
    <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
    </tr>
    <tr>
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>
</table>
</body>
</html>

运行结果：

技术分享

6. 横向合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <table border="1">
        <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
                <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>5</td>
            <td colspan="2">6</td>
            <td>7</td>

        </tr>
                <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>


        </tbody>


    </table>
    <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
    </tr>
    <tr>
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>
</table>
</body>
</html>

运行结果：

技术分享

7.纵向合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <table border="1">
        <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
                <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>5</td>
            <td colspan="2">6</td>
            <td>7</td>

        </tr>
        <tr>
            <td rowspan="2">5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>


        </tbody>


    </table>
    <tr>
        <td>第1行，第1列</td>
        <td>第1行，第2列</td>
        <td>第1行，第3列</td>
    </tr>
    <tr>
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>
</table>
</body>
</html>

运行结果：

技术分享

html的body内标签之图片及表格

原文：http://www.cnblogs.com/momo8238/p/7401380.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)