HTML5学习干货分享之列表和表格

小圆2023090237

已于 2024-10-09 23:14:53 修改

阅读量657

点赞数 18

文章标签： html5 学习前端

于 2024-10-07 21:08:20 首次发布

本文链接：https://blog.csdn.net/Wjunnn/article/details/142693304

版权

HTML5学习记录分享3

列表
表格

今天的笔记部分是列表和表格。

列表

列表经常被用于写提纲和品种说明书。通过使用列表标签可以使内容在网页中条理清晰、层次分明、格式美观地表现出来。
而列表地存在形式主要分为：无序列表、有序列表、定义列表和嵌套列表。这里主要记录无序列表、有序列表和嵌套列表的学习。

无序列表

无序列表就是列表中列表项的前导符号没有一定顺序，而是用黑点、圆圈、方框等一些特殊符号标识。
创建无序列表主要使用HTML的<ul>标签和<li>标签来标记。其中<ul>标签标识一个无序列表的界限；<li>标签标识一个无序列表项。

<ul type="符号类型"> <!-- "disc"为实心圆点；"circle"为空心圆点；"square"为方块 -->
   <li type="符号类型1">第一个列表项
   <li type="符号类型2">第二个列表项
...
</ul>

无序列表举例

有序列表

有序列表是一个由特定顺序的列表的集合。在有序列表中，各个列表项有先后顺序，它们之间以编号来标记。用<ol>标签可以建立有序列表，表项的标签仍用<li>。在浏览器中显示时，有序列表整个表项与上下文本之间各有一行空白；表项向右缩进并左对齐；个表项前带顺序号。

<ol type="符号类型"> 
   <li type="符号类型1">第一个列表项
   <li type="符号类型2">第二个列表项
...
</ol>

有序的符号标识包括：阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。

<ol>标签的type属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</ol>之前的表项加重记号。

<ol type="1"><!-- 序号为数字 -->
<ol type="A"><!-- 序号为大写英文字母 -->
<ol type="a"><!-- 序号为小写英文字母 -->
<ol type="I"><!-- 序号为大写罗马数字 --> 
<ol type="i"><!-- 序号为小写罗马数字 -->

有序列表举例

嵌套列表

嵌套列表指无序列表和有序列表嵌套混合使用。嵌套列表可以吧页面分为多个层次，给人以很强的层次感。
有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为：无序列表中嵌套有序列表、有序列表中嵌套有序列表、无序列表中嵌套无序列表、有序列表中嵌套无序列表。

<body>
    <h2>商城支付导向</h2>
    <ul type="circle">
    <li>支付方式</li>
    <ul type="disc">
        <li>货到付款</li>
        <li>财付通</li>
        <li>支付宝</li>
        <li>网银在线</li> 
    </ul>
    </ul>
    <hr>
    <ul type="circle">
        <li>网银在线支付步骤</li>
    <ol type="A">
        <li>选择您要使用的网上银行；</li>
        <li>显示您的应付总价，点击“确认无误，付款”；</li>
        <li>确定您在银行的预留信息，点击确定；</li>
        <li>输入您的网银账号、登陆密码、验证码；</li>
        <li>支付成功，提示“已完成付款”。</li>
    </ol>
    </ul>
    <hr>
</body>

嵌套列表网页效果

表格

表格是由行和列组成的二维表，每行又由一个或者多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，它是组成表格的最基本单元。单元格的内容是数据，因此也称数据单元格。数据单元格可以包含文本、图片、列表、文字段落、表单、水平线或内嵌的表格等元素。

表格基本语法

在HTML语法中，表格主要通过<table>、<tr>、<td>3个标签构成。
表格的标签为<table>，行的标签为<tr>，列的标签<td>，<th>。其中<th>标签可以帮助搜素引擎实现更好得索引，还可以帮助CSS更好地控制外观，<th>中的scope属性取值col或row用来表明此元素是列标题还是行标题。<tr>、<th>、<td>三个标签都有align属性，就是水平对齐方式设置。
注
在浏览器显示时，<th>标签的文字按粗体显示。

 <h2>创建表格练习</h2>
    <table border="1"width="400" height="200">
        <tr align="center">
            <th></th>
            <th scope="col">教师人数</th>
            <th scope="col">学生人数</th>
            <th scope="col">总人数</th>
        </tr>
        <tr align="center">
            <th scope="row" align="center">2021年</th>
            <td>40</td>
            <td>400</td>
            <td>440</td>
        </tr>
        <tr align="center">
            <th scope="row" align="center">2021年</th>
            <td>100</td>
            <td>1500</td>
            <td>1600</td>
        </tr>
     </table>

表格的常用属性

属性	用法
border	设置表格边框的宽度
width	设置表格的宽度
height	设置表格的高度
cellpadding	设置单元个与其内容之间的距离
cellspacing	设置单元格之间的距离
align	设置表格相对其他元素的对齐方式，有：left、center、right
rules	设置表格中的表格线显示方式，有：none、groups、rows、clos、all（默认）
frame	设置表格的外部边框的显示方式，有：void、above、below、beside、hsides、vsides、lhs、rhs、box、border

设置表格背景

设置表格背景图像
表格背景图像可以是GIF、JPEG 或PNG 三种图像格式。设置 background 属性，可以设定表格背景图像。
同样，可以使用 bgcolor 属性和 background 属性为表格中的单元格添加背景颜色或背景图像。需要注意的是，为表格添加背景颜色或背景图像时，应该使表格中的文本数据颜色与表格的背景颜色或背景图像形成足够的反差，否则，不容易分辨表格中的文本数据。

表格数据的对齐方式

1）行数据水平对齐。使用 align 可以设置表格中数据的水平对齐方式，如果在＜tr>标签中使用 align属性，将影响整行数据单元的水平对齐方式。align属性的值可以是left.
center、right，默认值为 left。
（2）单元格数据水平对齐。如果在某个单元格的<td>标签中使用 align 属性，那么align 属性只影响该单元格数据的水平对齐方式。
（3）行数据垂直对齐。如果在<tr＞标签中使用 valign 属性，那么 valign 属性将影响整行数据单元的垂直对齐方式，这里的valign 值可以是top、middle、bottom、baseline，默认值是middle。

不规则表格

colspan和rowspan属性用于建立不规则表格。
所谓不规则表格是单元格的个数不等于行乘以列的数值,也就是单元格在行和列中的分布是不平均的。表格在实际应用中经常使用不规范表格,需要把多个单元格合并为一个单元格,也就是要用到表格的跨行、跨列等功能。

跨行

跨行是指单元格在垂直方向上合并,跨行，即垂直合并(保留上边单元格，删掉下边多余单元格)。语法如下:

<table>
<tr>
  <td rowspan="所跨的行数">单元格内容</td>
</tr>
</table>

其中,rowspan指明该单元格应有多少行的跨度,在<th>和<td> 标签中使用

跨列

跨行是指单元格在垂直方向上合并,跨列，即水平合并(保留左边单元格，删掉右边多余单元格)。语法如下:

<table>
<tr>
  <td rowspan="所跨的行数">单元格内容</td>
</tr>
</table>

其中,rowspan指明该单元格应有多少行的跨度,在<th>和<td> 标签中使用。

跨行跨列

字面意思，遵循先水平后垂直合并。语法如下：

<table>
<tr>
 <td colspan="2" rowspan="2">单元格内容</td>
</tr>
</table>

举例：

<h2>合并单元格练习</h2>
     <table border="1" width="400" height="200">
        <tr align="center">
            <th></th>
            <th scope="col">教师人数</th>
            <th scope="col">学生人数</th>
            <th scope="col">总人数</th>
        </tr>
        <tr align="center">
            <th scope="row" align="center">2021年</th>
            <td colspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr align="center">
            <th scope="row" align="center">2021年</th>
            <td></td>
            <td></td>
        </tr>
        <tr align="center">
            <th scope="row" align="center">2023年</th>
            <td colspan="2" rowspan="2"></td>
            <td></td>
        </tr>
        <tr align="center">
            <th scope="row" align="center">2024年</th>
            <td></td>
        </tr>
     </table>