Web測試技術

IV. Web測試前端技術

HTML

什么是HTML

HTML全稱是超文本標記語言（Hyper Text Markup Language），它是互聯(lián)網(wǎng)上應用最廣泛的標記語言。簡單的說，HTML文件就是普通文本 + HTML標記（又叫做標簽），而且不同的HTML標記能表示不同的效果。

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)

標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁
HTML 文檔 = 網(wǎng)頁
HTML 文檔描述網(wǎng)頁
HTML 文檔包含 HTML 標簽和純文本
HTML 文檔也被稱為網(wǎng)頁
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內(nèi)容：

HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
開始和結(jié)束標簽也被稱為開放標簽和閉合標簽

<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

HTML 歷史

HTML的發(fā)展歷史比較復雜。因為它實在是太“隨意”了，而且負責解析HTML的瀏覽器們又太“寬容”了。以至于到了“寫一份對的HTML文檔很容易，寫一份錯的HTML文檔很難”的程度。而且不同的瀏覽器之間又是存在一些差異，因此導致HTML給人的感覺比較混亂。

HTML 1.0：1993年6月由互聯(lián)網(wǎng)工程工作小組發(fā)布
HTML 2.0：1995年11月作為RFC 1866發(fā)布
HTML 3.2：1996年1月14日由W3C組織發(fā)布，是HTML文檔第一個被廣泛使用的標準。
W3C：World Wide Web Consortium，萬維網(wǎng)聯(lián)盟。創(chuàng)建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。
HTML 4.0：1997年12月18日由W3C組織發(fā)布，也是W3C推薦標準。
HTML 4.01：1999年12月24日有W3C組織發(fā)布，是HTML文檔的另一個重要的和廣泛使用的標準。
XHTML 1.0：發(fā)布與2000年1月26日，是W3C組織推薦標準，后來經(jīng)過修訂，于2002年8月1日重新發(fā)布。
2008年 WHATWG制定并發(fā)布了HTML5規(guī)范。

W3C 是什么？

W3C 指萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）
W3C 創(chuàng)建于1994年10月
W3C 由 Tim Berners-Lee 創(chuàng)建
W3C 是一個會員組織
W3C 的工作是對 web 進行標準化
W3C 創(chuàng)建并維護 WWW 標準
W3C 標準被稱為 W3C 推薦（W3C Recommendations）

在HTML3.2之前，HTML的發(fā)展極為混亂，各個軟件廠商經(jīng)常自行增加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規(guī)范。

參考下面的例子2


<html>

<head>
    <title>混亂的HTML文檔</title>

    <body>
        <h1>混亂的HTML文檔

XHTML致力于消除這種不規(guī)范，要求HTML文檔首先必須是一份XML文檔。

XML文檔是一種結(jié)構化文檔，它有如下4條基本規(guī)則：
整個文檔有且只有一個根元素
每個元素都有開始表情和結(jié)束標簽組成，除非使用空元素語法。
元素與元素之間應該合理嵌套。
元素的屬性必須有屬性值，而且屬性值應該用引號引起來。

一個簡單的HTML文件

<html>
    <head>
        <title>我的第一個 HTML 頁面</title>
    </head> 
    <body>
        <p>body 元素的內(nèi)容會顯示在瀏覽器中。</p>
        <p>title 元素的內(nèi)容會顯示在瀏覽器的標題欄中。</p>
    </body>
</html>

段落

<html>

    <body>
        <p>這是段落。</p>
        <p>這是段落。</p>
        <p>這是段落。</p>
        <p>段落元素由 p 標簽定義。</p>
    </body>

</html>

<html>

    <body>
    
        <p>
        這個段落
        在源代碼中
        包含許多行
        但是瀏覽器
        忽略了它們。
        </p>
    
        <p>
        這個段落
        在源代碼       中
        包含   許多行
        但是      瀏覽器
        忽略了  它們。
        </p>
    
        <p>
        段落的行數(shù)依賴于瀏覽器窗口的大小。如果調(diào)節(jié)瀏覽器窗口的大小，將改變段落中的行數(shù)。
        </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>請僅僅把標題標簽用于標題文本。不要僅僅為了產(chǎn)生粗體文本而使用它們。請使用其它標簽或 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> 是一個指向本網(wǎng)站中的一個頁面的鏈接。</p>
        <p><a >本文本</a> 是一個指向萬維網(wǎng)上的頁面的鏈接。</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  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">發(fā)送郵件</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>

數(shù)字列表

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>列表</title>
    </head>
    
    <body>
        <h4>數(shù)字列表：</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>請單擊確認按鈕，輸入會發(fā)送到服務器上名為 "form_action.asp" 的頁面。</p>
    </body>

</html>

空格
< <
> >
" "
& &

CSS

CSS 概述

CSS 指層疊樣式表 (Cascading Style Sheets)

樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一

樣式表解決了一個普遍的問題

HTML 標簽原本被設計為用于定義文檔內(nèi)容。通過使用 <h1>、<p>、<table> 這樣的標簽，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。同時文檔布局由瀏覽器來完成，而不使用任何的格式化標簽。

由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標簽和屬性（比如字體標簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨立于文檔表現(xiàn)層的站點變得越來越困難。

為了解決這個問題，萬維網(wǎng)聯(lián)盟（W3C），這個非營利的標準化聯(lián)盟，肩負起了 HTML 標準化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）。

所有的主流瀏覽器均支持層疊樣式表。

樣式表極大地提高了工作效率

樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。

由于允許同時控制多重頁面的樣式和布局，CSS 可以稱得上 WEB 設計領域的一個突破。作為網(wǎng)站開發(fā)者，你能夠為每個 HTML 元素定義樣式，并將之應用于你希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，然后網(wǎng)站中的所有元素均會自動地更新。

CSS 規(guī)則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

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">這個段落設置了內(nèi)邊距。</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>這里是網(wǎng)頁的主標題</h1>
            </div>
            <div id="menu">
                <h2>菜單</h2>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </div>
            <div id="content">這里是網(wǎng)頁內(nèi)容</div>
            <div id="footer">這里是網(wǎng)頁底部</div>
        </div>
    </body>
</html>

JavaScript

JavaScript 是世界上最流行的腳本語言。

JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動電話。

JavaScript 被設計為向 HTML 頁面增加交互性。

許多 HTML 開發(fā)者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段添加到網(wǎng)頁中。

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。

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>。 如果您在文檔已加載后使用它（比如在函數(shù)中），會覆蓋整個文檔。
        </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 能夠?qū)κ录鞒龇磻１热鐚Π粹o的點擊：
        </p>
        <button type="button" onclick="alert('Welcome!')">點擊這里</button>
    </body>

</html>

JavaScript：改變 HTML 內(nèi)容

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改變內(nèi)容

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript：改變 HTML 內(nèi)容</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
        <h1>我的第一段 JavaScript</h1>
        <p id="demo">
            JavaScript 能改變 HTML 元素的內(nèi)容。
        </p>
        <script>
        function myFunction() {
            x = document.getElementById("demo"); // 找到元素
            x.innerHTML = "Hello JavaScript!"; // 改變內(nèi)容
        }
        </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 內(nèi)容</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 內(nèi)容</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 內(nèi)容</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
        <h1>我的第一段 JavaScript</h1>
        <p>請輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會彈出提示框。</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 是輕量級的文本數(shù)據(jù)交換格式
JSON 獨立于語言 *
JSON 具有自我描述性，更易理解
JSON 使用 JavaScript 語法來描述數(shù)據(jù)對象，但是 JSON 仍然獨立于語言和平臺。JSON 解析器和 JSON 庫支持許多不同的編程語言。

JSON 語法規(guī)則

JSON 語法是 JavaScript 對象表示法語法的子集。
數(shù)據(jù)在名稱/值對中
數(shù)據(jù)由逗號分隔
花括號保存對象
方括號保存數(shù)組

JSON 名稱/值對

JSON 數(shù)據(jù)的書寫格式是：名稱/值對。

名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值：

"firstName" : "John"

JSON 值

JSON 值可以是：

數(shù)字（整數(shù)或浮點數(shù)）
字符串（在雙引號中）
邏輯值（true 或 false）
數(shù)組（在方括號中）
對象（在花括號中）
null

JSON 對象

JSON 對象在花括號中書寫：

對象可以包含多個名稱/值對：

{ "firstName":"John" , "lastName":"Doe" }

JSON 數(shù)組在方括號中書寫：

數(shù)組可包含多個對象：

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

在上面的例子中，對象 "employees" 是包含三個對象的數(shù)組。每個對象代表一條關于某人（有姓和名）的記錄。

V. Web測試服務端技術

PHP基礎

PHP 是一種創(chuàng)建動態(tài)交互性站點的強有力的服務器端腳本語言。

PHP 是免費的，并且使用廣泛。對于像微軟 ASP 這樣的競爭者來說，PHP 無疑是另一種高效率的選項。

什么是 PHP？

PHP 是 "PHP Hypertext Preprocessor" 的首字母縮略詞

PHP 是一種被廣泛使用的開源腳本語言

PHP 腳本在服務器上執(zhí)行

PHP 沒有成本，可供免費下載和使用

PHP 是一門令人驚嘆的流行語言！

它強大到足以成為在網(wǎng)絡上最大的博客系統(tǒng)的核心（WordPress）！

它深邃到足以運行最大的社交網(wǎng)絡（facebook）！

而它的易用程度足以成為初學者的首選服務器端語言！

什么是 PHP 文件？

PHP 文件能夠包含文本、HTML、CSS 以及 PHP 代碼

PHP 代碼在服務器上執(zhí)行，而結(jié)果以純文本返回瀏覽器

PHP 文件的后綴是 ".php"

PHP 能夠做什么？

PHP 能夠生成動態(tài)頁面內(nèi)容

PHP 能夠創(chuàng)建、打開、讀取、寫入、刪除以及關閉服務器上的文件

PHP 能夠接收表單數(shù)據(jù)

PHP 能夠發(fā)送并取回 cookies

PHP 能夠添加、刪除、修改數(shù)據(jù)庫中的數(shù)據(jù)

PHP 能夠限制用戶訪問網(wǎng)站中的某些頁面

PHP 能夠?qū)?shù)據(jù)進行加密

通過 PHP，可以不受限于只輸出 HTML。還能夠輸出圖像、PDF 文件、甚至 Flash 影片。也可以輸出任何文本，比如 XHTML 和 XML。

為什么使用 PHP？

PHP 運行于各種平臺（Windows, Linux, Unix, Mac OS X 等等）

PHP 兼容幾乎所有服務器（Apache, IIS 等等）

PHP 支持多種數(shù)據(jù)庫

PHP 是免費的。請從官方 PHP 資源下載：www.php.net

PHP 易于學習，并可高效地運行在服務器端

我需要怎么開始？

如需開始使用 PHP，可以：

使用支持 PHP 和 MySQL 的 web 主機

在 PC 上安裝 web 服務器，然后安裝 PHP 和 MySQL。

使用支持 PHP 的 Web 主機

如果服務器支持 PHP，那么無需做任何事情。

只要創(chuàng)建 .php 文件，然后上傳到 web 目錄中即可。服務器會自動對它們進行解析。

無需編譯或安裝任何額外的工具。

因為 PHP 是免費的，大多數(shù) web 主機都支持 PHP。

在 PC 上運行 PHP

不過如果服務器不支持 PHP，那么必須：

安裝 web 服務器

安裝 PHP

安裝數(shù)據(jù)庫，比如 MySQL

基礎 PHP 語法

PHP 腳本可放置于文檔中的任何位置。

PHP 腳本以 <?php 開頭，以 ?> 結(jié)尾：

<?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 參數(shù)傳遞到當前腳本的變量數(shù)組。

$_POST 是通過 HTTP POST 傳遞到當前腳本的變量數(shù)組。

<!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() 函數(shù)的格式參數(shù)是必需的，它們規(guī)定如何格式化日期或時間。

下面列出了一些常用于日期的字符：

d - 表示月里的某天（01-31）

m - 表示月（01-12）

Y - 表示年（四位數(shù)）

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測試數(shù)據(jù)庫技術

ODBC

ODBC 是一種應用程序編程接口（Application Programming Interface，API），使我們有能力連接到某個數(shù)據(jù)源（比如一個 MS Access 數(shù)據(jù)庫）。

創(chuàng)建 ODBC 連接

通過一個 ODBC 連接，您可以連接到您的網(wǎng)絡中的任何計算機上的任何數(shù)據(jù)庫，只要 ODBC 連接是可用的。

這是創(chuàng)建到達 MS Access 數(shù)據(jù)的 ODBC 連接的方法：

在控制面板中打開管理工具
雙擊其中的數(shù)據(jù)源 (ODBC) 圖標
選擇系統(tǒng) DSN 選項卡
點擊系統(tǒng) DSN 選項卡中的“添加”按鈕
選擇 Microsoft Access Driver。點擊完成。
在下一個界面，點擊“選擇”來定位數(shù)據(jù)庫。
為這個數(shù)據(jù)庫取一個數(shù)據(jù)源名 (DSN)。
點擊確定。

連接到 ODBC

odbc_connect() 函數(shù)用于連接到 ODBC 數(shù)據(jù)源。該函數(shù)有四個參數(shù)：數(shù)據(jù)源名、用戶名、密碼以及可選的指針類型參數(shù)。

odbc_exec() 函數(shù)用于執(zhí)行 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 數(shù)據(jù)庫

在能夠訪問并處理數(shù)據(jù)庫中的數(shù)據(jù)之前，必須創(chuàng)建到達數(shù)據(jù)庫的連接。

在 PHP 中，這個任務通過 mysql_connect() 函數(shù)完成。

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);
      //設置一個空數(shù)組 用來接收冒出來的泡
      //該層循環(huán)控制 需要冒泡的輪數(shù)
      for($i=1;$i<$len;$i++)
      { //該層循環(huán)用來控制每輪 冒出一個數(shù) 需要比較的次數(shù)
        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 "原數(shù)組";
    print_r($arr);
    //echo "<br />"
    $newArray = getpao($arr);
    echo "新數(shù)組";
    print_r($newArray);
    
    ?>
    </body>

</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Web測試② | Web 測試技術