软件测试——基本HTML的使用

fnuiwenfiwa

已于 2022-12-13 20:40:25 修改

阅读量475

点赞数

分类专栏：软件测试文章标签：学习

于 2022-11-23 14:05:34 首次发布

本文链接：https://blog.csdn.net/fnuiwenfiwa/article/details/127997919

版权

软件测试专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、HTML

HTML介绍：用来描述网页的一种语言。

web前端三大核心技术：

HTML：负责网页的架构
CSS：负责网页的样式、美化
JS：负责网页的行为

二、常见HTML标签

1、骨架标签

<!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>
    
</body>
</html>

2、注释

国际通用快捷键：ctrl+/

项目上线（发布）之前，必须检查并删除。

3、标题与段落

标题标签 <h1>-<h6>

说明：不常用。前端界面编写时主要通过CSS控制字体大小。

段落标签<p></p>

<p>标签独占一行，可做换行使用。

4、超链接标签<a></a>

属性:

href：跳转地址

target：新窗口打开，target="_blank"

<!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>
    <!-- 注释 -->
    <a href="http://www.baidu.com" target="_blank">点我去百度</a>
</body>
</html>

5、图片标签<img>

测试点：必须要title属性（体验感好）

属性：

src：加载图片的路径

title：图片加载时，鼠标悬停显示信息，图片未加载时图片处显示信息（优先级低于alt）

width：宽100px px：像素

height：高

alt：图片未加载时，显示信息

图片路径：

1、相对路径：相对于当前执行文件所在路径

当前位置（同级）：./（可忽略不写）

上一级：../

2、绝对路径：不能使用C：\Users\items\01.png

6、空格和换行

换行：<br />或<br>
空格：

7、布局标签<div></div>

作用：用于排版。

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

8、列表标签

有序列表

<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>

无序列表

<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>

9、input标签

属性：

name：元素名称

value：按钮测试点，统一使用value来赋值。

placeholder：输入框提示文字

style：设置CSS样式

maxlength:可输入最长字符数

文本框：<input type="text">
密码框：<input type="password">
单选框：<input type="radio">，需要value值相等才能实现单选功能。
复选框：<input type="checkbox">
按钮：

<input type="button" name="anniu" id="anniu"value="普通按钮"><br>
<input type="submit" name="tijioa" id="tijioa" value="提交按钮"><br>
<input type="reset" name="chz" id="chz" value="重置按钮"><br>

10、文本域和下拉框

文本域<textarea>

<textarea name="" id="" cols="30" rows="10"></textarea>

下拉框

地址：
    <select>
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">广州</option>
        <option value="">深圳</option>
    </select>

11、form标签

作用：提交页面输入的数据到指定页面或后台。

属性：

action：指定将数据提交到那个页面。

method：提交参数的方法（get、post）

get：查询使用。1、参数url明文显示；2、提交速度快；3、提交参数有长度限制

post：提交数据、登录、注册。1、非明文显示；2、提交速度慢；3、提交参数的长度无限制

使用场景：1、get：查询使用。2、post：提交数据时使用（登陆、注册）。

自己编写的表单页面：

<!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>
    <form action="xxx.html" method="post" name="name1">
        <!-- text 文本框 用户可以输入任何文字 -->
        <label for="user">用户名：</label><input type="text" id="user"><br>
        <!-- password 密码字段  -->
        密码：<input type="password"><br>
        <!-- radio 单选按钮 -->
        <!-- name是表单元素的名字，单选框和复选框必须要有相同的name属性,每一个表单元素都应该有自己的name属性 -->
        <!-- value 规定input元素的值，首次加载时就显示显示文字 -->
        <!-- checked 首次加载时应当被选中 -->
        <!-- maxlength 规定输入字段的最大长度 -->
        <!-- label 标注标签，当点击<label>中的文字时，浏览器会自动对焦相应的表单元素，for属性的值应与对应的表单元素的id属性值相同-->
        性别：<input type="radio" name="sex" value="男" checked="checked" id="nan" ><label for="nan">男</label> 
             <input type="radio" name="sex" value="女" id="nv" ><label for="nv">女</label><br>
        <!-- checkbox 复选框 -->
        爱好：<input type="checkbox" name="hobby">吃饭 <input type="checkbox" name="hobby">睡觉 <input type="checkbox" name="hobby">玩游戏<br>
        <!-- select 下拉列表 -->
        籍贯：<select name="adress" id="jiguan">
            <option value="四川">四川</option>
            <option value="北京">北京</option>
            <option value="湖南">湖南</option>
            <option value="湖北">湖北</option>
            <option value="新疆">新疆</option>
        </select><br>
        <!-- textarea 文本域，可以输入大量文字 -->
        个人简介：<br><textarea name="jianjie" id="" cols="30" rows="10"></textarea><br>
        <!-- submit 提交按钮 -->
        <!-- file 文件域 上传文件使用 -->
        上传头像：<input type="file" ><br>
        <input type="submit" value="提交">&nbsp;&nbsp;
        <!-- reset 重置按钮 -->
        <input type="reset" value="重新填写">&nbsp;&nbsp;
        <!-- button 普通按钮 后期结合js -->
        <input type="button" value="获取验证码">
    </form>
</body>
</html>

12、抓包

抓客户端发送服务器的数据包或服务器响应客户端的数据包。