测开学习篇-html-阿里云开发者社区

测开学习篇-html

2023-05-25 85

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 测开学习篇-html

1.标题关键词描述

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页头部 -->
    <meta charset="UTF-8">
    <meta name="Keywords" content="网页关键字，搜索引擎搜索关键字后找到这个网页">
    <meta name="Description" content="网页描述信息">
    <title>标题 关键词 描述</title>
</head>
<body>
    <!-- 网页内容 -->
    顶顶顶
</body>
</html>

2.有序列表和无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表和无序列表</title>
</head>
<body>
    有序列表
    <ol>
        <!-- 不选择type类型默认使用1.2.3.排序 -->
        <li>11</li>
        <li>22</li>
        <li>32</li>
    </ol>
    <ol type="A">
        <!-- A.B.C.排序 -->
        <li>11</li>
        <li>22</li>
        <li>32</li>
    </ol>
    <hr>
    无序列表
    <ul>
        <!-- 不选择type类型默认使用实心小圆点.，还可以指定类型type空心小圆点等 -->
        <li>11</li>
        <li>22</li>
        <li>32</li>
    </ul>
</body>
</html>

3.div分区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div分区</title>
</head>
<body>
    <div class="header">
        <div class="logo">logo图片</div>
        <nav>导航栏标签</nav>
    </div>
    <div class="banner">轮播图广告</div>
    <div class="content">
        <div class="aside">左侧导航栏</div>
        <div class="main">主要内容区域</div>
    </div>
    <footer>底部标签</footer>
</body>
</html>

4.语义标签

div和span

对于div和span这两个元素，不少新手也不知道它们之间有什么区别，使用起来也很随便。因此，这里有必要简单介绍一下。

div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素样式的。

div和span区别如下：

(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。

(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语义标签</title>
</head>
<body>
    <div>
        <!-- span标签本身没什么作用，但是可以通过css来控制span的样式 -->
        <span>姓名：</span><span>李牧</span>
    </div>
</body>
</html>

5.表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 表格基本结构 -->
    <table>
        <tr>
            <td>第一行第一格</td>
            <td>第一行第二格</td>
            <td>第一行第三格</td>
        </tr>
        <tr>
            <td>第二行第一格</td>
            <td>第二行第二格</td>
            <td>第二行第三格</td>
        </tr>
    </table>
    <!-- 表格完整结构 边框border="1"-->
    <table border="1">
        <caption>表格标题</caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>用例标题</th>
                <th>预取结果</th>
                <th>测试结果</th>
            </tr>
        </thead>
        <!-- 表身 -->
        <tbody>
            <tr>
                <td>正确账号密码登录</td>
                <td>登录成功</td>
                <td>测试成功</td>
            </tr>
            <tr>
                <td>错误账号密码登录</td>
                <td>登录失败</td>
                <td>测试成功</td>
            </tr>
        <!-- 表脚 -->
        <tfoot>
            <tr>
                <td>表脚1</td>
                <td>表脚2</td>
                <td>表脚3</td>
            </tr>
        </tfoot>
        </tbody>
    </table>
</body>
</html>

6.表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="http://127.0.0.1/login" method="post">
        <p>
            姓名 <input type="text">
        </p>
        <p>
            年龄 <input type="text">
        </p>
        <p>
            <!-- 单选框radio，选男的话给后端的参数就是 sex：1 -->
            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="2">女
        </p>
        <p>
            <!-- 复选框checkbox， checked默认选择-->
            <input type="checkbox" name="game" checked>lol
            <input type="checkbox" name="game" checked>部落冲突
            <input type="checkbox" name="game">原神
        </p>
        <p>
            <input type="submit"> 
        </p>
    </form>
</body>
</html>