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

一、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内标签之图片及表格的更多相关文章

html的body内标签之图片及表格
<li> list 标签定义和用法: <li> 标签定义列表项目. <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中 ...
HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
[TFRecord格式数据]利用TFRecords存储与读取带标签的图片
利用TFRecords存储与读取带标签的图片原创文章,转载请注明出处~ 觉得有用的话,欢迎一起讨论相互学习~Follow Me TFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是 ...
H5的段落标签、图片标签、列表标签与链接标签
段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...
div和span与块级和行内标签
<div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...
前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
HTML开发之（块级标签，行内标签，行内块标签）
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...
关于html 中form表单的内标签和使用
表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...
HTML基础知识（块级标签，行内标签，行内块标签）
块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...

随机推荐

ORCAD元件属性白色区域和黄色区域的理解
白色部分为instance属性,黄色部分为occurence 属性在平坦式电路中,黄色部分是默认不显示的. 在层次式电路中,黄色部分会显示. 如果这两个区域的Reference不同,以黄色 ...
Java EJB JBoss
JBoss:JBoss是web服务器的一种,主要做EJB容器,和tomcat集成就可以jsp,servlet,ejb通吃了JBoss有两种版本,一种是独立的,一种是和tomcat集成的,当然都是免费的 ...
Django-缓存的配置
缓存的介绍在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台操作,都会消耗 ...
宜信开源|分布式任务调度平台SIA-TASK的架构设计与运行流程
一.分布式任务调度的背景无论是互联网应用或者企业级应用,都充斥着大量的批处理任务.我们常常需要一些任务调度系统来帮助解决问题.随着微服务化架构的逐步演进,单体架构逐渐演变为分布式.微服务架构.在此背 ...
php 中 isset 和empty 的区别
昨天终于开始学习php了,这个对于我来说听着很熟悉,但是学起来很陌生的东西,尤其是课上能听明白但是真正写起了手生,都不知道手该往哪里放了,天哪~~~ 其中课上有讲到 isset和empty的区别,现 ...
Möbius strip
en.wikipedia.org/wiki/Möbius_strip http://mechproto.olin.edu/final_projects/average_jo.html Fabricat ...
Java面试-Hibernate总结
1 Hibernate的检索方式 Ø 导航对象图检索(依据已经载入的对象.导航到其它对象. ) Ø OID检索(依照对象的OID来检索对象. ) Ø HQL检索(使用面向对象的HQL查询语言. ...
TCP/IP-ICMP-Ping-Traceroute
TCP/IP-ICMP 作者:Danbo 2015-8-22 I C M P经常被认为是I P层的一个组成部分.它传递差错报文以及其他需要注意的信息.I C M P报文通常被I P层或更高层协议( T ...
php MVC原理
一直用php的mvc模式,但是一直没深入研究其原理性的东西,今天把最基本的mvc原理模型总结如下: 1.url访问方式 http://127.0.0.1:8080/ceshi.com/index.p ...
POj 3253 Fence Repair(修农场栅栏，锯木板)（小根堆 + 哈弗曼建树得最小权值思想）
Fence Repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 28359 Accepted: 9213 Des ...

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

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

随机推荐

热门专题