功能测试—day4
1.HTML介绍
2.HTML骨架标签
3.编写HTML工具
4.常用标签
目录
一、HTML介绍
1.Web前端三大核心技术
HTML：负责网页的架构
CSS：负责网页的样式、美化
JS：负责网页的行为
2.什么是HTML
HTML是用来描述网页的一种语言
3.HTML标签形态
单标签：<html>
双标签：<b>内容</b>
4.标签属性
标签属性是用来描述标签的一些特征，比如人有身高、体重、男女这些属性一样
属性格式：属性名=“属性值”
例如：<a href="http://www.jd.com">京东</a>
其中href是属性名，网址是属性值，属性值可以有多个
二、HTML骨架标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签页标题</title>
</head>
<body>
网页页面显示内容
</body>
</html>
html：根标签，所有的内容都在这个标签中
head：头标签，一般写的是页面的标题
body：身体标签，这里面主要是页面所显示的所有内容
三、编写HTML工具
一般从来编写html的工具是 HBuilder 工具，大家可以自行下载使用
打开谷歌浏览器，按F12进入开发者模式，看到的就是HTML页面的内容，只可以自己修改内容，观察网页的变化
四、常用标签
1.注释
作用：描述的内容不会被浏览器执行
说明：解析程序给程序员看
快捷键：Ctrl+/ （也可直接这样写<!--注释区域-->）
测试点：前段页面上线之前，检查注释内容或者去掉注释
2.标题标签
说明：HTML标题是通过<h1>-<h6>等标签来进行定义，h1最大，h6最小
示例：
效果：
3.段落标签
写法：<p>我是段落</p>
特点：段落标签在显示的时候会自动换行，独占一块
4.超链接标签
说明：点击文本，跳转到指定网址。超链接是通过<a>标签来进行定义的
示例：
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
属性：
href：跳转地址
target：新窗口打开
5.图片标签
说明：网页中插入图片就要使用图片标签，HTML图片是通<img>标签来进行定义的
示例：
<body>
<img src="logo.jpg" title="测试小咖" alt="logo" width="104" height="142" />
</body>
属性：
src：图片路径
title：光标悬停显示文字
alt：图片未加载时显示文字
width：图片宽度
height：图片高度
作为软件测试人员，以上属性中，必须要有两个属性，src和title
6.换行和空格
换行：<br/>
空格： 
示例：
<body>
你好<br/>测试小咖！
测试小咖 ；软件测试！
</body>
7.布局标签
说明：页面布局使用，便于排版，常用（div和span）
特点：div是大盒子，可以独占一行。span是小盒子，一行可以放多个。
div的示例：
8.列表标签
说明：列表标签常用li元素，分为有序列表和无序列表
css标签：css标签在style里面，<style>css标签</style>
js标签：js标签在script里面，<script>js标签</script>
9.表单标签
说明：页面提交输入信息需要使用表单标签<form>
示例：
type的text值不同，显示的效果也不同。重点学习掌握文本框和密码框
单选框写法：<input type="radio" name="one"/>男
复选框写法：<input type="checkbox" />挣钱
按钮写法：
提交：<input type="submit" />
重置：<input type="reset"/>
按钮：<input type="button" value=“点我试试” />
以上按钮的效果：
form标签：提交页面输入的数据到指定的页面或者后台
重点要了解get和post的区别
按钮的测试点：
按钮需要统一赋值，防止不同浏览器的显示不同
解决方法：用value进行统一赋值
总结：
本章内容，主要是学会作为软件测试人员，需要了解的html前端页面的相关知识。重点内容是html的常用标签。学习了本章内容就能看懂开发者模式下的网页源代码，这是一名测试人员需要掌握的基本知识。
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
