整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          如何解析SQL 注入

          如何解析SQL 注入

          、介紹

          SQL 注入攻擊是網(wǎng)絡(luò)上非常常見的一種攻擊!

          黑客通過將惡意的 SQL 查詢或者添加語句插入到應(yīng)用的輸入?yún)?shù)中,然后在后臺 SQL 服務(wù)器上解析執(zhí)行進(jìn)行程序攻擊!

          哪黑客具體是如何將惡意的 SQL 腳本進(jìn)行植入到系統(tǒng)中,從而達(dá)到攻擊的目的呢?

          現(xiàn)在的 Web 程序基本都是三層架構(gòu),也就是我們常說的 MVC 模式:

          • 表示層:用于數(shù)據(jù)的展示,也就是前端界面
          • 業(yè)務(wù)邏輯層:用于接受前端頁面?zhèn)魅氲膮?shù),進(jìn)行邏輯處理
          • 數(shù)據(jù)訪問層:邏輯層處理完畢之后,會將數(shù)據(jù)存儲到對應(yīng)的數(shù)據(jù)庫,例如mysql、oracle、sqlserver等等

          例如在上圖中,用戶訪問主頁進(jìn)行了如下過程:

          • 1、在 Web 瀏覽器中輸入www.shiyanlou.com接到對應(yīng)的服務(wù)器
          • 2、Web服務(wù)器從本地存儲中加載index.php腳本程序并解析
          • 3、腳本程序會連接位于數(shù)據(jù)訪問層的DBMS(數(shù)據(jù)庫管理系統(tǒng)),并執(zhí)行Sql語句
          • 4、數(shù)據(jù)庫管理系統(tǒng)返回Sql語句執(zhí)行結(jié)果給Web服務(wù)器
          • 5、Web服務(wù)器將頁面封裝成HTML格式發(fā)送給Web瀏覽器
          • 6、Web瀏覽器解析HTML文件,將內(nèi)容展示給用戶

          整個過程中間的業(yè)務(wù)邏輯層只是進(jìn)行邏輯處理,從用戶到獲取數(shù)據(jù),簡單的說,三層架構(gòu)是一種線性關(guān)系。

          二、SQL 注入漏洞詳解

          剛剛我們也講到,當(dāng)我們訪問網(wǎng)頁時(shí),Web 服務(wù)器會向數(shù)據(jù)訪問層發(fā)起 SQL 查詢請求,如果權(quán)限驗(yàn)證通過就會執(zhí)行 SQL 語句。

          一般來說,如果是正常使用是不會有什么危險(xiǎn)的,但是如果用戶輸入的數(shù)據(jù)被構(gòu)造成惡意 SQL 代碼,Web 應(yīng)用又未對動態(tài)構(gòu)造的 SQL 語句使用的參數(shù)進(jìn)行檢查,則會帶來意想不到的危險(xiǎn)!

          廢話也不多說來,下面我們就一起來看看,黑客是如何繞過參數(shù)檢查,從而實(shí)現(xiàn)竊取數(shù)據(jù)的目的!

          2.1、SQL 注入示例一:猜解數(shù)據(jù)庫

          下面我們使用DVWA 滲透測試平臺,作為攻擊測試的目標(biāo),讓你更加清楚的理解 SQL 注入猜解數(shù)據(jù)庫是如何發(fā)生的。

          啟動服務(wù)之后,首先觀察瀏覽器中的URL,先輸入 1 ,查看回顯!

          從圖中可以看出,ID : 1,F(xiàn)irst Name:admin,Surname:Admin信息!

          那后臺執(zhí)行了什么樣的 SQL 語句呢?點(diǎn)擊view source查看源代碼 ,其中的 SQL 查詢代碼為:

          SELECT first_name, last_name FROM users WHERE user_id='1';
          

          OK!

          如果我們不按常理出牌,比如在輸入框中輸入1' order by 1#

          實(shí)際執(zhí)行的 SQL 語句就會變成這樣:

          SELECT first_name, last_name FROM users WHERE user_id='1' order by 1#
          

          這條語句的意思是查詢users表中user_id1的數(shù)據(jù)并按第一字段排行

          其中#后面的 SQL 語句,都會當(dāng)作注釋進(jìn)行處理,不會被執(zhí)行!

          輸入 1' order by 1#1' order by 2#時(shí)都能返回正常!

          當(dāng)輸入1' order by 3#時(shí),返回錯誤!

          由此得知,users表中只有兩個字段,數(shù)據(jù)為兩列!

          接下來,我們玩點(diǎn)高級的!

          我們使用union select聯(lián)合查詢繼續(xù)獲取信息!

          直接在輸入框中輸入1' union select database(),user()#進(jìn)行查詢!

          實(shí)際執(zhí)行的Sql語句是:

          SELECT first_name, last_name FROM users WHERE user_id='1' union select database(),user()#'
          

          通過返回信息,我們成功獲取到:

          • 當(dāng)前網(wǎng)站使用數(shù)據(jù)庫為dvwa
          • 當(dāng)前執(zhí)行查詢用戶名為root@localhost

          接下來我們嘗試獲取dvwa數(shù)據(jù)庫中的表名!

          在輸入框中輸入1' union select table_name,table_schema from information_schema.tables where table_schema='dvwa'#進(jìn)行查詢!

          實(shí)際執(zhí)行的Sql語句是:

          SELECT first_name, last_name FROM users WHERE user_id='1' union select table_name,table_schema from information_schema.tables where table_schema='dvwa'#'
          

          通過上圖返回信息,我們再獲取到:

          • dvwa 數(shù)據(jù)庫有兩個數(shù)據(jù)表,分別是 guestbookusers

          可能有些同學(xué)還不夠滿足,接下來嘗試獲取重量級的用戶名、密碼

          根據(jù)經(jīng)驗(yàn)我們可以大膽猜測users表的字段為 userpassword,所以輸入:1' union select user,password from users#進(jìn)行查詢:

          實(shí)際執(zhí)行的Sql語句是:

          SELECT first_name, last_name FROM users WHERE user_id='1' union select user,password from users#'
          

          可以看到成功爆出了用戶名、密碼,密碼通過猜測采用 md5 進(jìn)行加密,可以直接到www.cmd5.com網(wǎng)站進(jìn)行解密。

          2.2、SQL 注入示例二:驗(yàn)證繞過

          接下來我們再試試另一個利用 SQL 漏洞繞過登錄驗(yàn)證的示例!

          這是一個普通的登錄頁面,只要輸入正確的用戶名和密碼就能登錄成功。

          我們先嘗試隨意輸入用戶名 123 和密碼 123 登錄!

          好像不太行,登錄被攔截,從錯誤頁面中我們無法獲取到任何信息!

          點(diǎn)擊view source查看源代碼 ,其中的 SQL 查詢代碼為:

          select * from users where username='123' and password='123'
          

          按照上面示例的思路,我們嘗試在用戶名中輸入 123' or 1=1 #, 密碼同樣輸入 123' or 1=1 #

          恭喜你,登錄成功!

          為什么能夠登陸成功呢?實(shí)際執(zhí)行的語句是:

          select * from users where username='123' or 1=1 #' and password='123' or 1=1 #'
          

          按照 Mysql 語法,# 后面的內(nèi)容會被忽略,所以以上語句等同于:

          select * from users where username='123' or 1=1
          

          由于判斷語句 or 1=1 恒成立,所以結(jié)果當(dāng)然返回真,成功登錄!

          我們再嘗試不使用 # 屏蔽單引號,在用戶名中輸入 123' or '1'='1, 密碼同樣輸入 123' or '1'='1

          依然能夠成功登錄,實(shí)際執(zhí)行的 SQL 語句是:

          select * from users where username='123' or '1'='1' and password='123' or '1'='1'
          

          兩個 or 語句使 and 前后兩個判斷永遠(yuǎn)恒等于真,所以能夠成功登錄!

          2.3、SQL 注入示例三:判斷注入點(diǎn)

          通常情況下,可能存在 SQL 注入漏洞的 Url 是類似這種形式 :http://xxx.xxx.xxx/abcd.php?id=XX

          對 SQL 注入的判斷,主要有兩個方面:

          • 判斷該帶參數(shù)的 Url 是否可以進(jìn)行 SQL 注入
          • 如果存在 SQL 注入,那么屬于哪種 SQL 注入

          可能存在 SQL 注入攻擊的動態(tài)網(wǎng)頁中,一個動態(tài)網(wǎng)頁中可能只有一個參數(shù),有時(shí)可能有多個參數(shù)。有時(shí)是整型參數(shù),有時(shí)是字符串型參數(shù),不能一概而論。

          總之,只要是帶有參數(shù)的動態(tài)網(wǎng)頁且此網(wǎng)頁訪問了數(shù)據(jù)庫,那么就有可能存在 SQL 注入。

          例如現(xiàn)在有這么一個 URL 地址:

          http://xxx/abc.php?id=1
          

          首先根據(jù)經(jīng)驗(yàn)猜測,它可能執(zhí)行如下語句進(jìn)行查詢:

          select * from <表名> where id=x
          

          因此,在 URL 地址欄中輸入http://xxx/abc.php?id=x and '1'='1頁面依舊運(yùn)行正常,繼續(xù)進(jìn)行下一步!

          當(dāng)然不帶參數(shù)的 URL 也未必是安全的,現(xiàn)在有很多第三方的工具,例如postman工具,一樣可以模擬各種請求!

          黑客們在攻擊的時(shí)候,同樣會使用各種假設(shè)法來驗(yàn)證自己的判斷!

          三、如何預(yù)防 SQL 注入呢

          上文中介紹的 SQL 攻擊場景都比較基礎(chǔ),只是簡單的向大家介紹一下!

          那對于這種黑客攻擊,我們有沒有什么辦法呢?

          答案肯定是有的,就是對前端用戶輸入的所有的參數(shù)進(jìn)行審查,最好是全文進(jìn)行判斷或者替換

          例如,當(dāng)用戶輸入非法字符的時(shí)候,使用正則表達(dá)式進(jìn)行匹配判斷!

          private String CHECKSQL="^(.+)\\sand\\s(.+)|(.+)\\sor(.+)\\s$";
          Pattern.matches(CHECKSQL,targerStr);
          

          或者,全局替換,都可以!

          public static String TransactSQLInjection(String sql) {
             return sql.replaceAll(".*([';]+|(--)+).*", " ");   
          }
          

          還可以采用預(yù)編譯的語句集

          例如當(dāng)使用Mybatis的時(shí)候,盡可能的用#{}語法來傳參數(shù),而不是${}

          舉個例子!

          如果傳入的username 為 a' or '1=1,那么使用 ${} 處理后直接替換字符串的sql就解析為

          select * from t_user where username='a' or '1=1'
          

          這樣的話所有的用戶數(shù)據(jù)就被查出來了,就屬于 SQL 注入!

          如果使用#{},經(jīng)過 sql動態(tài)解析和預(yù)編譯,會把單引號轉(zhuǎn)義為 \',SQL 最終解析為

          select * from t_user where username="a\' or \'1=1 "
          

          這樣會查不出任何數(shù)據(jù),有效阻止 SQL 注入!

          四、參考

          1、簡書 - Jewel591 - sql注入基礎(chǔ)原理

          2、極術(shù)社區(qū) - 悟能之能 - 你真的了解MyBatis中${}和#{}的區(qū)別嗎?

          、選擇題(1-18題各3分19-36題各2分,共92分)

          1.在HTML的<TD>標(biāo)簽中,align 屬性的取值是( C )

          A. top ; B. middle ; C. center ; D. bottom

          <table border="1">

          <tr>

          <td width="100px">姓名</td>

          <td>性別</td>

          <td>年齡</td>

          </tr>

          <tr>

          <td>張三</td>

          <td>男</td>

          <td>20齡</td>

          </tr>

          </table>

          2. CSS樣式表根據(jù)所在網(wǎng)頁的位置,可分為( B )

          A.行內(nèi)樣式表、內(nèi)嵌樣式表、混合樣式表; B.行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表;

          C.外部樣式表、內(nèi)嵌樣式表、導(dǎo)入樣式表; D.外部樣式表、混合樣式表、導(dǎo)入樣式表

          行內(nèi)樣式:

          <html>

          <body>

          <div style="width:100px;height:100px;background:red;"></div>>

          </body>

          </html>

          -----------------------------------------------------------------

          內(nèi)嵌樣式:

          <html>

          <head>

          <style type="text/css">

          #div{width:100px;height:100px;background:red;}

          </style>

          </head>

          <body>

          <div id="div"></div>

          </body>

          </html>

          --------------------------------------------------------------

          外部樣式:

          <html>

          <head>

          <link rel="stylesheet" type="text/css" href="ccss.css">

          </head>

          <body>

          <div id="div"></div>>

          </body>

          </html>

          ---------------------

          css文件

          #div{width:100px;height:100px;background:red;}

          #和.區(qū)別

          .點(diǎn)是使用class引用的,多個控件可以同時(shí)使用一個class,一個控件上也可以使用多個class,比如

          .tdRed{border:solid 1px red;}

          .tdBKBlue{background-color:blue;}

          <td class="tdRed" />

          <td class="tdRed tdBKBule"/>

          而ID是在一個頁面中唯一的

          總得來說class表示泛性的,id表示個性的

          比如你所有的按鈕都是一個顏色的

          .normalButton{background-color:blue;border:solid 0px black;}

          對于提交按鈕會要做的大一點(diǎn)

          #submit{width:100px;height:100px;}

          那么你的按鈕就是

          <input type="button" id="submit" class="normalButton" value="提交" />

          普通的按鈕就是

          <input type="button" id="abcdefg" class="normalButton" value="普通按鈕" />

          3. 在插入圖片標(biāo)簽中,對插入的圖片進(jìn)行文字說明使用的屬性是( D )

          A.name; B.id; C.src; D. alt

          4. 對于<FORM action=″URL″ method=*>標(biāo)簽,其中*代表GET或( C )

          A.SET; B. PUT; C. POST ; D. INPUT

          Get和post區(qū)別

          安全性:POST比GET安全;

          編碼方式:POST方式提交時(shí)可以通過HTML文檔中的<META>元素設(shè)置實(shí)體部分的編碼方式,而GET方式提交時(shí)URI默認(rèn)的編碼方式為ISO-8859-1,不可以在頁面中設(shè)置;

          傳輸文件大小:POST方式提交文件放在實(shí)體部分傳輸,大小無上限,而GET方式提交文件內(nèi)容放在URI部分傳輸,最大為2KB;

          請求速度:GET比POST快。

          數(shù)據(jù)傳輸方式:GET:查詢字符串(名稱/值對)是在 GET 請求的 URL 中發(fā)送的,如:/test/demo_form.asp?name1=value1&name2=value2;POST:查詢字符串(名稱/值對)是在 POST 請求的 HTTP 消息主體中發(fā)送的。

          5. 下列標(biāo)簽可以不成對出現(xiàn)的是( B )

          A.〈HTML〉〈/HTML〉 ; B.〈P〉 〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

          <p>是段落標(biāo)簽。

          在HTML4.01中某些標(biāo)簽(<p><br>,<hr>,<img>, <input>,<link>等)允許不成對出現(xiàn),但是不推薦。在現(xiàn)在的瀏覽器里,都會“兼容”這些單標(biāo)簽。瀏覽器解釋<p>標(biāo)簽后,碰到一個不對應(yīng)的標(biāo)簽時(shí),會自動填補(bǔ)</p>。所以<p>標(biāo)簽可以單標(biāo)簽使用,但不推薦。

          在HTML5中規(guī)定了元素必須始終關(guān)閉,也就是標(biāo)簽必須成對出現(xiàn)。

          6. 對于標(biāo)簽〈input type=*〉,如果希望實(shí)現(xiàn)密碼框效果,*值是( C

          A. hidden; B.text ; C. password ; D. submit

          7. HTML代碼<select name=“name”></select>表示?( D

          A. 創(chuàng)建表格 ; <table>

          B. 創(chuàng)建一個滾動菜單; <marquee>

          C. 設(shè)置每個表單項(xiàng)的內(nèi)容;

          D.創(chuàng)建一個下拉菜單

          8. BODY元素用于背景顏色的屬性是( C )

          A. alink ; B. vlink ; C. bgcolor; D. background

          9. 在表單中包含性別選項(xiàng),且默認(rèn)狀態(tài)為“男”被選中,下列正確的是( A )

          A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

          C.<input type=checkbox name=sex checked>男;

          D.nput type=checkbox name=sex enabled>男

          性別(單選框):<input type="radio" value="1" name="sex" checked="checked"/>男

          <input type="radio" value="2" name="sex"/>女

          角色(下拉框):<select name="role">

          <option value="1" selected="selected">教師</option>

          <option value="2">學(xué)生</option>

          </select>

          10. 在CSS中下面哪種方法表示超鏈接文字在鼠標(biāo)經(jīng)過時(shí),超鏈接文字無下劃線?( B )

          A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

          C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

          11. JavaScript代碼: 'abcdefg'.indexOf('D') 結(jié)果是( B )

          A:0 B:-1 C:3 D:4

          Js常用方法

          1.substr

          substr(start,length)表示從start位置開始,截取length長度的字符串。

          var src="images/off_1.png";

          alert(src.substr(7,3));

          彈出值為:off

          2.substring

          substring(start,end)表示從start到end之間的字符串,包括start位置的字符但是不包括end位置的字符。

          var src="images/off_1.png";

          alert(src.substring(7,10));

          彈出值為:off

          3.indexOF

          indexOf() 方法返回某個指定的字符串值在字符串中首次出現(xiàn)的位置(從左向右)。沒有匹配的則返回-1,否則返回首次出現(xiàn)位置的字符串的下標(biāo)值。

          var src="images/off_1.png";

          alert(src.indexOf('t'));

          alert(src.indexOf('i'));

          alert(src.indexOf('g'));

          彈出值依次為:-1,0,3

          4.lastIndexOf

          lastIndexOf()方法返回從右向左出現(xiàn)某個字符或字符串的首個字符索引值(與indexOf相反)

          var src="images/off_1.png";

          alert(src.lastIndexOf('/'));

          alert(src.lastIndexOf('g'));

          彈出值依次為:6,15

          5.split

          將一個字符串分割為子字符串,然后將結(jié)果作為字符串?dāng)?shù)組返回。

          以空格分割返回一個子字符串返回

          var s, ss;

          var s="1,2,3,4";

          ss=s.split(",");

          alert(ss[0]);

          alert(ss[1]);

          12. <img src="name">的意思是?( A )

          A. 圖像相對于周圍的文本左對齊; B. 圖像相對于周圍的文本右對齊;

          C. 圖像相對于周圍的文本底部對齊; D. 圖像相對于周圍的文本頂部對齊

          13. 點(diǎn)擊按鈕,在ID為“Link”的DIV標(biāo)簽內(nèi)顯示東軟實(shí)訓(xùn)超鏈接, 下面對該按鈕的onClick事件函數(shù)描述正確的是:C

          A. Link.innerText='<a ;

          B. Link.outerText='<a ;

          C. Link.innerHTML='<a ;

          D. Link.outerHTML='<a

          innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的

          HTML

          outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式

          innerText 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的文本

          outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對象的文本

          innerText和outerText在獲取時(shí)是相同效果,但在設(shè)置時(shí),innerText僅設(shè)置標(biāo)簽內(nèi)的文本,而outerText設(shè)置包括標(biāo)簽在內(nèi)的文本

          14.(“24.7” + 2.3 ) 的計(jì)算結(jié)果是( C

          A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

          15. ( B )事件處理程序可用于在用戶單擊按鈕時(shí)執(zhí)行函數(shù)

          A. onSubmit; B. onClick; C. onChange; D. onExit

          屬性當(dāng)以下情況發(fā)生時(shí),出現(xiàn)此事件onabort圖像加載被中斷onblur元素失去焦點(diǎn)onchange用戶改變域的內(nèi)容onclick鼠標(biāo)點(diǎn)擊某個對象ondblclick鼠標(biāo)雙擊某個對象onerror當(dāng)加載文檔或圖像時(shí)發(fā)生某個錯誤onfocus元素獲得焦點(diǎn)onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標(biāo)按鍵被按下onmousemove鼠標(biāo)被移動onmouseout鼠標(biāo)從某元素移開onmouseover鼠標(biāo)被移到某元素之上onmouseup某個鼠標(biāo)按鍵被松開onreset重置按鈕被點(diǎn)擊onresize窗口或框架被調(diào)整尺寸onselect文本被選定onsubmit提交按鈕被點(diǎn)擊onunload用戶退出頁面

          16. 用戶更改表單元素 Select 中的值時(shí),就會調(diào)用( D )事件處理程序

          A. onClick; B. onFocus; C. onMouseOver; D. onChange

          17.onMouseUp 事件處理程序表示( A

          A. 鼠標(biāo)被釋放; B. 鼠標(biāo)按下; C. 鼠標(biāo)離開某個區(qū)域; D. 鼠標(biāo)單擊

          18. 下列哪一項(xiàng)表示的不是按鈕( C

          A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

          <img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />

          19.下面哪一項(xiàng)是換行符標(biāo)簽?( C

          A. <body>; B. <font>; C. <br>; D. <p>

          font規(guī)定文本字體、大小和顏色:

          <font size="3" color="red">This is some text!</font>

          <font size="2" color="blue">This is some text!</font>

          <font face="verdana" color="green">This is some text!</font>

          20. 下列哪一項(xiàng)是在新窗口中打開網(wǎng)頁文檔。( B

          A. _self; B. _blank; C. _top; D. _parent

          _blank在新窗口中打開被鏈接文檔;

          _self是指在本身這個網(wǎng)頁窗口來打開新的網(wǎng)頁鏈接;

          _top表示在頂層窗口打開網(wǎng)頁鏈接,即在整個窗口中打開被鏈接文檔;

          _parent表示在父窗口打開網(wǎng)頁鏈接;

          <a target="_blank">Visit W3School!</a>onclick="javascript:window.open('Default.aspx','_blank');"

          21. 下面說法錯誤的是( D )

          A. CSS樣式表可以將格式和結(jié)構(gòu)分離;

          B. CSS樣式表可以控制頁面的布局;

          C. CSS樣式表可以使許多網(wǎng)頁同時(shí)更新;

          D. CSS樣式表不能制作體積更小下載更快的網(wǎng)頁

          CSS樣式表能為我們實(shí)現(xiàn)些什么樣的功能?

          1、你可以將格式和結(jié)構(gòu)分離。

          2、你可以以前所未有的能力控制頁面布局。

          3、你可以制作體積更小下載更快的網(wǎng)頁。

          4、你可以將許多網(wǎng)頁同時(shí)更新,比以前更快更容易。

          5、瀏覽器將成為你更友好的界面

          將格式和結(jié)構(gòu)分離

          HTML從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結(jié)構(gòu)和各要素的功能,而讓瀏覽器自己決定應(yīng)該讓各要素以何種模樣顯示。 但是網(wǎng)頁設(shè)計(jì)者要求的更多。所以當(dāng) Netscape推出新的可以控制網(wǎng)頁外觀的HTML標(biāo)簽時(shí),網(wǎng)頁設(shè)計(jì)者無不歡呼雀躍。 我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格,用隱式GIF空格 產(chǎn)生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪,要想將什么內(nèi)容迅速加到網(wǎng)頁中變得越來越難。 串接樣式表通過將定義結(jié)構(gòu)的部分和定義格式的部分分離使我們能夠?qū)撁娴牟季质┘痈嗟目刂啤TML仍可以保持簡單明了的初衷。CSS代碼獨(dú)立出來從另一角度控制頁面外觀。

          以前所未有的能力控制頁面的布局

          <FONT SIZE>能使我們調(diào)整字號,表格標(biāo)簽幫助我們生成邊距,這都沒錯。但是,我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度,不可能控制行間距或字間距,我們不能在屏幕上精確定位圖象的位置。但是現(xiàn)在,樣式表使這一切都成為可能。

          可以制作出體積更小下載更快的網(wǎng)頁還有更好的消息:

          樣式表只是簡單的文本,就象HTML那樣。它不需要圖象,不需要執(zhí)行程序,不需要插件,不需要流式。它就象HTML指令那樣快。有了CSS之后,以前必須求助于GIF的事情現(xiàn)在通過CSS就可以實(shí)現(xiàn)。還有,正如我先前提到的,使用串接樣式表可以減 少表格標(biāo)簽及其它加大HTML體積的代碼, 減少圖象用量從而減少文件尺寸。

          可以更快更容易地維護(hù)及更新大量的網(wǎng)頁

          沒有樣式表時(shí),如果我想更新整個站點(diǎn)中所有主體文本的字體,我必須一頁一頁地修改每張網(wǎng)頁。即便站點(diǎn)用數(shù)據(jù)庫提供服務(wù),我仍然需要更新所有的模板, 而且更新每一模板中每一個實(shí)例實(shí)例的 <FONT FACE>。樣式表的主旨就是將格式和結(jié)構(gòu)分離。 利于樣式表,我可以將站點(diǎn)上所有的網(wǎng) 頁都指向單一的一個CSS文件,我只要 修改CSS文件中某一行,那么整個站點(diǎn) 都會隨之發(fā)生變動。

          瀏覽器將成為你更友好的界面

          不象其它的的網(wǎng)絡(luò)技術(shù),樣式表的代碼 有很好的兼容性,也就是說,如果用戶 丟失了某個插件時(shí)不會發(fā)生中斷,或者 使用老版本的瀏覽器時(shí)代碼不會出現(xiàn)雜 亂無章的情況。 只要是可以識別串接樣式表的瀏覽器就 可以應(yīng)用它。

          22. 要使表格的邊框不顯示,應(yīng)設(shè)置border的值是( B )

          A. 1; B. 0; C. 2; D. 3

          23. 如果要在表單里創(chuàng)建一個普通文本框,以下寫法中正確的是( A )

          A. <INPUT>; B. <INPUT type="password">;

          C. <INPUT type="checkbox">; D. <INPUT type="radio">

          24. 以下有關(guān)按鈕的說法中,錯誤的是( B )

          A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;

          C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。

          <input type="image" src="pic.jpg" onclick="fangfa();"/>

          function fangfa(){

          document.formname.submit();

          document.formname.reset();

          }

          碼輸入框是一種特殊的文本域,主要用于輸入一些保密的信息。當(dāng)網(wǎng)頁瀏覽者輸入文本時(shí),顯示的是黑點(diǎn)或者其他符號,這樣就提高了輸入文本的安全性。代碼格式如下。

          <input type="password" name="..." size="..." maxlength="...">

          其中type="password"定義密碼框;name屬性定義密碼的名稱,要保證唯一性;size屬性定義密碼框的寬度,單位是單個字符寬度;maxlength屬性定義最多輸入的字符數(shù)。

          (1)編寫代碼如下圖所示,在<body>標(biāo)簽中加入以下代碼。

          (2)在瀏覽器中打開文件,預(yù)覽效果圖如下所示,輸入用戶名和密碼時(shí)可以看到密碼以黑點(diǎn)的形式顯示。


          主站蜘蛛池模板: 中文字幕一区一区三区| 亚洲一区二区三区免费在线观看| 日韩视频在线一区| 亚洲综合色一区二区三区| 色狠狠色狠狠综合一区| 亚洲熟女乱色一区二区三区| 国产一区二区影院| 免费萌白酱国产一区二区三区| 日韩一区二区三区无码影院| 国产精品视频一区国模私拍| 亚洲一区精品伊人久久伊人| 亚洲国产精品一区| 日韩AV无码一区二区三区不卡| 国产伦精品一区二区三区视频金莲| 无码日韩精品一区二区免费暖暖| 亚洲AV日韩综合一区尤物| 日韩精品人妻av一区二区三区| 亚洲国产精品一区二区久久hs| 日本高清一区二区三区| 久久亚洲色一区二区三区| 亚洲色偷精品一区二区三区| а天堂中文最新一区二区三区| 亚洲成在人天堂一区二区| 波多野结衣一区二区三区高清在线| 黄桃AV无码免费一区二区三区| 一本一道波多野结衣一区| 一区二区国产在线观看| 精品亚洲AV无码一区二区| 一区二区三区在线观看免费| 91福利视频一区| 制服中文字幕一区二区| 蜜桃AV抽搐高潮一区二区| 日韩免费视频一区二区| 国产精品盗摄一区二区在线| 无码AV中文一区二区三区| 日韩国产一区二区| 无码日韩精品一区二区免费| 久久国产视频一区| 亚洲一区二区精品视频| 国产suv精品一区二区6| 中文字幕乱码亚洲精品一区|