【软件测试】--功能测试4-html介绍

1.1 前端三大核心

  • html:超文本标记语言,由一套标记标签组成

  • 标签:

    • 单标签:<标签名 />

    • 双标签:<标签名></标签名>

    • 属性:描述某一特征 示例:<a 属性名="属性值">

1.2 html骨架标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>
html:根标签,所有的内容都应该放到html标签中
head:头部标签
body:身体标签(代码编写区域)

1.3 注释

  • 作用:描述的内容不会被浏览器执行

  • 说明:解析程序给程序员看

  • 快捷键:ctrl+/ <!--注释区域-->

  • 测试点:前端页面上线之前检查注释描述(描述不恰当的文字)或去除注释

  • 测试:右击需要测试的网页,点击【查看源代码】,查看文字描述的注释等是否恰当

1.4 标签

  • 标题:h1~h6

    • 说明:h1最大,h6最小

    • 示例:

      <h1>我是h1</h1>
      <h6>我是h6</h6>
  • 段落:p

    • 特点:语义化、独占一块(换行)

    • 示例:

      <p>我是段落</p>
  • 超链接a

    • 说明:点击文本跳转到指定页面

    • 语法:<a href="https://www.baidu.com">文本</a>

    • 属性:

      • href:跳转的地址或文件

      • target:打开窗口模式。新窗口:target="_blank"

  • 图片

    • 说明:在页面中插入一张图片

    • 测试点:必须有title属性(悬停和未加载显示)

    • 示例

      <!--
                  图像标签:img
                  属性:
                      src:图片路径
                      title:悬停显示文字
                      width:宽100px   px:像素
                      height:高 
                      alt:图片未加载时显示的文字
              -->
              <img src="011.jpg" title="希望在田野" width="100px" height="200px" alt="此处有一张田野照片"/>

  • 空格与换行

    • 空格:&nbsp; &->shift+7

    • 换行:<br />

  • 布局标签

    布局:设置页面布局,便于排版

    • 大盒子:div、独占一行

    • 小盒子:span、一行可以放多个

  • 列表

  • script:js标签
    style:css标签
    link:外部加载css标签
  • input标签

    • 文本框:<input type="text" />

    • 密码框:<input type="password" />

    • 单选按钮:<input type="radio">

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

    • 按钮:

      • 普通:type=button

      • 提交:type=submit

      • 重置: type=reset

        <!--
                        按钮测试点:统一使用value进行赋值
                      提示:普通按钮默认没有执行效果,需要配合Js来实现。
        -->

  • form标签

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

    <!--
                form
                    作用:将页面输入的数据提交到后台或指定页面
                    属性:
                        action:  指定将数据提交到那个页面。
                        method:提交参数的方法(get、post)
                            get:查询使用
                                1、参数url明文显示
                                2、提交速度快
                                3、提交参数有长度限制
                            post:提交数据、登录、注册
                                1、非明文显示
                                2、提交速度慢
                                3、提交参数的长度无限制
    -->
    <form action="10-接受数据.html" method="get">
                用户名:<input type="text" name="username"/>
                <br />
                密码框:<input type="password" name="password"/>
                <br />
                <!--
                    单选效果:
                        1、相同一组的radio才能做单选。
                        2、设置相同(组名)name属性值为一组。
                -->
                性别:
                <input type="radio" name="one"/>男
                <input type="radio" name="one"/>女
                <br />
                您的爱好:
                <input type="checkbox" />挣钱
                <input type="checkbox" />吃饭
                <input type="checkbox" />欣赏美
                <input type="checkbox" />个人发挥
                <br />
                <input type="submit" />
                <input type="reset" />
                <input type="button" value="点我试试"/>
            </form>
  • 提交

        问题:不同浏览器默认的type=submit的默认提示语是不一样的

        解决:统一给subumit增加一个value赋值即可

        按钮测试点:统一使用value进行赋值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/414502.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯第十四届电子类单片机组决赛程序设计

目录 前言 单片机资源数据包_2023&#xff08;点击下载&#xff09; 一、第十四届比赛题目 1.比赛题目 2.题目解读 1&#xff09;任务要求 2&#xff09;注意事项 二、显示功能实现 1.关于高位为0时数码管熄灭功能的实现 2.关于显示小数位的处理 3.关于“校准值”的…

某查查首页瀑布流headers加密

目标网站&#xff1a; 某查查 对目标网站分析发现 红框内的参数和值都是加密的&#xff0c;是根据算法算出来的&#xff0c;故进行逆向分析。 由于没有固定参数名&#xff0c;只能通过搜索headers&#xff0c;在搜索的位置上打上断点&#xff0c;重新请求。 断点在此处断住&a…

【计算机】本科考研还是就业?

其实现在很多计算机专业的学生考研&#xff0c;也是无奈的选择 技术发展日新月异&#xff0c;而在本科阶段&#xff0c;大家学着落后的技术&#xff0c;出来找工作自然会碰壁。而且现在用人单位的门槛越来越高&#xff0c;学历默认研究生起步&#xff0c;面试一般都是三轮起步…

循序渐进丨MogDB / openGauss 如何实现自增主键

概述 自增主键是我们在设计数据库表结构时经常使用的主键生成策略&#xff0c;主键的生成可以完全依赖数据库&#xff0c;无需人为干预&#xff0c;在新增数据的时候&#xff0c;我们只需要将主键的值设置为default&#xff0c;数据库就会为我们自动生成一个主键值。 MySQL 主键…

基于沁恒微 ch643q 多通道采集 adc 驱动层实现

一、代码 #include "main.h"/********************************************************************** fn ADC_Function_Init** brief Initializes ADC collection.** return none*/ void ADC_Function_Init(void) {ADC_InitTypeDef ADC_InitStructure …

【Go 快速入门】协程 | 通道 | select 多路复用 | sync 包

文章目录 前言协程goroutine 调度使用 goroutine 通道无缓冲通道有缓冲通道单向通道 select 多路复用syncsync.WaitGroupsync.Mutexsync.RWMutexsync.Oncesync.Map 项目代码地址&#xff1a;05-GoroutineChannelSync 前言 Go 1.22 版本于不久前推出&#xff0c;更新的新特性可…

LoRa技术在智能气象监测中的应用与解决方案分享

LoRa技术在智能气象监测领域的应用具有广泛的前景&#xff0c;通过LoRa技术可以实现对气象数据的远程采集、传输和监测&#xff0c;为气象行业提供更加智能化和高效的解决方案。以下将探讨LoRa技术在智能气象监测中的应用与解决方案分享。 首先&#xff0c;LoRa技术可以用于连…

python|闲谈2048小游戏和数组的旋转及翻转和转置

目录 2048 生成数组 n阶方阵 方阵旋转 顺时针旋转 逆时针旋转 mxn矩阵 矩阵旋转 测试代码 测试结果 翻转和转置 2048 《2048》是一款比较流行​的数字游戏​&#xff0c;最早于2014年3月20日发行。原版2048由Gabriele Cirulli首先在GitHub上发布&#xff0c;后被移…

【C语言】数据存储篇,内存中的数据存储----C语言整型,浮点数的数据在内存中的存储以及大小端字节序【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本篇为​【C语言】数据存储篇&#xff0c;内存中的数据存储----C语言整型&#xff0c;浮点数的数据在内存中的存储以及大小端字节序【图文详解】&#xff0c;感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 前言 C语…

GIS之深度学习02:Anaconda2019版本安装(py38)

Anaconda是一个专注于数据科学和机器学习的开源发行版&#xff0c;内置了丰富的工具和库&#xff0c;包括Python解释器、NumPy、SciPy、Pandas、Scikit-learn、TensorFlow等&#xff0c;使用户能够轻松进行科学计算和数据分析。其强大的包管理器conda简化了软件包的安装和环境管…

Linux/Spectra

Enumeration nmap 第一次扫描发现系统对外开放了22&#xff0c;80和3306端口&#xff0c;端口详细信息如下 22端口运行着ssh&#xff0c;80端口还是http&#xff0c;不过不同的是打开了mysql的3306端口 TCP/80 进入首页&#xff0c;点击链接时&#xff0c;提示域名不能解析&…

4核8G服务器并发数多少?性能如何?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

vue3 增加全局水印(显示登录信息)

一、纯文字水印 在main.ts页面里面 加入以下代码&#xff1a; // 导入 Vue 的 createApp 函数 import { createApp } from vue;// 导入全局样式文件 import ./style.css;// 导入根组件 App.vue import App from ./App.vue;// 导入路由配置 import router from ./router;// 使…

VUE从0到1创建项目及基本路由、页面配置

一、创建项目:(前提已经安装好vue和npm) 目录:E:\personal\project_pro\ windows下,win+R 输入cmd进入命令行: cd E:\personal\project_pro E:# 创建名为test的项目 vue create test# 用上下键选择vue2或vue3,回车确认创建本次选择VUE3 创建好项目后,使用…

【CSS-语法】

CSS-语法 ■ CSS简介■ CSS 实例■ CSS id 和 class选择器■ CSS 样式表■ 外部样式表(External style sheet)■ 内部样式表(Internal style sheet)■ 内联样式(Inline style)■ 多重样式 ■ CSS 文本■ CSS 文本颜色■ CSS 文本的对齐方式■ CSS 文本修饰■ CSS 文本转换■ CS…

2024智慧城市革命:人工智能、场景与运营的融合之力

在数字革命的浪潮中&#xff0c;2024年的智慧城市将成为人类社会进步的新地标。 三大关键元素——人工智能、场景应用和精准运营——正在重新塑造城市面貌&#xff0c;构建未来的智慧城市生活图景。 一、人工智能&#xff1a;赋能智慧城市 随着人工智能技术的快速发展&#x…

第十二篇【传奇开心果系列】Python文本和语音相互转换库技术点案例示例:深度解读SpeechRecognition语音转文本

传奇开心果系列 系列博文目录Python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、SpeechRecognition语音转文本一般的操作步骤和示例代码二、SpeechRecognition 语音转文本的优势和特点三、易用性深度解读和示例代码四、多引擎支持深度解读和示例代码五、灵活性示…

VL817-Q7 USB3.0 HUB芯片 适用于扩展坞 工控机 显示器

VL817-Q7 USB3.1 GEN1 HUB芯片 VL817-Q7 USB3.1 GEN1 HUB芯片 VIA Lab的VL817是一款现代USB 3.1 Gen 1集线器控制器&#xff0c;具有优化的成本结构和完全符合USB标准3.1 Gen 1规范&#xff0c;包括ecn和2017年1月的合规性测试更新。VL817提供双端口和双端口4端口配置&…

Alist访问主页显示空白解决方法

文章目录 问题记录问题探索和解决网络方案问题探究脚本内容查看 最终解决教程 问题记录 访问Alist主页显示空白&#xff0c;按F12打开开发人员工具 ,选择控制台&#xff0c;报错如下 index.75e31196.js:20 Uncaught TypeError: Cannot assign to read only property __symbo…

我来告诉你,为什么你的第一份工作要去大厂

选择第一份工作&#xff0c;就像是为你的职业生涯设置航向&#xff0c;起点往往决定了你能飞得多高。 为什么说走进大厂是一个明智的决策呢&#xff1f; 简单来说&#xff0c;大厂不仅是一个工作的地方&#xff0c;它是一个成长的加速器&#xff0c;一个能让你的能力和视野快速…