软件测试 3(html)

 

学习目标:

1. 能够说出常见的html标签(10+)的作用
2. 项目(登录)测试

一、html介绍

1、

html: 超文本标记语言，由一套标记标签组成

标签:

• 单标签:  <标签名 />
• 双标签:  <标签名></ 标签名>
• 属性:  描述某一特征，示例: <a 属性名=“属性值”>

2、html骨架标签

• html:根标签，所有的内容都应该放到html标签中
• head：头部标签
• body:身体标签（代码编写区域）

 3、注释

• 作⽤：描述的内容不会被浏览器执⾏
• 说明：解析程序给程序员看
• 快捷键：ctrl+/
• 测试点：前端⻚⾯上线之前检查注释描述或去除注释 

4、标签

①标题： h1~h6

说明：h1最⼤，h6最⼩

示例： 

 <h1>我是h1</h1>
 <h6>我是h6</h6>

②段落：p

特点：语义化、独占⼀块（换⾏）

示例： 

<p>我是段落</p>

③超链接: a 

说明： 点击⽂本跳转到指定⻚⾯

语法：

<a href=“http://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="此处有⼀张⽥野照⽚"/>

⑤空格与换⾏

空格：   &->shift+7

换⾏： < br />

⑥布局标签

布局：设置⻚⾯布局，便于排版列表

• ⼤盒⼦：div、独占⼀⾏
• ⼩盒⼦：span、⼀⾏可以放多个

⑦列表

 

• script:js标签
• style:css标签
• link:外部加载css标签

⑧input标签

⽂本框：<input type="text" />

密码框：<inpt type="password" />

单选按钮：

复选框：

按钮：

• 普通：type=button
• 提交：type=submit
• 重置: type=rese

 <!--
      按钮测试点：统⼀使⽤value进⾏赋值
      提示：普通按钮默认没有执⾏效果，需要配合Js来实现。
 -->

⑨form标签

作用: 提交页面输入数据到指定页面或后台。

<!-
form
作⽤：将⻚⾯输⼊的数据提交到后台或指定⻚⾯
属性：
action：  指定将数据提交到那个⻚⾯。
method:提交参数的⽅法（get、post）
get:查询使⽤
              1、参数url明⽂显示
              2、提交速度快
              3、提交参数有⻓度限制
            post:提交数据、登录、注册
              1、⾮明⽂显示
              2、提交速度慢
              3、提交参数的⻓度⽆限制
-->

 

<form action="10-接受数据.html" method="get">
      ⽤户名：<input type="text" name="username"/>
      <br />
      密码框：<input type="password" name="password"/>
      <br />
      <!-
        单选效果：
          1、相同⼀组的radio才能做单选。
          2、设置相同（组名）name属性值为⼀组。
      -->
      性别：
      <input type="radio" name="one"/>男
      <input type="radio" name="one"/>⼥
      <br />
      您的爱好：
      <input type="checkbox" />挣钱
      <input type="checkbox" />吃饭
      <input type="checkbox" />欣赏美
      <input type="checkbox" />个⼈发挥
      <br />
      <input type="submit" />
      <input type="reset" />
      <input type="button" value="点我试试"/>
    </form>