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” 列表项将用小写罗马数字编号
数字:
- 咖啡
- 茶
- 牛奶
<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>
总结
本文介绍了的使用,如有问题欢迎私信和评论