html中dl dt dd 標簽用法與圖片列表自動換行


dl 標簽 -- 代表HTML自定義列表
dl標簽是成對出現的,以<dl>開始,</dl>結束
自定義列表的開始使用<dl>標簽,列表中每個元素的標題使用<dt>(definition term)定義,后面跟隨<dd>(definition description)用於描述列表中元素的內容.
屬性:
Common -- 一般屬性
dl是definition lists的英文縮寫

 <dl><dt></dt><dd></dd></dl>為常用標題+列表型標簽。如沒有對dl dt dd標簽初始CSS樣式,默認dd列表內容會一定縮進。(擴展閱讀:ul li、ol li、li列表)

< dl>< /dl>用來創建一個普通的列表,
< dt>< /dt>用來創建列表中的上層項目,
< dd>< /dd>用來創建列表中最下層項目,
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間。

 

<dl>
<dt>列表標題</dt>
<dd>列表內容</dd>
<dd>列表內容</dd>
...
</dl>

語法解釋:
首先dt和dd是放於dl標簽內,標簽dt與dd處於dl下相同級。也就是dt不能放入dd內,dd不能放入dt內。在dl下,dt與dd處於同級標簽。DD標簽可以若干。同時不能不加dl地單獨使用dt標簽或dd標簽。

 1 <html>
 2 <head>
 3 <style>
 4 *{ margin:0; padding:0;}
 5 #box{ width:300px; margin:10px; padding:10px; float:left; border:1px solid #CCC;
 6 background:#FFFFCC; font-size:12px; line-height:1.9;}
 7 dl{ background:#CCCC00; margin:0; width:120px;
 8 text-align:center; float:left; margin:5px;}
 9 dt{ background:#CC0033;}dt img{display:block;
10 margin:0 auto;}
11 dd{ background:#FFFF00; }
12 </style>
13 </head>
14 <h3>自動換行</h3>
15  
16    <table width="100%" border="1" align="center">
17         <div id="box">
18          <dl>
19               <dt> <img src="door_nosensor.jpg" /> </dt>
20               <dd>10.0.1.201-1</dd>
21           </dl>
22         <dl>
23               <dt> <img src="door_nosensor.jpg" /> </dt>
24               <dd>10.0.1.201-2</dd>
25           </dl>
26         <dl>
27               <dt> <img src="door_nosensor.jpg" /> </dt>
28               <dd>10.0.1.201-3</dd>
29           </dl>
30           <dl>
31               <dt> <img src="door_nosensor.jpg" /> </dt>
32               <dd>10.0.1.201-4</dd>
33           </dl>
34 
35         </div>
36     </table>
37 </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM