怎么测试html 软件测试基础HTML

发布时间：2026-07-20阅读(2)

导读web前端三大核心技术1.HTML负责网页的架构2.css负责网页的样式,美化3.JS负责网页的行为什么是HTML?是用来描述网页的一种语言，HTML的主要....web前端三大核心技术

1.HTML负责网页的架构2.css 负责网页的样式,美化3.JS 负责网页的行为

什么是HTML?

是用来描述网页的一种语言，HTML的主要作用：就是让各大浏览器都能够显示同一样的页面

HTML 是用来描述网页的一种语言. 即超文本标记语言
超:超链接
文本
标记语言:是一套标记标签
HTML不是一种编程语言,而是标记语言,HTML用标签来描述网页,HTML文档也称为网页.

Hbuilder简介

新建一个HTML网页1.下载 Hbuilderx 应用程序2.新建一个写代码的文件夹3.鼠标拖拽到工具左侧 ---项目管理器界面中

骨架标签

新建的时候默认生成的那些标签
meta 标签可以设置网页上的字符集
title 标签可以设置网页网站的标题
body标签设置网页的主体内容部分

<!DOCTYPE html># 单标签，代表html文件类型<html># <html>开始标签和</html> 结束标签, 这对称为双标记标签【根标签：】 <head> #头部标签 <meta charset="utf-8"> #单标签，utf-8：国际编码可翻译中文 <title>标题</title> </head> <body> 网页的主体内容 </body> </html>

文章标题标签

h1---h6 分六级，字体依次减小的效果，每个标题都是独占一行注意：不能自己制造新标签，否则无法运行<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6></body></html>

空格和回车

空格使用；换行使用<br /> ；其他写法也可以实现：<br> 和<br >

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>欢迎来到 hello python的世界!!!<br />123 换行<br />456 换行<br />789 换行</body></html>

p标签

<p></p> 负责放文章段落，可以使文本分成若干个段落

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body> <p>一个p代表一个段落</p> <p>语义化：即代表标签的含义，在合适的地方使用合理的标签可以在搜索排名中更靠前</p> <p>当地时间12日20时，</p> <p>法国议会选举首轮投票结束。出口民调显示，</p><p> 现任总统马克龙政党联盟和其主要对手左翼联盟支持率非常接近。</p></body></html>

代码注释

按 control / ：快速注释
再按：control / ：可以取消注释

注意：软件上线前，要删除全部注释，否则会影响加载速度

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><p>我是文章段落</p></body></html>

文字相关标签

1.字体加粗<b></b><strong></strong>

2.字体倾斜<i> </i><em> </em>

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><b> hello python</b><br /><strong>hello python</strong><br /><i>hello world</i><br /><em>hello world</em></body></html>

3.字体添加删除线<s></s><del></del> 推荐优先使用

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><s>2022年6月11号原价9.98</s><br><del>2022年6月12号原价9.97</del><br>6月13号今天：现价8.88</body></html>

工具打开浏览器运行代码

方式1

方式2

键值对，KV对，属性名和属性值

1.添加图片

img src=" " 用法

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>插入图片步骤：<br>1.把图片放到和代码同一个文件夹中<br>2.输入img 按下tab键，在str=" " 中输入图片名称即可<br><img src="25.png" alt=""></body></html>

2.设置图片长度和宽度width=" " height=" "用法<img src="25.png" width="200" height="200">

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>插入图片步骤：<br>1.把图片放到和代码同一个文件夹中<br>2.输入img 按下tab键，在str=" " 中输入图片名称即可<br>3.在第一个键值对后按空格键输入宽度和高度即可<br><img src="25.png" width="200" ></body></html>

4.在图片上添加鼠标悬停操作

title用法<img src="25.png" width="200" title="鼠标悬停出现文字">

5.设置图片未正常加载的情况下会显示内容

alt="描述此张图片的信息 " 用法1.当图片未正常加载的时候，文字才会被别人看到2.网页阅读器读取此内容给视障用户听，提升用户体验

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><img src="5.png" width="200" title="鼠标悬停出现文字" alt="图片未正常加载"></body></html>

超链接基础语法

1.打开网址

<a href=" 网址 "> 文本</a>

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><a href="https://www.baidu.com/">点击我可以百度一下</a></body></html>

2.打开本地页面：输入文件名.扩展名

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body>步骤：输入a回车,添加网址即可<br><a href="文章标题.html">点击我可以百度一下</a></body></html>

超链接基础语法进阶

target="_blank"

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><a href="http://www.baidu.com" target="_blank">点击我，跳转到新窗口打开百度</a></body></html>

空连接

暂时不知道点击之后跳转到哪里，使用空链接占位

补充：测试工作时，如果发现程序员使用#来表达返回顶部效果时，可以提醒程序员使用动画效果实现，用户体验会更好一些

相对路径（重点）

1.同级查找：当前HTML和目标在同级目录中，语法：直接写资源名字即可2.上级查找：当前HTML和目标在上级目录中，语法：../写资源的名字即可3.下级查找：当前HTML和目标在下级目录中，语法：文件夹名/写资源名字即可

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><a href="文章标题.html">点击我打开</a><br><img src="图片/25.png" alt=""></body><a href="../文章标题.html">点击我打开上级的文章标题</a></html>

绝对路径（重点）

目标资源在电脑中具体的位置

列表

1.无序列表 ：在<ul></ul>中嵌套<li></li>每一个li就是一个选项 -->

<u1><li>基础班</li><li>功能班</li><li>自动化测试班</li></u1>

2.有序列表：

<ol><li>基础班</li><li>功能班</li><li>自动化测试班</li></ol>

布局的标签

当没有任何语义的时候，可以使用div或span进行布局，目的是后期css代码可以找到对应标签中的内容来设置样式。（语义标签是有应用场景的如段落，标题等）

布局标签:无任何语义，方便后期设置内容样式

<div>各标签内容独占一行</div><span>标签内容合并成一行</span

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div>我是div</div><div>我是div</div><div>我是div</div><div>特点：多个div独占一整行空间</div><br><span>我是span</span><span>我是span</span><span>我是span</span><span>特点：多个span在同一行显示</span></body></html>

音频标签

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><audio src="音频.mp3" controls="controls"></audio></body></html>

视频标签

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><video src="视频.mp4" controls="controls" height="200" width="200"></video></body></html>

音频，视频，测试点

audio 音频 video 视频测试细节：因历史原因导致音，视频版本兼容性低，对于测试工作来说需要测试三大主流浏览器是否能够正常运行，音频，视频。Ie测试低版本（ie7.8.9.10.11）测试方法：打开ie浏览器，按F12 找到仿真(必须是IE高版本才能测试低版本)什么时候测试低版本：用户要求的情况下再测试

表单标签

1.表单基础密码框type="text"普通输入框type="password"密码框

<form action="" method="post"></form>用户名：<input type="text"><br>密码框：<input type="password" >

2.单选按钮type="radio" 单选checkde="checked" 此属性表示默认选中状态

性别：<input type="radio" name="xb" checked="checked" id="nan"><label for="nan">男</label><input type="radio" name="xb"id="nv"><label for="nv">女</label>

测试步骤：1.点击查看是否为单选效果2.刷新时是否有默认选中的状态3.点击文字是否可以进行切换

3.多选框type="checkbox" 多选框，复选框checked="checked" 默认选中

测试的细节：1.刷新的时候是否有默认选中的状态2.点击文字是否可以进行切换一切测试要看是否满足用户需求 -->

<input type="checkbox" id="cs"><label for="cs">测试</label><input type="checkbox" id="cf"><label for="cf">吃饭</label><input type="checkbox" id="sj"><label for="sj">睡觉</label><input type="checkbox" id="dyx"><label for="dyx">打游戏</label>

4.下拉菜单

select标签嵌套若干个option标签，每个option标签就代表一个下拉选项测试细节1.下拉选中的内容顺序2.默认选中的状态

默认选中的是：郑州

<select name="" id=""><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">深圳</option><option value="" selected="selected">郑州</option></select>

5.文本域

textarea tab键测试的细节：1.测试三大主流浏览器外观大小是否一致2.提醒程序员禁用拖拽大小的功能

意见:<style type="text/css"> textarea{resize:none;}</style><textarea name="" id="" cols="30" rows="10"></textarea>

6.按钮

普通按钮:<input type="button" value="按钮"><br>重置按钮:<input type="reset" value="重置"><br>提交按钮:<input type="submit" value="提交">

关于表单的用户体验提升

1.添加placeholder=" "属性，可以文本框设置提示文字如下图