HTML 列表

无序列表

Item
Item
Item
Item

有序列表

Item
Item
Item
Item

HTML 无序列表

<ul>标签定义无序列表,每一项以<li>标签开始

每一项都以项目符号(小的黑色圆)标记.

例子

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML 无序列表 - 样式属性

可以给无序列表添加样式属性(style),定义标记的样式.

样式	描述
list-style-type:disc	每一项以实心圆标记(默认)
list-style-type:circle	每一项以空心圆标记
list-style-type:square	每一项以实心方圆标记
list-style-type:none	每一项都没有标记符号

DISC:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CIRCLE:

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Square:

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

None:

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML 有序列表

有序列表用<ol>标签,每一项用<li>标签.

每一项以数字标记.

例子

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML 有序列表 - type属性

给有序列表添加一个type属性,定义标记的类型.

type	描述
type="1"	列表用数字编号(默认)
type="A"	列表用大写字母编号
type="a"	列表用小写字母编号
type="I"	列表用大写的罗马数字编号
type="i"	列表用小写的罗马数字编号

数字

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

大写字母

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

小写字母

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

大写的罗马数字

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

小写的罗马数字

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML 描述列表

HTML也支持描述列表:

描述列表的每一项都是描述信息.

<dl>标签定义描述列表,<dt>标签定义每一项的标题,<dd>定义每一项的描述信息

例子

<dl>
  <dt>咖啡</dt>
  <dd>- black hot drink</dd>
  <dt>牛奶</dt>
  <dd>- white cold drink</dd>
</dl>

HTML 嵌套列表

列表可以嵌套(列表里面还有列表).

例子

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>黑茶</li>
      <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

列表项可以包含新的列表,也可以包含其它的HTML元素,像图像和超链接等等.

水平列表

HTML列表可以用CSS来定义不同的风格.

比如说,水平显示列表.

例子

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>

<body>

<h2>水平列表</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul> 

</body>
</html>

添加一些样式,看起来就像一个菜单了.

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}

本章小结

HTML <ul>元素定义无序列表

HTML CSS属性定义列表项的样式

HTML <ol>元素定义有序列表

HTML type属性定义编号类型

HTML <li>元素定义列表项

HTML <dl>元素定义描述列表

HTML <dt>元素定义米描述标题

HTML <dd>元素定义描述信息

列表可以嵌套另一个列表

列表项可以包含其它的HTML元素

用CSS的display:inline,列表水平显示

标签	描述信息
<ul>	定义无序列表
<ol>	定义有序列表
<li>	定义列表项
<dl>	定义描述列表
<dt>	定义描述列表里的每一项的描述标题
<dd>	定义描述列表里每一项的描述信息

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索