前端必知必会-html有序列表和无序列表

---

HTML 有序列表

HTML <ol> 标签定义有序列表。有序列表可以是数字或字母。

有序 HTML 列表

有序列表以 <ol> 标签开头。每个列表项都以 <li> 标签开头。

列表项将默认用数字标记：

示例

<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

有序 HTML 列表 - Type 属性

<ol> 标签的 type 属性定义列表项标记的类型：

类型 描述
type=“1” 列表项将用数字编号（默认）
type=“A” 列表项将用大写字母编号
type=“a” 列表项将用小写字母编号
type=“I” 列表项将用大写罗马数字编号
type=“i” 列表项将用小写罗马数字编号

数字：

1. 咖啡
2. 茶
3. 牛奶

<ol type="1">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

大写字母：

<ol type="A">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

小写字母：

<ol type="a">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

大写罗马数字：

<ol type="I">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

小写罗马数字：

<ol type="i">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

控制列表计数

默认情况下，有序列表将从 1 开始计数。如果要从指定数字开始计数，可以使用 start 属性：

示例

<ol start="50">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>

嵌套 HTML 列表

列表可以嵌套（列表内有列表）：

示例

<ol>
<li>咖啡</li>
<li>茶
<ol>
<li>红茶</li>
<li>绿茶</li>
</ol>
</li>
<li>牛奶</li>
</ol>

注意：列表项 (<li>) 可以包含新列表和其他 HTML 元素，如图像和链接等。

HTML 其他列表

HTML 还支持描述列表。

描述列表是术语列表，每个术语都有描述。

<dl> 标签定义描述列表，<dt> 标签定义术语（名称），<dd> 标签描述每个术语：

示例

<dl>
<dt>咖啡</dt>
<dd>- 黑色热饮</dd>
<dt>牛奶</dt>
<dd>- 白色冷饮</dd>
</dl>

HTML 块和内联元素

每个 HTML 元素都有一个默认显示值，具体取决于元素类型。

最常见的两个显示值是块和内联。

块级元素

块级元素始终从新行开始，浏览器会自动在元素前后添加一些空间（边距）。

块级元素始终占据整个可用宽度（尽可能向左和向右伸展）。

两个常用的块元素是：<p> 和 <div>。

<p> 元素定义 HTML 文档中的段落。

<div> 元素定义 HTML 文档中的分区或部分。

<p> 元素是块级元素。

<div> 元素是块级元素。
示例

<p>Hello World</p>
<div>Hello World</div>

以下是 HTML 中的块级元素：

<address><article><aside><blockquote><canvas>
<dd><div><dl><dt><fieldset><figcaption><figure>
<footer><form><h1>-<h6><header><hr><li><main><nav>
<noscript><ol><p><pre><section><table><tfoot>
<ul><video>

内联元素

内联元素不从新行开始。

内联元素仅占用必要的宽度。

这是段落内的 <span> 元素。

示例

<span>Hello World</span>

以下是 HTML 中的内联元素：

<a><abbr><acronym><b><bdo>
<big><br><button><cite><dfn><em><i>
<img><input><kbd><label><map><object>
<output><q><samp><script><select><small>
<span><strong><sub><sup><textarea><time><tt><var>

注意：内联元素不能包含块级元素！

<div> 元素通常用作其他 HTML 元素的容器。

<div> 元素没有必需属性，但 style、class 和 id 很常见。

与 CSS 一起使用时，<div> 元素可用于设置内容块的样式：

示例

<div style="background-color:black;color:white;padding:20px;">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。它是英国人口最多的城市，大都市区有超过 1300 万居民。</p>
</div>

<span> 元素
<span> 元素是一个内联容器，用于标记文本的一部分或文档的一部分。

<span> 元素没有必需的属性，但 style、class 和 id 是常见的。

当与 CSS 一起使用时，<span> 元素可用于设置文本部分样式：

示例

<p>我妈妈的眼睛是 <span style="color:blue;font-weight:bold;">蓝色</span>
，我爸爸的眼睛是 <span style="color:darkolivegreen;font-weight:bold;">深绿色</span>。</p>

---

总结

本文介绍了的使用，如有问题欢迎私信和评论