zoukankan      html  css  js  c++  java
  • python之HTML(图片及表格)

    图片标签:
    img src:title属性是当鼠标移动到图片上面时显示一段文字
            alt属性是当找不到图片路径时在图片的相关位置显示相应的文字
            style属性可以调整图片格式
    ---简单实例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <a href="http://www.baidu.com">                                                           
        <img src="1.png" title="屏幕截图" style="height:200px;200px;" alt="屏幕截图">                     <!--点击图标跳转到相应的网页-->
    </a>
    </body>
    </html>
    
    列表标签:
        1.ul-li相互对应(符号为首)
        <ul>
            <li>xxx</li>
            <li>sxx</li>
        </ul>
        
        2.ol-li相互对应(有序数字为首)
        <ol>
            <li>xxx</li>
            <li>aaa</li>
        </ol>
        
        3.dl-dt,dl-dd三者关联(dt是标题,dd是dt下的内容)
        <dl>
            <dt>广东</dt>
            <dd>汕头</dd>
            <dd>惠州</dd>
            <dt>福建</dt>
            <dd>莆田</dd>
            <dd>其他</dd>
        </dl>
    
        
    表格标签:
        tr-td相互对应,tr表示一行,td表示一行中的列内容,th表示表头的列
        border属性是添加表格样式
        可以搭配a标签使用
    ---示例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <table border="1">
                <thead>                                                                表头的专用标签
                    <tr>                                                            一行的表头有4个属性,注意是th标签
                        <th>表头1:</th>
                        <th>表头1:</th>
                        <th>表头1:</th>
                        <th>表头1:</th>
                    </tr>
                </thead>
                <tbody>                                                                表格除表头外所用的标签
                    <tr>
                        <td>第二行,第一列</td>
                        <td>
                            <a href="http://www.baidu.com">第二行,第二列</a>         
                        </td>
                        <td colspan="2">第二行,第三列</td>                         colspan从该列开始往右合并2个单元格
                        <td>第二行,第四列</td>
                    </tr>
                    <tr>
                        <td>第三行,第一列</td>
                        <td>
                            <a href="http://www.baidu.com">第三行,第二列</a>         
                        </td>
                        <td rowspan="2">第三行,第三列</td>                         colspan从该列开始往下合并2个单元格
                        <td>第三行,第四列</td>
                    </tr>
                </tbody>
        </table>
    </body>
    </html>
        
    label标签:
        <label for="username">用户名:</label>                <!--用意是,当点击用户名也可以自动跳转到输入框-->
        <input id="username" type="text" name="user">
  • 相关阅读:
    i.MX6ULL使用寄存器配置GPIO
    i.MX6ULL的GPIO简要介绍。
    stm32的2个can控制器,主从理解
    ST-Link串口驱动安装--ST-Link VCP Ctrl驱动安装失败解决
    大漠穷秋叫狼哥哥要学好的书
    JQuery UI datepicker 经验
    JQuery UI datepicker 使用方法
    前端-细节处理笔记
    Grunt 前端自动化组件 收集
    JS deBug 技巧
  • 原文地址:https://www.cnblogs.com/god-for-speed/p/11569884.html
Copyright © 2011-2022 走看看