【软件测试】--功能测试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="10-接受数据.html" method="get"> 用户名:
      密码框:
      性别:
      您的爱好: 挣钱 吃饭 欣赏美 个人发挥
      </form>
  • 提交

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

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

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

相关推荐
Highcharts.js11 小时前
Highcharts 纯 JavaScript 图表库深度使用评测
开发语言·前端·javascript·功能测试·ecmascript·highcharts·技术评测
a里啊里啊2 天前
软考-软件评测师:知识点整理(八)——软件测试
软件测试·功能测试·压力测试·软考·软件评测师
汽车仪器仪表相关领域2 天前
Kvaser USBcan Pro 2xHS v2:双通道高速 CAN/FD 专业级 USB 接口,汽车与工业总线深度开发与诊断的核心工具
网络·人工智能·功能测试·fpga开发·汽车·可用性测试
测试员周周2 天前
【AI测试功能6】功能测试的自动化率:哪些该自动、哪些必须人工——AI测试人机协作决策指南
开发语言·人工智能·python·功能测试·单元测试·自动化·测试用例
汽车仪器仪表相关领域2 天前
Kvaser Air Bridge Light HS:免配置工业级无线 CAN 桥接器,70 米稳定传输,移动设备与动态场景的 CAN 互联理想之选
人工智能·功能测试·安全·单元测试·汽车·可用性测试
QH139292318803 天前
罗德与施瓦茨 FSW26 FSW43 FSW50高端信号分析仪
网络·功能测试·单元测试·集成测试·模块测试
新新学长搞科研3 天前
【最新】2026年能源方向学术会议征稿/交流资讯
人工智能·功能测试·计算机视觉·自动化·能源·新能源·材料工程
智行众维3 天前
四通道车载轮速故障模拟器,破解智驾制动安全验证困局
功能测试·故障模拟·轮速故障模拟器·制动测试
神州数码云基地3 天前
AI 驱动的自动化安全测试工具--Strix
运维·人工智能·功能测试·测试工具·自动化
Mack.Jason3 天前
软件测试中的计划,方案和统筹
功能测试·测试覆盖率