HTML标签之列表类标签

最新推荐文章于 2023-02-15 19:51:27 发布

「已注销」

最新推荐文章于 2023-02-15 19:51:27 发布

阅读量900

点赞数 1

分类专栏： HTML学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/54917780

版权

HTML学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<ul>、<li>标签

<ul>标签定义一个无序列表，顾名思义，无序列表是没有数字、字母等标记顺序的。与<li>标签一起使用，创建无序列表。

<li>标签创建列表项。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>无序列表</title>
  </head>
  <body>
    
	<h1>创建一个无序列表</h1>
	<ul>
	  <li>列表项1</li>
	  <li>列表项2</li>
	  <li>列表项3</li>
	  <li>列表项4</li>
	  <li>列表项5</li>
	</ul>
	
  </body>
</html>

效果如下：

如图所示：每个列表项前面有个小黑点。该样式可以通过CSS改变或者删除。

<ol>标签

<ol>标签定义一个有序列表，同样要与<li>元素一起用。顾名思义，有序列表是可以通过数字、字母等标记出顺序的。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>无序列表</title>
  </head>
  <body>
    
	<h1>创建一个有序列表</h1>
	<ol>
	  <li>列表项1</li>
	  <li>列表项2</li>
	  <li>列表项3</li>
	  <li>列表项4</li>
	  <li>列表项5</li>
	</ol>
	
  </body>
</html>

效果如下：

有序列表的列表项前面默认是以阿拉伯数字的标记的，可通过"type"属性改变其类型。type属性值可以是阿拉伯数字、大小罗马数字、大小英文字母。如： type="1||a||A||I||i"

当type="a"时，

<ol type="a">
	  <li>列表项1</li>
	  <li>列表项2</li>
	  <li>列表项3</li>
	  <li>列表项4</li>
	  <li>列表项5</li>
	</ol>

效果如下：

同样，当type="A"时，

同理，当type="I"时,

<ol type="I">
	  <li>列表项1</li>
	  <li>列表项2</li>
	  <li>列表项3</li>
	  <li>列表项4</li>
	  <li>列表项5</li>
	</ol>

效果如下:

最后,当type=”i“时，也有不一样的效果，

<ol type="i">
	  <li>列表项1</li>
	  <li>列表项2</li>
	  <li>列表项3</li>
	  <li>列表项4</li>
	  <li>列表项5</li>
	</ol>

效果如下：

当然，也可以分别为<li>列表项定义type。

注：type属性不建议直接使用，用CSS代替改变其样式。type属性属于样式类，为了使内容、样式两者分离建议使用CSS改变。

<dl>、<dt>、<dd>标签

<dl>标签定义一个描述列表，<dt>标签定义一个描述项目/名字，<dd>标签定义项目/名字的详细信息，这三者需一起使用。常用于对某个事物的描述等。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
	<title>描述列表</title>
  </head>
  <body>
    
	<h1>创建一个描述列表</h1>
	<dl>
	
	  <dt>HTML</dt>
	    <dd>HTML是一种标记语言，用来描述HTML文档（网页）。</dd>
	  <dt>CSS</dt>
		<dd>CSS是层叠样式表，用来改变HTML标签的样式的，使页面更丰富多彩。</dd>
	  <dt>Javascript</dt>
	    <dd>js是一种脚本语言，是为网页添加交互等的，它的功能很强大。</dd>
	</dl>
	
  </body>
</html>

效果如下：