<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

182018-6

ajax學習二——從表單提交中了解前后端數據交互

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

一直不太懂前后端的交互，開始學習ajax，好像有些懂了，接下來的內容通過表單提交來了解前后端數據交互吧~

關于表單的基本知識：

表單中的三個內容：

action：數據提交的地址，默認是當前頁面

method：數據提交的方式，默認是get方式

enctype：提交數據格式，默認是application/x-www-form-urlencoded

以下分兩種提交方式進行：

（1）get方式：

前端頁面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="get.php" method="get">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php頁面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');//返回頭

error_reporting(0);



$userName=$_GET['userName'];//主要這里要對應提交的方式，如果表單使用的是get方式則后端需要用get，如果是使用post，則后端需要使用post



echo "你的名字：{$userName}";

輸入“aa"提交后：

使用get方式：

把數據名稱和值通過”=“連接，如果又多個的話，會通過”&“進行連接，然后把數據放到url?后面傳到指定頁面；

url長度又限制，所以不要使用get方式傳遞過多的數據

(2)post方式：

前端頁面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表單提交方式2，post</title>

</head>

<body>

<form action="post.php" method="post">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php頁面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');

error_reporting(0);



$userName=$_POST("userName"); //注意這里的要和提交的方式對應

echo "你的名字：{$userName}";

輸入”li“提交后：

post理論上是無傳輸大小限制的，輸入的內容也不會顯示在瀏覽器輸入欄中。

就暫時了解這么多了~繼續加油！

評論(0) 瀏覽(3309)

182018-6

淺談XSS跨站腳本攻擊

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

淺談跨站腳本攻擊(XSS)

一、概述

1、什么是跨站腳本攻擊

跨站腳本攻擊(Cross Site Scripting)，簡稱XSS，是指：由于網站程序對用戶輸入過濾不足，致使攻擊者利用輸入可以顯示在頁面上對其他用戶造成影響的代碼來盜取用戶資料、利用用戶身份進行某種動作或者對訪問者進行病毒侵害的一種攻擊方式。
直白點：惡意攻擊者往Web頁面里插入惡意Script代碼，當用戶瀏覽該頁之時，嵌入其中Web里面的Script代碼會被執行，從而達到惡意攻擊用戶的目的。

不同于大多數攻擊（一般只涉及攻擊者和受害者），XSS涉及到三方，即攻擊者、客戶端與網站。XSS的攻擊目標是為了盜取客戶端的cookie或者其他網站用于識別客戶端身份的敏感信息。獲取到合法用戶的信息后，攻擊者甚至可以假冒最終用戶與網站進行交互。

2、為什么簡稱XSS，而不是CSS

跨站腳本攻擊(Cross Site Scripting)，為了不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS。

3、XSS漏洞成因
XSS漏洞成因是由于動態網頁的Web應用對用戶提交請求參數未做充分的檢查過濾，允許用戶在提交的數據中摻入代碼，然后未加編碼地輸出到第三方用戶的瀏覽器，這些攻擊者惡意提交代碼會被受害用戶的瀏覽器解釋執行。
4、舉個例子

[php] view plain copy

<?php

     header("Content-Type: text/html; charset=utf-8");

     $username = $_GET["name"];

     echo "<p>Hi，".$username."！</p>";

?>



//這段PHP代碼的主要作用是從URL獲取用戶輸入的參數作為用戶名，并在頁面中顯示“Hi，XXX”

（1）正常情況下：我們在url中輸入：   http://localhost/test.php?name=Sam

給參數name傳一個值Sam，顯示如下圖

（2）那么，在非正常情況下呢（即：把傳遞給name的參數值改為一段可執行的Javascript代碼）？

我們在url中輸入：http://localhost/test.php?name=<script>alert("My name is Sam");</script>

如果我們后臺沒有進行任何關于傳入參數值的過濾，會顯示如下圖結果

二、XSS生效方式

XSS主要有三種生效方式：（1）構造URL   （2）發布內容式     （3）蠕蟲式

1、生效方式：構造URL

XSS攻擊者通過構造URL的方式構造了一個有問題的頁面；當其他人點擊了此頁面后，會發現頁面出錯，或者被暗中執行了某些js腳本，這時，攻擊行為才真正生效。

一般來說，動態頁面中會將url中的部分內容回寫在頁面中。以百度的搜索為例，輸入網址：http://www.baidu.com/s?wd=<script>alert("wrong")<%2Fscript>

搜索后會顯示如下頁面：

因為參數<script>alert("wrong")<%2Fscript>是<script>alert("wrong")</script>轉義后的結果，搜索結果頁中，會在標題中中和搜索框中回寫用戶輸入的內容。

如果這里沒有經過轉義處理，則頁面中就嵌入了一段script，并執行該代碼，并彈出對話框提示用戶。如果是其他惡意代碼，則可能造成破壞。然后攻擊者將此URL廣為傳播——比如說，以報錯的方式發給百度的管理員，管理員打開這個URL就中招了。

下面我們來通過下圖，圖解XSS

舉例

例1、

若未對XSS進行預防，

我們在URL中正常輸入如下，搜索結果會如下圖顯示：beijing 的相關詞條

如果在url中非正常輸入如下的話，查看源碼后input的value屬性值會自動變為 <script>alert("xss test")</script>

若已對XSS進行了預防，

非正常輸入后則會顯示如下圖：

例2、

若未對XSS進行預防，

在URL中輸入紅框中的值，搜索后則顯示如下：

若已對XSS預防，

則搜索結果如下圖：

2、生效方式：發布式內容

構造URL攻擊方式傳播范圍有限，被攻擊者只要有基本的安全意識就可以避免，因此這種手段的危險性比較小。相比之下，通過發表內容構造的XSS的危害就大了很多。

在可以發表內容的論壇、討論區、吧、博客、微博等網站上，用戶發表的內容會保存起來，允許其他用戶瀏覽。這些保存的內容顯示在頁面上的時候，如果沒有經過正確的處理，也會把攻擊者精心構造的內容顯示出來，訪問該內容的用戶就此中招。如果該頁面流傳廣泛，則影響會更加深遠。

拿留言板舉例

例、

留言板的任務是把用戶留言的內容展示出來。正常情況下，用戶的留言都是正常的語言文字，留言板顯示的內容也就沒毛病。

然而這個時候如果有人不按套路出牌，在留言內容中丟進去一行”<script>alert(“mdzz”)</script>
之后當瀏覽這條留言的時候，就會彈出如下信息框。

3、生效方式：蠕蟲式

最暴力的方式是使用蠕蟲——就是首先發一個有問題的文章，瀏覽者閱讀時會被暗中執行惡意代碼，發表一篇新的文章的，該文章也含有同樣的惡意代碼。這樣有可能在最快時間內將攻擊鋪滿整個網站。蠕蟲式攻擊將暗中偷偷摸摸的攻擊行為變成了光明正大的攻城拔寨，極容易被發現和修復。

Eg：早在2011年新浪就曾爆出過嚴重的xss漏洞，導致大量用戶自動關注某個微博號并自動轉發某條微博。(蠕蟲式)
它以吸引人眼球的方式，讓當微博用戶主動點擊攻擊鏈接。之后微博網友會立刻執行一段有害代碼，造成三個結果：發布一條微博；成為攻擊發起人的粉絲；向其他好友發送含同樣鏈接地址的私信。新浪微博很快發現這個漏洞，刪除了含攻擊鏈接的微博內容，并將攻擊發起人ID刪除。

注：上面我們只是為了方便以彈窗舉例，但是XSS攻擊方式絕不是彈窗這么簡單

三、XSS攻擊實例

（1）XSS偷取用戶信息

（2）XSS盜取Cookie

（3）XSS釣魚網站

（4）XSS蠕蟲攻擊

四、XSS的破壞方式

（1）破壞頁面結構：用戶輸入的內容包含了html的標簽，與前面的標簽等閉合，導致頁面的DIV結構發生變化，頁面錯亂。

（2）破壞顯示內容：用戶輸入的內容包含了單引號或雙引號，與前面的單引號或雙引號匹配，導致后面的內容丟失，顯示不出來。

（3）破壞JS：用戶產生的內容直接輸出到js片斷中，但僅轉義少數字符不能保證排除攻擊，所以容易導致JS被破壞

五、XSS攻擊繞過過濾的一些簡單方法

1、大小寫繞過

這個繞過方式的出現是因為網站僅僅只過濾了<script>標簽，而沒有考慮標簽中的大小寫并不影響瀏覽器的解釋所致。

例：

如果我們在URL中輸入:  localhost/test.php?name=<script>alert(''hey!")</script>

，由于網站對<script>標簽進行了過濾，所以搜索后什么都不會發生。

而如果我們輸入:  localhost/test.php?name=<sCript>alert(''hey!")</scRipt>

，實質就是改變了<script>的大小寫，則結果如下圖所示，我們又愉快的彈出了彈窗。

2、利用過濾后返回語句再次構成攻擊語句來繞過

即我們輸入一串原始值，網站將輸入的原始值進行過濾，過濾后的值仍是一段可執行的代碼。

例

讓過濾完script標簽后的語句中還有script標簽。
      即：<sCri<script>pt>alert("hey!")</scRi</script>pt> 過濾后
仍為可執行的JS代碼<script>alert("hey!")</script>

如下圖：將參數name值設為<sCri<script>pt>alert("hey!")</scRi</script>pt>

，輸入后仍會出現彈窗

3、并不是只有script標簽才可以插入代碼！

當script標簽已經被完全過濾后，前面兩種方法就都不會成功。
莫慌，能植入腳本代碼的不止script標簽。

例如：我們用<img>標簽做一個示范。
我們利用如下方式在URL中輸入：http://localhost/test.php?name=<img src='w.123' onerror='alert("hey!")'>
之后就可以再次愉快的彈窗。（因為我們指定的圖片地址根本不存在也就是一定會發生錯誤，這時候onerror里面的代碼自然就得到了執行。）

以下列舉幾個常用的可插入代碼的標簽。
<div onmouseover=‘do something here’> 當用戶鼠標在這個塊上面時即可運行（可以配合weight等參數將div覆蓋頁面，鼠標不劃過都不行）
類似的還有onclick，這個要點擊后才能運行代碼

4、編碼腳本代碼繞過關鍵字過濾。
有的時候，服務器往往會對代碼中的關鍵字（如alert）進行過濾，這個時候我們可以嘗試將關鍵字進行編碼后再插入，不過直接顯示編碼是不能被瀏覽器執行的，我們可以用另一個語句eval（）來實現。【eval()會將編碼過的語句解碼后再執行】

例

alert(1)編碼過后就是\u0061\u006c\u0065\u0072\u0074(1)，

所以構建出來的攻擊語句http://localhost/test.php?name=<script>eval(\u0061\u006c\u0065\u0072\u0074(1))</script>

如下圖執行后又會出現彈窗

5、組合各種方式
在實際運用中漏洞的利用可能不會這么直觀，需要我們不斷的嘗試，甚至組合各種繞過方式來達到目的。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3354)

152018-6

主流驗證碼調研說明文檔

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1、文檔說明

尋找主流驗證碼提供使用公司與樣例及其可能的破解價格

2、內容概述

3 ------ 圖像字符類型驗證碼

4 ------ 行為類型驗證碼

5 ------ 邏輯識別類型驗證碼

6 ------ 資料總結與價格匯總

3. 字符類型驗證碼

3.1 百度搜索字符驗證碼

簡述：

普通字母數字干擾傾斜驗證碼

出現位置：

登錄百度搜索時可能出現

圖片樣例：

出現前提：

網絡異常（非人類訪問可能性大）

3.2 百度經驗字符驗證碼

簡述：

普通字母數字顏色塊干擾傾斜驗證碼

出現位置：

發布百度經驗可能出現

圖片樣例：

出現前提：

3.3 百度貼吧中文驗證碼

簡述：

扭曲中文拼音干擾驗證碼

出現位置：

貼吧發布帖子的時候可能出現

圖片樣例：

3.4 YY字符驗證碼

簡述：

在較大的圖片中的小部分隨機區域出現傾斜數字字母驗證碼。

出現位置：

YY登錄頁面

圖片樣例：

3.5 stream數字中文驗證碼

簡述：

扭曲中文數字干擾驗證碼

出現位置：

異地登錄可能出現

圖片樣例：

3.6 谷歌字符緊湊扭曲驗證碼

簡述：

字符緊湊扭曲驗證碼

出現位置：

異常流量訪問可能出現

圖片樣例：

3.7 京東字符重疊驗證碼

簡述：

字符緊湊扭曲驗證碼

出現位置：

異常流量訪問可能出現

圖片樣例：

4. 行為驗證類型驗證碼

4.1 淘寶登錄行為驗證碼

簡述：

需要鼠標拖動到最右邊完成的驗證碼。

出現位置：

在淘寶登錄頁面出現

圖片樣例：

4.2 極驗第二代行為驗證碼

簡述：

極驗專職做驗證碼，需要通過滑輪完成拼圖。

出現位置：極驗官網

圖片樣例：



4.3 極驗第三代行為驗證碼

簡述：

極驗專職做驗證碼，按鍵點擊再分析瀏覽記錄和特征判別。類似谷歌第三代驗證碼

出現位置：極驗官網

圖片樣例：



5. 邏輯識別驗證碼

5.1 12306邏輯識別驗證碼

簡述：

12306登錄界面識別驗證碼。

出現位置：12306登錄界面

圖片樣例：



5.2 外國網站邏輯識別驗證碼

簡述：偶然見到，還沒有具體來源。

出現位置：網絡來源（未知）

圖片樣例：



5.3 落伍者點擊提示驗證碼

簡述：

來自落伍者網站依次在圖片中點擊提示的字符。

出現位置：落伍者網站登錄時

圖片樣例：



5.4 騰訊安全驗證點擊提示驗證碼

簡述：

來自騰訊安全驗證時依次在圖片中點擊提示的字符。

出現位置：騰訊安全平臺

圖片樣例：



5.5 邏輯數字漢字加減驗證碼

簡述：

某網站下訂單時出現數字加中文邏輯處理驗證碼。

出現位置：網絡來源（未知）

圖片樣例：

5.6 邏輯拼音驗證碼

簡述：扭曲的中文文字

出現位置：網絡來源（未知）

圖片樣例：

5.7 谷歌路標識別驗證碼

簡述：提示生活場景圖片，由用戶點擊路標之類。

出現位置：谷歌異常訪問時出現

圖片樣例：

6. 驗證碼搜集總結

搜集了驗證碼業內3大類型下的17個變種形式。

所有字符型，邏輯型驗證碼均可以通過打碼平臺進行破解
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3614)

142018-6

Node.js從無到有-No.1

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1、初始node.js

1、node.js是由chrome瀏覽器，V8引擎，C++編寫的JavaScript運行環境，node.js可以解析JS代碼，而且沒有瀏覽器安全級的限制，還提供很多系統級別的API。

2、簡單介紹一下node.js后推薦給大家幾個網站，大家可以從這幾個網站上學習更多

https://nodejs.org/en/ Node.js的官方網站

https://stackoverflow.com/ 技術問答社區

3、安裝node.js（這部分感覺沒有什么好說的，因為就是下載安裝的過程，不熟悉的同學去下面菜鳥教程這個網站參考一下就行）https://www.runoob.com/nodejs/nodejs-install-setup.html

4、node.js版本的常識：偶數位為穩定版本，奇數為非穩定版本

5.node.js基礎-起一個web服務器

（1）首先在某個路徑下面寫一個server.js文件，文件內容如下：

[javascript] view plain copy

var http=require('http');

http.createServer(function(req,res){

   res.writeHead(200,{'Content-Type':'text/plain'});

   res.end("Hello world\n");

}).listen(1337,'127.0.0.1');

console.log('Server running at http://127.0.0.1:1337');

（2）然后在該路徑下面使用node運行server.js文件

（3）服務就運行起來了，那么打開瀏覽器，進入http://127.0.0.1:1337/里面就可以看到Hello World

（4）現在我們回過頭去看看剛才那個server.js文件里寫的都是什么東西

[javascript] view plain copy

var http=require('http');              //1、加載http模塊，負責是創建web服務器和處理http相關的任務等等

http.createServer(function(req,res){   //3、監聽到從1337端口過來的請求就會執行這個匿名回調函數，req是請求體，res是響應體，給請求響應一些內容

   res.writeHead(200,{'Content-Type':'text/plain'});  //4、狀態碼200，表示請求成功

   res.end("Hello world\n");

}).listen(1337,'127.0.0.1');           //2、通過createServer（）方法創建服務器，使用listen（）方法在1337端口監聽請求

console.log('Server running at http://127.0.0.1:1337');

（5）現在我們將server.js文件中的res.end("Hello World\n")修改為res.end("Hello Node.js\n"),然后之前我們的服務還沒有關掉，在命令行按下Ctrl+C停掉服務，再使用命令重新開啟，然后進入到瀏覽器刷新http://127.0.0.1:1337/頁面就出來結果了

（6）剛才在server.js文件中的寫法都是鏈式寫法，我們看nodejs官網提供的寫法，就很清晰

[javascript] view plain copy

const http = require('http');



const hostname = '127.0.0.1';

const port = 3000;



const server = http.createServer((req, res) => {

  res.statusCode = 200;

  res.setHeader('Content-Type', 'text/plain');

  res.end('Hello World\n');

});



server.listen(port, hostname, () => {

  console.log(`Server running at http://${hostname}:${port}/`);

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3175)

132018-6

ajax學習二——從表單提交中了解前后端數據交互

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

一直不太懂前后端的交互，開始學習ajax，好像有些懂了，接下來的內容通過表單提交來了解前后端數據交互吧~

關于表單的基本知識：

表單中的三個內容：

action：數據提交的地址，默認是當前頁面

method：數據提交的方式，默認是get方式

enctype：提交數據格式，默認是application/x-www-form-urlencoded

以下分兩種提交方式進行：

（1）get方式：

前端頁面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="get.php" method="get">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php頁面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');//返回頭

error_reporting(0);



$userName=$_GET['userName'];//主要這里要對應提交的方式，如果表單使用的是get方式則后端需要用get，如果是使用post，則后端需要使用post



echo "你的名字：{$userName}";

輸入“aa"提交后：

使用get方式：

把數據名稱和值通過”=“連接，如果又多個的話，會通過”&“進行連接，然后把數據放到url?后面傳到指定頁面；

url長度又限制，所以不要使用get方式傳遞過多的數據

(2)post方式：

前端頁面：

[html] view plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表單提交方式2，post</title>

</head>

<body>

<form action="post.php" method="post">

    <input type="text" name="userName"/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

后端php頁面：

[php] view plain copy

<?php

header('content-type:text/html;charset="utf-8"');

error_reporting(0);



$userName=$_POST("userName"); //注意這里的要和提交的方式對應

echo "你的名字：{$userName}";

輸入”li“提交后：

post理論上是無傳輸大小限制的，輸入的內容也不會顯示在瀏覽器輸入欄中。

就暫時了解這么多了~繼續加油！
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3731)

122018-6

Jquery插件 easyUI屬性匯總

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

此屬性列表請對照jQuery EasyUI 1.0.5.



屬性分為CSS片段和JS片段。



CSS類定義：

1、div easyui-window        生成一個window窗口樣式。

      屬性如下：

                   1)modal:是否生成模態窗口。true[是] false[否]

                   2)shadow:是否顯示窗口陰影。true[顯示] false[不顯示]



2、div easyui-panel           生成一個面板。

       屬性如下:

                 1)title:該標題文本顯示在面板頭部。

                 2)iconCls:在面板上通過一個CSS類顯示16x16圖標。

                 3)width:設置面板寬度。默認auto。

                 4)height:設置面板高度。默認auto。

                 5)left:設置面板左邊距。

                 6)top:設置面板頂部位置。

                 7)cls:在面板中增加一個Class類。

                 8)headerCls:在面板頭部中增加一個Class類。

                 9)bodyCls:在面板內容中增加一個Class類。

                10)style:在面板中增加一個指定樣式。

                11)fit:當True時設置該面板尺寸適合于它的父容器。默認false。

                12)border:當定義時顯示面板邊界。默認true。

                13)doSize:如果設置為True，該面板將重繪大小，并重建布局。默認true。

                14)collapsible:當定義時顯示可折疊面板的按鈕。默認false。

                15)minimizable:當定義時顯示最小化面板的按鈕。默認false。

                16)maximizable:當定義時顯示最大化面板的按鈕。默認false。

                17)closable:當定義時顯示關閉面板的按鈕。默認false。

                18)tools:自定義工具欄，每個工具都包含兩個屬性:iconCls、handler。

                19)collapsed:當定義時該面板初始化時處于收縮狀態。默認false。

                20)minimized:當定義時該面板初始化時處于最小化狀態。默認false。

                21)maximized:當定義時該面板初始化時處于最大化狀態。默認false。

                22)closed：當定義時該面板初始化時處于關閉狀態。默認false。

                23)href:一個url，加載遠程數據并顯示在面板中。

                24)loadingMessage:當加載遠程數據時，在面板中顯示一個消息。默認Loading…

             事件如下:

                 1)onLoad:當遠程數據加載完畢后激活。

                 2)onBeforeOpen:當面板打開前激活。

                 3)onOpen:當面板打開后激活。

                 4)onBeforeClose:當面板關閉前激活。

                 5)onClose:當面板關閉后激活。

                 6)onBeforeDestroy:當面板銷毀前激活。

                 7)onDestroy:當面板銷毀后激活。

                 8)onBeforeCollpase:當面板收縮前激活。

                 9)onCollapse:當面板收縮后激活。

                10)onBeforeExpand:當面板擴展前激活。

                11)onExpand:當面板擴展后激活。

                12)onResize:當面板重繪后激活。

                      width:新建的外部寬度

                      height:新建的外部高度

                13)onMove:當面板移動后激活。

                     left:左側新位置。

                     top:頂部新位置。

                14)onMaximize:當窗口最大化后激活。

                15)onRestore:當窗口恢復到原來大小時激活。

                16)onMinimize:當窗口最小化后激活。

             方法如下：

                 1)options:返回options屬性。

                 2)panel:返回面板對象。

                 3)header:返回面板頭部對象。

                 4)body:返回面板主體對象。

                 5)setTitle:設置頭部的標題文本。

                 6)open:當forceOpen參數設置為true時，面板打開時繞過onBeforeOpen回調函數。

                 7)close:當forceClose參數設置為true時，該面板關閉時繞過onBeforeClose回調函數。

                 8)destroy:當forceDestroy參數設置為true時該面板銷毀時繞過onBeforeDestroy回調函數。

                 9)refresh:當href屬性設置后刷新該面板以加載遠程數據。

                10)resize:設置面板的大小和布局。該options對象包含以下屬性:

                     width：新的面板寬度。

                     height：新的面板高度。

                     left：新的面板左側位置。

                     top：新的面板頂部位置。

                11)move:移動面板到一個新的位置。該options對象包含以下屬性：

                     left：新的面板左側位置。

                     top：新的面板頂部位置。



3、a  easyui-linkbutton                    生成鏈接類型的按鈕。



       屬性如下：

            1)disabled:當True時禁用該按鈕。默認false。

            2)plain:當True時顯示一個普通效果。默認false。



4、input/textarea easyui-validatebox       生成字段驗證。

              屬性如下：

              1)required:true[必需] false[不必需] 默認false

              2)validType:

                 a、length[a,b] 字段長度控制在a至b之間。

                 b、email       驗證Email。

                 c、url      驗證網絡地址。

              3)missingMessage：當文本時出現空時彈出該工具提示，系統有默認[英文]，自定義可覆蓋它。

              4)invalidMessage：當文本內容無效后彈出該工具提示，系統有默認[英文]，自定義可覆蓋它。



5、ul easyui-tree         生成一個樹形結構。

             屬性如下：

              1)url:一個獲取遠程數據的地址。

              2)animate:當展開或折疊節點時是否定義動畫效果。true[是] false[否] 默認false

             節點屬性如下：

             1)text:節點的顯示文本。

             2)id:節點ID，對于加載遠程數據時非常重要。

             3)state:節點狀態，'open'或'closed'，默認為'open'。當設置為'關閉'，該節點包含子節點，并將遠程站點加載它們(并非觸發再加載)。

             4)attributes:為節點添加自定義屬性。

             5)children:以數組節點的方式定義一些字節點。

             事件如下：

                 1)onClick:

                    當用戶點擊一個節點時激活，該節點參數包含如下屬性：

                    id：節點ID

                    text:節點文本

                    attributes:節點自定義屬性。

                    target:目標點擊的DOM對象。

              2)onLoadSuccess:

                   當數據成功加載數據時激活，該參數跟jQuery.ajax的'success'函數效果相同。

              3)onLoadError:

                  當數據加載數據失敗時激活，該參數跟jQuery.ajax的'error'函數效果相同。

             方法如下:

                 1)reload:重新加載樹數據。

                 2)getSelected:獲取選中的節點并返回它，如果沒有選擇節點將返回null。

                 3)collapse:折疊一個節點，該目標參數是該節點的DOM對象。

              4)expand:展開一個節點，該目標參數是該節點的DOM對象。

              5)append:在一個父節點追加一些子節點。

                    param有兩個屬性：

                    parent:DOM對象，把它作為父節點追加(它們)。

                    data:array，或者節點數據。

              6)remove:刪除它以及它以下的子節點，該目標參數是該節點的DOM對象。



6、table easyui-datagrid                   生成一個表格。

             屬性如下：

                 1)title:該DataGrid面板的標題文本。

                 2)iconCls:一個CSS類，將提供一個背景圖片作為標題圖標。

                 3)border：當true時，顯示該datagrid面板的邊框。

                 4)width:面板寬度，自動列寬。

                 5)height:面板高度，自動列高。

                 6)columns:該DataGrid列配置對象，查看column屬性可獲取更多信息。

                 7)frozenColumns:跟Columns屬性相同，但是這些列將會被固定在左邊。

                 8)striped:當true時，單元格顯示條紋。默認false。

                 9)method:通過該方法類型請求遠程數據。默認post。

                10)nowrap:當true時，顯示數據在同一行上。默認true。

                11)idField:說明哪個字段是一個標識字段。

                12)url:一個URL，從遠程站點獲取數據。

                13)loadMsg:當從遠程站點加載數據時，顯示一個提示信息。默認"Processing,please wait …"。自定義覆蓋。

                14)pagination:當true時在DataGrid底部顯示一個分頁工具欄。默認false。

                15)rownumbers:當true時顯示行號。默認false。

                16)singleSelect:當true時只允許當前選擇一行。默認false。

                17)fit:當true時，設置大小以適應它的父容器。默認false。

                18)pageNumber:當設置分頁屬性時，初始化的頁碼編號。默認從1開始

                19)pageSize:當設置分頁屬性是，初始化的頁面大小。默認10行

                20)pageList:當設置分頁屬性時，初始化頁面的大小選擇清單。默認[10,20,30,40,50]

                21)queryParams:當請求遠程數據時，也可以發送額外的參數。

                22)sortName:定義哪列可以排序。

                23)sortOrder:定義列的排列順序，只能是'asc'或'desc'。默認asc。

             Column屬性如下：

                 1)title:該列標題文本。

                 2)field:該列對應的字段名稱。

                 3)width：列寬。

                 4)rowspan:說明該單元格需要多少行數。

                 5)colspan:說明該單元格需要多少列數。

                 6)align:說明Column數據的對齊方式。'left'，'right'，'center' 都可以使用。

                 7)sortable:當true時，允許該列進行排序。

                 8)checkbox:當true時，允許該列出現checkbox。

             事件如下：

                 1)onLoadSuccess:當遠程數據加載成功是激活。

                 2)onLoadError:當遠程數據加載發現一些錯誤時激活。

                 3)onClickRow:當用戶點擊某行時激活，參數包含：

                    rowIndex: 點擊的行索引，從0開始。

                    rowData: 點擊行時對應的記錄。

                4)onDblClickRow:當用戶雙擊某行時激活，參數包含：

                    rowIndex: 點擊的行索引，從0開始。

                    rowData: 點擊行時對應的記錄。

                5)onSortColumn:當用戶對某列排序時激活，參數包含：

                   sort:排序字段名稱。

                   order:排序字段類型。

                6)onSelect:當用戶選擇某行時激活，參數包含:

                   rowIndex: 點擊的行索引，從0開始。

                   rowData: 點擊行時對應的記錄。

                7)onUnselect:當用戶取消選擇某行時激活，參數包含:

                    rowIndex: 點擊的行索引，從0開始。

                    rowData: 點擊行時對應的記錄。

             方法如下：

                 1)options:返回選擇對象。

                 2)resize:重調大小，生成布局。

                 3)reload:重新加載數據。

                 4)fixColumnSize:固定列大小。

                 5)loadData:加載本地數據，過去的行會被刪除。

                 6)getSelected:返回第一個選中行的記錄，若未選返回null。

                 7)getSelections:返回選中的所有行，當沒有選擇記錄時將返回空數組。

                 8)clearSelections:清除所有選項的選擇狀態。

                 9)selectRow:選擇一行，行索引從0開始。

                10)selectRecord:通過傳遞一個ID值參數，選擇一行。

                11)unselectRow:取消選擇一行。



7、div easyui-tabs                         生成一個tab容器。

             屬性如下：

                 1)width:容器寬度，自動列寬。

                 2)height:容器高度，自動列高。

                 3)idSeed:該根id衍生成標簽面板DOM id屬性。默認0

                 4)plain：當true時，該Tab渲染不使用容器背景圖片。默認false

                 5)fit:當true時，設置該Tab大小以適應它的父容器。默認false

                 6)border:當true時，顯示該Tab邊框。

                 7)scrollIncrement:

                 8)scrollDuration:

             事件如下：

                 1)onLoad:當一個ajax Tab面板需要加載遠程數據時激活。該參數跟jQuery.ajax的'success'函數效果相同。

                 2)onSelect:當用戶選擇一個Tab面板時激活。

                 3)onClose:當用戶關閉一個Tab面板時激活。

             方法如下:

                 1)resize:重繪該Tab容器的布局。

                 2)add:新增加一個Tab面板，該選項參數是一個配置對象，看Tab面板屬性可獲取更多信息。

                 3)close：關閉該Tab面板，標題參數顯示你要關閉的對象。

                 4)select:選擇一個Tab面板。

                 5)exists:如果該Tab面板存在即顯示。

             Tab面板屬性如下：

                 1)id:該Tab面板DOM id屬性。

                 2)text:該Tab面板標題文本。

                 3)content:該Tab面板內容。

                 4)href:一個URL，加載遠程內容以填充Tab面板。

                 5)cache:當true時，緩存Tab面板，當href 屬性設置后有效。默認true

                 6)icon:增加一個CSS class圖標以顯示在Tab面板的標題旁。

                 7)closable:當true時，該Tab面板將顯示可關閉按鈕，點擊能關閉該Tab面板。默認false

                 8)selected:當true時，該Tab面板將被選中。默認false

                 9)width:面板寬度，自動列寬。

                10)height:面板高度，自動列高。



8、div menu-sep              生成一個菜單分隔線。



9、a easyui-splitbutton         生成一個菜單列。



10、div easyui-accordion        生成手風琴式下拉框。繼承自panel



11、select easyui-combobox       生成一個組合下拉框。

             屬性如下：

                 1)width:容器寬度，自動列寬。

                 2)listWidth:該組合下拉框的寬度。

                 3)listHeight:該組合下拉框的高度。

                 4)valueField：把該基礎數據的值名稱綁定到組合下拉框中[value]。

                 5)textField:把該基礎數據的字段名稱綁定到組合下拉框中[text]。

                 6)editable:當True時，可直接在文字域中鍵入文本。默認true。

                 7)url:一個URL，從遠程加載列表數據。

             事件如下：

                 1)onLoadSuccess:當遠程數據加載成功是激活。

                 2)onLoadError:當遠程數據加載發現一些錯誤時激活。

                 2)onSelect:當用戶選擇一個列表選項時激活。

                 3)onChange:當該字段的值發生改變時激活。

             方法如下:

                 1)select: 在下拉列表中選擇一個值。

                 2)setValue: 設置指定值到該字段。在'param' 參數可以是一個字符串或者一個JS對象。注:JS對象包含的屬性對應valueField和TextField兩個屬性。

                 3)getValue: 獲取該字段的值。

                 4)reload:   重新請求遠程列表數據。



12、select easyui-combotree      生成一個組合樹形框。

            屬性如下：

            1)width:容器寬度，自動列寬。

            2)treeWidth:該樹形下拉框的寬度。

            3)treeHeight:該樹形下拉框的高度。

            4)url:一個URL，從遠程加載樹形數據。

             事件如下：

             1)onSelect:當用戶選擇一個樹形節點時激活。

             2)onChange:當該字段的值發生改變時激活。

             方法如下:

             1)setValue: 設置指定值到該字段。在'param' 參數可以是一個樹形節點ID值或者一個JS對象。注:JS對象包含的屬性對應id和text兩個屬性。

             2)getValue: 獲取該字段的值。

             3)reload:   重新請求遠程列表數據。



13、body[div] easyui-layout      生成一個布局。

            屬性如下：

            1)title:該面板標題文本。

            2)region:定義布局面板的位置，包含下列值:north,south, east, west, center。

            3)border:當True時顯示布局面板的邊框。默認為True。

            4)split: 當True時顯示一個分割符以使用戶改變面板的尺寸。默認false。

            5)icon:一個圖標CSS類，在面板頭部顯示一個圖標。

            6)href:一個URL,以從遠程站點加載數據。



14、div easyui-menu        生成一個菜單。

            屬性如下：

            1)zIndex: Menu z-index樣式。注釋：z-index 屬性設置元素的堆疊順序。

            2)left:菜單左起位置。默認0。

            3)top: 菜單頂部位置。默認0。

            4)href:當點擊菜單項時能在當前瀏覽器窗口顯示不同的網址。

            事件如下:

            1)onShow:激活后顯示菜單。

            2)onHide:激活后隱藏菜單。

            方法如下:

            1)show:在指定的位置顯示一個菜單。該位置上包含兩個參數：

                left:新的左起位置。

               top:新的頂部位置。

            2)hide:隱藏一個菜單。



15、a easyui-menubutton       生成一個菜單按鈕。

            屬性如下：

            1)disabled:當True時禁用該按鈕。默認false。

            2)plain:當True時顯示一個普通效果。默認false。

            3)menu:一個選擇器名稱，用來創建相應的菜單。

            4)duration: 當懸停該按鈕時，定義菜單的持續顯示時間，單位為毫秒。默認100。



16、input easyui-numberbox      生成一個數字輸入框。

            選項如下:

            1)min:允許的最小值。當輸入值小于最小值時，顯示最小值。

            2)max:允許的最大值。當輸入值大于最大值時，顯示最大值。

            3)precision:分隔符后能的小數點位數。整數默認會追加小數點位數。





JS定義：

1、 .window            生成一個window窗口。



2、 .tree                  生成一個樹形結構。



3、 .datagrid           生成一個表格。



4、 .combobox        生成一個組合下拉框。



5、 .combotree       生成一個組合樹形框。



6、 .dialog               生成一個對話框。它繼承自window

      私有屬性如下：

                 1)title:該對話框標題文本。默認"New Dialog"。

                 2)collapsible:當True時可顯示折疊按鈕。默認false。

                 3)minimizable:當True時可顯示最小化按鈕。默認false。

                 4)maximizable:當True時可顯示最大化按鈕。默認false。

                 5)resizable:當True時能重繪對話框大小。默認false。

                 6)toolbar:該工具欄置于對話框的頂部，每個工具欄包含:text, iconCls, disabled, handler等屬性。

                 7)buttons:這個按鈕置于對話框的底部，每個按鈕包含:text, iconCls, handler等屬性。



7、 .draggable          生成一個可自由拖動的塊。

      屬性如下:

              1)handle:選擇"#id"進行拖動。

              2)disabled:當True時停止自由拖動。默認false。

              3)edge:開始拖動拖動塊時的寬度。默認0。

              4)axis:當拖動塊移動時定義軸，可選值是'v'或者'h',當超出'v'和'h'的方位時將設置為null。

     事件如下：

                 1)onStartDrag:當目標對象開始拖動時激活。

                 2)onDrag:在拖動期間激活。返回false將不會實際拖動它(的位置)。

                 3)onStopDrag:當目標對象停止拖動時激活。



8、 .linkbutton          生成一個鏈式按鈕。



9、 .messager           生成一個消息框。

             選項如下：

                 1)ok:顯示確定按鈕文本。

                 2)cancel:顯示取消按鈕文本。

             方法如下:

             1)show:在屏幕的右下角出現一個消息框。該選項參數是一個配置對象，它包括：

                showType:定義消息框顯示的模式，可選值包括:null,slide,fade,show.默認slide.

                showSpeed: 定義消息框完成顯示的時間。默認600毫秒。

                width: 定義消息框的寬度。默認250。

                height:定義消息框的高度。默認100。

                msg:定義消息框顯示的文本。

                title: 在消息框面板頭部顯示標題文本。

                timeout: 如果定義為0,消息框將不會自動關閉，除非用戶手動關閉它。如果定義為非0值，消息框會在超時結束時自動關閉它。單位毫秒。

             2)alert:顯示一個打印窗口。它的參數如下:

                title: 在頭部顯示標題文本。

                msg:顯示文本內容。

                icon: 顯示圖標。可選值:error,question,info,warning。

                fn: 當窗口關閉后觸發回調函數。

             3)confirm:顯示一個包含確定和取消按鈕的確認消息框。參數包括:

                title:在頭部顯示標題文本。

                msg: 顯示文本內容。

                fn(b):回調函數，當用戶點擊OK按鈕，返回True,才會處理該函數，其它按鈕返回false,不處理。

             4)prompt:顯示一個消息框，包含OK和Cancel按鈕并提示用戶輸入一些文本。參數包括:

                title:在頭部顯示標題文本。

                msg:顯示文本內容。

                fn(val):該回調函數處理用戶輸入的參數值。



10、 .pagination         生成一個頁碼工具條。

           屬性如下：

            1)total:當分頁條創建后設置的記錄數。默認1。

            2)pageSize:頁面大小。默認10。

            3)pageNumber:當分頁創建后顯示的頁碼。默認1。

            4)pageList:用戶能更改頁面的大小。您也可以改變該屬性定義的默認大小。默認[10,20,30,50]。

            5)loading:定義是否正在加載。默認false。

            6)buttons:定義自定義按鈕，每個按鈕都包含兩個屬性:

               iconCls: 該CSS類將顯示一個背景圖標。

               handler: 當按鈕點擊時觸發一個處理函數。

            7)beforePageText:當輸入組件前顯示一個標簽文本。

            8)afterPageText:當輸入組件后顯示一個標簽文本。

            9)displayMsg:顯示一個頁面信息。

           方法如下:

            1)onSelectPage:當用戶選擇一個新頁面時激活。該回調函數包括兩個參數:

               pageNumber: 該新頁面的頁碼。

               pageSize:該新頁面的大小。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3135)

112018-6

第六章屬性文法和語法制導翻譯

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1.總結

    屬性文法是在上下文無關文法的基礎上為每個文法符號（終結符或非終結符）配備若干個相關的“值”（稱為屬性）。

    屬性代表與文法符號相關的信息，和變量一樣，可以進行計算和傳遞。屬性分為綜合屬性和繼承屬性。

    綜合屬性用于“自下而上”傳遞信息，在語法樹中，一個結點的綜合屬性的值，由其子結點的屬性值確定。

    繼承屬性用于“自上而下”傳遞信息，在語法樹中，一個結點的繼承屬性由此結點的父結點和/或兄弟結點的某些屬性確定。

    屬性計算的過程即是語義處理的過程，對于文法的每一個產生式配備一組屬性的計算規則，則稱為語義規則。

    語義規則所描述的工作包括：屬性計算、靜態語義檢查、符號表操作、代碼生成等。

    抽象語法樹指從語法樹中去掉對翻譯不必要的信息，而獲得更有效的源程序中間表示。

     L-屬性文法的自頂向下翻譯，屬性的計算次序受分析方法所限定的分析樹結點建立次序的限制，分析樹的結點是自左向右生成，如果屬性信息是自左向右流動，那么就有可能在分析的同時完成屬性計算。

S—屬性文法的自下而上計算，S—屬性文法，它只含有綜合屬性。綜合屬性可以在分析符號串的同時由自上而下的分析器來構造，分析器可以保存與棧中文法符號有關的綜合屬性值，每當進行歸約時，新的屬性值就由棧中正在歸約的產生式右邊符號的屬性值來計算，可以通過擴充分析器中的棧來存放這些綜合屬性值。S-屬性文法的翻譯器通?？山柚贚R分析器實現。

    翻譯模式是語法制導定義的一種便于翻譯的書寫形式。其中屬性與文法符號相對應，語義規則或語義動作用花括號｛｝括起來，可被插入到產生式右部的任何合適的位置上。這是一種語法分析和語義動作交錯的表示法，他表達在按深度優先遍歷分析樹的過程中何時執行語義動作。翻譯模式給出了使用語義規則進行計算的順序?？煽闯墒欠治鲞^程中翻譯的注釋。

2.感悟

    這一章主要內容是SDD語法制導定義和SDT語法制導翻譯方案，通過給CFG中的文法符號設置語義屬性來表示語法成分對應的語義信息，而語義屬性通過相關聯的語義規則計算，在對語法分析的過程中進行翻譯。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3442)

082018-6

世界杯快到了，看我用Python爬蟲實現（偽）球迷速成！

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

還有4天就世界杯了，作為一個資深（偽）球迷，必須要實時關注世界杯相關新聞，了解各個球隊動態，這樣才能在一堆球迷中如（大）魚（吹）得（特）水（吹），迎接大家仰慕的目光!

給大家分享一個快速了解相關信息的辦法：刷論壇！我們來一起做個虎撲論壇的爬蟲吧！

抓包獲取虎撲論壇相關帖子內容，逐條顯示！

先來觀察下網頁，打開論壇首頁，選擇國際足球

然后往下拉，找到世界杯相關內容

這里就是我們的目標了，所有相關的新聞都會在這里顯示，用F12打開“開發者工具”然后往下瀏覽看看數據包

注意箭頭指向的那幾個地方！

這就是剛才瀏覽的新聞所在的json包，來看看具體數據是什么

ok，標題、地址、發布時間包括來源都已經出現了!我們可以直接抓取json數據然后取出相關內容！

再進入具體新聞頁面看看

所有的文本內容，都在

這個標簽下的

標簽內，我們可以用xpath直接取div下的所有文本內容!

這里就不一一說明了，直接上代碼，并錄個小的GIF圖片給大家看看效果

#@author Q群542110741 # -*- coding:utf-8 -*- import requests from lxml import etree header = { 'User-Agent':'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:60.0) Gecko/20100101 Firefox/60.0', 'Host':'soccer.hupu.com', 'Referer':'https://soccer.hupu.com/'} i = 0 while 1: #構建循環頁面翻頁 url = 'https://soccer.hupu.com/home/latest-news?league=世界杯&page=' i += 1 #獲取json數據，一頁20個 html = requests.get(url+str(i),headers=header).json()['result'] for info in html: time_r = info['time']#發布時間 title = info['title']#標題 url_r = info['url']#新聞鏈接 origin = info['origin']#來源 print(title) print('發布時間:',time_r,' '*5,'來自：',origin) head = header head['Host'] = 'voice.hupu.com'#更改header中Host參數 html_r = requests.get(url_r,headers=head)#獲取新聞詳情 html_r.encoding = 'utf-8'#編碼格式指定 #獲取div下的所有文本 datas = etree.HTML(html_r.text).xpath('//div[@class="artical-content-read"]')[0].xpath('string(.)').strip() print('\n'+'內容：'+'\n'*2,datas,'\n') #可由用戶手動退出循環 if input('任意鍵繼續，“q”退出') in ['q', 'Q']: exit()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3308)

072018-6

程序猿之HTML

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

一、WEB概述 (!!掌握web發展過程圖、B/S和C/S架構的特點)
   B/S: Browser-Server 瀏覽器服務器模型 WEBQQ 網頁游戲
       優點: 不需要下載客戶端程序, 使用瀏覽器可以直接訪問. 程序的升級操作是在服務器端進行的. 瀏覽器只需要刷新頁面就可以看到升級后的效果
       缺點: 瀏覽器具有一定的局限性, 頁面的展示能力仍然是很差. 所有的頁面數據都需要從服務器實時的獲取, 所以對網速的依賴很高
   C/S: Client-Server 客戶端服務器模型 QQ LOL
       優點: 客戶端可以任意的設計, 頁面的展示能力就可以很強. 由于大量的資源都已經保存在了客戶端, 和服務器交互的僅僅是一些變化的數據, 所以對網速的依賴很低
       缺點: 第一次使用時需要下載客戶端程序, 一旦程序需要升級操作, 所有的客戶端程序都需要升級. 在有些場景中是不能被接受的.

二、HTML
   1.HTML是什么
       超文本標記語言最基礎的網頁語言 W3C
       HTML不是一門編程語言而是一門標記語言
       HTML是用標記(標簽/元素)來描述網頁內容的
       HTML是文檔的一種

   2.html的結構 (掌握)
       <!DOCTYPE HTML>
       <HTML>
           <HEAD></HEAD>
           <BODY></BODY>
       </HTML>
       <!DOCTYPE HTML>用來指定當前頁面所遵循的html的版本
       頭部分用來存放html頁面的基本屬性信息優先被加載
       體部分用來存放頁面數據,是可見的頁面內容

       <title></title>指定網頁的標題
       <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用來指定瀏覽器用什么編碼解析當前頁面

   3.html語法 (掌握)
       html標簽分為開始標簽和結束標簽,如果標簽內沒有修飾的內容, 開始標簽和結束標簽可以合并為一個自閉標簽
       如:   <br/> <hr/>

       標簽通常都可以具有屬性屬性與屬性值用"="連接,屬性的值可以用雙引號、單引號引起來或者不用引號一般會用雙引號引起來

       

       html中多個連續的空白字符(制表符,空格,換行)默認會合并為一個空格來顯示
       如果非要輸入空格,可以用轉義字符來替代  
       如果非要輸入換行,可以用 <br/> 來替代

   4.font標簽 -- 用來指定文本的字體/大小/顏色 (了解)
       size:指定字體大小范圍是 1~7 默認值為3
       color:指定字體顏色
           值可以指定為顏色名如red
           或十六進制的顏色值如#000000
           或 rgb三原色值如rgb(255,255,255)
       face:指定字體中文默認是宋體

   5.標題標簽 -- 指定特定樣式字體的一組標簽 (掌握)
       <h1>一級標簽</h1>
       <h2>二級標簽</h2>
       <h3>三級標簽</h3>
       <h4>四級標簽</h4>
       <h5>五級標簽</h5>
       <h6>六級標簽</h6>
       屬性:
           align:指定文本的排列
               left
               center
               right
               justify

   6.轉義字符 (掌握)
       <   <
       >   >
       "   "
       '   '
       空格  

   7.列表標簽
       (1)定義列表 (了解)
           <dl> 定義一個定義列表
           <dt> 定義定義列表中的標題
           <dd> 定義定義列表中的項

       (2)有序列表 (了解)
           <ol> 定義一個有序列表
           <li> 定義列表中的項
           屬性:
               type:定義項目符號的類型
                   A a I i 1(默認)
               start:定義項目符號的起始值

       (3)無序列表 (掌握)
           <ul> 定義一個無序列表
           <li> 定義列表中的項
           屬性:
               type:定義項目符號的類型
                   disc square circle

   8.img標簽 -- 圖像標簽 (!!掌握)
       <img src="圖片的路徑" alt="圖像的替代文本"/>
       必選屬性:
           src:圖片的路徑
           alt:圖像的替代文本
       可選屬性:
           width:寬度 px %
           height:高度 px %
           border:邊框的寬度 px
   9.map標簽 (了解)
       為圖像綁定可點擊區域的圖像映射
       <map name="" id="">
           <area shape="circle" coords="640,410,64" href="#" />
       </map>
       屬性:
           shape: 指定區域的形狀
           coords: 指定區域的坐標
           href: 點擊區域后跳轉資源的URL

   10.超鏈接 -- <a> 錨 (!!掌握)
       用于指向當前位置以外的資源
       (1) 用于創建指向另外一個文檔的超鏈接
       (2) 用于在當前頁面的不同位置之間進行跳轉
       重要屬性:
           href: 所指向資源的URL
           name: 指定錨的名字
           target: 指定瀏覽器打開目標URL的方式。
               _blank   在新窗口中打開目標url
               _self   在當前窗口中打開目標url

   11.表格標簽 -- <table> (!!!掌握)
       <table> 定義一個HTML表格
       <tr>   定義表格中的行
       <td>   定義表格中的單元格
       <th>   定義表格中的表頭
       table的重要屬性:
           border 邊框寬度
           cellspacing 單元格之間的空白
           cellpadding 邊框與單元格內容之間的距離
           bgcolor 背景顏色
           bordercolor 邊框顏色
           width 寬度
           align 對齊方式
       tr重要屬性:
           align 對齊方式
           bgcolor 背景顏色
       th/td重要屬性:
           align 對齊方式
           bgcolor 背景顏色
           width 寬度
           height 高度
           colspan 可橫跨的列數
           rowspan 可豎跨的行數
       <caption> 定義表格的標題
       <thead>
       <tfoot>
       <tbody>(可以出現多次).

       三個標簽要么都沒有,要么就必須一起使用,并且出現的順序必須是thead,tfoot,tbody
       如果沒有使用這三個標簽, 那么<table>里面所有的內容都會隱含在一個隱藏的<tbody>標簽內

   12.框架標簽 (了解)
       <frameset>
       <frame>
       框架標簽需要寫在head和body的中間

       <frameset>屬性:
           rows 定義框架集中行的數目和尺寸
           cols 定義框架集中列的數目和尺寸
       <frame>屬性:
           src 定義目標文檔的URL
           noresize 規定無法調整框架的大小
           frameborder 是否顯示框架周圍的邊框
           name 框架的名字
           target 打開目標URL的方式
               _blank 在新窗口中打開目標url
               _self 在當前窗口打開目標URL
               _parent 在父窗口中打開目標URL
               _top 打開時忽略所有框架在當前頁面打開url
               framename
       <iframe>
           創建包含另一個文檔的行內框架
           <iframe>標簽永遠不要自閉!! 可以在標簽內部存放提示文本如果瀏覽器不支持iframe 該文本會顯示
           屬性:
               src
               width
               height

   13.表單 (!!!掌握)
       (1)瀏覽器向服務器發送數據的方式, 有兩種
           a)利用超鏈接向服務器發送數據 -- 請求參數
               在超鏈接的后面拼接上要發送的請求參數, 鏈接和請求參數之間用?分割, 參數名和參數值用 = 連接, 多個參數之間用 & 分割, 可以存在多個同名的參數

           b)利用表單向服務器發送數據
               利用HTML中的<form>標簽以及一些表單項標簽, 用戶可以輸入數據, 通過提交表單發送數據給服務器

       (2)form
           必須存在的屬性:
               action: 指定表單發送的目標URL地址

           可選的屬性:
               method: 指定以何種方式發送表單

           http協議指定了7種提交方式, 其中5種不用, 只用GET提交和POST提交

           只有使用表單并且明確的指定提交方式為post時(也就是設置method="POST")才是POST提交，其他提交都是GET提交．

           GET提交和POST提交的區別：
               主要區別體現在數據傳輸方式的不相同
               a)GET提交: 請求參數會賦在地址欄后進行傳輸
                   這種方式發送的數據量有限, 最大不超過1kb(4kb)
                   數據顯示在地址欄, 安全性差

               b)POST提交: 請求參數在底層流中傳輸
                   這種方式發送的數據量無限制
                   地址欄上看不到數據, 比較安全

   14.表單中的項 (!!!掌握)
       表單中可以有多個輸入項，輸入項必須有name屬性才可以被提交，如果輸入項沒有name屬性，則表單在提交時會忽略它
       (1)<input> 輸入框
           重要屬性:
               type屬性
                   文本框 text 輸入的文本信息直接顯示在框中

                   密碼框 password 輸入的文本以圓點或者星號的形式顯示

                   單選框 radio 進行單項的選擇如性別選擇多個radio的name屬性相同會被當作一組來使用必須用value為選項指定提交的值

                   復選框 checkbox 進行多項選擇，愛好的選擇。多個checkbox具有相同的name屬性時會被當作一組來使用必須用value為選項指定提交的值

                   隱藏字段 hidden 如果有一些信息，不希望用戶看見，又希望表單能夠提交，就可以用隱藏字段隱含在表單中

                   提交按鈕 submit 實現表單提交操作的按鈕可以通過value屬性指定按鈕顯示的文字

                   重置按鈕 reset 重置表單到初始狀態

                   按鈕 button 普通按鈕, 沒有任何功能需要配合JavaScript為按鈕指定具體的行為?？梢杂胿alue屬性指定按鈕顯示的文字。

                   文件上傳項 file 提供選擇文件進行上傳的功能。

                   圖像 image 利用一張圖片替代提交按鈕的功能, 不常用

               name屬性
                   表單中可以有多個輸入項，輸入項必須有name屬性才可以被提交，如果輸入項沒有name屬性，則表單在提交時會忽略它. 另外name屬性的值是可以重復的

               value屬性可以給input輸入框設置一個初始值

               readonly屬性
                   使當前輸入項變為只讀,不能修改,但是提交時仍會被提交

               disabled
                   使當前輸入項不可用,不能修改值,也不會被提交

               size屬性
                   指定當前輸入框的寬度

               checked屬性
                   指定單選框/復選框被選中

       (2)<textarea> 文本域
           屬性:
               rows 指定文本域的行數(高度)
               cols 指定文本域的列數(寬度)
               readonly 只讀
               disabled 禁用

       (3)<select> <option>
           select 提供下拉選擇功能
           option 下拉選框中的選項可以用value屬性指定提交的值,如果不指定,將會提交標簽內的文本
           重要屬性:
               name: 下拉列表的名稱
               size: 設置下拉選項中可見選項的個數
               disabled 禁用下拉選框
               multiple 是否支持多選

       (4)<fieldset><legend> (了解可以不練習)
           <fieldset> 對表單中的表單項進行分組
           <legend> 為分組設置標題

   15.其他標簽 (了解可以不練習)
       <marquee>
           屬性:
               scrollAmount 設置文字滾動速度默認值是6
               direction 滾動方向 left right down up
               behavior 滾動行為 scroll alternate slide

       <pre>
           可以將文本內容按照代碼區的樣子顯示在頁面上

       <b> 加粗
       <i> 斜體
       <u> 下劃線
       <s> 刪除線

       <em> 強調
       <strong> 更加強烈的強調
       <sub> 下標
       <sup> 上標

   16.注冊表單練習 (!!!掌握自己能夠獨立的做出來)
       略

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3033)

062018-6

網頁的轉發與重定向

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

在web開發中，轉發與重定向有很大的區別。

直觀看來，轉發不會發生URL址的變換，而重定向則會發生URL的改變。

這僅僅只是一種表象。HttpServlet中的request對象和response對象是在用戶請求網頁時由服務器根據瀏覽器傳過來的參數封裝生成的。一旦從瀏覽器請求過來，服務器響應回去那么request和response的也就到了生命的終點了。

當使用轉發的時候，瀏覽器僅僅請求一次但是服務器端可能經歷了多次的跳轉。服務器端執行時發生了轉發那么服務器就停止正在執行的任務，去指定轉發給定地址的任務。

而使用重定向的話，瀏覽器則會項服務器發生多次請求。在服務器端執行代碼的時候，發現發生了重定向，那么它就會通知瀏覽器，去訪問另一個URL。瀏覽器就會向被發送的URL請求資源。

看一段代碼：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <form action="myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

這是一段jsp代碼，當點擊提交的時候，會把表單提交給myServlet。

界面長這樣：

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = (String)request.getParameter("username"); request.setAttribute("welcome", "welcome!!!"); RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); rd.forward(request,response); } }

1

2

3

4

5

6

7

8

這是MySerlet，當用戶點擊提交表單，服務器就會調用MyServlet的doPost方法，在這個方法里面進行的是頁面轉發。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>welcome</title> </head> <body> <%=request.getParameter("username")%> <br/> <%=request.getAttribute("welcome") %> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

這是welcome.jsp的代碼。

提交結果為：

當點擊提交按鈕后后我們可以看一下網絡的請求過程。

可以發現瀏覽器只向服務器發送了一個請求。

接下來看一下重定向。

如果把MyServlet的代碼改一下。

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = (String)request.getParameter("username"); request.setAttribute("welcome", "welcome!!!"); // RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); // rd.forward(request,response); response.sendRedirect("welcome.jsp"); } }

1

2

3

4

5

6

7

8

9

可以看到結果為：

而且瀏覽器項服務器發送了兩次請求：

從上面的結果可以看出重定向后，因為是發起的另一個請求因此welcom頁面中的內容都是null。而轉發則由于是同一個request對象和response對象因此既能獲得瀏覽器請求的參數，還能拿到request總放入的屬性值。

其實從代碼也可以看出來，sendRedirect()方法是HttpServletResponse對象的響應方法，既然調用了響應對象的方法，那么就表明整個請求結束了，服務器端項客戶端返回執行結果。而getRequestDispatcher方法是request對象的方法，表明依舊在請求因此不會立即向瀏覽器返回結果，而是繼續執行其轉發的任務。

有一點需要說明的時，不論forward方法還是sendRedirect方法中傳的URL需要注意，如果以“\”開頭那么，就表示這個URL是現對于servlet容器根的請求，即localhost:8080,如果沒有以“\”開頭，那么表明這個請求地址是相對于當前的請求URL來尋址的。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body>  <form action="/myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

當我再次點擊提交的時候：

不以”\”開頭的請求地址為：

轉發模型為：

重定向模型為：

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2918)

« 1 ... 112 113 114 115 116 117 118 ... 122 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合