HTML之UL标签学习总结

最新推荐文章于 2024-09-10 10:47:21 发布

原创最新推荐文章于 2024-09-10 10:47:21 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml

Html5+CSS3 专栏收录该内容

12 篇文章

订阅专栏

本文详细解释了HTML中的UL标签定义，展示了如何利用dt和dd标签创建有序列表，并提供了实例代码及样式实现，强调了合理使用语义化标签的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UL标签定义一个列表

UL包括内标签：dt 和dd这二个标签

dt是定义列表中的项目；

dd是描述列表中的项目；

下面是一个案例：

1.先看效果：

2.代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UL学习</title>
</head>
<style>
body {
	margin:0px;
	padding:0px;
	font-size:12px;
}
dl, dt, dd {
	margin:0px;
	padding:0px;
}
dl {
	width:640px;
}
dt {
	float:left;
	width:150px;
	font:bold 12px/30px "宋体";
	text-align:center;
	color:#009;
	background-color:#eaeaea;
}
dd {
	
	float:left;
	width:130px;
	height:90px;
	margin:30px 10px 0px -150px;
	padding:10px;
	color:#F06;
	background-color:#eee;
}
strong
{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;	
}
</style>
<body>
<dl>
  <dt>这是新学习的UL</dt>
  <dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
  <dt>这是新学习的UL</dt>
  <dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
  <dt>这是新学习的UL</dt>
  <dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
  <dt>这是新学习的UL</dt>
  <dd>通过了<strong>w3c</strong>对ul的定义和通过互联网上的资料收集对这个标签有了新的认识.....</dd>
</dl>
</body>
</html>

个人觉得ul里出现的标签最好一个dt对应着一个dd ，根据标签的定义更符合主义化；

dd：是描述列表的是项目。描述可以包括<p/><strong/><em/><del/><img/>等语义化标签，这个些标签可以对描述做出有强调、有突出、有图片 ,具体使用方式是根据你的实现内容来合理使用语义化标签的。

格式如下：

<dl>
  <dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
  <dd>
    <p>她们都说带上它很感性</p>
    <p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
  </dd>
  <dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
  <dd>
    <p>她们都说带上它很感性</p>
    <p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
  </dd>
  <dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
  <dd>
    <p>她们都说带上它很感性</p>
    <p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
  </dd>
  <dt>这是一件真丝围巾，真便宜啊，快来买吧！</dt>
  <dd>
    <p>她们都说带上它很感性</p>
    <p><em>打折价：</em><strong>20元</strong><i>原价：</i><del>99999元</del></p>
  </dd>
</dl>

也可以每一对的dt dd都单独放到一对dl里面。

如果能通过css控制的效果，个人觉得最好是都放到一个dl里面。这个更像一个列表中定义多个列表项目和它对应的描述列表项目。

这个只是个人对标签的理解，理解不够深刻，希望和大家一起分享，相互交流学习！