day51

（1）列表标签
（2）table
（3）form表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--列表标签
有序列表：ul>li
无序列表：ol>li
自定义列表：dl>dt+dd
-->

<!--table
table>tr+td
长宽属性
对齐（水平对齐，垂直对齐）
细线表格（三种）
表格单元格的合并
-->

<!--form表单
input
select
textarea
-->


</body>
</html>


列表标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
    <style>
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<!--列表标签
无序列表：ul>li
有序列表：ol>li
自定义列表：dl>dt+dd
-->

<!--无序列表-->
<ul>
    <li>
        <h2>标题栏</h2>
    </li>
    <li>1.秒杀</li>
    <li>2.优惠券</li>
    <li>3.VIP</li>
</ul>
<!--有序列表-->
<ol>
    <li>秒杀</li>
    <li>优惠券</li>
    <li>VIP</li>
</ol>
<!--自定义列表-->
<dl>
    <dt>智商排名</dt>
    <dd>1.A</dd>
    <dd>2.B</dd>
    <dd>3.C</dd>
    <DT>经济排名</DT>
    <dd>1.TES</dd>
    <dd>2.WELT</dd>
    <dd>3.JJJ</dd>
</dl>

<dl>
    <dt>购物流程</dt>
    <dd>购物流程</dd>
    <dd>会员介绍</dd>
    <dd>生活旅行</dd>
</dl>
<h1>物品清单</h1>
<dl>
    <dt>蔬菜</dt>
    <dd>西红柿</dd>
    <dd>花瓜</dd>
    <dd>芹菜</dd>
</dl>
<dl>
    <dt>水果</dt>
    <dd>香蕉</dd>
    <dd>菠萝</dd>
    <dd>火龙果</dd>
</dl>

</body>
</html>


table
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
<table border="1px" width="300px" height="300px">
    <!--border表格边框，-->
<!--table>tr*3 + Tab-->
    <tr>        <!--tr：行-->
        <td width="100px">姓名</td>     <!--td：格-->
        <td width="100px">年龄</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>welt</td>
        <td>26</td>
        <td>male</td>
    </tr>
    <tr>
        <td>YANG</td>
        <td>24</td>
        <td>male</td>
    </tr>
</table>
<hr>
<table border="1px" align="center" width="500px" height="500px">
    <!--align水平对齐(默认left)-->
    <!--width和height只能给table和td，align和valign可以给所有-->
    <tr align="center" valign="top">   <!--valign垂直方向对齐（）-->     <!--tr：行-->
        <td>姓名</td>     <!--td：格-->
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr align="center" valign="bottom">
        <td>welt</td>
        <td align="left" valign="top">26</td>
        <td>male</td>
    </tr>
    <tr align="right" valign="center">
        <td>YANG</td>
        <td>24</td>
        <td>male</td>
    </tr>
</table>
<hr>

<!--细线表格的实现方式-->
<!--1.-->
<table border="1px" align="center" width="500px" height="500px" cellspacing="0px" cellpadding="20px">
    <!--cellspacing外边距，cellpadding内边距-->
    <tr align="center" valign="top">
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr align="center" valign="bottom">
        <td>welt</td>
        <td align="left" valign="top">26</td>
        <td>male</td>
    </tr>
    <tr align="right" valign="center">
        <td>YANG</td>
        <td>24</td>
        <td>male</td>
    </tr>
</table>
<hr>
<!--2.用cellspacing当做表格边框-->
<table bgcolor="red" border="0px" align="center" width="500px" height="500px" cellspacing="1px">
    <tr bgcolor="white">
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr bgcolor="white">
        <td>welt</td>
        <td>26</td>
        <td>male</td>
    </tr>
    <tr bgcolor="white">
        <td>YANG</td>
        <td>24</td>
        <td>male</td>
    </tr>
</table>
<hr>
<!--3.style-->
<table border="1px" align="center" width="500px" height="500px" style="border-collapse: collapse;border:1px solid green">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>welt</td>
        <td>26</td>
        <td>male</td>
    </tr>
    <tr>
        <td>YANG</td>
        <td>24</td>
        <td>male</td>
    </tr>
</table>
<hr>


<!--table表格合并-->
<table border="1px" align="center" width="500px" height="500px" style="border-collapse: collapse;border:1px solid peachpuff">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr>
        <td rowspan="2">welt</td>       <!--rowspan行合并-->
        <td colspan="2">26</td>         <!--colspan列合并-->
        <!--删除此行，否则表格会排乱<td>male</td>-->
    </tr>
    <tr>
        <!--删除此行，否则表格会排乱<td>YANG</td>-->
        <td>24</td>
        <td>male</td>
    </tr>
</table>
<hr>

<!--表格的结构-->
<table border="1px" align="center" width="500px" height="500px" style="border-collapse: collapse;border:1px solid blue">
    <caption>Inverse Entropie</caption>         <!--表格的标题-->
    <thead>                                     <!--表头-->
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </thead>
    <tbody>                                     <!--表体-->
        <tr>
            <td rowspan="2">welt</td>
            <td colspan="2">26</td>

        </tr>
        <tr>
            <td>24</td>
            <td>male</td>
        </tr>
    </tbody>
    <tfoot>                                    <!--表尾-->
        <td>统计</td>
        <td>25</td>
        <td>mmm</td>
    </tfoot>
</table>

</body>
</html>



form表单
https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911#map
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>

<form action="http://127.0.0.1:8080/" method="post" enctype="multipart/form-data">
    <p>
        <label for="inp1">用户名</label>      <!--label for绑定id，点击label跳至对应输入框-->
        <input id="inp1" type="text" name="username" placeholder="请输入用户名">   <!--placeholder未输入时浅色显示提示信息-->
    </p>
    <p>
        <label for="inp2">密码：</label>
        <input id="inp2" type="password" name="password" placeholder="请输入密码">        <!--type='password' 遮盖效果-->
    </p>
    <p>
        <input type="radio" name="gender" value="male" checked="checked">男    <!--radio单选栏-->   <!--checked默认选项-->
        <input type="radio" name="gender" value="female">女
                                                     <!--属性名与属性值相同时可简写为一个，checked="checked"可简写为checked-->
    </p>
    <p>
        <input type="checkbox" name="hobbies" value="game" checked value="game">游戏       <!--checkbox多选栏-->
        <input type="checkbox" name="hobbies" value="music" checked value="music">音乐
        <input type="checkbox" name="hobbies" value="movie">电影
    </p>
    <p>
        <input type="file">     <!--上传文件，form表单method必须是post，enctype必须用multipart/form-data方式-->
    </p>
    <p>
        <input type="text" disabled name="key" value="固定内容">    <!--显示固定内容框，不可修改-->
    </p>
    <p>
        <textarea name="评论" id="" cols="30" rows="10">
        这里是评论框
        </textarea>                              <!--cols列数，row行数,style="resize: none"使文本框不可拉伸-->
    </p>
    <p>
        <select name="籍贯">                      <!--select下拉框-->
            <option value="上海">上海</option>      <!--option下拉框内容-->
            <option value="北京">北京</option>
            <option value="武汉" selected>武汉</option>         <!--selected 默认选中-->
        </select>
    </p>
    <p>
        <select name="食物" multiple>             <!--multiple 多选(浏览器中选完一个后按住Ctrl键选择其他项)-->
            <optgroup label="水果">                       <!--optgroup 提示类标题，不可被选中-->
                <option value="apple">苹果</option>
                <option value="banana">香蕉</option>
                <option value="pear">梨</option>
            </optgroup>
            <optgroup label="肉类">
                <option value="chicken">鸡</option>
                <option value="sheep">羊肉</option>
            </optgroup>
        </select>
    </p>

    <p>
        <input type="submit" value="登录">       <!--submit 提交，应该放在最后，点击提交后会将之前所有内容发往后台-->
    </p>

</form>

</body>
</html>

 

posted @ 2020-09-17 12:45  板鸭没有腿  阅读(127)  评论(0)    收藏  举报