HTML标签之列表类标签

2024-04-27 15:12:49

字体：大中小

来源：转载

供稿：网友

<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>效果如下：可以看出，<dd>包含的项目的详细信息是自动缩进的。<menu>标签定义一个菜单列表，目前没有主浏览器支持。