乐趣区

关于前端:HTML标签-之-列表标签

列表标签常常用于布局中,整洁、有序。列表分为无序列表、有序列表和自定义列表三类。

一、无序列表

<ul> 标签示意 HTML 页面中我的项目的无序列表,个别会以我的项目符号出现列表项,列表项用 <li> 标签来定义。

<ul>
  <li> 苹果 </li>
  <li> 香蕉 </li>
  <li> 梨 </li>
</ul>

展现成果如下:

  • 苹果
  • 香蕉

阐明:
1、无序列表的各个列表项之间没有程序级别之分,是并列的。
2、<ul></ul> 中只能嵌套 <li></li>,嵌套其余标签或者文字是不被容许的。
3、<li> 标签相当于一个容器,外面能够放任何元素。
4、要扭转无序列表的款式,个别用 CSS 来设置。

二、有序列表

<ol> 标签示意 HTML 页面中我的项目的有序列表,列表排序以数字来显示,列表项同样是用 <li> 标签。

<ol>
  <li> 苹果 </li>
  <li> 香蕉 </li>
  <li> 梨 </li>
</ol>

展现成果如下:

  1. 苹果
  2. 香蕉

同样的,<ol></ol> 中只能嵌套 <li></li>,嵌套其余标签或者文字是不被容许的。

三、自定义列表

自定义列表罕用于对术语或名词的解释和形容,定义列表的列表项前没有任何我的项目符号。

<dl> 标签用于定义列表,列表项用 <dt><dd> 标签来形容。

<dl>
  <dt> 分割咱们 </dt>
  <dd> 新浪微博 </dd>
  <dd> 微信公众号 </dd>
  <dd>400 热线 </dd>
</dl>

成果如下:

阐明:
1、<dl></dl> 外面只能蕴含 <dt><dd>
2、<dt><dd> 没有个数限度,通常是一个 <dt> 对应多个 <dd>

退出移动版