HTML基础

一、列表

1.列表的应用场景

场景：在网页中按照行展示关联性的内容：如：新闻列表、排行榜、账单等

特点：按照行的方式，整齐显示内容

种类：无序列表、有序列表、自定义列表

2.无序列表

场景：在网页中表示一组无顺序之分的列表

标签组成：

<ul>：表示无序列表的整体，用于包裹li标签

<li>：表示无序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示圆点标识

注意：1.ul标签中只允许包含li标签              2.li标签可以包含任意内容

3.有序列表

场景：在网页中表示一组有顺序之分的列表：如：排行榜

标签组成：

<ol>:表示有序列表的整体，用于包裹li标签

<li>:表示有序列表的每一项，用于包含每一行的内容

显示特点：列表的每一项前默认显示序号标识

注意： 1.ol标签中只允许包含li标签                     2.li标签可以包含任意内容

4.自定义列表

场景：在页面的底部导航中通常会使用自定义列表实现

标签组成：

<dl>:表示自定义列表的整体，用于包裹dt/dd标签

<dt>:表示自定义列表的主题

<dd>:表示自定义列表的针对主题的每一项内容

显示特点：dd前会默认显示缩进效果

注意：1.dl标签中只允许包含dt/dd标签                2.dt/dd标签可以包含任意内容

二、表格标签

1.表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据：如“学生成绩表”

基本标签：

<table>：表格整体，可用于包裹多个<tr>

<tr>：表格每行，可用于包裹<td>

<td>：表格单元格，可用于包裹内容

注意点：标签的嵌套关系：table>tr>td

2.表格的相关属性

场景：设置表格基本展示效果

常见的相关属性：（在table中添加）

border——边框宽度

width——表格宽度（宽、高一般在CSS中设置）

height——表格高度（宽、高一般在CSS中设置）

注意：实际开发当中样式效果推荐用CSS设置

3.表格的标题和表头单元格标签：

场景：在表格中表示整体大标题和一列小标题

其他标签：

<caption>:表格大标题——表示表格整体大标题，默认在表格整体顶部居中位置显示

<th>:表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意：

<caption>标签书写在table标签内部

<th>标签书写在<tr>内部，用于替换<td>

4.表格的结构标签（了解）：

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更清晰

结构标签：

<thead>：表格头部

<tbody>：表格主体

<tfoot>：表格底部

注意：1.表格结构标签内部用于包裹<tr>标签        2.表格的结构标签可以省略

5.合并单元格

场景：将水平或垂直多个单元格合并成一个单元格

跨行合并：垂直合并成一个                                                跨列合并：水平合并成一个

代码实现：

        合并单元格步骤：

                1.明确合并哪几个单元格

                2.通过左上原则，确定保留谁删除谁：上下合并——只保留最上的，删除其他

                                                                             左右合并——只保留最左的，删除其他

                3.给保留的单元格设置：跨行合并（rowspan）/跨列合并（colspan）

                        rowspan：（属性值）合并单元格的个数——跨行合并，将多行单元格垂直合并

                        colspan：（属性值）合并单元格的个数——跨列合并，将多列的单元格水平合并

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

举例：要合并100分和99分两个单元格，并且只保留100分这个数据。

        1.明确合并的单元格

        2.确定保留谁，删除谁：保留100分，删除99分；

        3.给保留的单元格设置：跨行合并——使用rowspan，合并单元格数为2