从HTML开始接触前端Day02

目录

注：上一天的目录继续学习

2、HTML标签类学习

2.5列表标签

  2.5.1列表的应用场景

  2.5.2无序列表

  2.5.3有序列表

  2.5.4自定义列表

 2.6表格标签

  2.6.1基本标签：

  2.6.1表格相关属性

  2.6.3表格标题和表头单元格标签

  3.6.4表格结构标签

  3.6.5合并单元格

---

注：上一天的目录继续学习

2、HTML标签类学习

2.5列表标签

        能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建

  2.5.1列表的应用场景

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

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

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

  2.5.2无序列表

        在网页中表示一组无顺序之分的列表，如：新闻列表

        标签组成：

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

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

        显示特点：

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

        注：

•                 <li>标签中可以包含任意内容
•                 <ul> 标签中只允许包含<li>标签

  2.5.3有序列表

        在网页中表示一组有顺序之分的列表，如:排行榜

        标签组成：

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

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

        显示特点：

                列表的每一项前默认显示序号列表

        注：

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

  2.5.4自定义列表

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

        标签组成：

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

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

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

        显示特点：

                <dd>前会默认显示缩进效果

        注意点：

                <dl>标签中只允许包含<dt>/<dd>标签

                <dt>/<dd>标签可以包含任意标签

 2.6表格标签

        能够使用表格相关标签和属性，实现网页中表格结构的搭建

        在网页汇总以行+列的单元格的方式整齐展示和数据，如：学生成绩表

  2.6.1基本标签：

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

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

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

        注：

                标签的嵌套关系：<table>大于<tr>大于<td>

  2.6.1表格相关属性

        设置表格基本展示效果

        常见相关属性：

                <border>属性值是数字，效果作用为边框宽度

                <height>属性值是数字，效果作用为表格宽度

                <width>属性值是数字，效果作用为表格高度

        注：

                实际开发时针对于样式效果推荐使用CSS设置

  2.6.3表格标题和表头单元格标签

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

        其他标签：

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

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

        注：

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

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

  3.6.4表格结构标签

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

        结构标签：

                <thead>表格头部

                <tbody>表格主体

                <tfoot>表格底部

        注：

                表格结构标签内部用于包裹<tr>标签

                表格的结构标签可以省略

  3.6.5合并单元格

        合并单元格的步骤：

                (1)明确合并哪几个单元格

                (2)通过左上原则，确定保留谁删除谁

                        上下合并--->只保留最上的，删除其他

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

                (3)给保留的单元格设置：跨行合并<rowspan>或者跨列合并<colspan>

                        <rowspan>合并单元格的个数，跨行合并后，将多行的单元格垂直合并

                        <colspan>合并单元格的个数，跨列合并后，将多列的单元格水平合并

        注：

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