前端之dl dt dd vs tr td th

素颜马尾好姑娘i 2022-08-19 08:29 175阅读 0赞

**dl dt dd**认识及**dl dt dd使用方法**

**<dl> **[标签][Link 1]用于定义列表类型标签。

**dl dt dd目录**

1.  [dl dt dd介绍][dl dt dd]
2.  [结构语法][Link 2]
3.  [dl dt dd案例][dl dt dd 1]
4.  [dl dt dd总结][dl dt dd 2]

### 一、dl dt dd认识   -   [TOP][] ###

html <dl> <dt> <dd>是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫[表格标签][Link 3]，与[table表格][Link 3]类似组合标签，故名我们也叫dl表格（扩展阅读：[table tr td][Link 3]、[table tr th表格布局][Link 3]）。

<dl><dt></dt><dd></dd></dl>为常用标题+列表型标签。如没有对dl dt dd标签初始[CSS][]样式，默认dd列表内容会一定缩进。（扩展阅读：ul li、ol li、li列表）

### 二、dl dt dd列表标签语法   -   [TOP][] ###

**<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标签。

标题、标题对应列表效果演示  
**代码如下：**

<html> 
       <body> 
       <h1>一个定义列表：</h1> 
       <dl> 
       <dt>css网站</dt> 
       <dd>网址为www.divcss5.com</dd> 
       <dt>div css网站</dt> 
       <dd>网址为www.divcss5.com</dd> 
       <dt>div+css网站</dt> 
       <dd>网址为www.divcss5.com</dd> 
       </dl> 
       </body> 
       </html>

演示截图  
 ![dl dt dd使用实例演示图][dl dt dd 3]

**扩展与提升**  
dl dt dd是一个组合型标签  
标签标准用法，代码如下

同时dd内可以放置<ul>标签使用。

### 三、html dl dt dd应用实例案例   -   [TOP][] ###

1、HTML代码片段：  
<dl>  
<dt>欢迎来到divcss5</dt>  
<dd>这里有，html教程</dd>  
<dd>这里有，css模块</dd>  
<dd>这里有，css教程</dd>  
</dl>

2、dl dt dd案例截图

![html dl dt dd实例案例截图][html dl dt dd]  
以上为html dl dt dd列表标签范例图

### 四、**DL DT DD标签总结   -   [TOP][]** ###

我们实践使用dl dt dd标签最多地方，通常是具有标题，而标题下对应有若干列表简单的（栏目标题+对应标题列表）和标题对应下面有内容。在使用时候我们能简洁[HTML][]代码情况下，学会灵活使用dl dt dd，了解和掌握标签结构语法。

在以后开发[div+css][CSS]适当运用dl dt dd标签你将会体会到带来的便利。

**HTML Table tr td th表格标签元素知识篇//th 表示表格第一行！！！！！类似标题**

**<table>**表格布局篇，认识[html][HTML]表格基础语法，认识**table表格**结构语法，通过html table tr td、html table tr th表格实例掌握表格认识html表格table样式布局。同时table的样式可以通过[CSS][]样式控制其各式各样的样式。

**html table表格目录**

1.  [table表格语法与结构][table]
2.  [table标签使用说明][table 1]
3.  [Table表格标签使用场景][Table]
4.  [table表格案例][table 2]
5.  [DW软件输入表格布局][DW]
6.  [table表格总结][table 3]

### 一、table表格语法与结构   -   [TOP][TOP 1] ###

或者

以上2个表格结构中td和th使用，没有区别均可使用。//td==th

### 二、table标签使用说明   -   [TOP][TOP 1] ###

我们学习[DIV+CSS][CSS]了，不是就完全放弃丢弃table表格布局。想想我们为什么学习[DIV CSS][CSS]其中一个因素，让布局更简单、代码更简单，所以有时候我们也需要table表格来布局。  
比如，电子表格型的数据表格。

### 三、Table表格标签使用场景   -   [TOP][TOP 1] ###

这个是淘宝支付宝页面里任意截的一张表格运用图片：

![table表格实际应用地方][table 4]  
html table表格实际应用截图

### 四、Table tr td th表格使用案例   -   [TOP][TOP 1] ###

<table width="300" border="1" cellspacing="0"> 
           <tr> 
               <th>班级</th> 
               <th>日期</th> 
               <th>标题</th> 
           </tr> 
           <tr> 
               <td>一班</td> 
               <td>2012-5-10</td> 
               <td>标题1</td> 
           </tr> 
           <tr> 
               <td>二班</td> 
               <td>2012-5-20</td> 
               <td>标题2</td> 
           </tr> 
       </table>

DW软件里截图：

![table布局案例截图][table 5]  
table案例教程布局截图

谷歌浏览器效果截图：

![浏览器中table布局案例截图][table 6]  
table表格布局案例在浏览器中截图

### 五、DW软件输入表格标签   -   [TOP][TOP 1] ###

可以在DW软件中直接输入你要的表格：

第一步：单击DW软件“插入”，然后选择点击“表格（T）”

![dw软件布局table表格][dw_table]  
DW布局表格

第二步：在弹出“表格”设置选项卡，设置需要表格，行、列、宽度等属性

![html table表格布局使用软件布局截图][html table]  
[DW软件][DW 1]输入table布局

第三步：设置完后，点击“确定”，即可在DW输入标准的table表格标签。

### 六、DIVCSS5对于table表格总结   -   [TOP][TOP 1] ###

1、表格可以在DW输入，拖拽调整  
2、table表格实用于多列数据列表  
3、学习了DIV CSS还得学习TABLE  
4、table会使用灵活运用即可  
5、多列数据列表table标签要比使用div css节约代码，任意控制内容排版

[Link 1]: http://www.divcss5.com/html/h313.shtml
[dl dt dd]: http://www.divcss5.com/html/h88.shtml#no1
[Link 2]: http://www.divcss5.com/html/h88.shtml#no2
[dl dt dd 1]: http://www.divcss5.com/html/h88.shtml#no3
[dl dt dd 2]: http://www.divcss5.com/html/h88.shtml#no4
[TOP]: http://www.divcss5.com/html/h88.shtml#top
[Link 3]: http://www.divcss5.com/html/h380.shtml
[CSS]: http://www.divcss5.com/
[dl dt dd 3]: /images/20220731/4c21dfd839ec4ec9bcf8be9a944aabea.png
[html dl dt dd]: /images/20220731/7e9b8b47661c4b0d971763d9d206f0ea.png
[HTML]: http://www.divcss5.com/html/
[table]: http://www.divcss5.com/html/h380.shtml#no1
[table 1]: http://www.divcss5.com/html/h380.shtml#no2
[Table]: http://www.divcss5.com/html/h380.shtml#no3
[table 2]: http://www.divcss5.com/html/h380.shtml#no4
[DW]: http://www.divcss5.com/html/h380.shtml#no5
[table 3]: http://www.divcss5.com/html/h380.shtml#no6
[TOP 1]: http://www.divcss5.com/html/h380.shtml#top
[table 4]: /images/20220731/90e2616b8b564f8a89ad92ec929f6fb1.png
[table 5]: /images/20220731/eedebb89af204546bf9bc2a524d30461.png
[table 6]: /images/20220731/78e1821de340432f88c724c301064e54.png
[dw_table]: /images/20220731/a92fde71f9954a80893e528694c90fd0.png
[html table]: /images/20220731/217d25cf98254d4d994dea14eecfeb26.png
[DW 1]: http://www.divcss5.com/css-tool/t91.shtml