2020.12.22安秀萍.md

1、知识点总结

1.1常见的标签

1.1.1 列表

有序列表

type="1" 数字风格表示列表顺序

type="a" 小写字母风格表示列表顺序

type="i" 罗马数字风格表示列表顺序

无序列表

type="disc" 实心圆表示列表顺序

type="square" 矩形表示列表顺序

type="circle" 空心圆表示列表顺序

定义列表

标题
对标题的描述

1.1.2表格

表格由<table>标签来定义

每个表格均有若干行(由<tr>标签定义),没行被分割为若干单元格(由<td>标签定义) 

cellspacing单元格之间的空隙

cellpadding单元格内边距/内填充

border表格边框

width宽度

colspan合并列

rowspan合并行

1.1.3表单

用于为用户输入创建HTML表单

表单元素

2、心得体会

今天做了表格、表单等一些东西,感觉还挺有趣的,学的内容是在我们日常生活中很常见,但是从来没有想过这些东西是这样实现的。以下是我今天做的练习

<head>
    <meta charset="utf-8">
    <title>表格</title>
</head>
<body>
    <!--
    表格中tr表示行  tb表示列/单元格
    border表格边框  width宽度
    colspan 合并列  rowspan合并行
    -->
    <table width="500px"border="1">
        <!--第一行 start-->
        <tr>
            <td colspan="4"><h1>商品数目</h1></td>
        </tr>
        <!--第一行  end-->
        <!--第二行 start-->
        <tr>
            <td rowspan="3">虚拟</td>
            <td>移动</td>
            <td>联通</td>
            <td>小灵通</td>

        </tr>
        <!--第二行  end-->
        <!--第三行  start-->
        <tr>
            <td>充值卡</td>
            <td>彩票</td>
            <td>双色球</td>
        </tr>
        <!--第三行  end-->
        <!--第四行  start-->
        <tr>
            <td>梦幻</td>
            <td>QQ</td>
            <td>游戏币</td>
        </tr>
        <!--第四行  end-->
        <!--第五行 start-->
        <tr>
            <td rowspan="3">护肤</td>
            <td>美容护肤</td>
            <td>美体</td>
            <td>精油</td>
        </tr>
        <!--第五行  end-->
        <!--第刘行  start-->
        <tr>
            <td>彩妆</td>
            <td>香水</td>
            <td>美发</td>
        </tr>
        <!--第六行  end-->
        <!--第七行  start-->
        <tr>
            <td>个人护理</td>
            <td>保健</td>
            <td>按摩器械</td>
        </tr>
        <!--第七行  end-->
</body>

<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
    <h1>商品信息</h>
    <h2>产品类别</h2>
    <hr />
    <ul>
        <li>数码</li>
        <ul type="circle">
            <li>笔记本</li>
            <li>手机</li>
            <li>家电</li>
        </ul>
        <li>美容</li>
        <li>服装</li>
    </ul>
    <hr />
    <dl>
        <dt>联想电脑</dt>
        <dd>产品型号:联想IdeaPad Y450A-TFU(NBA纪念版)</dd>
        <dd>价格:4999元</dd>
        <dd>所在地:北京</dd>
    </dl>
    <hr />
    <h2>购物流程</h2>
    <ol type="1">
        <li>确认购买信息</li>
        <li>付款到贵美</li>
        <li>确认收货</li>
        <li>付款给商家</li>
        <li>双方评价</li>
    </ol>
</body>

评论