HTML入门基础（012）

最新推荐文章于 2022-09-16 22:17:42 发布

虾米大王

最新推荐文章于 2022-09-16 22:17:42 发布

阅读量347

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/modern358/article/details/109628779

版权

html 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

接着上节内容，我们继续分享关于列表的内容，无序列表的列表项是没有顺序的，默认情况下，列表项符号是 ●，可以通过属性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>

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