Web测试技术
IV. Web测试前端技术
HTML
什么是HTML
HTML全称是超文本标记语言（Hyper Text Markup Language），它是互联网上应用最广泛的标记语言。简单的说，HTML文件就是普通文本 + HTML标记（又叫做标签），而且不同的HTML标记能表示不同的效果。
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如
和 - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
My First Heading
My first paragraph.
HTML 历史
HTML的发展历史比较复杂。因为它实在是太“随意”了，而且负责解析HTML的浏览器们又太“宽容”了。以至于到了“写一份对的HTML文档很容易，写一份错的HTML文档很难”的程度。而且不同的浏览器之间又是存在一些差异，因此导致HTML给人的感觉比较混乱。
- HTML 1.0：1993年6月 由互联网工程工作小组发布
- HTML 2.0：1995年11月 作为RFC 1866发布
- HTML 3.2：1996年1月14日 由W3C组织发布，是HTML文档第一个被广泛使用的标准。
- W3C：World Wide Web Consortium，万维网联盟。创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
- HTML 4.0：1997年12月18日 由W3C组织发布，也是W3C推荐标准。
- HTML 4.01：1999年12月24日 有W3C组织发布，是HTML文档的另一个重要的和广泛使用的标准。
- XHTML 1.0：发布与2000年1月26日，是W3C组织推荐标准，后来经过修订，于2002年8月1日重新发布。
- 2008年 WHATWG制定并发布了HTML5规范。
W3C 是什么？
- W3C 指万维网联盟（World Wide Web Consortium）
- W3C 创建于1994年10月
- W3C 由 Tim Berners-Lee 创建
- W3C 是一个会员组织
- W3C 的工作是对 web 进行标准化
- W3C 创建并维护 WWW 标准
- W3C 标准被称为 W3C 推荐（W3C Recommendations）
在HTML3.2之前，HTML的发展极为混乱，各个软件厂商经常自行增加HTML标签，而各个浏览器厂商为了保持最好的兼容性，总是尽力支持各种HTML标签，这就导致了HTML显得极为混乱。
参考下面的例子
- 这是不标准的 HTML 第1行
- 这是不标准的 HTML 第2行
- 这是不标准的 HTML 第3行
- this is the line 4 of the nonstandard HTML
- this is the line 5 of the nonstandard HTML
- this is the line 6 of the nonstandard HTML
XHTML的全称是扩展的超文本标记语言（eXtensible Hyper Text Markup Language），是更严格、更纯净的HTML代码。W3C制定XHTML的目的就是逐步取代原有的HTML。简单说：XHTML就是最新版本的HTML规范。
参考下面的例子2
混乱的HTML文档
混乱的HTML文档
XHTML致力于消除这种不规范，要求HTML文档首先必须是一份XML文档。
- XML文档是一种结构化文档，它有如下4条基本规则：
- 整个文档有且只有一个根元素
- 每个元素都有开始表情和结束标签组成，除非使用空元素语法。
- 元素与元素之间应该合理嵌套。
- 元素的属性必须有属性值，而且属性值应该用引号引起来。
一个简单的HTML文件
我的第一个 HTML 页面
body 元素的内容会显示在浏览器中。
title 元素的内容会显示在浏览器的标题栏中。
段落
这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
诗歌问题
春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。
春晓
春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
标题
标题
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。
居中排列的标题
标题
This is heading 1
上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。
注释
注释
这是一段普通的段落。
文本格式
文本格式
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text contains
subscript
This text contains
superscript
超链接
超链接
本文本 是一个指向本网站中的一个页面的链接。
本文本 是一个指向万维网上的页面的链接。
图片超链接
超链接
您也可以使用图像来作链接：
超链接
您也可以使用图像来作链接：
邮件测试
邮件测试
这是邮件链接：
发送邮件
注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
表格
表格
消费项目....
一月
二月
衣服
￥241.10
￥50.20
化妆品
￥30.00
￥44.45
食物
￥730.40
￥650.00
总计
￥1001.50
￥744.65
列表
无序列表
列表
一个无序列表：
- 咖啡
- 茶
- 牛奶
项目符号列表
列表
Disc 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
Circle 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
Square 项目符号列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
有序列表
列表
- 咖啡
- 牛奶
- 茶
- 咖啡
- 牛奶
- 茶
数字列表
列表
数字列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
小写字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
罗马字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
小写罗马字母列表：
- 苹果
- 香蕉
- 柠檬
- 桔子
表单
表单
请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。
空格< <> >" "& &
CSS
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
样式表解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支持层叠样式表。 样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。 由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 id选择器：# 类选择器：. 这是段落 这个段落设置了内边距。 这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。 该段落定义了 class="ex"。该段落中的文本是蓝色的。 JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。 JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 This is a paragraph
JavaScript 能够直接写入 HTML 输出流中：
您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
JavaScript 能够对事件作出反应。比如对按钮的点击：
JavaScript 能改变 HTML 元素的内容。
点击灯泡来点亮或熄灭这盏灯
JavaScript 能改变 HTML 元素的样式。
请输入数字。如果输入值不是数字，浏览器会弹出提示框。 JSON：JavaScript 对象表示法（JavaScript Object Notation）。 JSON 是存储和交换文本信息的语法。类似 XML。 JSON 比 XML 更小、更快，更易解析。 什么是 JSON ？ JSON 语法规则 JSON 名称/值对 JSON 数据的书写格式是：名称/值对。 名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值： JSON 值 JSON 值可以是： JSON 对象 JSON 对象在花括号中书写： 对象可以包含多个名称/值对： JSON 数组在方括号中书写： 数组可包含多个对象： 在上面的例子中，对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。 PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。 PHP 是免费的，并且使用广泛。对于像微软 ASP 这样的竞争者来说，PHP 无疑是另一种高效率的选项。 PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词 PHP 是一种被广泛使用的开源脚本语言 PHP 脚本在服务器上执行 PHP 没有成本，可供免费下载和使用 PHP 是一门令人惊叹的流行语言！ 它强大到足以成为在网络上最大的博客系统的核心（WordPress）！ 它深邃到足以运行最大的社交网络（facebook）！ 而它的易用程度足以成为初学者的首选服务器端语言！ PHP 文件能够包含文本、HTML、CSS 以及 PHP 代码 PHP 代码在服务器上执行，而结果以纯文本返回浏览器 PHP 文件的后缀是 ".php" PHP 能够生成动态页面内容 PHP 能够创建、打开、读取、写入、删除以及关闭服务器上的文件 PHP 能够接收表单数据 PHP 能够发送并取回 cookies PHP 能够添加、删除、修改数据库中的数据 PHP 能够限制用户访问网站中的某些页面 PHP 能够对数据进行加密 通过 PHP，可以不受限于只输出 HTML。还能够输出图像、PDF 文件、甚至 Flash 影片。也可以输出任何文本，比如 XHTML 和 XML。 PHP 运行于各种平台（Windows, Linux, Unix, Mac OS X 等等） PHP 兼容几乎所有服务器（Apache, IIS 等等） PHP 支持多种数据库 PHP 是免费的。请从官方 PHP 资源下载：www.php.net PHP 易于学习，并可高效地运行在服务器端 如需开始使用 PHP，可以： 使用支持 PHP 和 MySQL 的 web 主机 在 PC 上安装 web 服务器，然后安装 PHP 和 MySQL。 如果服务器支持 PHP，那么无需做任何事情。 只要创建 .php 文件，然后上传到 web 目录中即可。服务器会自动对它们进行解析。 无需编译或安装任何额外的工具。 因为 PHP 是免费的，大多数 web 主机都支持 PHP。 不过如果服务器不支持 PHP，那么必须： 安装 web 服务器 安装 PHP 安装数据库，比如 MySQL PHP 脚本可放置于文档中的任何位置。 PHP 脚本以 结尾： PHP 文件的默认文件扩展名是 ".php"。 PHP 文件通常包含 HTML 标签以及一些 PHP 脚本代码。 $_GET 是通过 URL 参数传递到当前脚本的变量数组。 $_POST 是通过 HTTP POST 传递到当前脚本的变量数组。 welcome.php date() 函数的格式参数是必需的，它们规定如何格式化日期或时间。 下面列出了一些常用于日期的字符： d - 表示月里的某天（01-31） m - 表示月（01-12） Y - 表示年（四位数） 1 - 表示周里的某天 ODBC 是一种应用程序编程接口（Application Programming Interface，API），使我们有能力连接到某个数据源（比如一个 MS Access 数据库）。 通过一个 ODBC 连接，您可以连接到您的网络中的任何计算机上的任何数据库，只要 ODBC 连接是可用的。 这是创建到达 MS Access 数据的 ODBC 连接的方法： odbc_connect() 函数用于连接到 ODBC 数据源。该函数有四个参数：数据源名、用户名、密码以及可选的指针类型参数。 odbc_exec() 函数用于执行 SQL 语句。、、 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
";
?>
样式表极大地提高了工作效率
selector {declaration1; declaration2; ... declarationN }
h1 {color:red; font-size:14px;}
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
背景色
这是标题 1
这是标题 2
文本颜色
这是 heading 1
div布局
这里是网页的主标题
JavaScript
JavaScript：写入 HTML 输出
document.write("This is a heading
");
document.write("
JavaScript：对事件作出反应
我的第一段 JavaScript
JavaScript：改变 HTML 内容
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
我的第一段 JavaScript
JavaScript：改变 HTML 样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000";
我的第一段 JavaScript
JavaScript：验证输入
if isNaN(x) {alert("Not Numeric")};
我的第一段 JavaScript
JSON
"firstName" : "John"
null{ "firstName":"John" , "lastName":"Doe" }
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
V. Web测试服务端技术
PHP基础
什么是 PHP？
什么是 PHP 文件？
PHP 能够做什么？
为什么使用 PHP？
我需要怎么开始？
使用支持 PHP 的 Web 主机
在 PC 上运行 PHP
基础 PHP 语法
我的第一张 PHP 页面
PHP 支持三种注释：
PHP 大小写不敏感
";
echo "Hello World!
";
EcHo "Hello World!
";
?>
";
EcHo "Hello World!
";
?>
PHP 变量大小写敏感
";
echo "My house is " . $COLOR . "
";
echo "My boat is " . $coLOR . "
";
?>
";
echo "My boat is " . $coLOR . "
";
?>
PHP进阶
PHP表单处理
Welcome
Your email address is:
PHP 日期
";
echo "今天是 " . date("Y.m.d") . "
";
echo "今天是 " . date("Y-m-d") . "
";
echo "今天是 " . date("l");
?>
";
echo "今天是 " . date("Y-m-d") . "
";
echo "今天是 " . date("l");
?>
VI. Web测试数据库技术
ODBC
创建 ODBC 连接
连接到 ODBC
$conn=odbc_connect('northwind','','');
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);
";
echo " ";
while (odbc_fetch_row($rs))
{
$compname=odbc_result($rs,"CompanyName");
$conname=odbc_result($rs,"ContactName");
echo "Companyname ";
echo "Contactname $compname ";
echo "$conname
PHP连接MySQL
连接到一个 MySQL 数据库
在能够访问并处理数据库中的数据之前，必须创建到达数据库的连接。
在 PHP 中，这个任务通过 mysql_connect() 函数完成。
mysql_connect(servername,username,password);
";
}
mysql_close($con);
?>
PHP 连接 MySQL
";
echo "HOST ";
echo "USER ";
while($row = mysql_fetch_array($result))
{
echo "".$row['Host']." ".$row['User']." 冒泡排序
PHP 连接 MySQL
$arr[$k+1])
{
$tmp=$arr[$k+1];
$arr[$k+1]=$arr[$k];
$arr[$k]=$tmp;
}
}
}
return $arr;
}
echo "原数组";
print_r($arr);
//echo "
"
$newArray = getpao($arr);
echo "新数组";
print_r($newArray);
?>