描述性列表的表现形式
作者: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 />标签来做是否就适合标签语义化了呢?
猜你喜欢
- 我们在制作网页时,有时会遇到这样的情况:根据用户的选择,显示不同的内容。比如,制作一个登录网页,上面有
- <HTML><HEAD><TITLE>SQL Server 数据库的备份
- (一)关于体验约瑟夫.派恩和詹姆士.吉尔摩在《体验经济》一书中提出其观点:所谓“体验”就是企业以商品为道具,以服务为舞台,以顾客为中心,创造
- 可以自动轮换的页签 tabs with auto play fucntion<html><head><meta
- SQL SERVER用来判断表或视图存在的语句在ORACLE中不能用,请问该怎么写。谢谢。答案exists(select tnam
- 有一个查询如下: 代码如下:SELECT c.CustomerId, CompanyName FROM Customers c
- SQL> show all --查看所有68个系统变量值 SQL> show user --显示当前连接用户 SQL> s
- 代码如下: <% Dim oConn, ors, aRows Dim i,j Set oConn=Server.CreateObjec
- 其实这里的静态页面并不是真正意义上的静态,但可以达到了静态页面的解析效率,还未经项目测试,拿来分享。代码如下:<% Cons
- EXEC SQL WHENEVER SQLERROR CONTINUE; sqlglm(msg_buffer, &buf
- jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查
- Response是负责将信息传递给用户的对象,它可动态地响应客户端的请求,并将动态生成的响应结果返回给客户端浏览器。 一,Resp
- 一、问题引发思考前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了,所以在此整理
- 1.样式的重用性CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用,以减少不断定义样式属性
- 使用ENUM代替字符串类型有时候, 可以通过使用ENUM来代理常规的字符串类型。一个ENUM列能够存储65535个不同的字符串值,MySQL
- 不知道算不算DW4的大BUG. DW4实际的运行如下: 读注册表中HKEY_CURRENT_USER/
- 奥运来了,三大门户网站都加上了奥运主题。加上下面代码你的网站也拥有奥运主题了:<style type="text/
- 例如:我们在百度中搜索 词典网,则网址后面的参数就是http://www.baidu.com/s?cl=3&wd=%B4%CA%B5
- //关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=jav
- sql2000安全很重要将有安全问题的SQL过程删除.比较全面.一切为了安全!删除了调用shell,注册表,COM组件的破坏权限use&nb