zoukankan      html  css  js  c++  java
  • 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="茶":当图片不存在时,显示的内容

    image    image


    二、列表

    1、ul标签

    #ul标签要与li标签一起用
    <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>

    image


    2、ol标签

    <ol>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ol>

    image


    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>

    image


    三、表格

    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>:表格内容

    image


    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列,

    image

    纵向合并:

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

    image

  • 相关阅读:
    读胶料温度代码
    干掉win10自带的不给力的应用(转自https://jingyan.baidu.com/article/08b6a591b7398514a8092238.html)
    安装SQL提示重启电脑失败,解决办法
    几种加解密方法:AES、DES、SHA数据加密
    SQL数据库添加新账号,只操作指定数据库
    jQuery中attr()、prop()、data()用法及区别
    jquery.cookie() 的使用(原)
    功能强大的web打印控件lodop的使用
    Win+R命令大全
    Vue
  • 原文地址:https://www.cnblogs.com/weiyiming007/p/10765964.html
Copyright © 2011-2022 走看看