全栈：前端第三天-优快云博客

前端标签之列表，表格

一、列表标签

列表的形式分为三种，分别是有序列表，无序列表和自定义列表。

二、列表的嵌套

三、表格标签

在表格中还有一个类似于的标签：（table head）

表格内的单元格合并

前端标签之列表，表格

一、列表标签

ol	（ordered list）定义有序列表
ul	（unordered list）定义无序列表
dl	(definition list) 定义自定义列表
li	（list item）定义列表项目
dt	（definition title）定义自定义标题
dd	（definition description）定义自定义描述

列表的形式分为三种，分别是有序列表，无序列表和自定义列表。

1.有序列表

由 <ol> 标签来定义有序列表，一般形式为 <ol> </ol>。

<ol>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
</ol>

其具体效果为

作为有序列表，自带默认格式以数字开头，进行从小到大的有序排列。在这里插入一个属性标签来定义前面的排序符号。

    <ol type="">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>

在type中可以对有序列表的序号进行一个改变，具体属性值和显示如下

1	显示为数字序号（该属性为默认值）
A	显示为大写字母序号
a	显示为小写字母序号
I	显示为大写罗马数字序号
i	显示为小写罗马数字序号

对其进行一个简单的应用：

<ol type="1">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>

    <ol type="A">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>


    <ol type="a">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>


    <ol type="I">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>


    <ol type="">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>


    <ol type="i">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ol>

除了type属性，还有两个定义有序列表顺序和起始位置的属性标签

   <ol start="">

start（开始）标签，可以定义有序列表的序号开始时的起始值。

注：该标签的属性值只可为数字，代码会自动转换会对应序号的起始位置。

reversed（相反的）标签，该标签可以定义有序列表呈倒序排列。

   <ol reversed="">

2.无序列表

由<ul标签来定义无序列表，该标签属于双标签。标签的用法与有序列表标签<ol>相同，但是默认属性和type所使用的属性值有区别。

    <ul type="disc">
        <li>无序列表项</li>
        <li>无序列表项</li>
        <li>无序列表项</li>
    </ul>

    <ul type="circle">
        <li>无序列表项</li>
        <li>无序列表项</li>
        <li>无序列表项</li>
    </ul>

    <ul type="square">
        <li>无序列表项</li>
        <li>无序列表项</li>
        <li>无序列表项</li>
    </ul>

在无序列表中，该属性的属性值为

disc	实心圆（默认值）
circle	空心圆
square	实心小方块

3.自定义列表

除开有序列表和无序列表以外，还有一种适合用于编写多项图文的自定义列表。由<dl>标签定义自定义列表，该列表的具体格式和有序，无序列表的具体格式大致形同。但是列表内由<dt>和<dd>进行填充。

    <dl>
        <dt>这是一个自定义列表的标题</dt>
            <dd>这是一个自定义列表的项目</dd>
            <dd>这是一个自定义列表的项目</dd>
            <dd>这是一个自定义列表的项目</dd>
        <dt>这是一个自定义列表的标题</dt>
            <dd>这是一个自定义列表的项目</dd>
            <dd>这是一个自定义列表的项目</dd>
            <dd>这是一个自定义列表的项目</dd>
        <dt>这是一个自定义列表的标题</dt>
            <dd>这是一个自定义列表的项目</dd>
            <dd>这是一个自定义列表的项目</dd>
            <dd>这是一个自定义列表的项目</dd>
    </dl>

为了方便进行区分，我在代码区域对<dd>标签进行了缩进效果，由一个<dt>标签作为开头，<dd>标签作为内容，在浏览器解析时，会自动对<dd>标签进行一个首行缩进的效果，不受代码区域的影响。

二、列表的嵌套

当对于三个列表有一个了解后，我们可以对列表进行嵌套操作，即有序列表内嵌套无序列表，或无序列表内嵌套有序列表。

    <ol>
        <li>
            有序列表项
            <ul>
                <li>
                    无序列表项
                    <ol>
                        <li>有序列表项</li>
                        <li>有序列表项</li>
                        <li>有序列表项</li>
                    </ol>
                </li>
                <li>无序列表项</li>
                <li>无序列表项</li>
            </ul>
        </li>
        <li>有序列表项</li>
        <li>有序列表项</li>
    </ol>

    <ul>
        <li>
            无序列表项
            <ol>
                <li>有序列表项</li>
                <li>有序列表项</li>
                <li>有序列表项</li>
            </ol>
        </li>
        <li>无序列表项</li>
        <li>无序列表项</li>
    </ul>

列表嵌套作为一个简单嵌套手段，嵌套时注意嵌套位置应在<li> 标签下插入完整的列表标签和列表项目。且当嵌套多个列表时，列表符号会进行改变，已区分各级列表。

三、表格标签

border	规定表格的边框和边框宽度（属性值为数字，0为无边框）
width	定义表格的宽（px）当该项单位为百分号（%）时，该表格的宽即相对于表格父级元素的宽
height	定义表格的高
cellspacing	定义单元格之间的距离
cellpadding	定义单元格与内容之间的间距
bgcolor	定义背景颜色
align	水平对齐方式（left靠左 center居中 right靠右 justify两端对齐）
valign	内容垂直对齐方式（top顶部 middle居中 bottom底部 baseline下边缘线）

使用<table>标签来定义一张表格的主体部分，<tr>标签来定义表格的行，<td>标签来定义在一行内有多少个单元格。

    <table>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
    </table>

在编码时，当我们使用<table> 来定义一个新的表格，可以在开始标签内调整他的属性：

    <table border="" width="" height="" cellspacing="" cellpadding="" bgcolor="" align="">

<border>标签定义表格的边框时会自动在单元格和外边框内产生一个默认空白。这时就需要使用<cellspacing>来定义这个默认宽为0。而<cellpadding>则用来设置每个单元格内的内容和单元格边框之间的距离。

表格具有宽高属性，可以使用<width> 和<height>属性来进行定义，<width>定义的是表格的总宽度，而<height>标签则较少使用，一般表格是使用内容将表格撑开。

<align>标签可以定义表格在其父级元素中所占的相对位置，该属性在表格中只有left，center，right三个属性值。且表格本身不涉及<valign>标签的使用。

使用<tr>标签定义行时，可以定义行的高<height>，水平对齐方式<align>，垂直对齐方式<valign>，背景颜色<bgcolor>，这时在水平对齐方式中就可以使用justify来对内容进行一个两端对齐的定义。

在<tr>标签内，使用<td>标签定义一个或多个单元格，相较于<tr>标签，<td>标签的宽高属性都是可以进行定义。

在表格中还有一个类似于<td>的标签：<th>（table head）

该标签定义表头，默认格式为字体加粗，水平垂直居中。（一个<th>可以当<td>使用）他的使用方法和属性使用与<td>标签相同。

这里插入几个不常用的标签：

tbody：定义表格的主体(没设置时，会自动生成) table body

thead：定义表格的页眉

<td colspan="">    </td>

tfoot：定义表格的页脚

caption：定义表格的标题

表格内的单元格合并

在创建一个表格之后，我们可以对表格内的单元格进行合并以达到我们所需要的表格样式。

rowspan	跨行合并，向下合并
colspan	跨列合并，向右合并

在属性值的位置填入数字来确定所要合并的单元格数量

使用rowspan来跨行合并，即向下合并。

<td rowspan=" ">    </td>

使用colspan来跨列合并，即向右合并。

<td colspan="">    </td>

在进行跨行或者跨列合并后，需要将被合并项删除防止格式出现错误。

        <tr>
            <td rowspan="2">11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <!-- <td>21</td> -->
            <td colspan="2">22</td>
            <!-- <td>23</td> -->
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>