HTML中DL、DT、DD、em標記的使用

不淨之心發表於2013-04-10
HTML
[url]http://liudaoru.iteye.com/blog/141219[/url]
<[color=red][b]dl[/b][/color]>標記定義了一個定義列表，定義列表中的條目是通過使用<dt>標記(“definition title”，定義標題)和<dd>標記(“definition description”，定義描述)建立的。
<[color=red][b]dt[/b][/color]>給出了術語名，
<[color=red][b]dd[/b][/color]>標記給出了術語的定義。
<[color=red][b]em[/b][/color]> 標籤告訴瀏覽器把其中的文字表示為強調的內容。對於所有瀏覽器來說，這意味著要把這段文字用斜體來顯示。 儘管現在 <em> 標籤修飾的內容都是用斜體字來顯示，但這些內容也具有更廣泛的含義，將來的某一天，瀏覽器也可能會使用其他的特殊效果來顯示強調的文字。如果你只想使用斜體字來顯示文字的話，請使用 <i> 標籤。除此之外，文件中還可以包括用來改變文字顯示的級聯樣式定義。 除強調之外，當引入新的術語或在引用特定型別的術語或概念時作為固定樣式的時候，也可以考慮使用 <em> 標籤。例如，W3School 經常對重要的術語使用 <em> 標籤。<em> 標籤可以用來把這些名稱和其他斜體字區別開來。

一個定義列表中可以有多個術語名對應同一個給出的定義，也可有多重定義對應於一個術語名。同時也可以只給出術語名稱而不對應定義，反之亦然。當然，這種結構往往並無實際意義，我們可以通過樣式表，很輕鬆的實現這3個標記所達到的效果。

下面是一個例子： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title> New Document </title> 
<style type="text/css"> 
<!-- 
dl   { background-color:#000;color:#fff;width:100px;} 
dt   { cursor:pointer;width:100%;background-color:#666;} 
.expand  { overflow:visible;} 
.collapse  { height:16px;overflow:hidden;} 
//--> 
</style> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
function toggleDl(dt){ 
var dl=dt.parentNode; 
if("collapse"==dl.className)dl.className="expand"; 
else dl.className="collapse"; 
} 
//--> 
</script> 
</head> 
<body> 
<dl> 
<dt onclick="toggleDl(this)">根結點</dt> 
<dd>子結點1</dd> 
<dd>子結點2</dd> 
<dd>子結點3</dd> 
<dd>子結點4</dd> 
</dl> 
</body> 
</html>

相關文章