HTML基础（二）

本文已参与「新人创作礼」活动．一起开启掘金创作之路

1.表格

1.表格的主要作用

1.表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理

2.表格不是用来布局页面的,而是用来展示数据的。 ​ 3.表格的具体用法：

     <table>
            <tr>
                <td>单元格内的文字</td>
                ...
            </tr>
            ...
        </table>

1. <table> </table> 是用于定义表格的标签。 2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
2. 用于定义表格中的单元格，必须嵌套在标签中。
3. 字母 td 指表格数据（table data），即数据单元格的内容。

2.表头单元格标签

​ 表头标签的具体实现：

    <table>
            <tr>
                <th>姓名</th>
                ...
            </tr>
            ...
        </table>

1. 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)
2. 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)
3. 表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

3.表格结构标签

​ 使用场景: ​ 因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分. ​ 在表格标签中，分别用：标签 表格的头部区域、标签 表格的主体区域. 这样可以更好的分清表格结构。

4.总结

 1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
 2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
 3.  以上标签都是放在 <table></table> 标签中。

2.合并单元格方式：

跨行合并：rowspan="合并单元格的个数" ， 最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan="合并单元格的个数" ，最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如：。删除多余的单元格。

表格的相关标签

	table   thead  body  tr  th  td 

表格的相关属性

​

cellspacing    cellpadding     width  height  border 

合并单元格

	  rowspan   collspan

3.列表

1. ​ 表格是用来显示数据的，那么列表就是用来布局的。
2. ​ 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
3. ​ 根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

1.无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用

   <ul> 
       <li>列表项1</li> 
       <li>列表项2</li>  
       <li>列表项3</li>   
       ...
   </ul>

<ul></ul> 中只能嵌套 <li></li>，
直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。