列表与表格的一些学习

Posted 2021-01-13 zzq123

列表分为无序列表和有序列表

无序列表：

　　　　无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

　　　　无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

网页显示为：●Coffee

　　　　　    ●Milk

有序列表：

   　　　　同样，有序列表也是一列项目，列表项目使用数字进行标记。

　　　　　有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

网页显示为：1 Coffee

　　　　　　2 Milk

其中列表属性type可以定义前面序号的类型：如type=1，则显示阿拉伯数字1234   type=A，则显示ABCD

类型主要有 1   A   a   i    I   等等

其中start可以控制编号开始的数字例如：

<ol type="A" start="2" >
    <li>银河系</li>
    <li>太阳系</li>
    <li>地球</li>
</ol>

在网页显示为：  B 银河系

　　　　　　　  C 太阳系

　　　　　　　  D 地球

Table表格：

 

table是副标签，它的子标签有： tr（行）、th（表头）、td（内容）

table属性定义边框为boder，html定义属性格式为width=90%   css定义属性格式为style=width：90%；

融合表格：

colspan是从自身开始往右融合几个（多列）

<table border="1px"style="border-collapse: collapse;" width="90%">
            <!--这是表头-->
            
            <tr>
                <th>季度</th>
                <th colspan="2">收入（元）</th>
                <th colspan="2">支出（元）</th>
            </tr>
            <!--这是第一行内容-->
            
            <tr style="text-align: center;">
                <td></td>
                <td>建筑</td>
                <td>房地产</td>
                <td>销售服务</td>
                <td>办公</td>            
            </tr>
            <!--这是第二行内容-->
            
            <tr style="text-align: center;">
                <td>第一季度</td>
                <td>306000</td>
                <td>282000</td>
                <td>9000</td>
                <td>10000</td>
            </tr>
            <!--这是第三行内容-->
            <tr style="text-align: center;">
                <td>第二季度</td>
                <td>450000</td>
                <td>364000</td>
                <td>54000</td>
                <td>20000</td>
            </tr>
        </table>

在网页显示为：