没那么难的软件测试（三）

最新推荐文章于 2023-07-06 06:56:50 发布

赵鹏_Ziv

最新推荐文章于 2023-07-06 06:56:50 发布

阅读量189

点赞数

分类专栏：软件测试

本文链接：https://blog.csdn.net/Ziv_Zhaopeng/article/details/89629715

版权

软件测试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

文件路径

具体资源所在的位置，有绝对路径和相对路径之分。

一、绝对路径
从根目录开始完整描述文件位置的路径。由于灵活性不足导致使用场景很少。

二、相对路径
相对于当前文件，目标文件的所在路径。常用的相对路径表示，当前路径（同级路径）：.，上一级目录：../，下一级目录：/

同级路径：与使用资源的文件在同一个目录下
下级路径：与使用资源的文件所在文件夹的里面的文件夹里（emmm,感觉自己没有在说人话），就是说在子文件夹里…
上级路径：与使用资源的文件的文件夹同级，即是在其上一级目录

表单

一、from表单域
仅声明包裹的内容为需要提交的表单信息，内部需要使用表单元素提供用户输入信息

<from action="#" method="post">
    用户名：<input type="text" name="username">
    <br/>
    密码：<input type="password" name="password">
    <br/>
    <input type="submit">
</from>

二、表单属性
action：表单提交目标地址
method：已哪种方式提交表单信息到服务器后台，常见提交方式GET，POST
GET方式：将数据拼接在网址URL中，消息明文传输，一般用于非敏感信息
POST方式：将数据写在HTTP请求体中进行传输。

三、常见的表单元素

表单元素	type属性	作用	语法格式	注释
input	text	文本输入框	`<input type="text" />`
	password	密码输入框	`<input type="password" />`
	submit	提交按钮	`<input type="submit" value="点击提交"/>`
	radio	单选框	`<input type="radio" name="sex" checked="checked"/>`	name属性：将相同name的单选框分为一组，同组内的单选框只能选一个 `checked="checked"`表示默认选择项
	checkbox	复选框	`<input type="checkbox"/>`	支持`checked`属性
	reset	重置按钮	`<input type="reset" value="点击重置"/>`	还原表单内容到默认状态
	button	普通按钮	`<input type="button" value="点击"/>`
textarea		文本域	`<textarea name="" rows="" cols=""></textarea>`	rows行数 cols列数
select		下拉框	`<select name=""><option value="" selected>选项内容</option></select>`

注：

只有定义在from表单域内的表单元素才能提交信息至服务器后台
name属性除单选按钮，用于后台区分表单选项数据，后台接收到的数据为一系列键值对
value定义表单元素的默认显示内容
在属性名和属性值相同的情况下，可以省略属性值的书写，如checked="checked"可简写为checked，selected="selected"可简写为selected

CSS

web标准

由W3C组织制定的一系列规范网页书写的要求。

Web标准：要求结构、样式、行为相分离。

结构：通过HTML标签搭建网页内容
样式：使用CSS语言对结构进行美化修饰
行为：采用JavaScript进行交互逻辑处理

CSS基本使用

级联样式表、层叠样式表、样式表，作用是用来修饰网页中的HTML元素

常见存放位置，head标签里title标签下，基本的格式如下，

<style type="text/css">
    /*CSS中的注释*/
    /*选择器{
    /*  需求中的具体CSS样式;
    /*}
</style>

通过CSS的选择器，找到对应修饰的元素，添加样式

CSS选择器：CSS中定义用来选中某些元素的固定语法。分为简单选择器和复杂选择器

简单选择器

标签名选择器

会选中当前网页中所有同名标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS示例</title>
        <style type="text/css">
            /* 宽度200像素，高度200像素，背景绿色 */
            p{
                color: white;
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <p>应用了CSS样式的p标签</p>
        <p>第二个应用了CSS样式的p标签</p>
    </body>
</html>

类名选择器

解决同名标签设置不同样式的场景，多个类名之间使用空格隔开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS示例</title>
        <style type="text/css">
            /* 宽度200像素，高度200像素，背景绿色 */
            .aa{
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h4 class="aa">类选择器示例</h4>
        <p class="aa">应用了CSS样式的p标签</p>
    </body>
</html>

ID选择器

仅对单一元素进行选择，ID全局唯一。使用多次时，虽然有效果，但不建议使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS示例</title>
        <style type="text/css">
            /* 宽度200像素，高度200像素，背景绿色 */
            #aa{
                color: white;
                width: 200px;
                height: 200px;
                background-color: salmon;
            }
        </style>
    </head>
    <body>
        <p id="aa">应用了CSS样式的p标签</p>
        <p>第二个没有CSS样式的p标签</p>
    </body>
</html>