• img、列表和table标签


    一、img图片

    <body>
        <a href="https://www.fmtxt.com">
            <img src="images/1.jpg"  title="哆啦A梦" style="height: 200px;  200px " alt="哆啦A梦"/>
        </a>
    </body>
    
    '''
      1. 放在 a 标签中,点击图片就能跳转到链接的网站
     
      2. src : 图片的位置
    
      3. title:当鼠标放置在图片上时显示的内容
    
      4. alt:当图片不能打开时,显示的内容
    '''
    

      注: img 标签默认会自带1px的边框,可以使用样式 boder:0 去掉这个边框

    二、列表标签

      2.1 ul标签

      说明:ul=>unordered lists 无序列表,跟li标签配合着使用

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
    

      如下:

      2.2 ol标签

      说明:ol=>ordered lists 有序列表,也是跟li标签配合着使用  

    <body>
        <ol>
            <li>Python</li>
            <li>Html</li>
            <li>Linux</li>
        </ol>
    </body>
    

      如下:

      2.3 dl标签

       dl=>defintion list 定义一个列表   配合着dt=>defintion title(定义标题)和dd=>defintion description(描述)两个标签配合使用

    <dl>
            <dt>浙江</dt>
            <dd>杭州</dd>
            <dd>金华</dd>
            <dd>嘉兴</dd>
            <dt>江苏</dt>
            <dd>苏州</dd>
            <dd>南京</dd>
            <dd>无锡</dd>
        </dl>
    

      如下:

    三、table标签

      3.1 tr 和 td  

        <table border="1">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>22</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>22</td>
                <td>上海</td>
            </tr>
        </table>
    
    '''
      1. tr : 表示行
      2. td: 表示列
    '''
    

      如下:

      

      3.2 规范的表格写法   

    <table border="1">
        <thead>
            <tr>
                <td>表头1</td>
                <td>表头2</td>
                <td>表头3</td>
                <td>表头4</td>
            </tr>
        </thead>
        <tbody>
            <tr>
    
                <td>
                    <a href="https://www.baidu.com">1</a>
                </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>
    
    
    '''
      thead:表头
      
      tbody:内容
    
      a标签:为表格中内容做链接
    
    '''
    

      如下:

      3.3 合并单元格--列之间合并  

        <thead>
            <tr>
                <td>表头1</td>
                <td>表头2</td>
                <td>表头3</td>
                <td>表头4</td>
            </tr>
        </thead>
        <tbody>
            <tr>
    
                <td>1</td>
                <td colspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
    
    '''
       colspan="2":表示占两列, 同时要删去一列
    '''
    

      如下:

      3.3 合并单元格--行之间合并 

        <tbody>
            <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>
        </tbody>
    
    '''
       rowspan="2":表示横跨两行,同时要在下一行中删去一列
    '''
    

      如下:

  • 相关阅读:
    SQL优化,解决系统运行效率瓶颈
    C#中 哪些是值类型 哪些是引用类型
    C#异常类相关总结
    对象 序列化 字节流 传输
    给数组中的每个元素赋值
    对象转化为 xml字符串
    .NET BETWEEN方法
    Datatable To List<Entity>
    ajax原理
    gulp记录
  • 原文地址:https://www.cnblogs.com/bigberg/p/8426639.html
Copyright © 2020-2023  润新知