`

HTML之UL标签学习总结

 
阅读更多

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里面。这个更像一个列表中定义多个列表项目和它对应的描述列表项目。

 

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

  • 大小: 41.1 KB
分享到：
| ECMAScript5----定义的一个方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics