博客列表 >4月23日 HTML标签学习

4月23日 HTML标签学习

阿超的博客
阿超的博客原创
2019年04月24日 08:38:07639浏览

一,完成一个跨行合并的表格:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>

     <table border="1" cellspacing="0" cellpadding="5" width="550" align="left">
    <caption>购物车</caption>
    <thead>
    <tr bgcolor="lightblue">
        <th>编号</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
        <th>分类</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td width="50">1</td>
        <td width="200">有备无患的奔驰专用机油</td>
        <td width="70">800</td>
        <td width="50">1</td>
        <td width="80">800</td>
        <td width="50">汽车</td>
    </tr>
    <tr>
        <td>2</td>
        <td>能看清鞋子的京东摄像头</td>
        <td>150</td>
        <td>2</td>
        <td>300</td>
        <td rowspan="2">电子</td>
    </tr>
    <tr>
        <td>3</td>
        <td>带暖手宝功能的笔记本电脑</td>
        <td>4500</td>
        <td>2</td>
        <td>9000</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="center">总计</td>
        <!--            <td></td>-->
        <!--            <td></td>-->
        <td>5</td>
        <td>10100</td>
         <td> </td>
    </tr>
    </tfoot>
</table>

    </body>
</html>

二,完成一个注册表单:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户注册</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <form action="" method="get">
            <p><lable for=""username">用户名:</lable>
            <input type="text" id=username name=username placeholder=不超过8个字符 autofocus></p>
            <p>
                <label for="password">密码:</label><input type="password" name="password" id="password" placeholder="12的字母和数字组成" autofocus>
            </p>
            <p><label for="email">邮箱</label><input type="email" name="email" id="email" placeholder="example@mail.com" required></p>
        <button type="submit">提交</button>
        </form>
            
    </body>
</html>

三、完成一个简易后台首页:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>后台管理</title>
    </head>
    <body>
    <h2>后台管理</h2>
    <ul style="float: left;">
        <li><a href="demo3.html" target="main">用户管理</a></li>
        <li><a href="demo4.html" target="main">分类管理</a></li>
        <li><a href="demo5.html" target="main">商品管理</a></li>
        <li><a href="demo6.html" target="main">系统设置</a></li>
    </ul>

    <iframe srcdoc="<h3>网站管理后台</h3>" frameborder="" width="600" height="500" style="float:left" name="main"></iframe>
            
    </body>
</html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议