持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第13天,点击查看活动详情
-
定义列表标签:自定义列表不仅仅是一列项目,而是项目及其注释的组合。由三个标签组成完整的结构,包含
<dl>、<dt>和<dd>-
<dl>:definition list,表示定义一个自定义列表的大结构 -
<dt>:definition term,表示定义自定义列表中的一个主题或者术语 -
<dd>:definition description,定义解释项,表示描述或解释前面的定义主题 -
<dl>内部只能嵌套<dt>和<dd>,<dt>与<dd>是同级关系
-
-
表格至少由三个标签组成,分别是
<table>、<tr>、<td>-
table:表格,定义的是整个表格大结构
-
tr:table rows,表格的行,定义的是表格由多少行组成
-
td:table data,表格数据,也叫表格单元格,定义的是每一行内部的单元格
-
-
<table>的属性:border 属性值:数字,表示像素值;表格的单元格之间有默认的空隙,会导致双线边框。解决办法:设置标签样式属性style,属性值:border-collapse:collapse -
表头单元格:如果要绘制表头,使用标签
<th>,table head data,表头单元格;在表格中绘制的时候,替换的是<td>的位置;<th>标签中自带默认的css样式效果,文字显示粗体并且居中 -
单元格属性:表格的单元格可以进行合并,通过
<th>和<td>的两个属性可以进行合并设置;rowspan:跨行和并,上下的合并;colspan:跨列合并,左右的合并;属性值:数字,数字是几表示跨几行(列)合并 -
制作表格的技巧1:
-
先列出所有,以最小单元格为标准
-
再添加每一行的和单元格
-
划分单元格所在行时,顶边对齐的属于同一行
-
将所有行和列写完后,再查看哪个单元格有跨行或跨列,属性值的个数要参考最小的单元格
-
将所有
<colspan>和<rowspan>标签都写在标签中
-
-
表格的分区标签:都是双标签
caption:表格的标题,内部书写标题文字
thead:table head,表格的头部,内部嵌套tr>th
tbody:table body,表格的主体,内部嵌套tr>td
tfoot:table foot,表格的页脚,内部嵌套tr>td
注意:四个分区可以选择性的进行组合。不论书写顺序如何颠倒,浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的
-
制作表格技巧2:
-
先写大分区标签结构
-
填充每个分区的内部内容
-
如果有合并单元格内容,进行单元格合并
-