Web测试② | Web 测试技术

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>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<html>
    <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 是什么？

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显得极为混乱。

参考下面的例子

<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文件

<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">
                ![](https://www.baidu.com/img/baidu_jgylogo3.gif)
            </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">
                ![](https://www.baidu.com/img/baidu_jgylogo3.gif)
            </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 概述

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>
        ![](http://upload-images.jianshu.io/upload_images/1430016-3b22b80015918326.gif?imageMogr2/auto-orient/strip)
        <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 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：名称/值对。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"firstName" : "John"

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON 对象

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

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>

最后编辑于：2019.05.25 15:17:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,684评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,143评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,214评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,788评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,796评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,665评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,027评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,679评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,346评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,664评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,766评论 1赞 331
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,412评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,015评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,974评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,073评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,501评论 2赞 343