【1】dl dt dd簡解
<dl>
标簽定義了定義清單（definition list）。
<dl>
标簽用于結合
<dt>
（定義清單中的項目）和
<dd>
（描述清單中的項目）。
<dl><dt></dt><dd></dd></dl>
為常用标題+清單型标簽。
如沒有對dl dt dd标簽初始CSS樣式，預設dd清單内容會一定縮進。
<html>
<body>
<h2>一個定義清單：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示資訊的裝置 ... ...</dd>
</dl>
</body>
</html> 
【2】一個完整執行個體
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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>News</title>
<style type="text/css">
body{
font-size:12px;
font-family:"SimSun";
}
dl.news{
margin:0;
padding:0 0 8px 0;
color:#10478c;
border:solid 1px #999;
}
dl.news dt{
margin:0;
padding:0 0.5em;
font-weight:bold;
position:relative;
height:26px;
line-height:26px;
border-bottom:solid 1px #999;
background:#f7f7f7;
}
dl.news dd{
margin:0 5px;
padding:2px 70px 0 20px;
position:relative;
height:auto;
min-height:22px;
_height:22px;
line-height:18px;
border-bottom: dashed 1px #ddd;
background:url(http://bbs.blueidea.com/images/smilies/default/han.gif) left center no-repeat;
}
dl.news span{
position:absolute;
width:70px;
text-align:right;
top:0;
right:0;
}
dl.news dt span{
font-weight:normal;
padding:0 4px 0 0;
color:#666;
}
dl.news dd span{
color:#ccc;
}
a:link,a:visited{
color:#1e50a2;
text-decoration: none;
}
a:hover{
color:#ba2636;
text-decoration:underline;
}
</style>
</head>
<body>
<div style="width:500px;">
<dl class="news">
<dt>國内新聞<span><a href="#">更多資訊</a></span></dt>
<dd>
<a href="#">國小數學題惹吐槽：弄這麼多心機套路有必要嗎？</a>
<span>2017-11-28</span>
</dd>
<dd>
<a href="#">突破9700美元 基金大佬預測明年底升至4萬</a>
<span>2017-11-28</span>
</dd>
<dd>
<a href="#">馬化騰：微信推出後 QQ做的巨大犧牲是戰略必須</a>
<span>2017-11-28</span>
</dd>
<dd>
<a href="#">騰訊回應微信網頁版将逐漸下線：沒有關閉</a>
<span>2017-11-28</span>
</dd>
<dd>
<a href="#">馬斯克被曝就的創始人“中本聰”</a>
<span>2017-11-28</span>
</dd>
<dd>
<a href="#">意大利華人捐贈古版中國地圖 證明釣魚島為中領土</a>
<span>2017-11-28</span>
</dd>
<dd>
<a href="#">印尼阿貢火山持續噴發 周邊河流變泥漿</a>
<span>2017-11-28</span>
</dd>
<dd>
<a href="#">南極獨特脆弱的生态近況如何?探險家打洞潛入海底</a>
<span>2017-11-28</span>
</dd>
</dl>
</div>
</body>
</html> 效果如下：
![用 Canvas 編織璀璨星空圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)