标签2

列表标签

什么是列表标签?

-作用:给一堆数据添加列表语义,也就是告诉浏览器这一堆数据是一个整体

列表标签的分类:

1.无序列表(unordered list)

        -作用:给一堆数据添加列表语义,并且这一堆数据没有先后之分

        -格式:

                    <ul>

                            <li>显示的内容</li>

                            <li>显示的内容</li>

                    </ul>

       -无序列表印用场景:1.新闻列表

                                        2.商品列表

                                        3.导航条

       - 注意点:1.ul标签和li标签是一个整体,不能单独使用 

                        2.ul标签和li标签是一个组合,一般ul标签中只有li标签,但是li标签中可以窃套其他标签

2.有序列表(ordered list)

        -作用:给一堆数据添加列表语义,并且这一堆数据有先后之分

        -格式:

                      <ol>

                            <li>显示的内容</li>

                            <li>显示的内容</li>

                    </ol>

3.定义列表(definition list)

-作用:1给一堆数据添加列表语义,

        .2先通过dt标签定义列表的标题,在通过dd标签给每个定义的标题添加描述

-格式:

                <dl>

                        <dt></dt>

                        <dd></dd>

                </dl>

其中dt的含义 是定义列表中的标题

dd的含义 是用来定义标题对应的描述的

-应用场景:1.图文混排

                    2.做网站尾部的相关信息

-注意点:一个dt可以没有对应的dd,也可以有多个dd,   

                 dt和dd中可以窃套其他标签



表格标签

--表格标题(caption):设置表格的标题

必须写在table开头标签后面

只要将caption标签写在table标签中,标题就会自动居中

--单元格标题标签(th):只要将当前列的标题储存在th标签中就是自动居中+加粗文字


什么是表格标签?

其实表格标签是一种数据的展现形式,当数据量非常大的时候,表哥这种展现形式被认为是最为清晰地展现形式

--作用:用来给一堆数据添加表格语义

--格式:

<table>

        <tr>

                <td></td>

        </tr>

</table>

表格标签中的table代表整个表格,也就是一个table标签就是一个表格

tr标签代表表格中的一行数据,td标签代表一行的中的一个单元格

注意点:表格标签有一个边框(border)属性,这个属性决定了边框的宽度,默认边框是0,所以看不到边框

表格标签的属性:

--1.宽度(width)和高度(height)的属性:

1.1 可以给table标签和td标签使用

1.2 表格的宽度和高度默认是按照内容的大小来设置的,也可以给table设置宽高来调整表格的宽高

1.3 如果给td标签设置宽高属性,慧修改当前单元格的宽高,不会改变整个表格的宽高

--2.水平对齐(align)和垂直对齐(valign)的属性:

2.1其中水平对齐可以给table标签、tr标签和td标签使用

2.2给table标签设置align属性,可以控制整个表格的水平对齐方向

2.3垂直对齐只能给tr标签和td标签使用

--3.外边距(cellspacing)和内边距(cellpadding)的属性:


3.1 只能给table标签使用

3.2 默认情况下外边距是2个像素,内边距默认是1个像素

--细线表格

方式:1给table标签设置背景颜色为黑色

            2给tr标签设置背景颜色为白色

            3设置外边距为1px

表格的结构

由于表格中储存的数据比较复杂,为了方便管理、阅读和提升语义,我们可以对表格储存的数据进行分类。表格中粗存的数据可以分为4类

1表格的标题

2表格的表头信息

3表格的主体信息

4表格的页尾信息


表格的完整格式:

<table >

          <caption>表格的标题</caption>

        <thead>表格的表头信息 

          <tr >

              <th>每一列的标题</th>

           </tr>

        </thead>

        <tbody>表格的主体信息 

          <tr >

                   <td></td>

           </tr>

        </tbody>

        <tfoot>表格的页尾信息

            <tr>

                        <td></td>

               </tr>

            </tfoot>

      </table>

--单元格合并:

水平方向的单元格合并(colspan):

可以给td标签添加colspan属性来指定把某一单元格当做多个多个单元格看待,

注意点:

1.单元格合并永远是向后和向下合并

2.由于把某一个单元格当做多个单元格看待,所以就会多出单元格,把多出的单元格删除

垂直方向的单元格合并(rowspan):

可以给td标签添加rowspan属性来指定把某一单元格当做多个多个单元格看待,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。