绝对都是干货---HTML 列表标签、表格标签详解

列表标签

作用:给一堆数据列表语义,也就是告诉游览器这一堆数据是一个整体,

一 . 无序标签(使用最多)

1 . 作用:给一堆数据添加列表语义,并且这一堆数据都没有先后之分。
2. 格式

<ul>
<li>需要显示的条目内容</li>
</ul>

3 . 注意点:
1.<ul>标签是用来添加语义的,而不是用来添加小圆点的。
2.<ul>标签和<li>标签是一个组合,一般都是同时出现的。

二 . 有序列表<ol>

1.作用:给一堆数据添加列表语义,并且这一堆数据有先后之分。
2.格式

<ol>
<li>需要显示的条目内容<li>
</ol>

三.定义列表

1.格式:

<dl>
   <dt></dt>
   <dd></dd>
   <dt></dt>
   <dd></dd>
<dl> 

2.定义标签的作用:
2.1 做图文混排
2.2 做网站底部的相关信息

3.注意点:dl 和dd 是整体出现的,推荐使用一个dt对应一个dd。当有需要的时候,可以在dt或dd中添加其他标签。

表格标签

1.格式:

<table>
<tr>
<td>  </td>
</tr>
</table>

2.作用:用来给一堆数据添加表格语义。

一. 表格标签的属性

1.宽度和高度的属性:可以给table标签和td标签使用

2.水平对齐和垂直对齐:其中水平对齐可以给table和tr和td使用。后者只能给tr和td使用

2.1:给table标签设置align属性可以使整个表格水平方向对齐。
2.2:给tr标签设置align属性可以控制当前行中所有单元格内容的水平方向的对齐方式。
2.3:给td标签设置align属性可以控制当前单元格中内容在水平方向对齐。
2.4.注意点:如果在td中设置了align属性,tr中也设置了align属性,那么单元格中的内容会按照td中设置的来对齐。

3. valign属性

3.1 给tr设置valign属性可以控制当前行中所用单元格内容的垂直方向对齐。
3.2 给td设置valine属性可以控制当前单元格内容在垂直方向对齐。
3.3.如果在td中设置了valign属性,tr中也设置了 valign属性,那么单元格中的内容会按照td中设置的来对齐。

4.外边距和内边距

4.1 注意点:只能给他table标签使用。
4.2 外边距:就是单元格与单元格之间的距离。
4.3属性格式:cellspacing=“0-x” 。默认情况下单元格与单元格之间的间距是2px。

5.内边距
5.1 定义:单元格边框与文字之间的距离。
5.2 属性格式:cellpadding=""
5.3 默认情况下,间距是1px.

二.细线表格

1.细线表格的制作方法:

步骤1. 给table标签设置bgcolor=“black”
步骤2. 给tr标签设置bgcolor=“white”
步骤3. 给table标签设置cellspacing=“1px”

2.注意点:
bgcolor这个属性可以给table,tr ,td使用。

三.表格里面的其他属性

1 表格标题:有一个标签caption标签,用来放置表格的标题

2 注意点:

2.1 这个标签一定要写在table标签中,否则无效。
2.2 这个标签一定要紧跟在table标签后。

3.标题单元格标签:用来存储每一列的标题,这个标签叫做th标签。到此为止,我们发现,表格中有两种单元格,一种是td,一种是th。td是用来存储数据的,th是专门用来存储当前列的标题的。

4.表格的结构;由于表格中存储的数据比较复杂,为了方便管理,我们可以对表格中存储的数据进行分类1.-表格的标题、2.-表格的表头、3.-表格的主题信息、4.-表格的页尾信息
4.1 表格的完整结构

<table>
<caption>表格的标题</caption>
  <thead>
      <tr>
	  <th>每一列的标题</th>
      </tr>
  </thead>
  <tbody>
	<tr>
	   <td>数据</td>
	</tr>
  </tbody>
  <tfoot>
	<tr>
	   <td>数据</td>
	</tr>
  </tfoot>
</table>

4.2 caption作用:指定表格的标题、-thead作用:指定表格的表头信息、-tbody作用:指定表格的主体信息、-tfoot作用:指定表格的附加信息。

4.3 注意点:
4.3.1.如果我们没有编写tbody,系统会自动非我们添加tbody标签。
4.3.2.如果指定了thead和tfoot,那么在修改整个表格高度是,thead和tfoot有自己的默认高度,不会随着表格的高度变化而变化。

四. 单元格合并**

1.水平方向上的单元格合并:在td里面添加一个属性colspan,来指定吧某一个单元格当做多个单元格来看待。
1.1 注意点:单元格合并永远都是向后或者向下合并,而不能向前或者向上合并。

2.垂直方向上的单元格合并:在td标签里面添加一个属性rowspan,来指定把某一个单元格当做多个单元格看待(垂直方向。)

猜你喜欢

转载自blog.csdn.net/weixin_44989801/article/details/106616238
今日推荐