软件测试工程师学习笔记7 - 入门篇_测试工程师span-CSDN博客

本文链接：https://blog.csdn.net/weixin_44737955/article/details/123459069

软件测试工程师学习笔记 -7

入门必读
- 4. 项目实战——HTML篇

入门必读

基础入门目标五天结束，能独立完成功能测试过程。

4. 项目实战——HTML篇

30%占比

1）目标

能说出常见的html标签（10+）的作用
项目（登录）测试

2）知识点

HTML介绍
HTML是用来描述网页的一种语言
Web前端三大核心技术：
- HTML：负责网页的架构
- css:负责网页的样式、美化
- JS：负责网页的行为
HTML标签分为单标签<html>和双标签<b>内容 </b>
标签属性格式：属性名 = “属性值”，例如：
<a href = "http://www.jd.com">京东</a>

HTML骨架标签
html：根标签，所有内容都在html标签中
head：头部标签
body：身体标签（代码编写区域）

<!DOCTYPE html>
	<html>
		<head>
			<meta charset = "UTF-8">
			<title>软件测试工程师</title>
		</head>
	</html>
	<body>
				从入门到精通
	</body>
</html>

编写HTML工具

常用标签

标题标签：h1~h6，h1最大，h6最小
示例：
<h1>我是h1</h1>
<h6>我是h6</h6>

段落标签：p，特点是语义化、独占一行
示例：
<p>我是p</p>

超链接标签：a，属性：href为跳转地址，target为新窗口打开
示例：<a href = "http://www.jd.com" target=“_blank”>京东</a>

图片标签：img
属性：
src 图片路径、title 悬停显示文字、alt 图片未加载显示
width 宽 100px px：像素、height 高
测试点：必须有title属性（悬停和未加载显示）
示例：<img src = "Ayar.jpg"title = “ayar” width=“500px”>
拓展–图片存放路径
相对路径：“相对于当前执行文件所在位置作为起点”，上一级…/、同级./
绝对路径不推荐

换行和空格：换行<br/>、空格 
布局标签：div、span
示例：

<div>div1</div>
<div>div2</div>
<div>
	价格<span>$199<span>
</div>

列表标签：li、ol、ul
示例：

<!-- 有序列表 -->

		<ol>
			<li>昌平</li>
			<li>海淀</li>
			<li>朝阳</li>
		</ol>

<!-- 无序列表 -->
	<ul>
		<li>苹果</li>
		<li>橘子</li>
		<li>葡萄</li>
	</ul>

运行结果

表单标签：form
from里嵌套了input，input根据属性值可分为
【文本框】    ：type = “text”
【密码框】    ：type = “password”
【单选按钮】：type = “radio”
【复选框】    ：type = “checkbox”
【按    钮】    ：type = “button ” 普通按钮、type = “reset” 重置按钮、type = “submit”提交按钮
form的作用是将输入的数据提交到后台或者指定页面，属性为acction。方法有get和post两种。get提交时参数url明文显示，有长度限制，一般用做查询使用。post非明文显示，长度无限制，但是也不安全，一般用做提交数据、登录、注册。
示例：

		<div>
			用户名：<input type = "text" /><br/>
		</div>
		<div>
			密码框：<input type = "password" />
		</div>
		<div>
			性别：
			<span>
				<input type="radio" name="one"/>男
				<input type="radio" name="one"/>女
			</span>
		</div>
		您的爱好：
		<input type="checkbox" name="">挣钱
		<input type="checkbox" name="">挣钱
		<input type="checkbox" name="">挣钱
		<input type="checkbox" name="">挣钱
	
		<br>
		<input type="submit" name="">
		<input type="reset" name="">
		<input type="button" value ="点我看看">`