PHP Web 編程篇
form表單
1.簡述 POST 和 GET 傳輸的最大容量分別是多少?
- GET 方法提交的表單數據被附加到 URL 上，並作為URL 的一部分發送到服務器端。 URL 的長度應限制在 1MB 字符以內。
- POST 方法不依賴於 URL，不會將傳遞的參數值顯示在地址欄中。另外，POST 方法可以沒有任何限制的傳遞數據到服務器，所有提交的信息在后台傳輸，用戶在瀏覽器端是看不到的，安全性高。
2.如何通過form表單控制上傳文件的大小？
- enctype="multipart/form-data",指定表單編碼數據的方式。
- method="post",指定數據的傳輸方式。
- <input type="hidden" name="MAX_FILE_SIZE" value="10000" />,通過隱藏域控制上傳文件的大小（單位為字節），該值不能超過php.ini 配置文件upload_max_filesize 選項設置的值。
3.如何設置form表單中的只讀屬性？
- 利用 readonly 設置指定內容的只讀屬性；
- 利用 disabled 實現設置指定內容的只讀屬性。
4.在什么情況下，$name 與 $_POST['name']可以通用？
在 php.ini 文件中 register_globals = On 時， $name 與 $_POST['name']都可以獲取form表單中表單元素name的值（以post方式提交）。
但是不建議開啟register_globals全部變量，因為會給程序帶來安全隱患。
CSS 樣式
1.CSS 的含義是什么？
CSS (Cascading Style Sheet,譯為"層疊樣式表" 或 "級聯樣式表") 語言是一種標記語言，不需要解釋，可以直接由瀏覽器解釋執行（屬於瀏覽器解釋型語言），實現控制Web頁面的外觀。它是W3C協會為彌補HTML在顯示屬性設定上的不足而指定的一套擴展樣式標准。
其作用如下：
- 在標准網頁設計中CSS負責網頁內容（XHTML）的表現。
- CSS文件也可以說是一個文本文件，它包含一些CSS標記，CSS文件必須使用.css為后綴。
- 通過CSS文件實現內容與表現形式的分離，可以改變網頁的整體表現形式，使維護站點的外觀更加容易，使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。
2.在HTML頁面中插入CSS樣式的幾種方式？
- 在HTML頁面中的<head></head>標記下定義一對<style></style>標記，在標記內部利用標簽名稱、類選擇符、id選擇符設置屬性。
- 在標簽內部定義 style 屬性，然后定義本標簽下的樣式，如：
<a href="#" style="border:0">鏈接</a>
- 創建.css樣式文件，在文件內部利用id選擇符或類選擇符等定義樣式，然后在顯示的HTNL主頁面中利用<link>標簽引入文件。如：
<link type="text/css" rel="stylesheet" href="路徑">
3.CSS樣式常用屬性：
| 屬性名稱 | 解析 |
| border | 定義邊框的屬性可以設置邊框的寬度、顏色、樣式 |
| background-color | 設置背景顏色 |
| background-image | 設置背景圖像 |
| font-size | 設置字體大小 |
| font-family | 設置字體 |
| text-decoration | 檢索或設置對象中文本的裝飾，如下划線、閃爍等 |
| line-height | 檢索或設置對象的行高，即字體最底端與字體內部頂端之間的距離 |
| letter-spacing | 檢索或設置對象中的文字之間的間隔 |
| text-align | 設置或檢索對象中文本的對齊方式 |
4.如何解決以下代碼在 IE6 下的雙倍邊距問題？
<style type="text/css"> body {margin:0;} div {float:left; margin-left:10px; width:200px; height:200px; border:1px; solid red;} </style>
這是 IE6 下的常見 Bug，雖然定義的外邊距為10px，但是 IE 卻解析為20px。
解決方案：添加屬性 display:inline
5.如何解決超鏈接被點擊后 hover 樣式不出現的問題？
對超鏈接樣式屬性進行正確的排序即可。
a:link{color:red;text-docoration:none}
a:visited{color:blue;text-decoration:none}
a:hover{color:black;text-decoration:overline}
a:action{color:black;text-decoration:overline}
6.如何解決火狐瀏覽器下文本無法撐開容器的高度問題？
添加兩個CSS屬性，min-width 和 min-height ，也可以加入一個清除對齊方式的類 clear:both 屬性的 div 來自動計算火狐瀏覽器的高度。
7.怎樣定義1px 左右高度的容器？
在網頁布局的過程中，導航欄和內容欄之間往往需要一個隔斷，一般情況下設置 1 個像素的高度為最佳。
DIV 標簽
1.標簽<span>和<div>的區別：
<div>和<span>標記同樣作用於網頁布局中，它們的不同之處在於：
- span標記是屬於內聯的，一般用於小模塊的樣式內聯到HTML文檔中
- div 元素本身就是塊級元素，多用於組合大塊的代碼
2.如何使一個DIV層居中定位？
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
3.怎樣解決 filefox 瀏覽器中嵌套 div 標簽 text-align 屬性失效的問題?
1 <style> 2 .one {border:1px solid blue;width:300px;height:200px;text-align:center } 3 .two {border:1 px solid blue;width:200px;height:100px;margin:0px auto } 4 </style> 5 <div class="one"> 6 <div class="two"></div> 7 </div>
JavaScript 腳本
1.彈出對話框的函數和獲得輸入焦點函數：
彈出對話框使用 alert()函數
獲取輸入焦點使用 focus()函數
2. JavaScript 的轉向函數是什么？怎么引入一個外部JavaScript文件？
轉向函數： window.location.href="文件名稱";
引入外部 JavaScript 文件：<script type="text/javascript src='文件路徑及名稱'"></script>
3.當鼠標划過文本框，自動選中文本框中的內容：
<input id="txt" type="text" value="baidu" onmouseover="this.select()"/>
4
<input id="txt" type="text" value="baidu" onclick="this.value=' '"/>
5.設置主頁的 JavaScript 代碼：
<a href="#" onclick="this.style.behavior='url(#default#homepage)'; this.setHomepage ('url');">設為首頁</a>
Ajax 應用
1.利用 jQuery中的Ajax判斷用戶名是否被占用：
需要定義兩個頁面，index.php 頁面代碼如下:
1 <script type="text/javascript" src="jquery-1.4.2.js"></script> 2 <input type="text" ><input type="button" value="校驗"> 3 <script type="text/javascript"> 4 $(function() { 5 $("input:last".click(function() { 6 $.get ("in.php", { 7 username:$("input:first").val() 8 },function(data) { 9 alert (data); 10 })' 11 }); 12 }); 13 </script>
in.php 頁面代碼如下：
1 <?php 2 $string="明日科技"； 3 if(isset($ GET[username])) { 4 if(urldecode($ GET[username])==$string) { 5 echo "用戶名被占用"; 6 }else{ 7 echo "用戶名可用"; 8 } 9 } 10 ?>
2. 編寫代碼，使得在文本框中輸入一個年份，判斷其生肖，並在文本框旁邊輸出，要求寫出HTML和JavaScript代碼：
前台頁面設計的代碼如下：
1 <html> 2 <head> 3 <meta http-equiv="Content-type" content="text/html;charset="UTF-8""> 4 <script type="text/javascript" src="jequery-1.4.2.js"></script> 5 <title>生肖的自動選擇</title> 6 </head> 7 <body> 8 <input type="text" value="請輸入年份格式為2015" onclick="this.select()"> 9 <input type="submit" value="判斷"> 10 <span></span> 11 <script> 12 $(function(){ 13 $("input:last").click(function(){ 14 $.get("in.php",{ 15 number:$("input:first").val() 16 },function(data){ 17 $("span").text(data); 18 }); 19 }); 20 }); 21 </script> 22 </body> 23 </html>
后台判斷生肖的PHP腳本：
1 <?php 2 if(isset($_GET[number])){ 3 $array=array("豬","鼠","牛","虎","兔","龍","蛇","馬","羊","猴","雞","狗")； 4 foreach($array as $key=>$value) { 5 if(ceil($_GET[number]%12)==$key){ 6 echo $value; 7 } 8 } 9 }
jQuery框架
目前比較流行的客戶端腳本語言框架jQuery,由美國人John Resig創建，是優秀的JavaScript框架，其宗旨是write less,do more.它是輕量級的js庫，兼容CSS3，兼容各種瀏覽器（IE 6.0+）。用戶能更方便地處理HTML document、events，實現動畫效果，並且可以方便地為網站提供AJAX交互。jQuery另一個比較大的優勢是，它的文檔說明很全，而且各種應用也說的很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的HTML頁保持代碼和HTML內容的分離，也就是說，不用再在HTML里面插入一堆js來調用命令了，只需定義id即可。
1.jQuery中常用選擇器：
基本選擇器：
id選擇器：只能用一次
class選擇器：允許重復使用
標簽選擇器
*：匹配所有元素
層次選擇器：
$("#a.b") 選取id值為a的元素里所有class值為b的元素。
$("#a>.b") 選取id值為a的元素后的class值為b的子元素。
$("#a+.b") 選取id值為a的元素后緊挨的class值為b的元素。
過濾選擇器：
：first，選取第一個元素。
：odd,選取索引是奇數的元素。
：even,選取索引是偶數的元素。
：not,選取除某元素外的其他元素。
：eq(),按索引尋找元素。
：lt(),小於某索引值的元素。
：gt,大於某索引值的元素。
2.如何實現查找DOM樹中的元素？
var input = $("input:first");
3.如何在DOM樹中創建並插入元素？
1 <script type="text/javascript" src="jquery-1.4.2.js"></script> 2 <div>水果</div> 3 <script> 4 var title=$("<span>蘋果</span>"); 5 $("div").append(title);//將title追加到div標簽內容的后面 6 $("div").before(title);//將title追加到div標簽之前與div標簽屬於同一層次 7 $("div").prepend(title);//將title追加到div標簽內容之前 8 $("div").after(title);//將title追加到div標簽之后與div標簽屬於同一層次 9 </script>
4.如何在DOM樹中替換指定元素？
1 <script type="text/javascript" src="jquery-1.4.2.js"</script> 2 <div>水果</div> 3 <script> 4 var title=$("<span>蘋果</span>"); 5 $("div").replaceWith(title); 6 </script>
5.將一張圖片以淡出的效果消失在頁面中：
1 <script type="text/javascript" src="jquery-1.4.2.js"></script> 2 <img src="color.jpg"> 3 <script> 4 $("img".click(function(){ 5 $(this).fadeOut("slow"); 6 }); 7 </script>
6.制作一個按鈕，當按鈕被單擊時以卷簾效果消失：
1 <script type="text/javascript" src="jquery-1.4.2.js"></script> 2 <input type="button" value="按鈕" style="width:200px;height:200px;"><script> 3 $("input").click(d=function(){ 4 $(this).slideUp("slow"); 5 }); 6 </script>
7.照片輪換效果：
1 <script type="text/javascript" src="jquery-1.4.2.js"></script> 2 <style> 3 ul{list-style:none;width:350px;height:200px;position:absolute} 4 li{position:ansolute} 5 </style> 6 <div class="change"> 7 <ul> 8 <li><img ssrc="1.jpg" width=350px height=200px></li> 9 <li><img ssrc="2.jpg" width=350px height=200px></li> 10 <li><img ssrc="3.jpg" width=350px height=200px></li> 11 <li><img ssrc="4.jpg" width=350px height=200px></li> 12 </ul> 13 </div> 14 <script> 15 $(function(){ 16 $(."change ul li:not(:first)").hide(); 17 setInterval(function(){ 18 if($."change ul li:last").is(":visible")){ 19 $(."change ul li:first").fadeIn("slow"); 20 $(."change ul li:last").hide(); 21 }else{ 22 $(."change ul li:visible").next().fadeIn("slow"); 23 } 24 },1000); 25 }); 26 </script>
鑒於最近要准備各種期末考和大作業，發博時間明顯減少，勞煩多多理解啊！本篇都是利用零碎時間編輯的，現在大功告成還是挺滿足啦，若您覺得有幫助，可以隨手點個贊。