zoukankan      html  css  js  c++  java
  • 前端 学习笔记day47 列表标签 & 表格

    1. 列表标签

    可以分为无序列表ul 有序列表ol 但是里面都需要些li标签 来显示内容;

    无序列表ul 有li标签 属性type可以为disc circle square none 分别表示实心圆圈 空心圆 实心方块 无样式;

    有序列表ol 有li标签 属性type可以为1 A a I i 分别为数字 大写字母 小写字母 大写罗马数字 小写罗马数字 start为开始的序号索引;

    2. 有序列表&无序列表

    <! DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Welcome!</title>
        </head>
        <body>
        <ul type="disc">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>   <!--无序列表 type设置前面显示的样式(disc实心圆点 circle空心圆 square 实心方块 none无样式)-->
    
        <ol type="1" start="4">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ol>  <!--有序列表 type是内容前面的显示样式 1代表数字 A a I i 分别表示大写字母,小写字母 大罗马 小罗马数字 start是从哪一个序号开始>
    
    
        </body>
    
    </html>

    运行结果:

    2. 标题列表

    <! DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Welcome</title>
        </head>
        <body>
        <ul type="disc">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
        <ol type="I" start="1">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ol>
        <dl>
            <dt>标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dt>标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dd>内容3</dd>
        </dl>
        </body>
    </html>

    运行结果:

    3. 表格

    首先就是table的标签 然后内层有thead标签和tbody标签

    然后thead标签主要是写表格的头部(类似于sql表的字段属性)里面有tr标签 表示一行 里面又有th标签是字段名也就是每一列的名称;

    而tbody标签主要时写表格每一个属性字段的值;里面有tr标签表示一行的信息,td表示一行中对应字段的值;

    <! DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Welcome</title>
        </head>
        <body>
        <table border="1"> 
            <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>职业</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>萱萱</td>
                <td></td>
                <td>22</td>
                <td>学生</td>
            </tr>
            <tr>
                <td>西西</td>
                <td>23</td>
                <td></td>
                <td>程序媛</td>
            </tr>
            </tbody>
        </table>
    
        </body>
    </html>

    运行结果:

  • 相关阅读:
    什么是软件质量?
    软件生存周期及其模型是什么?
    给你一个网站,你如何测试?
    jquery中$.get()提交和$.post()提交有区别吗?
    JQuery有几种选择器?
    ajax和layui总结
    md5加密
    Collection接口相关介绍
    JS 中document.URL 和 windows.location.href 的区别
    window.location.href的用法(动态输出跳转)
  • 原文地址:https://www.cnblogs.com/xuanxuanlove/p/10002452.html
Copyright © 2011-2022 走看看