• HTML5列表标签和表格标签


    一、列表

    • 1.1 什么是列表标签?
      作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体
    无序列表---unordered-list(最多):新闻列表、导航、商品列表
    作用:给一堆数据添加列表语义里面所有数据没有优先之分只是列举出来
    可以列举图片文字视频
    ```<ul><li></li></ul>```
    ul里面有属性 type=“circle/square/disc”  清除前面符号 list-style:none;
    可以在li中嵌套ul-li
    有序列表---ordered-list(最少)
    作用:给一堆添加语义,并且有先后之分
    ```<ol><li></li></ol>```  type=“1/A/a/I” start=“数字‘//css做
    自定义列表definition-list(其次):做网站底部信息
    作用  :和无序列表语义,给添加语义 。先通过dt标签定义列表中的所有标题,然后再通过dd标签给每个标题添加描述信息
    ```<dl><dt><dt><dd></dd></dl>```dt用来定义标题

    ------无序列表注意点:
    1)一定要记住ul标签是用来给一堆数据添加列表语义的而不是用来添加小圆点的
    2)ul标签和li标签是一个整体,是一个组合所有一般情况下ul标签和li标签都是一起出现
    3)ul里面不推荐包含其他标签
    补充:br标签里面的属性width规定宽度
    注意:虽然通过标签属性也能修改样式,但是在企业开发中千万不要这样干前面我们说过ul中最好只放li标签,但是在企业开发中。li标签中内容可能会很复杂,所以我们可以继续在li标签中添加其他标签来丰富我们的界面。

    • 总结:
      1.一定要记住ul标签只放li标签
      1. 但是li中可以放其他标签
        eg
    <ul>
    <li>
             <h2>标题</h2>
               <p>段落</p>
    </li>
    <li>
             <h2>标题1</h2>
               <p></p>
    </li>
    <li>
             <h2>标题2</h2>
               <p></p>
    </li>
    </ul>

    -----有序列表 :
    -----定义列表注意:1) dl/dt/dd是整体出现一起出现 ,dl 只放dt/dd,
    2)推荐使用一个dt对应一个dd
    3)为了丰富界面,我们可以在dt/dd中添加其他标签

    <dl>
        <dt>
    <img  src=''nj.jpg width="150px" height="150px">
    </dt>
    <dd>
    <h2>大学</h2>
    <p>但是v哈巴河v不会吧</p>
    </dd>
    </dl>

    二、表格使用

    • 其实表格标签中的table代表整个表格,也就是一堆table标签就是一个标签tr为行td为列 表格标签有一个标签属性 这个属性决定边框宽度默认为0所以看不到边框

    属性注意点:

    1)宽度和高度属性:可以给table和td标签使用
    1.1 表格宽度和高度默认是按照内容尺寸来调整的也可以通过

    • 给table标签设置width/height属性的方式来手动指定表表格和宽度
    • td是当前单元格的宽度和高度不影响整个表格的宽度和高度
      2)水平对齐和垂直对齐的属性
      其中水平对齐table/tr/td都可以-------垂直对齐只能给tr/td使用
    • 给table设置align=right/left/center控制表格在水平方向的对齐方式
    • tr设置align,控制行中所有单元格的水平对齐方式
    • td设置align,控制当前单元格中内容在说方向的对齐方式
      注意:如果td中设置align属性,tr中也设置align,所有单元格按td来
    • tr设置valign属性,控制当前行所有单元格中内容垂直对齐
    • td当前单元格垂直对齐
      注意:同时给tr和td设置vailgn以td为准
      3)外边距和内边距属性
    • 只能给table使用 外边距就是单元格与单元格之间的距离。内边距是单元格的边框和文字之间的间隙,我们称之为内边距默认为1
      注意:企业用css修改样式

    表格标题caption作用:标题自动相对于表格的宽度居中

    <table>
    <caption>标题</caption>
    </table>

    标题单元格标签

    在表格标签中提供了一个标签专门用了存储每一列的标题,这个标签叫做th标签,只要将当前列的标题存储在这个标签中就会自动居中加粗
    注意:1.必须写在table中且紧跟table中

    细线表格 在表格标签中想通过指定外边距为0来实现,其实它是将两条线合并一条线,看上去不舒服

    1)给table标签设置bgcolor=“color”;
    2)给tr标签设置bgcolor;
    3)给table标签设置cellspacing=“1px”;---表格于表格之间距离

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

    • 4类
      1.表格标题
      2.表格的表头信息
      3.表格的主体信息
      4.表格的页尾信息
    <table>
    <caption>标题</caption>
    <thead>
    <tr>
            <th>每一列标题</th>
            <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
                <td></td>
                <td></td>
    </tr>
    <tfoot>
    <tr>
                <td></td>
                <td></td>
    </tr>
    </tfoot>//它是自定义比其他行的高度小
    </tbody>
    • thead:指定表格的表头信息
    • tbody:指定表格主体信息
    • tfoot:指定表格的附加信息
      注意:1.如果我们没有编写tbody,系统会给我们添加tbody
      2.如果指定了thead、和tfoot。那么在修改整个表格的高度时 thead和tfoot有自己默认的高度,不会随表格的高度变换而变换。

    单元格合并

    • 水平方向上的单元格合并
      可以给td标签添加一个rowspan属性,来制定把某一个单元格当做多个单元格来看待
      colspan=“数字”行合并 rowspan=”“;列合并在td中写合并后还要删除后面的
    <tr>
    <td rowspan="2"></td>
    <!--<td></td>-->//注释掉
    </tr>
    <tr>
    <td colspan="2"></td>
    <!--<td></td>-->//注释掉
    </tr>
    <tr>
    <!--<td></td>-->//注释掉
    <td></td>
    </tr>

    注意:合并合并的时他的后面或者下面

    <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">





  • 相关阅读:
    web动静分离
    vm采用NAT方式连接时,设置静态ip
    nginx实现tcp负载均衡
    读取文件
    线程池源码分析
    mongodb操作
    bind
    Xss攻击
    json和java对象相互转换
    静态资源默认加载路径
  • 原文地址:https://www.cnblogs.com/8-y-m-l/p/10547679.html
Copyright © 2020-2023  润新知