软件测试day4------五天前置基础知识（黑马）

最新推荐文章于 2024-10-04 16:04:42 发布

吃猫包的鱼

最新推荐文章于 2024-10-04 16:04:42 发布

阅读量858

点赞数 23

文章标签： html5 html 前端测试工具经验分享笔记

本文链接：https://blog.csdn.net/m0_68682144/article/details/135566202

版权

今天目标

能够说出常见的html标签（10+）个的作用
项目（登录）测试

一、HTML

1.1HTML介绍

前端三大核心：

html：超文本标记语言，由一套标记标签组成
标签
- 单标签：<标签名 />
- 双标签<标签名></标签名>
- 属性：描述某一特性示例：<a href="https://www.baidu.com">即<a 属性名=“属性值”>

1.2HTML骨架标签

vs code生成骨架 !+tab键

html：html是根标签，所有内容都应该放在html标签中。

head：头部标签

body：身体标签（代码编写区域）

1.3注释

作用：描述呢容的不会被计算机执行

快捷键：ctrl+/

测试点：前端页面发布上线之前，需要检查（描述不恰当的文字出现）所有注释去除注释

1.4标签

1.4.1 标题标签

标题标签：“h1~h6”

特点：h1最大，h6最小

示例：

1.4.2段落标签

段落标签：p

特点：独占一段，有语义化含义，让浏览器知道你是段落

1.4.3超链接标签

超链接：a

语法：<a href=“http://www.baidu.com” target= “_blank” >文本</a>

属性： href：跳转地址
target：打开窗口模式，新窗口：target=“_blank”

易错：

href没有正确拼写

1.4.4图片标签

说明：在页面中插入一张图片
图像标签：img
属性：
- src：图片路径
- title：悬停显示文字
- width：宽100px px：像素
- height：高
- alt：图片未加载的文字显示
测试点：必须有title属性（悬停和未加载显示）

1.4.5路径

需求：加载img/02.jpg
路径：
- 1.相对路径：“相对当前执行文件所在位置为起点”

上一级：../

同级：./

2.绝对路径：不推荐，计算机本地路径

示例：

已知 01.jpg和当前文件在同一级文件夹

<img src="./01.jpg">和<img src="01.jpg">都是对的，后者省略了./

1.4.6换行与空格

换行

换行 br

空格

空格：&nbsp；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1、空格：&nbsp;

     -->
     键                                盘敲烂，月薪过万！
     <br>
     键 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;盘敲烂，月薪过万！
</body>
</html>

1.4.7布局标签

布局：设置页面布局，便于排版

大盒子：div、独占一行
小盒子：span、一行可以放多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div 和 span</title>
    <style>
        .d1{background: red;}
        .d2{background: green;}
        .s1{background: aqua;}
        .s3{color: yellowgreen;}
    </style>
</head>
<body>
    <!-- 
        div:大盒子，独占一行
        span：小盒子一行可以放多个

     -->
    <div class="d1">这是 div 标签</div>
    <div class="d2"> div 独占一整行</div>
    <div> div：是一个大盒子</div>
    <span class="s1">这是 span 标签</span>
    <span> span 不换行</span>
    <!-- span：小盒子 -->
    <p>今天我学<span class="s3">软件测试</span>~</p>
</body>
</html>

1.4.8列表标签

script：js标签
style：css标签
link：外部加载css标签

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <!-- 有序列表 -->
    <!--ol嵌套li  -->
    <!-- ol里只能包裹li -->
    <!-- li里面可以包裹任何内容 -->
    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>
</body>
</html>

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <!-- 无序列表 -->
    <!-- u标签只能包裹li标签 -->
    <!-- li标签里面可以包裹任何内容 -->
    <ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    </ul>

    <style>
        /* css标签 */
    </style>
    <script>
        // js标签
    </script>
</body>
</html>

1.4.9表单标签

input标签
1. 文本框：<input type="text" />
2. 密码框：<input type="password" />
3. 单选框 :<input type="radio">
4. 复选框：<input type="checkbox">
5. 按钮
  1. 普通：type=button
  2. 提交：type=submit
  3. 重置：type=reset
测试点：这几个按钮要赋值value，不同浏览器显示不一样，影响用户体验
普通按钮默认没有执行效果，需要配合js来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input占位文本</title>
</head>
<body>
    <!-- 占位文本 placeholder=""-->
   文本框：<input type="text" placeholder="请输入用户名"> 
   <br><br>
   密码框：<input type="password" placeholder="请输入密码">
   <br><br>
   
</body>
</html>

复选框:<input type="checkbox">

效果

form标签
- 作用：提交页面的数据到指定页面/后台
- 示例：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input占位文本</title>
</head>
<body>
    <!-- 
        form
            作用：将页面输入的数据提交到后台或者指定页面
            属性：
                action:指定将数据提交到哪个页面
                method：提交参数的方法 get、post
                    get：查询使用
                        1、在url明文显示
                        2、提交速度快
                        3、提交参数有长度限制
                    post：提交数据、登录、注册
                        1、非明文
                        2、提交速度慢
                        3、提交参数的长度无限制

     -->
    <form action="接收数据.html" method="POST">
        <!-- 占位文本 placeholder=""-->
        用户名：<input type="text" placeholder="请输入用户名" name="username"> 
        <br><br>
        密码框：<input type="password" placeholder="请输入密码" name="password">
        <br><br>
        <!-- 
            单选效果：
                    1、相同一组的radio才能做单选。
                    2、设置相同（组名）name属性为一组。

            -->
        性别：
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <br>
        您的爱好：
        <input type="checkbox">挣钱
        <input type="checkbox">吃饭
        <input type="checkbox">睡觉
        <input type="checkbox">看帅哥
        <input type="checkbox">拉屎
        <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="点我试试">
    </form>
    
   
</body>
</html>

get