测试基础-04-HTML-CSDN博客

本文链接：https://blog.csdn.net/weixin_45916025/article/details/130656290

学习目标

能够知道常见html标签作用
根据测试流程对黑马头条登录需求进行分析
能够对登录模块提取测试点和设计用例
能够使用工具进行记录缺陷

一、html介绍

1、web前端三大核心技术

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

2、HTML骨架标签

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

重点：

页面的内容必须在body中编写
html为根标签，所有的标签必须在根标签中
head标签为头部标签，一般放title和搜索相关知识

3、常用标签

标题标签
段落标签
超链接标签
图片标签
换行和空格
布局标签
列表标签
表单标签

注释：国际通用快捷键（ctrl+/）

3-1、标题标签

说明：HTML标题是通过<h1>-<h6>等标签进行定义

3-2、段落标签

说明：p标签，独占一行、做换行使用、语义化（浏览器）

3-3、超链接标签

说明：超链接是通过<a>标签进行定义的
属性：
	href：跳转地址
	target：值为_blank时，在新窗口打开

<body>
	<a href="https://www.baidu.com" target="_blank">百度</a>
</body>

3-4、图片标签

说明：HTML图片是通过<img>标签进行定义的
属性：
	src：图片路径
	title：光标悬停显示文字
	alt：图片未加载时显示文字
	width：图片宽度
	height：图片高度
测试点：图片必须有title属性（体验感好）

<body>
	<img src="logo.jpg" title="XX" alt="logo" width="104" height="142"/>
</body>

3-5、换行与空格

换行：<br/>
空格：&nbsp；
横线：<hr/>

3-6、布局标签

说明：页面布局使用，常用（div和span）
div：大盒子，独占一行
span：小盒子：一行放多个

<body>
	<!-- 大盒子-div -->
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<!-- 小盒子-span -->
	<div>
		价格<span>$199</span>
	</div>
</body>

3-7、表单标签

说明：页面提交输入信息需要使用表单标签<form>
form标签的作用：提交页面输入数据
属性：
	action：将数据提交到该页面
	method：
		get：
			1、参数在url中显示
			2、速度相对于post快
			3、提交内容长度有限制
		post：
			1、参数不在url中显示
			2、速度相对于get慢
			3、提交内容长度无限制
		场景：
			1、get：查询使用
			2、post：提交 数据使用（登录、注册）
input：type属性值不同
	text：文本框
	password：密码框
	radio：单选
		相同一组才能单选，相同的name属性值为一组
	checkbox：多选框
	button：普通按钮

<body>
	<form action="xx.html" method="post">
		用户名：
		<input type="text" name="username"/><br/>
		密码：
		<input type="password" name="password"/><br/>
		性别：
		<input type="radio" name="sex"/> 男
		<input type="radio" name="sex"/> 女<br/>
		您的爱好：
		<input type="checkbox"/>测试
		<input type="checkbox"/>吃饭
		<input type="checkbox"/>睡觉觉
		<input type="checkbox"/>打豆豆<br/>
		
		<input type="button" value="点我试试"/>
	</form>
</body>

3-8、列表标签

说明：列表标签常用li元素（分为有序和无序）
有序：ol>li
无序：ul>li

<body>
	<!-- 有序 -->
	<ol>
		<li>深圳</li>
		<li>广州</li>
	</ol>

	<!-- 无序 -->
	<ul>
		<li>测试</li>
		<li>开发</li>
	</ul>
</body>

常用标签

<script>js语句</script>
<style>css样式</style>
<link src="http://www.xxx.xxx/xx.css"/>