HTML列表

HTML列表

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。

其中type类型值:A a I i 1 start属性表示起始值

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta charset='utf-8'/>
 5         <title>列表实例</title>
 6     </head>
 7     <body>
 8         <h1>列表的实例</h1>
 9         <!--这是无序列表-->
10         <ul>
11             <li><a href='#'>十九大后首次地方考察 xxx为何去这里?</a></li>
12             <li><a href='#'>xxx考察徐州 强调深入学贯彻党的十九大精神</a></li>
13             <li><a href='#'>13亿中国人泪目国殇的时候 蔡英文在干嘛?</a></li>
14             <li><a href='#'>中国公知以批华博取声名 赴美3个月却认知反转</a></li>
15         
16         </ul>
17         
18         
19         <!--这是有序列表-->
20         <ol>
21             <li><a href='#'>十九大后首次地方考察 xxx为何去这里?</a></li>
22             <li><a href='#'>xxx考察徐州 强调深入学习贯彻党的十九大精神</a></li>
23             <li><a href='#'>13亿中国人泪目国殇的时候 蔡英文在干嘛?</a></li>
24             <li><a href='#'>这是有序列表</a></li>
25         </ol>
26         
27          <ol>
28             <li><a href='#'><img src='../imgs/2.jpg'  width='200px' height='300px'/></a></li>
29             <li><a href='#'><img src='../imgs/3.jpg' width='200px' height='300px'/></a></li>
30             <li><a href='#'><img src='../imgs/4.jpg' width='200px' height='300px'/></a></li>
31             <li><a href='#'><img src='../imgs/5.jpg' width='200px' height='300px'/></a></li>
32         </ol>  
33     </body>
34 </html>
原文地址:https://www.cnblogs.com/zhangboblogs/p/8053316.html