Web測試② | Web 測試技術(shù)

Web測試技術(shù)

IV. Web測試前端技術(shù)

HTML

什么是HTML

HTML全稱是超文本標(biāo)記語言（Hyper Text Markup Language）跟匆，它是互聯(lián)網(wǎng)上應(yīng)用最廣泛的標(biāo)記語言户侥。簡單的說名斟，HTML文件就是普通文本 + HTML標(biāo)記（又叫做標(biāo)簽）巡扇，而且不同的HTML標(biāo)記能表示不同的效果兢榨。

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

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

HTML 標(biāo)簽

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

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

HTML 歷史

HTML的發(fā)展歷史比較復(fù)雜趟脂。因為它實在是太“隨意”了，而且負(fù)責(zé)解析HTML的瀏覽器們又太“寬容”了例衍。以至于到了“寫一份對的HTML文檔很容易昔期，寫一份錯的HTML文檔很難”的程度。而且不同的瀏覽器之間又是存在一些差異佛玄，因此導(dǎo)致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文檔第一個被廣泛使用的標(biāo)準(zhǔn)梦抢。
W3C：World Wide Web Consortium般贼，萬維網(wǎng)聯(lián)盟。創(chuàng)建于1994年奥吩，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機構(gòu)哼蛆。
HTML 4.0：1997年12月18日由W3C組織發(fā)布，也是W3C推薦標(biāo)準(zhǔn)霞赫。
HTML 4.01：1999年12月24日有W3C組織發(fā)布腮介，是HTML文檔的另一個重要的和廣泛使用的標(biāo)準(zhǔn)。
XHTML 1.0：發(fā)布與2000年1月26日绩脆，是W3C組織推薦標(biāo)準(zhǔn)萤厅，后來經(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 進行標(biāo)準(zhǔn)化
W3C 創(chuàng)建并維護 WWW 標(biāo)準(zhǔn)
W3C 標(biāo)準(zhǔn)被稱為 W3C 推薦（W3C Recommendations）

在HTML3.2之前玉锌，HTML的發(fā)展極為混亂，各個軟件廠商經(jīng)常自行增加HTML標(biāo)簽疟羹，而各個瀏覽器廠商為了保持最好的兼容性主守，總是盡力支持各種HTML標(biāo)簽禀倔，這就導(dǎo)致了HTML顯得極為混亂。

參考下面的例子

<ol>
    <li> 這是不標(biāo)準(zhǔn)的 HTML 第1行
        <li> 這是不標(biāo)準(zhǔn)的 HTML 第2行
            <li> 這是不標(biāo)準(zhǔn)的 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的全稱是擴展的超文本標(biāo)記語言（eXtensible Hyper Text Markup Language）参淫，是更嚴(yán)格救湖、更純凈的HTML代碼。W3C制定XHTML的目的就是逐步取代原有的HTML涎才。簡單說：XHTML就是最新版本的HTML規(guī)范鞋既。

參考下面的例子2


<html>

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

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

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

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

一個簡單的HTML文件

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

段落

<html>

    <body>
        <p>這是段落章鲤。</p>
        <p>這是段落摊灭。</p>
        <p>這是段落。</p>
        <p>段落元素由 p 標(biāo)簽定義败徊。</p>
    </body>

</html>

<html>

    <body>
    
        <p>
        這個段落
        在源代碼中
        包含許多行
        但是瀏覽器
        忽略了它們帚呼。
        </p>
    
        <p>
        這個段落
        在源代碼       中
        包含   許多行
        但是      瀏覽器
        忽略了  它們。
        </p>
    
        <p>
        段落的行數(shù)依賴于瀏覽器窗口的大小皱蹦。如果調(diào)節(jié)瀏覽器窗口的大小煤杀，將改變段落中的行數(shù)。
        </p>
    
    </body>
</html>

詩歌問題

<html>

    <body>
        <h1>春曉</h1>
        <p>
            春眠不覺曉沪哺， 
            處處聞啼鳥沈自。 
            夜來風(fēng)雨聲， 
            花落知多少辜妓。
        </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 />夜來風(fēng)雨聲，
            <br />花落知多少孽惰。
        </p>
    </body>

</html>

標(biāo)題

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>標(biāo)題</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>請僅僅把標(biāo)題標(biāo)簽用于標(biāo)題文本晚岭。不要僅僅為了產(chǎn)生粗體文本而使用它們。請使用其它標(biāo)簽或 CSS 代替勋功。</p>
    </body>

</html>

居中排列的標(biāo)題

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>標(biāo)題</title>
    </head>
    
    <body>
        <h1 align="center">This is heading 1</h1>
        <p>上面的標(biāo)題在頁面中進行了居中排列坦报。上面的標(biāo)題在頁面中進行了居中排列库说。上面的標(biāo)題在頁面中進行了居中排列。</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>應(yīng)該使用 %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>請單擊確認(rèn)按鈕脐供，輸入會發(fā)送到服務(wù)器上名為 "form_action.asp" 的頁面。</p>
    </body>

</html>

空格
< <
> >
" "
& &

CSS

CSS 概述

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

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

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

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

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

為了解決這個問題萝衩，萬維網(wǎng)聯(lián)盟（W3C）回挽，這個非營利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命猩谊，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）千劈。

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

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

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

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

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

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>這是標(biāo)題 1</h1>
        <h2>這是標(biāo)題 2</h2>
        <p>這是段落</p>
        <p class="no2">這個段落設(shè)置了內(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 選擇器中定義了本頁面中的默認(rèn)文本顏色耕蝉。</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)頁的主標(biāo)題</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 被設(shè)計為向 HTML 頁面增加交互性旅挤。

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

JavaScript 是腳本語言

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

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

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

JavaScript 很容易學(xué)習(xí)。

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：對事件作出反應(yīng)

<button type="button" onclick="alert('Welcome!')">點擊這里</button>

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript：對事件作出反應(yīng)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
        <h1>我的第一段 JavaScript</h1>
        <p>
            JavaScript 能夠?qū)κ录鞒龇磻?yīng)屹培。比如對按鈕的點擊：
        </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ù)組灸蟆。每個對象代表一條關(guān)于某人（有姓和名）的記錄飞盆。

V. Web測試服務(wù)端技術(shù)

PHP基礎(chǔ)

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

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

什么是 PHP城看？

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

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

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

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

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

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

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

而它的易用程度足以成為初學(xué)者的首選服務(wù)器端語言缘滥！

什么是 PHP 文件轰胁？

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

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

PHP 文件的后綴是 ".php"

PHP 能夠做什么？

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

PHP 能夠創(chuàng)建擎颖、打開榛斯、讀取、寫入搂捧、刪除以及關(guān)閉服務(wù)器上的文件

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 兼容幾乎所有服務(wù)器（Apache, IIS 等等）

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

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

PHP 易于學(xué)習(xí)每篷，并可高效地運行在服務(wù)器端

我需要怎么開始瓣戚？

如需開始使用 PHP，可以：

使用支持 PHP 和 MySQL 的 web 主機

在 PC 上安裝 web 服務(wù)器焦读，然后安裝 PHP 和 MySQL子库。

使用支持 PHP 的 Web 主機

如果服務(wù)器支持 PHP，那么無需做任何事情矗晃。

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

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

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

在 PC 上運行 PHP

不過如果服務(wù)器不支持 PHP脖捻，那么必須：

安裝 web 服務(wù)器

安裝 PHP

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

基礎(chǔ) 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 文件的默認(rèn)文件擴展名是 ".php"。

PHP 文件通常包含 HTML 標(biāo)簽以及一些 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ù)傳遞到當(dāng)前腳本的變量數(shù)組摩疑。

$_POST 是通過 HTTP POST 傳遞到當(dāng)前腳本的變量數(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ù)庫技術(shù)

ODBC

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

創(chuàng)建 ODBC 連接

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

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

在控制面板中打開管理工具
雙擊其中的數(shù)據(jù)源 (ODBC) 圖標(biāo)
選擇系統(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 中，這個任務(wù)通過 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è)置一個空數(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>

最后編輯于：2019.05.25 15:17:58

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末逛薇，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子疏虫，更是在濱河造成了極大的恐慌永罚，老刑警劉巖，帶你破解...
沈念sama閱讀 212,542評論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件卧秘，死亡現(xiàn)場離奇詭異呢袱，居然都是意外死亡，警方通過查閱死者的電腦和手機翅敌，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,596評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門产捞，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人哼御，你說我怎么就攤上這事坯临。” “怎么了恋昼？”我有些...
開封第一講書人閱讀 158,021評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵看靠，是天一觀的道長。經(jīng)常有香客問我液肌，道長挟炬，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,682評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任嗦哆，我火速辦了婚禮谤祖，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘老速。我一直安慰自己粥喜，他們只是感情好荒叶，可當(dāng)我...
茶點故事閱讀 65,792評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布窍蓝。她就那樣靜靜地躺著非春，像睡著了一般。火紅的嫁衣襯著肌膚如雪嘶居。梳的紋絲不亂的頭發(fā)上母蛛，一...
開封第一講書人閱讀 49,985評論 1贊 291
城市分裂傳說
那天氛驮，我揣著相機與錄音恋日，去河邊找鬼。笑死毯焕，一個胖子當(dāng)著我的面吹牛衍腥，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播纳猫，決...
沈念sama閱讀 39,107評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼婆咸，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了续担？” 一聲冷哼從身側(cè)響起擅耽，我...
開封第一講書人閱讀 37,845評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤活孩，失蹤者是張志新（化名）和其女友劉穎物遇，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體憾儒，經(jīng)...
沈念sama閱讀 44,299評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡询兴，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,612評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了起趾。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诗舰。...
茶點故事閱讀 38,747評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖训裆，靈堂內(nèi)的尸體忽然破棺而出眶根，到底是詐尸還是另有隱情，我是刑警寧澤边琉，帶...
沈念sama閱讀 34,441評論 4贊 333
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布属百，位于F島的核電站，受9級特大地震影響变姨，放射性物質(zhì)發(fā)生泄漏族扰。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 40,072評論 3贊 317
男人毒藥：我在死后第九天來索命
文/蒙蒙一定欧、第九天我趴在偏房一處隱蔽的房頂上張望渔呵。院中可真熱鬧，春花似錦砍鸠、人聲如沸扩氢。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,828評論 0贊 21
一樁弒父案爷辱，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽类茂。三九已至耍属，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間巩检，已是汗流浹背厚骗。一陣腳步聲響...
開封第一講書人閱讀 32,069評論 1贊 267
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留兢哭，地道東北人领舰。一個月前我還...
沈念sama閱讀 46,545評論 2贊 362
代替公主和親
正文我出身青樓，卻偏偏與公主長得像迟螺，于是被迫代替她去往敵國和親冲秽。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,658評論 2贊 350