JAVA前端web开发学习资源（四，HTML标签学习：列表，表格）

承接JAVA前端web开发学习资源（三，HTML标签学习：音频，视频，链接）

文章目录

目录

文章目录

前言

一，列表标签

1，无序标签

2，有序标签

3，自定义列表

二，表格标签

1，表格基本标签

2，表格相关属性

 3，表格标题和表头单元格标签

4，表格结构标签

 5，合并单元格

---

---

前言

本篇学习承接上篇JAVA前端web开发学习资源（三，HTML标签学习：音频，视频，链接）。笔者此时已经学完了HTML5的基础知识，将CSS基础知识习得了一半，并且课外学习了Git的用法。接下来，笔者学会CSS后会接着学习JS，再接着学习vue框架。让我们一起努力。

本篇列表与表格也是相当重要的一部分，我将我的学习笔记记录于下。

---

一，列表标签

1，无序标签

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

标签组成：

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

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

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

注意：ul标签只允许包含li标签，li标签可以包含任意内容；虽然不能放在ul里但功能可以放在li里。

例：

<ul>
    <li><a href="#"></a>谷歌跳转</li>
    <li><a href="#"></a>IE跳转</li>
    <li><a href="#"></a>火狐跳转</li>
 </ul>

2，有序标签

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

标签组成：

ol：表示有序列表整体，用于包裹li标签。

li：表示有序列表每一项，用于包含每一项内容。

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

注意（与无序同理）：ol标签只允许包含li标签，li标签可以包含任意内容；虽然不能放在ol里但功能可以放在li里。

例：

<ol>
    <li><a href="#"></a>谷歌跳转</li>
    <li><a href="#"></a>IE跳转</li>
    <li><a href="#"></a>火狐跳转</li>
 </ol>

3，自定义列表

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

标签组成：

dl：表示自定义列表整体，用于包裹dt/dd标签。

dt：表示自定义列表的主题。

dd：表示自定义列表针对主题的每一项内容。

 特点：dd前会默认显示缩进效果，dt/dd标签可以包含任意内容。

例：

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
 </dl>

二，表格标签

1，表格基本标签

作用：在网页中以行+列的单元格的方式整齐展示数据。

基本标签：

table：表格整体，可以包括多个tr。

tr：表格每行，可以包括多个td。

td：表格单元格，可以包括多个内容。

嵌套关系：table>tr>td

 <table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>ID</td>
    </tr>
    <tr>
        <td>张伟</td>
        <td>19</td>
        <td>1256434</td>
    </tr>
 </table>

 注意：添加格子需要属性。

2，表格相关属性

作用：设置表格基本展示效果

常见相关属性

border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意：实际开放时，针对样式效果推荐用CSS设置。

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>ID</td>
    </tr>
    <tr>
        <td>张伟</td>
        <td>19</td>
        <td>1256434</td>
    </tr>
 </table>

 3，表格标题和表头单元格标签

作用：在表格中表示整体大标题和一系列小标题。

caption（表格大标题）：表格整体大标题，默认在顶部居中。

th（表头单元格）：表示一列小标题，通常用于表格第一行，默认加粗居中。

<table border="1">
    <caption>学生登记</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>ID</th>
    </tr>

    <tr>
        <td>张伟</td>
        <td>19</td>
        <td>1256434</td>
    </tr>

 </table>

4，表格结构标签

作用：让表格内容结构分组，突出表格不同部分（头，主，底），让语义更清晰。

结构标签：

thread：头部

tbody：主体

tfoot：底部

 5，合并单元格

作用：将水平垂直多个单元格合并成一个单元格。

左上原则：

上下合并：只保留最上的，其他删除。

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

跨行合并（将多行的单元格垂直合并）：

属性名：rowapan

属性值：合并单元格个数

<table border="1">
    <caption>学生登记</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>ID</th>
    </tr>

    <tr>
        <td>张伟</td>
        <td rowspan="2">19</td>
        <td>1256434</td>
    </tr>
    <tr>
        <td>刘伟</td>
        
        <td>1256434</td>
    </tr>

 </table>

 跨列合并（将多列的单元格水平合并）：

属性名：colspan

属性值：合并单元格个数

<table border="1">
    <caption>学生登记</caption>
    <tr>
        <th>姓名</th>
        <th>吃葡萄吗</th>
        <th>吃香蕉吗</th>
    </tr>

    <tr>
        <td>张伟</td>
        <td colspan="2">吃</td>
        
    </tr>

 注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thred,tbody,tfoot)。

---