描述性列表的表现形式
作者:Prower 来源:Prower 发布时间:2008-09-17 13:43:00
之前就见过很多网站在侧边栏上使用<dl />标签对来完成侧边栏栏目的布局,最近在研究DEDECMS的默认模板时,也发现该模板在大量的地方使用<dl></dl>标签对来完成页面的布局,比如模板首页的栏目循环以及侧边栏的栏目都是用<dl></dl>标签对来实现的。而在研究全球使用数最多的博客程序Wordpress时,发现它的侧边栏却是使用的是最常见的<ul></ul>列表来实现的。
同样的布局<dl />与<ul />都可以实现,并且就最终的表现来看并不存在区别,那么这两者之间到底有什么区别呢?或者说使用哪一个来完成布局才更为合理呢?
<ul />与<ol />是最常见两种列表表现形式,这两种列表最本质上的区别就是<ul />指的是无序列表而<ol />指的是有序列表。最常见的两种不同表现是:平常所见的新闻标题列表基本上都是由<ul />来完成布局的,而很多网站的侧边栏上会有一些新闻点击数排行榜之类的列表,这个时候就需要使用到有序列表<ol />,因为可以很容易的通过<ol />标注出排行顺序来。
回过头来我们看Wordpress侧边栏的结构代码:
<div id=”sidebar”>
<ul>
<li><h2>栏目标题一</h2>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</li>
…
<li><h2>栏目标题N</h2>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</li>
</ul>
</div>
很显然,这是一个<ul />嵌套<ul/>的结构,通过<h2 />去显示栏目标题(补充一点:对于博客来说,就页面中的内容重要程度而言,这里并不适合使用<h2 />标签来显示栏目标题,<h2 />标签应该是用在日志标题上的)。
很多使用<dl />来布局的网站的结构代码如下:
<div id=”sidebar”>
<dl>
<dt>栏目标题一</dt>
<dd>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</dd>
…
<dt>栏目标题N</dt>
<dd>
<ul>
<li>新闻标题一</li>
…
<li>新闻标题N</li>
</ul>
</dd>
</dl>
</div>
这是一个复杂表现上的定义列表,与上一个结构代码的最大的区别是使用<dt />来替代<h2 />标签。简单意义上的定义列表结构如下:
<div id=”sidebar”>
<dl>
<dt>标题一</dt>
<dd>内容一</dd>
…
<dd>内容N</dd>
…
<dt>标题N</dt>
<dd>内容一</dd>
…
<dd>内容N</dd>
</dl>
</div>
这种结构的代码也可以表现出列表的形式,但事实上这种结构并不太适合做为一个列表来使用,这种简单的<dl />更适合做为不同内容段的描述。比如:
<dl>
<dt>我的照片</dt>
<dd>作者:摄氏度</dd>
<dd>相机:佳能400D</dd>
<dt>我的博客</dt>
<dd>作者:摄氏度</dd>
<dd>程序:wordpress</dd>
</dl>
于是我们可以理解为:<dl />标签结构更多的是表现一种描述性的列表,它本身并不具备做为列表显示的意义。当<dl />与<ul />或是<ol />标签结构组合起来使用时,才能更好的表现出描述列表的作用。
之前的那个被指为不符合标签语义的试验《使用UL进行宽度固定的多行多列布局》,现在换成<dl />标签来做是否就适合标签语义化了呢?
猜你喜欢
- 安装破解包:AWVS14.6.220117111破解Win&Linux&Mac.zip网盘链接:https://pan.ba
- 效果图:基于d3-v5, 依赖dagre-d3, 直接上代码:<!DOCTYPE html><html lang=&quo
- 一、python-yml文件读写使用库 :import yaml安装:pip install pyyaml示例:文件config2.ymlg
- 下面这个例子描述的是在Godaddy-Linux托管帐户上使用JSP连接到某个MySQL数据库。 <%@ page
- 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所
- 类的定义假如要定义一个类 Point,表示二维的坐标点:# point.pyclass Point: def __init__(
- 1. dataloader() 初始化函数def __init__(self, dataset, batch_size=1, shuffle
- 前言由于Django是 * 站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,1.
- 前言:在日常开发的过程中,有时候会临时用到一些简单的函数,她们的业务逻辑会相对简单,简单到并不值得让他们留下名字,这个时候,就很值得使用匿名
- 本文针对Python time模块进行分类学习,希望对大家的学习有所帮助。一.壁挂钟时间1.time()time模块的核心函数time(),
- 不管学习什么编程语言一开始都会经历的四步开发工具安装IDE安装设置 依赖/包 国内镜像项目构建工具,管理依赖/包一、Golang 开发工具安
- #coding=utf-8__auther__ = 'xianbao'import sqlite3# 打开数据库def op
- 正在看的ORACLE教程是:Oracle9i取得建表和索引的DDL语句。我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们
- 首先呢我去安装了一个那个pytorch,然后导入一下发现:连numpy都找不到,于是我表示很生气重新安装,它说安装过了,地址是balabal
- 本文先抓取网络上的表情图像,然后利用百度 AI 识别表情包上的说明文字,并利用表情文字重命名文件,这样当发表情包时,不需要逐个打开查找,直接
- 刚才帮一位朋友做跳转的时候做的,为了获取完整的url地址,还是花了那么点时间不过现在看来,原来是那么简单,没有网上那么多复杂的东东,相信一定
- 目录引言数据获取与指标构建数据获取构建目标变量(target variable)技术指标特征构建计算技术指标模型预测与评估加入技术指标特征特
- 从一段指定的字符串中,取得期望的数据,正常人都会想到正则表达式吧?写过正则表达式的人都知道,正则表达式入门不难,写起来也容易。但是正则表达式
- 写爬虫是一个发送请求,提取数据,清洗数据,存储数据的过程。在这个过程中,不同的数据源返回的数据格式各不相同,有 JSON 格式,有 XML
- 在这篇文章中,我将介绍如何识别导致性能出现问题的查询,如何找出它们的问题所在,以及快速修复这些问题和其他加快查询速度的方法。你一定知道,一个