讲给后台程序员看的前端系列教程(06)—

本文链接：https://blog.csdn.net/lfdfhl/article/details/100547710

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

之前，我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签、HTML结构标签；现在我们来继续学习HTML中常用的列表标签。

HTML列表标签

ul标签

可能猛地一下看到ul不知道它是干嘛的。可是，如果我告诉你它源自于英语短句unordered list，你是否就反应过来了呢？对的，它用于表示无序列表。请看如下示例：

<ul>
		<li>华为</li>
		<li>三星</li>
		<li>小米</li>
		<li>锤子</li>
</ul>

ol标签

看到ol，调皮的同学一下子就想到了office lady，办公室的白领丽人。嗯哼，不好意思，你想多了，此处的ol源自于英语短句ordered list，它用于表示有序列表。请看如下示例：

<ol>
	<li>状元</li>
	<li>榜眼</li>
	<li>探花</li>
</ol>

dl标签

dl标签表示自定义列表，它源于英语短句definition list。请看如下示例：

<dl>
	<dt>中国古典四大名著</dt>
	<dd>红楼梦</dd>
	<dd>三国演义</dd>
	<dd>西游记</dd>
	<dd>水浒传</dd>
	<dt>高尔基自传三部曲</dt>
	<dd>童年</dd>
	<dd>在人间</dd>
	<dd>我的大学</dd>
</dl>

源码和页面

在此，附上本节教程源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		<!-- ul标签用于无序列表 -->
		<ul>
			<li>华为</li>
			<li>三星</li>
			<li>小米</li>
			<li>锤子</li>
		</ul>

		<!-- ol标签用于有序列表 -->
		<ol>
			<li>状元</li>
			<li>榜眼</li>
			<li>探花</li>
		</ol>

		<!-- dl标签用于自定义列表-->
		<dl>
			<dt>中国古典四大名著</dt>
			<dd>红楼梦</dd>
			<dd>三国演义</dd>
			<dd>西游记</dd>
			<dd>水浒传</dd>
			<dt>高尔基自传三部曲</dt>
			<dd>童年</dd>
			<dd>在人间</dd>
			<dd>我的大学</dd>
		</dl>

	</body>
</html>