html-002

列表

01无序列表（快捷键ul>li*3）

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表元素</title>
</head>
<body>
    <!-- 无序列表 -->
    <h3>购物车</h3>
    <ul>
        <li>牛奶</li>
        <li>苹果</li>
        <li>蛋糕</li>
    </ul>
</body>
</html>

02 有序列表（快捷键ol>li*3）
hr 加下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表元素</title>
</head>
<body>
    <!-- 无序列表 -->
    <h3>购物车</h3>
    <ul>
        <li>牛奶</li>
        <li>苹果</li>
        <li>蛋糕</li>
    </ul>
    <hr>
    <ol>
        <li>牛奶</li>
        <li>苹果</li>
        <li>蛋糕</li>
    </ol>
</body>
</html>

03自定义列表
dl dt dd(（应用于页尾描述)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表元素</title>
</head>
<body>
    <!-- 自定义列表 -->
    <dl>
        <dt>名称</dt>
        <dd>php中文网</dd>
        <dt>地址：</dt>
        <dd>阳江市</dd>
        <dt>联系</dt>
        <dd>电话<a href="18111354822">18111354822</a></dd>
    </dl>
</body>
</html>

04列表应用之导航栏

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表应用</title>
</head>
<body>
<ul class="menu">
    <li><a href="">教学视频</a></li>
    <li><a href="">社区回答</a></li>
    <li><a href="">资料下载</a></li>
    <li><a href="">登录</a></li>
</ul>
</body>
</html>

02表格

01表格是用一组标签来描述tabel ,thead,tbdody,tr,tr,td/th

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <table class="product">
        <!-- 表格标题 -->
        <caption>
            商品信息表
        </caption>
        <!-- 表头 -->
        <thead>
            <!-- 添加一组数据，添加一行 -->
        </thead>
        <tr>
            <th>id</th>
            <th>品名</th>
            <th>单价</th>
            <th>单位</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        <!-- 内容/主体 -->
        <tbody>
            <tr>
                <td>a10</td>
                <td>手机</td>
                <td>999</td>
                <td>部</td>
                <td>9</td>
                <td>555</td>
            </tr>
        </tbody>
        <!-- 内容/主体 -->
        <tbody>
            <tr>
                <td>a10</td>
                <td>手机</td>
                <td>999</td>
                <td>部</td>
                <td>9</td>
                <td>555</td>
            </tr>
        </tbody>
        <table>
        <!-- 表格页     -->
        <p class="page">
            <a href="">首页</a>
            <a href="">..</a>
            <a href="">5</a>
            <a href="">6</a>
            <a href="">尾页</a>
        </p>
        </table>
    </table>
</body>
</html>

文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本框</title>
</head>
<body>
    <h3 class="title">用户注册</h3>
    <form action="" method=""></form>
    <label for="username"></label>
    账号：<input type="text" id="username">
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

python的闭包与装饰器语法糖

2021-01-06 21:40:38