一、image

<a href="https://www.baidu.com" target="_blank">

    <img src="1.jpg" title="茶杯" style="height: 200px"; width="240px;" alt="茶">

    </a>

#img标签包在a标签中可以加超链接

#src="1.jpg"：图片的路径

#title="茶杯"：当鼠标放在图片上时，显示的内容

#style="height: 200px"; width="240px;" ：指定图片的大小

#alt="茶"：当图片不存在时，显示的内容

   

二、列表

1、ul标签

#ul标签要与li标签一起用
<ul>

        <li>a</li>

        <li>b</li>

        <li>c</li>

        <li>d</li>

    </ul>

2、ol标签

<ol>

        <li>a</li>

        <li>b</li>

        <li>c</li>

        <li>d</li>

    </ol>

3、dl、dt、dd标签

<dl>

        <dt>1</dt>

        <dd>a</dd>

        <dd>b</dd>

        <dd>c</dd>

        <dt>2</dt>

        <dd>a</dd>

        <dd>b</dd>

        <dd>c</dd>

    </dl>

三、表格

1、此方法没有严格区分表头和表格

<table border="1">

        <tr>

            <td>主机名</td>

            <td>端口</td>

            <td>操作</td>

        </tr>

        <tr>

            <td>1.1.1.1</td>

            <td>80</td>

            <td>

                <a href="s8.html" target="_blank">查看详细</a>

                <a href="#" target="_blank">修改</a>

            </td>

        </tr>

        <tr>

            <td>1.1.1.1</td>

            <td>80</td>

            <td>第二行.第3列</td>

        </tr>

        <tr>

            <td>1.1.1.1</td>

            <td>80</td>

            <td>第二行.第3列</td>

        </tr>

    </table>

#border="1"：边框

#tr标签：是行

#td标签：是列

2、此方法区分了表头和表格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>表头1</th>

                <th>表头1</th>

                <th>表头1</th>

                <th>表头1</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

#<thead>：表头

#<tbody>：表格内容

3、合并单元格

横向合并：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1">

        <thead>

            <tr>

                <th>表头1</th>

                <th>表头1</th>

                <th>表头1</th>

                <th>表头1</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td colspan="3">1</td>

            </tr>

            <tr>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

            <tr>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

            <tr>

                <td>1</td>

                <td>1</td>

                <td>1</td>

                <td>1</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

#内容一共是4列，colspan="3"：让此标签占3列，

纵向合并：

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

#rowspan="2" ：纵向占2行

7、html的body内标签之图片及表格的更多相关文章

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

    <li> list 标签定义和用法: <li> 标签定义列表项目. <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 ...

  2. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...

  3. [TFRecord格式数据]利用TFRecords存储与读取带标签的图片

    利用TFRecords存储与读取带标签的图片 原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...

  4. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  5. div和span与块级和行内标签

    <div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...

  6. 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  7. HTML开发之（块级标签，行内标签，行内块标签）

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  8. 关于html 中form表单的内标签和使用

    表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...

  9. HTML基础知识（块级标签，行内标签，行内块标签）

    块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

随机推荐

  1. 【程序猿联盟】官网上线啦！coderunity.com

    wx_fmt=jpeg" alt="" style="max-width:100%; height:auto!important"> 内容简单介 ...

  2. iOS之简单瀑布流的实现

    iOS之简单瀑布流的实现   前言 超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里. 实现思路 collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie ...

  3. 谈谈 T 型人才

    谈谈 T 型人才   昨天的图片发模糊了,正好我把这个话题展开聊一聊吧.这个话题是关于复合型人才的,我把它称作 T 型人才. 「全栈」工程师 前一段时间,「全栈」工程师的概念很火,不过大多数时候,「全 ...

  4. mysql启动warning: World-writable config file

    如果在启动warning: World-writable config file /home/mysql/my.cnf is ignored原因:my.cnf的读取权限进行了设置,不允许World-w ...

  5. FFmpeg解码详细流程

    FFmpeg在解码一个视频的时候的函数调用流程.为了保证结构清晰,其中仅列出了最关键的函数,剔除了其它不是特别重要的函数. 下面解释一下图中关键标记的含义. 函数背景色 函数在图中以方框的形式表现出来 ...

  6. 模式匹配之常见匹配算法---SIFT/SURF、haar特征、广义hough变换的特性对比分析

    识别算法概述: SIFT/SURF基于灰度图, 一.首先建立图像金字塔,形成三维的图像空间,通过Hessian矩阵获取每一层的局部极大值,然后进行在极值点周围26个点进行NMS,从而得到粗略的特征点, ...

  7. 基于docker/虚拟机的esp32远程工作流

    原文:基于docker/虚拟机的esp32远程工作流 工作流框图 背景说明 为什么需要这套工作流--为了满足高效和灵活的开发方式 因为我经常需要在公司和家里切换不同的电脑工作,所以编译环境需要在远程主 ...

  8. CentOS 安装和配置 Mantis

    Mantis是一个基于PHP技术的轻量级的开源缺陷跟踪系统,以Web操作的形式提供项目管理及缺陷跟踪服务.在功能上.实用性上足以满足中小型项目的管理及跟踪.更重要的是其开源,不需要负担任何费用. 1. ...

  9. android开发——自己定义相机（Camera）开发总结

    近期这段时间我一直在开发自己定义相机.谷歌了些网上的demo.发现有非常多各种各样的问题.终于还是从API的camera类開始学习,进行改进. 以下对之前的实现进行一些总结. 官方camera API ...

  10. 【BZOJ1414/3705】[ZJOI2009]对称的正方形 二分+hash

    [BZOJ1414/3705][ZJOI2009]对称的正方形 Description Orez很喜欢搜集一些神秘的数据,并经常把它们排成一个矩阵进行研究.最近,Orez又得到了一些数据,并已经把它们 ...