文章目录
一、表格标签
1. 表格的主要作用
表格主要用于显示,展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
**总结:**表格不是用来布局页面的,而是用来展示数据的
2. 表格的基本语法
<table> </table>
是用于定义表格的标签.<tr> </tr>
标签用于定义表格中的行,必须嵌套在<table> </table>
标签中.<td> </td>
用于定义表格中的单元格,必须嵌套在<tr> </tr>
标签中.- 字母
td
指表格数据( table data) , 即数据单元格的内容.
3. 表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
<th>
标签表示HTML表格的表头部分(table head的缩写)
总结:表头单元格也是单元格常用于表格第一行, 突出重要性,表头单元格里面的文字会加粗居中显示。
4. 表格属性
表格标签这部分属性我们实际开发我们不常用,后面通过CSS来设置.
目的有2个:
-
记住这些英语单词,后面CSS会使用.
-
直观感受表格的外观形态
属性名 | 属性值 | 描述 |
---|---|---|
align | left. center, right | 规定表格相对周围元素的对齐方式。 |
border | 1或“” | 规定表格单元是否拥有边框,默认为“0”,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度。 |
5. 表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分.
在表格标签中,分别用: <thead>
标签表格的头部区域、<tbody>
标签表格的主体区域。这样可以更好的分清表格结构。
<thead> </thead>
:用于定义表格的头部。<thead>
内部必须拥有<tr>
标签。一般是位于第一行。<tbody> </tbody>
:用于定义表格的主体,主要用于放数据本体。- 以上标签都放在
<table> </table>
标签中。
6. 合并单元格
特殊情况下,可以把多个单元格合并为一个单元格。
(1)合并单元格方式
●跨行合并: rowspan=“合并单元格的个数”
●跨列合并: colspan=“合并单元格的个数”
(2)目标单元格
●跨行:最上侧单元格为目标单元格,写合并代码
●跨列:最左侧单元格为目标单元格,写合并代码
(3)合并单元格的步骤
合并单元格3步曲:
-
先确定是跨行还是跨列合并。
-
找到目标单元格。写上合并方式=合并的单元格数量。比如:
<td colspan= "2" > </td>
. -
删除多余的单元格。
7. 案例分析
先书写制作表格的结构.
-
第一行里面是th表头单元格
-
第二行开始里面是td普通单元格
-
单元格里面可以放任何元素,文字链接图片等都可以。
后书写表格属性.
-
用到宽度高度边框cellpadding和 cellspacing
-
表格浏览器中对齐align
8. 总结
-
表格的相关标签
学习了table 标签
tr行标签
td单元格标签
th表头单元格标签
thead表格头部区域标签
tbody表格主体区域标签 -
表格的相关属性
-
合并单元格
二、列表标签
表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。
根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。
1.无序列表
<ul>
标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>
标签定义。
无序列表的基本语法格式如下:
-
无序列表的各个列表项之间没有顺序级别之分,是并列的。
-
<ul> </ul>
中只能嵌套<li> </li>
,直接在<ul> </ul>
标签中输入其他标签或者文字的做法是不被允许的。 -
<li>
与</li>
之间相当于一个容器,可以容纳所有元素。 -
无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。
2. 有序列表
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。
在HTML标签中,<ol>
标签用于定义有序列表,列表排序以数字来显示,并且使用<li>
标签来定义列表项。
有序列表的基本语法格式如下:
-
<ol> </ol>
中只能嵌套<li></li>
,直接在<ol> </ol>
标签中输入其他标签或者文字的做法是不被允许的。 -
<li>
与</li>
之间相当于一 个容器,可以容纳所有元素。 -
有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。
3. 自定义列表
在HTML标签中,<dl>
标签用于定义描述列表(或定义列表) , 该标签会与<dt>
(定义项目/名字)和 <dd>
(描述每一个项目/名字) 一起使用。
其基本语法如下:
-
<dl> </dl>
里面只能包含<dt>
和<dd>
. -
<dt>
和<dd>
个数没有限制,经常是一个<dt>
对应多个<dd>
.
总结
1.表格总结
-
表格的相关标签
学习了table 标签
tr行标签
td单元格标签
th表头单元格标签
thead表格头部区域标签
tbody表格主体区域标签 -
表格的相关属性
-
合并单元格
2. 列表总结
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序标签 | 里面只能包含li,没有顺序, 使用较多。li里面可以包含任何标签 |
<ol></ol> | 有序标签 | 里面只能包含li,有顺序, 使用相对较少。 li里面可以包含任何标签 |
<dl></dl> | 自定义标签 | 里面只能包含dt和dd。dt和dd里面可以放任何标签 |
列表布局在学完css后再来完成。