zoukankan      html  css  js  c++  java
  • html中的列表、表格、图像、超链接

    一、列表:

      列表分为:1、有序列表:

              语法:<ul type="符号类型">

                                                     <li></li>

                 </ul>

           2、无序列表:

              语法:<ol type="符号类型">

                                                     <li></li>

                 </ol>

           3、定义列表:

              语法:<dl>

                  <dt>定义名词</dt>

                  <dd>定义描述</dd>

    二、表格

             表格的格式:<table>

                <tr>

                   <td></td>

                </tr>

              </table>

        <tr><th><td>标签下的常用属性

              属性名称:                             属性值:

                  nowrap           无

                  width           像素

                              百分比

                                                    height                                 像素

                                百分比

                                                    bgcolor                               英文/十六进制        

                                                    align(水平方向)                    left

                              right

                              center                        

                                                    valign(垂直方向)                 top

                              middle

                              bottom                    

        表格需要注意:1、表格默认宽度为内容的宽度,高度为内容的高度

               2、表格默认边框属性值为零

               3、表格宽度有两种值(绝对值跟百分比)

               4、cellpadding表示内边距

               5、cellspacing表示单元格间距

         知识点:

          1、合并单元格是<td>的属性,通过占位实现

            colspan:横向合并(向右合并)

            rowspan:向下合并

            这两个属性的属性值为数字,数字代表合并单元格的个数(包含自己)

          2、利用表格横平竖直的特性,设置某个单元格的宽高,他所在的行列都和它等高等宽

    三、例子

             

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>学员信息</title>
     6 
     7 </head>
     8 
     9 <body>
    10     <table border="1" cellpadding="0" cellspacing="0" width="400">
    11         <caption>学员信息</caption>
    12         <tr>
    13             <td>学号</td>
    14             <td>姓名</td>
    15             <td>性别</td>
    16             <td>班级</td>
    17             <td>年龄</td>
    18             <td>学历</td>
    19             <td>操作</td>
    20         </tr>
    21         <tr>
    22             <td>1</td>
    23             <td>12</td>
    24             <td></td>
    25             <td>php</td>
    26             <td>23</td>
    27             <td>专科</td>
    28             <td><a href="学员详情.html#11">查看详情</a></td>
    29         </tr>
    30         <tr>
    31             <td>2</td>
    32             <td>22</td>
    33             <td></td>
    34             <td>php</td>
    35             <td>24</td>
    36             <td>专科</td>
    37             <td><a href="学员详情.html#22">查看详情</a></td>
    38         </tr>
    39         <tr>
    40             <td>3</td>
    41             <td>32</td>
    42             <td></td>
    43             <td>php</td>
    44             <td>24</td>
    45             <td>专科</td>
    46             <td><a href="学员详情2.html">查看详情</a></td>
    47         </tr>
    48         <tr>
    49             <td>4</td>
    50             <td>321</td>
    51             <td></td>
    52             <td>php</td>
    53             <td>25</td>
    54             <td>专科</td>
    55             <td><a href="学员详情3.html">查看详情</a></td>
    56         </tr>
    57         <tr>
    58             <td>122</td>
    59             <td>111</td>
    60             <td></td>
    61             <td>php</td>
    62             <td>23</td>
    63             <td>专科</td>
    64             <td><a href="学员详情.html#55">查看详情</a></td>
    65         </tr>
    66     </table>
    67     
    68 </body>
    69 </html>
    View Code

     四、图像

        格式:<img src="URL">

        功能:将图片插入到网页中去

        属性:src 图片文件的地址

           alt 图片显示不出来时的提示文字

           title  鼠标移到图片上的提示文字

        例:

    src="../19291311_131811815000_2.jpg" height="100%"/>

    五、超链接

          超链接语法:<a href="l链接地址" target="目标窗口的打开方式">超链接内容</a>

          一般情况下,target只用到“_self”和"_blank"这两个属性值

         例子:

    <a href="../1219下午.html">返回列表页</a>

         锚点链接:<a>标签下的name属性设置超链接的标记

      例子:

       

    <a name="22"></a>
    <a href="学员详情.html#22">查看详情</a>
  • 相关阅读:
    selenium基础(鼠标和键盘事件)
    Java:面向对象三大特征
    Java:面向对象(上)
    Java:数组
    Java:方法
    Java基础:程序结构控制
    Java基础:用户交互Scanner
    Java基础语法(下)
    Jenkins(Extended E-mail Notification)邮箱配置正确但是并没有发送邮件
    接口自动化测试与Jenkins集成(Freestyle project任务版)
  • 原文地址:https://www.cnblogs.com/chenyang-1/p/8081147.html
Copyright © 2011-2022 走看看