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>

    运行结果:

  • 相关阅读:
    MyGame--java语言编写的打飞机游戏(附源码下载)
    调用MyFocus库,简单实现二十几种轮播效果
    aBowman >>可以运用到自己博客上的小插件
    css通用小笔记03——浏览器窗口变小 div错位的问题
    css通用小笔记02——浮动、清除(三个例子)
    css通用小笔记01——导航背景
    PHP强制转换类型
    数据库---查询语句(三):高级查询
    数据库---T-SQL语句:查询语句(二)
    数据库---T-SQL语句(一)
  • 原文地址:https://www.cnblogs.com/xuanxuanlove/p/10002452.html
Copyright © 2011-2022 走看看