zoukankan      html  css  js  c++  java
  • 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":表示横跨两行,同时要在下一行中删去一列
    '''
    

      如下:

  • 相关阅读:
    在windows下如何批量转换pvr,ccz为png或jpg
    cocos2d-x 中的 CC_SYNTHESIZE 自动生成 get 和 set 方法
    制作《Stick Hero》游戏相关代码
    触摸事件的setSwallowTouches()方法
    随机生成数(C++,rand()函数)
    随机生成数
    cocos2d-x 设置屏幕方向 横屏 || 竖屏
    Joystick 摇杆控件
    兔斯基 经典语录
    Cocos2d-x 3.2 EventDispatcher事件分发机制
  • 原文地址:https://www.cnblogs.com/bigberg/p/8426639.html
Copyright © 2011-2022 走看看