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

最新推荐文章于 2021-10-25 17:51:27 发布

weixin_30602505

最新推荐文章于 2021-10-25 17:51:27 发布

阅读量209

点赞数

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

版权

<li> list 标签定义和用法：

<li> 标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

<ol>标记:ordered list称为有序列表，编号列表标记。其功能是将文字段落向内缩进，
并在段落的每个项目前面加上1，2，3	有顺序的数字。<ol>标记必须搭配<li>标记使用。
<ul>标记:unordered list称为无序列表，其功能是将文字段落向内缩进，并在段落前面加上圆形或空心圆形
或方块等项目符号，以达到醒目的效果。<ul>必须搭配<li>标记使用。

html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，
<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式，默认dd列表内容会一定缩进。
<dl>:define list---定义列表
<dt>:define list title--用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。 
<dd>:define list define--用于生成定义列表各列表项的说明文字段，重复使用可以定义
    多个说明文字段。dd是对应dt的简短说明或解释。

1. img (src,alt,title)

列表：

把“1.png“ 放到程序的同级目录，把图片导入。

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

运行结果：

2.自己测试跳转的效果吧，把它包在a标签里面。

title="大美女"：把鼠标放到图片上的时候，会显示大美女三个字。

alt="美女"：如果找不到图片的话，会显示美女这两个字在图片的位置。

<!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.列表

<ul>：<li>：前面是小黑点

<ol>：<li>：前面是数字

<dl>：表示分层，下面的 <dt>表示标题；下面的<dd>表示内容。

<!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. 表格，<tr>表示一行table row，<td>表示一列table data cell

<!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">
        <tr>
            <td>主机名</td>
            <td>端口</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1.1.1.1</td>
            <td>8080</td>
            <td>
                <a href="s1.html">查看详细信息</a>
            </td>
        </tr>
    </table>
</body>
</html>

运行结果：

6. 表头, 规范的格式，建议用这个。个人感觉：“列“才是外国人认为放真正内容的地方。table--->row---->content(thead, table data cell)

<head> 中 <tr> 表示行table row，<th>表示列。table head

<tbody>中<tr>表示行table row，<td>表示列。table data cell

<th>则表示标题,一般用在一列的第一格,里面的内容会自动加粗加黑； <td>表示内容，不会自动加粗加黑。

<head>里面定义有几列，<body>里面定义一行一行的内容。

<!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>

运行结果：

插播一个小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lily</td>
                <td>26</td>
            </tr>
            <tr>
                <td>Jack</td>
                <td>20</td>
            </tr>
        </tbody>

    </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>

运行结果：

转载于:https://www.cnblogs.com/momo8238/p/7401380.html

weixin_30602505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的body内标签之图片及表格

<li> list 标签定义和用法：<li> 标签定义列表项目。<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。<ol>标记:ordered list称为有序列表，编号列表标记。其功能是将文字段落向内缩进，并在段落的每个项目前面加上1，2，3 有顺序的数字。<ol>标...
复制链接

扫一扫