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

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

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>

<html lang="zh-cn">

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

  <dl>

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

    <dd>HTML</dd>

    <dd>CSS</dd>

    <dd>JavaScript</dd>

    <dt>Java开发</dt>

    <dd>Java Web</dd>

  </dl>

  <table border="1">

    <tr>

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

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

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

    </tr>

    <tr>

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

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

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

    </tr>

  </table>

  <ul>

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

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

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

  </ul>

  <ol>

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

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

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

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

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

  </ol>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存