IV. Web测试前端技术
HTML
什么是HTML
HTML全称是超文本标记语言（Hyper Text Markup Language），它是互联网上应用最广泛的标记语言。简单的说，HTML文件就是普通文本 + HTML标记（又叫做标签），而且不同的HTML标记能表示不同的效果。
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- HTML 使用标记标签来描述网页
- HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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 指万维网联盟（World Wide Web Consortium）
- W3C 创建于1994年10月
- W3C 由 Tim Berners-Lee 创建
- W3C 是一个会员组织
- W3C 的工作是对 web 进行标准化
- W3C 创建并维护 WWW 标准
- W3C 标准被称为 W3C 推荐（W3C Recommendations）
参考下面的例子
<ol>
<li> 这是不标准的 HTML 第1行
<li> 这是不标准的 HTML 第2行
<li> 这是不标准的 HTML 第3行
<li> this is the line 4 of the nonstandard HTML
<li> this is the line 5 of the nonstandard HTML
<li> this is the line 6 of the nonstandard HTML
</ol>
XHTML的全称是扩展的超文本标记语言（eXtensible Hyper Text Markup Language），是更严格、更纯净的HTML代码。W3C制定XHTML的目的就是逐步取代原有的HTML。简单说：XHTML就是最新版本的HTML规范。
参考下面的例子2
<html>
<head>
<title>混乱的HTML文档</title>
<body>
<h1>混乱的HTML文档
XHTML致力于消除这种不规范，要求HTML文档首先必须是一份XML文档。
- XML文档是一种结构化文档，它有如下4条基本规则：
- 整个文档有且只有一个根元素
- 每个元素都有开始表情和结束标签组成，除非使用空元素语法。
- 元素与元素之间应该合理嵌套。
- 元素的属性必须有属性值，而且属性值应该用引号引起来。
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
段落
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
<html>
<body>
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
</p>
</body>
</html>
诗歌问题
<html>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>春晓</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
<br />处处闻啼鸟。
<br />夜来风雨声，
<br />花落知多少。
</p>
</body>
</html>
标题
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
居中排列的标题
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题</title>
</head>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>
注释
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>注释</title>
</head>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>
文本格式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本格式</title>
</head>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br /> This text contains
<sub>subscript</sub>
<br /> This text contains
<sup>superscript</sup>
</body>
</html>
超链接
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
图片超链接
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
</a>
</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
<p>
您也可以使用图像来作链接：
<a href="https://www.baidu.com" target="_blank">
</a>
</p>
</body>
</html>
邮件测试
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>邮件测试</title>
</head>
<body>
<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>
表格
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格</title>
</head>
<body>
<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">￥241.10</td>
<td align="right">￥50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">￥30.00</td>
<td align="right">￥44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">￥730.40</td>
<td align="right">￥650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">￥1001.50</th>
<th align="right">￥744.65</th>
</tr>
</table>
</body>
</html>
列表
无序列表
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>列表</title>
</head>
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
项目符号列表
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>列表</title>
</head>
<body>
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
</body>
</html>
有序列表
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>列表</title>
</head>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>
数字列表
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>列表</title>
</head>
<body>
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
</body>
</html>
表单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单</title>
</head>
<body>
<form action="/example/html/form_action.asp" method="get">
<p>用户名:
<input type="text" name="username" />
</p>
<p>密 码:
<input type="password" name="password" />
</p>
<input type="submit" value="登录" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>
- 空格
- < <
- > >
- " "
- & &
CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
h1 {color:red; font-size:14px;}
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
id选择器：#
类选择器：.
背景色
<!DOCTYPE html>
<html>
<head>
<title>背景色</title>
<style type="text/css">
body {
background-color: yellow
}
h1 {
background-color: #00ff00
}
h2 {
background-color: transparent
}
p {
background-color: rgb(250, 0, 255)
}
p.no2 {
background-color: gray;
padding: 20px;
}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>
文本颜色
<!DOCTYPE html>
<html>
<head>
<title>文本颜色</title>
<style type="text/css">
body {
color: red
}
h1 {
color: #00ff00
}
p.ex {
color: rgb(0, 0, 255)
}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
<p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>
</body>
</html>
div布局
<!DOCTYPE html>
<html>
<head>
<title>div布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div#container {
width: 500px
}
div#header {
background-color: #99bbbb;
}
div#menu {
background-color: #ffff99;
height: 200px;
width: 150px;
float: left;
}
div#content {
background-color: #EEEEEE;
height: 200px;
width: 350px;
float: left;
}
div#footer {
background-color: #99bbbb;
clear: both;
text-align: center;
}
h1 {
margin-bottom: 0;
}
h2 {
margin-bottom: 0;
font-size: 18px;
}
ul {
margin: 0;
}
li {
list-style: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>这里是网页的主标题</h1>
</div>
<div id="menu">
<h2>菜单</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">这里是网页内容</div>
<div id="footer">这里是网页底部</div>
</div>
</body>
</html>
JavaScript
JavaScript 是世界上最流行的脚本语言。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被设计为向 HTML 页面增加交互性。
许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript：写入 HTML 输出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
<!DOCTYPE html>
<html>
<head>
<title>JavaScript：写入 HTML 输出</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
JavaScript：对事件作出反应
<button type="button" onclick="alert('Welcome!')">点击这里</button>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript：对事件作出反应</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('Welcome!')">点击这里</button>
</body>
</html>
JavaScript：改变 HTML 内容
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
<!DOCTYPE html>
<html>
<head>
<title>JavaScript：改变 HTML 内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction() {
x = document.getElementById("demo"); // 找到元素
x.innerHTML = "Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
JavaScript：改变 HTML 样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000";
<!DOCTYPE html>
<html>
<head>
<title>JavaScript：改变 HTML 内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<script>
function changeImage() {
element = document.getElementById('myimage')
if (element.src.match("bulbon")) {
element.src = "http://www.w3school.com.cn/i/eg_bulboff.gif";
} else {
element.src = "http://www.w3school.com.cn/i/eg_bulbon.gif";
}
}
</script>
<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript：改变 HTML 内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction() {
x = document.getElementById("demo") // 找到元素
x.style.color = "#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
JavaScript：验证输入
if isNaN(x) {alert("Not Numeric")};
<!DOCTYPE html>
<html>
<head>
<title>JavaScript：改变 HTML 内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction() {
var x = document.getElementById("demo").value;
if (x == "" || isNaN(x)) {
alert("Not Numeric");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
JSON
JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
什么是 JSON ？
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言 *
- JSON 具有自我描述性，更易理解
- JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
- JSON 语法是 JavaScript 对象表示法语法的子集。
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON 数据的书写格式是：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
"firstName" : "John"
JSON 值
JSON 值可以是：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
JSON 对象在花括号中书写：
对象可以包含多个名称/值对：
{ "firstName":"John" , "lastName":"Doe" }
JSON 数组在方括号中书写：
数组可包含多个对象：
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
在上面的例子中，对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。
V. Web测试服务端技术
PHP基础
PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。
PHP 是免费的，并且使用广泛。对于像微软 ASP 这样的竞争者来说，PHP 无疑是另一种高效率的选项。
什么是 PHP？
PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词
PHP 是一种被广泛使用的开源脚本语言
PHP 脚本在服务器上执行
PHP 没有成本，可供免费下载和使用
PHP 是一门令人惊叹的流行语言！
它强大到足以成为在网络上最大的博客系统的核心（WordPress）！
它深邃到足以运行最大的社交网络（facebook）！
而它的易用程度足以成为初学者的首选服务器端语言！
什么是 PHP 文件？
PHP 文件能够包含文本、HTML、CSS 以及 PHP 代码
PHP 代码在服务器上执行，而结果以纯文本返回浏览器
PHP 文件的后缀是 ".php"
PHP 能够做什么？
PHP 能够生成动态页面内容
PHP 能够创建、打开、读取、写入、删除以及关闭服务器上的文件
PHP 能够接收表单数据
PHP 能够发送并取回 cookies
PHP 能够添加、删除、修改数据库中的数据
PHP 能够限制用户访问网站中的某些页面
PHP 能够对数据进行加密
通过 PHP，可以不受限于只输出 HTML。还能够输出图像、PDF 文件、甚至 Flash 影片。也可以输出任何文本，比如 XHTML 和 XML。
为什么使用 PHP？
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 的 Web 主机
如果服务器支持 PHP，那么无需做任何事情。
只要创建 .php 文件，然后上传到 web 目录中即可。服务器会自动对它们进行解析。
无需编译或安装任何额外的工具。
因为 PHP 是免费的，大多数 web 主机都支持 PHP。
在 PC 上运行 PHP
不过如果服务器不支持 PHP，那么必须：
安装 web 服务器
安装 PHP
安装数据库，比如 MySQL
基础 PHP 语法
PHP 脚本可放置于文档中的任何位置。
PHP 脚本以 <?php 开头，以 ?> 结尾：
<?php
// 此处是 PHP 代码
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<h1>我的第一张 PHP 页面</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
PHP 文件的默认文件扩展名是 ".php"。
PHP 文件通常包含 HTML 标签以及一些 PHP 脚本代码。
PHP 支持三种注释：
<?php
// 这是单行注释
# 这也是单行注释
/*
这是多行注释块
它横跨了
多行
*/
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP 支持三种注释</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<?php
// 这是单行注释
# 这也是单行注释
/*
这是多行注释块
它横跨了
多行
*/
echo "Hello World!";
?>
</body>
</html>
PHP 大小写不敏感
<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP 大小写不敏感</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>
</body>
</html>
PHP 变量大小写敏感
<?php
$color="red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP 变量大小写敏感</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<?php
$color="red";
echo "My car is " . $color . "<br>";
echo "My house is " . $COLOR . "<br>";
echo "My boat is " . $coLOR . "<br>";
?>
</body>
</html>
PHP进阶
PHP表单处理
$_GET 是通过 URL 参数传递到当前脚本的变量数组。
$_POST 是通过 HTTP POST 传递到当前脚本的变量数组。
<!DOCTYPE html>
<html>
<head>
<title>PHP 表单处理</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<form action="welcome.php" method="post">
Name:
<input type="text" name="name">
<br> E-mail:
<input type="text" name="email">
<br>
<input type="submit">
</form>
</body>
</html>
welcome.php
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
PHP 日期
<?php
echo "今天是 " . date("Y/m/d") . "<br>";
echo "今天是 " . date("Y.m.d") . "<br>";
echo "今天是 " . date("Y-m-d") . "<br>";
echo "今天是 " . date("l");
?>
date() 函数的格式参数是必需的，它们规定如何格式化日期或时间。
下面列出了一些常用于日期的字符：
d - 表示月里的某天（01-31）
m - 表示月（01-12）
Y - 表示年（四位数）
1 - 表示周里的某天
<!DOCTYPE html>
<html>
<head>
<title>PHP 日期</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<?php
echo "今天是 " . date("Y/m/d") . "<br>";
echo "今天是 " . date("Y.m.d") . "<br>";
echo "今天是 " . date("Y-m-d") . "<br>";
echo "今天是 " . date("l");
?>
</body>
</html>
VI. Web测试数据库技术
ODBC
ODBC 是一种应用程序编程接口（Application Programming Interface，API），使我们有能力连接到某个数据源（比如一个 MS Access 数据库）。
创建 ODBC 连接
通过一个 ODBC 连接，您可以连接到您的网络中的任何计算机上的任何数据库，只要 ODBC 连接是可用的。
这是创建到达 MS Access 数据的 ODBC 连接的方法：
- 在控制面板中打开管理工具
- 双击其中的数据源 (ODBC) 图标
- 选择系统 DSN 选项卡
- 点击系统 DSN 选项卡中的“添加”按钮
- 选择 Microsoft Access Driver。点击完成。
- 在下一个界面，点击“选择”来定位数据库。
- 为这个数据库取一个数据源名 (DSN)。
- 点击确定。
odbc_connect() 函数用于连接到 ODBC 数据源。该函数有四个参数：数据源名、用户名、密码以及可选的指针类型参数。
odbc_exec() 函数用于执行 SQL 语句。
$conn=odbc_connect('northwind','','');
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);
<!DOCTYPE html>
<html>
<head>
<title>PHP ODBC连接 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<?php
$conn=odbc_connect('northwind','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);
if (!$rs)
{exit("Error in SQL");}
echo "<table><tr>";
echo "<th>Companyname</th>";
echo "<th>Contactname</th></tr>";
while (odbc_fetch_row($rs))
{
$compname=odbc_result($rs,"CompanyName");
$conname=odbc_result($rs,"ContactName");
echo "<tr><td>$compname</td>";
echo "<td>$conname</td></tr>";
}
odbc_close($conn);
echo "</table>";
?>
</body>
</html>
PHP连接MySQL
连接到一个 MySQL 数据库
在能够访问并处理数据库中的数据之前，必须创建到达数据库的连接。
在 PHP 中，这个任务通过 mysql_connect() 函数完成。
mysql_connect(servername,username,password);
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mysql", $con);
$result = mysql_query("SELECT * FROM users");
while($row = mysql_fetch_array($result))
{
echo $row['host'] . " " . $row['user'];
echo "<br />";
}
mysql_close($con);
?>
<!DOCTYPE html>
<html>
<head>
<title>PHP 连接 MySQL </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mysql", $con);
$result = mysql_query("SELECT * FROM user");
echo "<table border = 1><tr>";
echo "<th>HOST</th>";
echo "<th>USER</th></tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr><td>".$row['Host']."</td><td>".$row['User']."</td></tr>";
}
echo "</table>";
mysql_close($con);
?>
</body>
</html>
冒泡排序
<!DOCTYPE html>
<html>
<head>
<title>PHP 连接 MySQL </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<?php
$arr=array(1,43,54,62,21,66,32,78,36,76,39);
function getpao($arr)
{
$len=count($arr);
//设置一个空数组 用来接收冒出来的泡
//该层循环控制 需要冒泡的轮数
for($i=1;$i<$len;$i++)
{ //该层循环用来控制每轮 冒出一个数 需要比较的次数
for($k=0;$k<$len-$i;$k++)
{
if($arr[$k]>$arr[$k+1])
{
$tmp=$arr[$k+1];
$arr[$k+1]=$arr[$k];
$arr[$k]=$tmp;
}
}
}
return $arr;
}
echo "原数组";
print_r($arr);
//echo "<br />"
$newArray = getpao($arr);
echo "新数组";
print_r($newArray);
?>
</body>
</html>
