浅谈列表<ul>跟<dl>使用注意点及使用的场景_IT百科

1.无序列表标签<ul>简单介绍：

1.1语义：<ul>标签作用给一组类型相同的数据添加列表的语义，告诉浏览器、搜索引擎<ul>无序列表里的数据是一个整体，他们是没有类似于排行榜上的先后、重要、次要排名上分别的，他们的重要性都一样的。

1.2注意点:<ul>标签里只能嵌套<li>标签，除此之外不能嵌套其他标签，但在<li>标签里可以可以嵌套其他的标签，像它的父级<ul>标签都可以嵌套在里面。

1.3使用的场景:在企业项目开发中，<ul>标签通常用于网站导航条的链接、新闻网站的新闻列表、视频列表，或者用于电商网站商品导航目录的列表或者产品详细列表。如图：

导航条：凤凰网

新闻列表：网易

电商网站商品目录的导航：天猫

2.<dl>标签的介绍：

2.1<dl>标签使用格式：如图

<dt>是自定义列表里的列表项，也是列表的标题英文是definition title，<dd>列表项是对列表项进行描述的，英文是definition description。

2.2<dl>标签语义：<dl>标签也是对一组数据添加列表语义，告诉浏览器这是一个整体，那<dd>标签里的内容时对<dt>里的标题进行描述、解释。例如下图里第一个<dd>标签的文字信息是对<dt>标题里北京进行解释说明。

2.3<dl>标签使用注意：<dl>标签可以嵌套多对<dt><dd>标签，<dt>标签可以有多个<dd>个列表项说明、描述，也可以没有；但一般推荐一个<dd>标签跟一个<dt>标签。<dd>标签可以嵌套其他标签，但列表项<dt>不不能嵌套其他标签。

2.4<dl>标签使用的场合：图文混排、网站底部链接：电商网站底部-购物指南、支付方式。

第一种就没有必要了，div和ul都是块元素，ul能不在外面嵌套div就不要去嵌套。所以选择第二种。

最后一个也没什么问题。但是也要注意些细节，比如img标签里最好是添加alt属性，这样利于seo，当然seo仅仅是这些是不够的，比如title，descrption，keywords，还有每个页面最好只用一个h1标签，而这个h1标签的内容最好是可以概括整个页面的信息。

其实他们的区别都可以用css来更改

<dl>适合于列表内容项，一个大标题，下面几个小标题的那种

<tr><td>(HTML中没有<tl>，估计是你笔误吧)，是<table>里的标签，这个适合于做表格，在早期都是拿来布局的，后来被<div>给代替了

<ul><li>无序列表，适用于那种不需要指明数字序号的列表，没有顺序的列表

<ol><li>有序列表，顾名思义，就是需要按一定顺序排列的列表

他们的表现形式，你可以把代码打出来，观察下就知道了，我把他们打出来了，你可以看下他们的区别

<!DOCTYPE html>

<head>

</head>

<body>

<dl>

<dt>前端技术点</dt>

<dd>JavaScript</dd>

<dt>Java开发</dt>

</dl>

<tr>

<td>这个是表格</td>

</tr>

<tr>

<td>这个是表格</td>

</tr>

</table>

<ul>

<li>这个是无序列表</li>

</ul>

<ol>

<li>这个是有序列表</li>

</ol>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11942308.html

浅谈列表<ul>跟<dl>使用注意点及使用的场景

发表评论

评论列表（0条）

浅谈列表&lt;ul&gt;跟&lt;dl&gt;使用注意点及使用的场景

发表评论

评论列表（0条）

浅谈列表<ul>跟<dl>使用注意点及使用的场景