欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML-ul分分钟理解

程序员文章站 2022-07-02 18:07:07
在HTML中,列表有三种,如图分别是有序、无序和自定义列表。上面是我在网络上找到的一张图片很明了就看以看出来,今天要分享的就是其中的无序列表Ul(unordered list),给大家整理了一下我所知道的。希望能对刚刚入门的不是很懂的人有所帮助。 无序列表 无序列表是一个没有顺序的项目的列表,此列项 ......
HTML-ul分分钟理解

 

在html中,列表有三种,如图分别是有序、无序和自定义列表。上面是我在网络上找到的一张图片很明了就看以看出来,今天要分享的就是其中的无序列表ul(unordered list),给大家整理了一下我所知道的。希望能对刚刚入门的不是很懂的人有所帮助。

无序列表

无序列表是一个没有顺序的项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。●

无序列表始于 <ul> 标签。每个列表项始于 <li>,
且无序列表ul的各个列表项之间 没有顺序级别之分,是并列的

这是一段ul的基本代码:


<ul> <li>这是一个无序列表代码</li> <li>这是一个无序列表代码</li> </ul>
 下面就是这段代码在浏览器中显示出来的样子
  • 这是一个无序列表代码
  • 这是一个无序列表代码
无序列表内部可以使用换行符、段落、图片、链接以及其他列表等等。。

比如:

 1  <ul>
 2     <li><h3>换行符</h3></li>
 3     <li>这是一个<br/>加了换行符<span style="color:#f00"><br/>lt/span>的<br/>
 4         无序列表代码</li>
 5     <li><h3>段落</h3></li>
 6     <li><p>这是一个加了段落标签
 7         <span style="color:#f00"><p></span>的<p/>
 8         <p>无序列表代码</p>
 9     </li>
10     <h3>图片和超链接</h3></li>
11         <li><p>这是一个加了图片和超链接<a href="#"/>
12         <img src="timg.gif"/></a>标签为
13         <span style="color:#f00"><img></span>的<br/>
14         无序列表代码<p/></li>
15  </ul>

 

 

这段代码在网页里面打出来的效果就是下面这样的

  • 换行符

  • 这是一个
    加了换行符<br/>
    无序列表代码

 

  • 段落

 

这是一个加了段落标签<p>

无序列表代码

 

 

  • 图片和超链接

这是一个加了图片和超链接 

 

标签为 <img>
无序列表代码

可以看到ul里面是可以插入很多别的东西的,其中换行符跟段落能看得出来换行符因为是换行,所以行与行之间的间距是默认的,而插入段落符就变得大了很多。使用的时候有些人会认为这俩作用差不多都能起到“换行”的作用,但是实际的显示效果是有差别的,还需要注意。

 无序列表中type属性的常用值有三个,它们呈现的效果也不同,分别是:

小黑点: disc(默认值);●
方块: square;■
空心圆: circle。○

1 <ul>
2                     <li>默认的无序列表</li>
3                     <li type="square">添加square属性</li>
4                     <li type="circle">添加circle属性</li>
5                     <li type="none">取消项目符号</li>
6                     <li id="menu"><br/></li>
7  </ul>

网页中显示的效果如下

  默认的无序列表

  • 添加square属性

  ○添加circle属性

   取消项目符号

最后,大家知道有序列表的type属性是可以改变有序项目符号的,就像这样

 1 <ol>
 2                     <li type="i">大写希腊字母</li>
 3                     <li type="i">大写希腊字母</li>
 4                     <li type="i">小写希腊字母</li>
 5                     <li type="i">小写希腊字母</li>
 6                     <li type="a">大写英语字母</li>
 7                     <li type="a">大写英语字母</li>
 8                     <li type="a">小写英语字母</li>
 9                     <li type="a">小写英语字母</li>
10                     <li type="1">阿拉伯数字</li>
11                     <li type="1">阿拉伯数字</li>
12   </ol>

但我发现无序列表也可以添加这种属性,让它变得“有序”,

 1 <ul>
 2                     <li type="i">大写希腊字母</li>
 3                     <li type="i">大写希腊字母</li>
 4                     <li type="i">小写希腊字母</li>
 5                     <li type="i">小写希腊字母</li>
 6                     <li type="a">大写英语字母</li>
 7                     <li type="a">大写英语字母</li>
 8                     <li type="a">小写英语字母</li>
 9                     <li type="a">小写英语字母</li>
10                     <li type="1">阿拉伯数字</li>
11                     <li type="1">阿拉伯数字</li>
12                 </ul>

这两段代码的显示结果是一模一样的,都是下面的样子:

HTML-ul分分钟理解

但是,并不是所有的浏览器都支持在无序列表中加有序项目符号的,也非常非常不建议这么做,如果真的需要有序符号,最好还是用有序列表来做,我这里只是提一下他可以这么做,非常不建议大家在项目中这么用。

好的,这次的ul就分享完了,希望能对大家有所帮助!