接着上节内容,我们继续分享关于列表的内容,无序列表的列表项是没有顺序的,默认情况下,列表项符号是 ●,可以通过属性type改变列表项符号。

 

<html>  <head>    <title>无序列表</title>  </head>  <body>    <ul>      <li>无序列表项</li>      <li>无序列表项</li>      <li>无序列表项</li>      <li>无序列表项</li>    </ul>  </body></html>

 

无序列表,ul,英文意思是 unordered list,列表项li,也是list item。使用<ul></ul>标签符表示一个无序列表开始和结束,<li>表示一个列表项。无序列表的标签符也是需要成对使用的,在其内部不能存在其他标签。

​​​​​​​

<html>  <head>    <title>无序列表</title>  </head>  <body>    <ul>      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>      <li>PHP</li>    </ul>  </body></html>

​​​​​​​

<html>  <head>    <title>无序列表</title>  </head>  <body>    <ul type="circle">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>      <li>PHP</li>    </ul>  </body></html>​​​​​​​
<html>  <head>    <title>无序列表</title>  </head>  <body>    <ul type="square">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>      <li>PHP</li>    </ul>  </body></html>

 

可以通过type属性,改变列表项符号的样式。

 

type属性
属性 序号类型
disc 默认值,实心圆 ●
circle 空心圆 ○
square 实心正方形 ■

 

无序列表type属性在实际开发中,可以用CSS层叠样式表实现,后期我们分享关于CSS时再说。

 

在前端开发中,无序列表的使用很广泛,是HTML中极其重要的标签符,我们经常需要用到它来制作导航栏、文本列表、图片列表等。

 

疑问:无序列表ul元素内部的子元素是否只允许li元素?

解答:是的,ul元素的子元素只能是li,不能是其他元素。对于ul内部的文本,也只能在li元素中添加,不能在li元素外部添加。示例代码如下:

​​​​​​​

<html>  <head>    <title>无序列表,错误写法</title>  </head>  <body>    <ul type="circle">      前端技术的三个核心部分:      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ul>  </body></html>

​​​​​​​

<html>  <head>    <title>无序列表,正确写法</title>  </head>  <body>    前端技术的三个核心部分:    <ul type="circle">      <li>HTML</li>      <li>CSS</li>      <li>Javascript</li>    </ul>  </body></html>

 

下节我们接着说定义列表的内容。

 

HTML入门基础(012)_html