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

Web測(cè)試技術(shù)

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

HTML

什么是HTML

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

  • HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。

  • HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)

  • HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)

    標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)

  • HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)

  • HTML 文檔 = 網(wǎng)頁(yè)

  • HTML 文檔描述網(wǎng)頁(yè)

  • HTML 文檔包含 HTML 標(biāo)簽和純文本

  • HTML 文檔也被稱為網(wǎng)頁(yè)

  • Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容：

HTML 標(biāo)簽

  • HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
  • HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>
  • HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>
  • 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
  • 開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

HTML 歷史

HTML的發(fā)展歷史比較復(fù)雜。因?yàn)樗鼘?shí)在是太“隨意”了，而且負(fù)責(zé)解析HTML的瀏覽器們又太“寬容”了。以至于到了“寫(xiě)一份對(duì)的HTML文檔很容易，寫(xiě)一份錯(cuò)的HTML文檔很難”的程度。而且不同的瀏覽器之間又是存在一些差異，因此導(dǎo)致HTML給人的感覺(jué)比較混亂。

  • 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文檔第一個(gè)被廣泛使用的標(biāo)準(zhǔn)。
  • W3C：World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟。創(chuàng)建于1994年，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。
  • HTML 4.0：1997年12月18日 由W3C組織發(fā)布，也是W3C推薦標(biāo)準(zhǔn)。
  • HTML 4.01：1999年12月24日 有W3C組織發(fā)布，是HTML文檔的另一個(gè)重要的和廣泛使用的標(biāo)準(zhǔn)。
  • XHTML 1.0：發(fā)布與2000年1月26日，是W3C組織推薦標(biāo)準(zhǔn)，后來(lái)經(jīng)過(guò)修訂，于2002年8月1日重新發(fā)布。
  • 2008年 WHATWG制定并發(fā)布了HTML5規(guī)范。

W3C 是什么？

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

在HTML3.2之前，HTML的發(fā)展極為混亂，各個(gè)軟件廠商經(jīng)常自行增加HTML標(biāo)簽，而各個(gè)瀏覽器廠商為了保持最好的兼容性，總是盡力支持各種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的全稱是擴(kuò)展的超文本標(biāo)記語(yǔ)言（eXtensible Hyper Text Markup Language），是更嚴(yán)格、更純凈的HTML代碼。W3C制定XHTML的目的就是逐步取代原有的HTML。簡(jiǎn)單說(shuō)：XHTML就是最新版本的HTML規(guī)范。

參考下面的例子2


<html>

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

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

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

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

一個(gè)簡(jiǎn)單的HTML文件

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

段落

<html>

    <body>
        <p>這是段落。</p>
        <p>這是段落。</p>
        <p>這是段落。</p>
        <p>段落元素由 p 標(biāo)簽定義。</p>
    </body>

</html>

<html>

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

詩(shī)歌問(wèn)題

<html>

    <body>
        <h1>春曉</h1>
        <p>
            春眠不覺(jué)曉， 
            處處聞啼鳥(niǎo)。 
            夜來(lái)風(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>
            春眠不覺(jué)曉，
            <br />處處聞啼鳥(niǎo)。
            <br />夜來(lái)風(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>請(qǐng)僅僅把標(biāo)題標(biāo)簽用于標(biāo)題文本。不要僅僅為了產(chǎn)生粗體文本而使用它們。請(qǐng)使用其它標(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)題在頁(yè)面中進(jìn)行了居中排列。上面的標(biāo)題在頁(yè)面中進(jìn)行了居中排列。上面的標(biāo)題在頁(yè)面中進(jìn)行了居中排列。</p>
    </body>

</html>

注釋

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>注釋</title>
    </head>
    
    <body>
    
        <!--這是一段注釋。注釋不會(huì)在瀏覽器中顯示。-->
        
        <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> 是一個(gè)指向本網(wǎng)站中的一個(gè)頁(yè)面的鏈接。</p>
        <p><a >本文本</a> 是一個(gè)指向萬(wàn)維網(wǎng)上的頁(yè)面的鏈接。</p>
    </body>

</html>

圖片超鏈接

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>超鏈接</title>
    </head>
    
    <body>
        <p>
            您也可以使用圖像來(lái)作鏈接：
            <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>
            您也可以使用圖像來(lái)作鏈接：
            <a  target="_blank">
                ![](https://www.baidu.com/img/baidu_jgylogo3.gif)
            </a>
        </p>
    </body>

</html>

郵件測(cè)試

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>郵件測(cè)試</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 來(lái)替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。
    </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">消費(fèi)項(xiàng)目....</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">總計(jì)</th>
                <th align="right">￥1001.50</th>
                <th align="right">￥744.65</th>
            </tr>
        </table>
    </body>

</html>

列表

無(wú)序列表

    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>列表</title>
    </head>
    
    <body>
        <h4>一個(gè)無(wú)序列表：</h4>
        <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ul>
    </body>

</html>

項(xiàng)目符號(hào)列表

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>列表</title>
    </head>
    
    <body>
        <h4>Disc 項(xiàng)目符號(hào)列表：</h4>
        <ul type="disc">
            <li>蘋(píng)果</li>
            <li>香蕉</li>
            <li>檸檬</li>
            <li>桔子</li>
        </ul>
        <h4>Circle 項(xiàng)目符號(hào)列表：</h4>
        <ul type="circle">
            <li>蘋(píng)果</li>
            <li>香蕉</li>
            <li>檸檬</li>
            <li>桔子</li>
        </ul>
        <h4>Square 項(xiàng)目符號(hào)列表：</h4>
        <ul type="square">
            <li>蘋(píng)果</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>蘋(píng)果</li>
            <li>香蕉</li>
            <li>檸檬</li>
            <li>桔子</li>
        </ol>
        <h4>字母列表：</h4>
        <ol type="A">
            <li>蘋(píng)果</li>
            <li>香蕉</li>
            <li>檸檬</li>
            <li>桔子</li>
        </ol>
        <h4>小寫(xiě)字母列表：</h4>
        <ol type="a">
            <li>蘋(píng)果</li>
            <li>香蕉</li>
            <li>檸檬</li>
            <li>桔子</li>
        </ol>
        <h4>羅馬字母列表：</h4>
        <ol type="I">
            <li>蘋(píng)果</li>
            <li>香蕉</li>
            <li>檸檬</li>
            <li>桔子</li>
        </ol>
        <h4>小寫(xiě)羅馬字母列表：</h4>
        <ol type="i">
            <li>蘋(píng)果</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>請(qǐng)單擊確認(rèn)按鈕，輸入會(huì)發(fā)送到服務(wù)器上名為 "form_action.asp" 的頁(yè)面。</p>
    </body>

</html>
  • 空格
  • < <
  • > >
  • " "
  • & &

CSS

CSS 概述

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

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

樣式表解決了一個(gè)普遍的問(wèn)題

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

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

為了解決這個(gè)問(wèn)題，萬(wàn)維網(wǎng)聯(lián)盟（W3C），這個(gè)非營(yíng)利的標(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 文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。

由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS 可以稱得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開(kāi)發(fā)者，你能夠?yàn)槊總€(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。

CSS 規(guī)則由兩個(gè)主要的部分構(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">這個(gè)段落設(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>這是一段普通的段落。請(qǐng)注意，該段落的文本是紅色的。在 body 選擇器中定義了本頁(yè)面中的默認(rèn)文本顏色。</p>
        <p class="ex">該段落定義了 class="ex"。該段落中的文本是藍(lán)色的。</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)頁(yè)的主標(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)頁(yè)內(nèi)容</div>
            <div id="footer">這里是網(wǎng)頁(yè)底部</div>
        </div>
    </body>
</html>

JavaScript

JavaScript 是世界上最流行的腳本語(yǔ)言。

JavaScript 是屬于 web 的語(yǔ)言，它適用于 PC、筆記本電腦、平板電腦和移動(dòng)電話。

JavaScript 被設(shè)計(jì)為向 HTML 頁(yè)面增加交互性。

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

JavaScript 是腳本語(yǔ)言

JavaScript 是一種輕量級(jí)的編程語(yǔ)言。

JavaScript 是可插入 HTML 頁(yè)面的編程代碼。

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

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

JavaScript：寫(xiě)入 HTML 輸出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript：寫(xiě)入 HTML 輸出</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
        <p>
            JavaScript 能夠直接寫(xiě)入 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ù)中），會(huì)覆蓋整個(gè)文檔。
        </p>
    </body>

</html>
JavaScript：對(duì)事件作出反應(yīng)
<button type="button" onclick="alert('Welcome!')">點(diǎn)擊這里</button>

<!DOCTYPE html>
<html>

    <head>
        <title>JavaScript：對(duì)事件作出反應(yīng)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
        <h1>我的第一段 JavaScript</h1>
        <p>
            JavaScript 能夠?qū)κ录鞒龇磻?yīng)。比如對(duì)按鈕的點(diǎn)擊：
        </p>
        <button type="button" onclick="alert('Welcome!')">點(diǎn)擊這里</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()">點(diǎn)擊這里</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>點(diǎn)擊燈泡來(lái)點(diǎn)亮或熄滅這盞燈</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()">點(diǎn)擊這里</button>
    </body>

</html>
JavaScript：驗(yàn)證輸入
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>請(qǐng)輸入數(shù)字。如果輸入值不是數(shù)字，瀏覽器會(huì)彈出提示框。</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()">點(diǎn)擊這里</button>
    </body>

</html>

JSON

JSON：JavaScript 對(duì)象表示法（JavaScript Object Notation）。

JSON 是存儲(chǔ)和交換文本信息的語(yǔ)法。類似 XML。

JSON 比 XML 更小、更快，更易解析。

什么是 JSON ？

  • JSON 指的是 JavaScript 對(duì)象表示法（JavaScript Object Notation）
  • JSON 是輕量級(jí)的文本數(shù)據(jù)交換格式
  • JSON 獨(dú)立于語(yǔ)言 *
  • JSON 具有自我描述性，更易理解
  • JSON 使用 JavaScript 語(yǔ)法來(lái)描述數(shù)據(jù)對(duì)象，但是 JSON 仍然獨(dú)立于語(yǔ)言和平臺(tái)。JSON 解析器和 JSON 庫(kù)支持許多不同的編程語(yǔ)言。

JSON 語(yǔ)法規(guī)則

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

JSON 名稱/值對(duì)

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

名稱/值對(duì)包括字段名稱（在雙引號(hào)中），后面寫(xiě)一個(gè)冒號(hào)，然后是值：

"firstName" : "John"

JSON 值

JSON 值可以是：

  • 數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
  • 字符串（在雙引號(hào)中）
  • 邏輯值（true 或 false）
  • 數(shù)組（在方括號(hào)中）
  • 對(duì)象（在花括號(hào)中）
  • null

JSON 對(duì)象

JSON 對(duì)象在花括號(hào)中書(shū)寫(xiě)：

對(duì)象可以包含多個(gè)名稱/值對(duì)：

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

JSON 數(shù)組在方括號(hào)中書(shū)寫(xiě)：

數(shù)組可包含多個(gè)對(duì)象：

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

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

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

PHP基礎(chǔ)

PHP 是一種創(chuàng)建動(dòng)態(tài)交互性站點(diǎn)的強(qiáng)有力的服務(wù)器端腳本語(yǔ)言。

PHP 是免費(fèi)的，并且使用廣泛。對(duì)于像微軟 ASP 這樣的競(jìng)爭(zhēng)者來(lái)說(shuō)，PHP 無(wú)疑是另一種高效率的選項(xiàng)。

什么是 PHP？

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

PHP 是一種被廣泛使用的開(kāi)源腳本語(yǔ)言

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

PHP 沒(méi)有成本，可供免費(fèi)下載和使用

PHP 是一門(mén)令人驚嘆的流行語(yǔ)言！

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

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

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

什么是 PHP 文件？

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

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

PHP 文件的后綴是 ".php"

PHP 能夠做什么？

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

PHP 能夠創(chuàng)建、打開(kāi)、讀取、寫(xiě)入、刪除以及關(guān)閉服務(wù)器上的文件

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

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

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

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

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

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

為什么使用 PHP？

PHP 運(yùn)行于各種平臺(tái)（Windows, Linux, Unix, Mac OS X 等等）

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

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

PHP 是免費(fèi)的。請(qǐng)從官方 PHP 資源下載：www.php.net

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

我需要怎么開(kāi)始？

如需開(kāi)始使用 PHP，可以：

使用支持 PHP 和 MySQL 的 web 主機(jī)

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

使用支持 PHP 的 Web 主機(jī)

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

只要?jiǎng)?chuàng)建 .php 文件，然后上傳到 web 目錄中即可。服務(wù)器會(huì)自動(dòng)對(duì)它們進(jìn)行解析。

無(wú)需編譯或安裝任何額外的工具。

因?yàn)?PHP 是免費(fèi)的，大多數(shù) web 主機(jī)都支持 PHP。

在 PC 上運(yùn)行 PHP

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

安裝 web 服務(wù)器

安裝 PHP

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

基礎(chǔ) PHP 語(yǔ)法

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

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

<?php
// 此處是 PHP 代碼
?>

<!DOCTYPE html>
<html>

    <head>
        <title>PHP頁(yè)面</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    
    <body>
        <h1>我的第一張 PHP 頁(yè)面</h1>
        <?php
    echo "Hello World!";
    ?>
    </body>

</html>

PHP 文件的默認(rèn)文件擴(kuò)展名是 ".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 大小寫(xiě)不敏感
<?php
ECHO "Hello World!<br>";
echo "Hello World!<br>";
EcHo "Hello World!<br>";
?>

<!DOCTYPE html>
<html>

<head>
    <title>PHP 大小寫(xiě)不敏感</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 變量大小寫(xiě)敏感
<?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 變量大小寫(xiě)敏感</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進(jìn)階

PHP表單處理

$_GET 是通過(guò) URL 參數(shù)傳遞到當(dāng)前腳本的變量數(shù)組。

$_POST 是通過(guò) 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ī)定如何格式化日期或時(shí)間。

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

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

ODBC

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

創(chuàng)建 ODBC 連接

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

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

  1. 在控制面板中打開(kāi)管理工具
  2. 雙擊其中的數(shù)據(jù)源 (ODBC) 圖標(biāo)
  3. 選擇系統(tǒng) DSN 選項(xiàng)卡
  4. 點(diǎn)擊系統(tǒng) DSN 選項(xiàng)卡中的“添加”按鈕
  5. 選擇 Microsoft Access Driver。點(diǎn)擊完成。
  6. 在下一個(gè)界面，點(diǎn)擊“選擇”來(lái)定位數(shù)據(jù)庫(kù)。
  7. 為這個(gè)數(shù)據(jù)庫(kù)取一個(gè)數(shù)據(jù)源名 (DSN)。
  8. 點(diǎn)擊確定。

連接到 ODBC

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

odbc_exec() 函數(shù)用于執(zhí)行 SQL 語(yǔ)句。

$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

連接到一個(gè) MySQL 數(shù)據(jù)庫(kù)

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

在 PHP 中，這個(gè)任務(wù)通過(guò) 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è)置一個(gè)空數(shù)組 用來(lái)接收冒出來(lái)的泡
      //該層循環(huán)控制 需要冒泡的輪數(shù)
      for($i=1;$i<$len;$i++)
      { //該層循環(huán)用來(lái)控制每輪 冒出一個(gè)數(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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,837評(píng)論 18贊 139
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,784評(píng)論 1贊 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,813評(píng)論 25贊 708
  • 又看了一遍韓大爺?shù)奈摹?把這件事想明白，你會(huì)更幸福 作者說(shuō)的是“態(tài)度”這件事。 第一種生活狀態(tài)：假如我是一名市場(chǎng)職...
    e2027c7fb4eb閱讀 275評(píng)論 0贊 0
  • 2016年的最后一天，人生第一次畫(huà)成了一副風(fēng)景水彩畫(huà)，總算能看出輪廓內(nèi)容，相當(dāng)欣慰啦！以此為2016畫(huà)個(gè)句號(hào)吧！ ...
    言樹(shù)諼草閱讀 267評(píng)論 1贊 0