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>
原文地址:https://www.cnblogs.com/chenyang-1/p/8081147.html