Home > php教程 > php手册 > body text

PHP求职宝典系列PHP Web 编程篇,求职宝典web

WBOY
Release: 2016-06-13 09:00:38
Original
955 people have browsed it

PHP求职宝典系列——PHP Web 编程篇,求职宝典web

  PHP Web 编程篇

  form表单

  1.简述 POST 和 GET 传输的最大容量分别是多少?


 

  • GET 方法提交的表单数据被附加到 URL 上,并作为URL 的一部分发送到服务器端。 URL 的长度应限制在 1MB 字符以内
  • POST 方法不依赖于 URL,不会将传递的参数值显示在地址栏中。另外,POST 方法可以没有任何限制的传递数据到服务器,所有提交的信息在后台传输,用户在浏览器端是看不到的,安全性高。

  2.如何通过form表单控制上传文件的大小?

  • enctype="multipart/form-data",指定表单编码数据的方式。
  • method="post",指定数据的传输方式。
  • ,通过隐藏域控制上传文件的大小(单位为字节),该值不能超过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页面中的标记下定义一对标记,在标记内部利用标签名称、类选择符、id选择符设置属性。
  • 在标签内部定义 style 属性,然后定义本标签下的样式,如:

  创建.css样式文件,在文件内部利用id选择符或类选择符等定义样式,然后在显示的HTNL主页面中利用标签引入文件。如:

  

  3.CSS样式常用属性:

CSS样式的常用属性
属性名称 解析
border 定义边框的属性可以设置边框的宽度、颜色、样式
background-color 设置背景颜色
background-image 设置背景图像
font-size 设置字体大小
font-family 设置字体
text-decoration 检索或设置对象中文本的装饰,如下划线、闪烁等
line-height 检索或设置对象的行高,即字体最底端与字体内部顶端之间的距离
letter-spacing 检索或设置对象中的文字之间的间隔
text-align 设置或检索对象中文本的对齐方式

 

 

  

 

  

 

 

 

 

  4.如何解决以下代码在 IE6 下的双倍边距问题?

<span><span><style type="text/css">
body </span>{<span>margin</span>:<span>0</span>;}<span>
div  </span>{<span>float</span>:<span>left</span>;  <span>margin-left</span>:<span>10px</span>;<span>    width</span>:<span>200px</span>;<span>    height</span>:<span>200px</span>;  <span>border</span>:<span>1px</span>;<span>    solid red;</span>}<span>
</style></span></span>
Copy after login

  这是 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标记是属于内联的,一般用于小模块的样式内联到HTML文档中
  • div 元素本身就是块级元素,多用于组合大块的代码

  2.如何使一个DIV层居中定位?

  position:absolute;

  top:50%;

  left:50%;

  margin:-100px 0 0 -100px;

  3.怎样解决 filefox 浏览器中嵌套 div 标签 text-align 属性失效的问题?

<span>1</span> <span><style>
</span><span>2</span> <span>.one </span>{<span>border</span>:<span>1px solid blue</span>;<span>width</span>:<span>300px</span>;<span>height</span>:<span>200px</span>;<span>text-align</span>:<span>center </span>}
<span>3</span> <span>.two </span>{<span>border</span>:<span>1 px solid blue</span>;<span>width</span>:<span>200px</span>;<span>height</span>:<span>100px</span>;<span>margin</span>:<span>0px auto </span>}
<span>4</span> <span></style>
</span><span>5</span> <span><div class="one">
</span><span>6</span> <span><div class="two"></div>
</span><span>7</span> <span></div></span>
Copy after login

  JavaScript 脚本

  1.弹出对话框的函数和获得输入焦点函数:

  弹出对话框使用 alert()函数

  获取输入焦点使用 focus()函数

   2. JavaScript 的转向函数是什么?怎么引入一个外部JavaScript文件?

  转向函数: window.location.href="文件名称";

  引入外部 JavaScript 文件:

  3.当鼠标划过文本框,自动选中文本框中的内容:

  

  4

  

  5.设置主页的 JavaScript 代码:

  设为首页


  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 $(<span>function</span><span>() {
 </span>5       $("input:last".click(<span>function</span><span>() {
 </span>6             $.get ("in.php",<span> {
 </span>7                     username:$("input:first").<span>val()
 </span>8             },<span>function</span><span>(data) {
 </span>9<span>                     alert (data);
 </span>10             })'<span>
 11        });
 12 });
 13 </script></span>
Copy after login

  in.php 页面代码如下:

<span> 1</span> <?<span>php
</span><span> 2</span> <span>$string</span>="明日科技"<span>;
</span><span> 3</span> <span>if</span>(<span>isset</span><span>($ GET[username])) {
</span><span> 4</span>     <span>if</span>(<span>urldecode</span>($ GET[username])==<span>$string</span><span>) {
</span><span> 5</span>             <span>echo</span> "用户名被占用"<span>;
</span><span> 6</span>     }<span>else</span><span>{
</span><span> 7</span>             <span>echo</span> "用户名可用"<span>;
</span><span> 8</span> <span>    }
</span><span> 9</span> <span>}
</span><span>10</span> ?>
Copy after login

 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> View Code

  后台判断生肖的PHP脚本:

<span>1</span> <?<span>php
</span><span>2</span> <span>if</span>(<span>isset</span>(<span>$_GET</span>[<span>number</span><span>])){
</span><span>3</span>         <span>$array</span>=<span>array</span>("猪","鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗"<span>);
</span><span>4</span>         <span>foreach</span>(<span>$array</span> <span>as</span> <span>$key</span>=><span>$value</span><span>) {
</span><span>5</span>                 <span>if</span>(<span>ceil</span>(<span>$_GET</span>[<span>number</span>]%12)==<span>$key</span><span>){
</span><span>6</span>                         <span>echo</span> <span>$value</span><span>;
</span><span>7</span> <span>                 }
</span><span>8</span> <span>        }
</span><span>9</span> }
Copy after login

  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树中创建并插入元素?

<span>1</span> <script type="text/javascript" src="jquery-1.4.2.js"></script>
<span>2</span> <div>水果</div>
<span>3</span> <script>
<span>4</span> <span>var</span> title=$("<span>苹果</span>"<span>);
</span><span>5</span> $("div").append(title);<span>//</span><span>将title追加到div标签内容的后面</span>
<span>6</span> $("div").before(title);<span>//</span><span>将title追加到div标签之前与div标签属于同一层次</span>
<span>7</span> $("div").prepend(title);<span>//</span><span>将title追加到div标签内容之前</span>
<span>8</span> $("div").after(title);<span>//</span><span>将title追加到div标签之后与div标签属于同一层次</span>
<span>9</span> </script>
Copy after login

   4.如何在DOM树中替换指定元素?

<span>1</span> <script type="text/javascript" src="jquery-1.4.2.js"</script>
<span>2</span> <div>水果</div>
<span>3</span> <script>
<span>4</span> <span>var</span> title=$("<span>苹果</span>"<span>);
</span><span>5</span> $("div"<span>).replaceWith(title);
</span><span>6</span> </script>
Copy after login

  5.将一张图片以淡出的效果消失在页面中:

<span>1</span> <script type="text/javascript" src="jquery-1.4.2.js"></script>
<span>2</span> <img  src="color.jpg" alt="PHP求职宝典系列PHP Web 编程篇,求职宝典web" >
<span>3</span> <script>
<span>4</span> $("img".click(<span>function</span><span>(){
</span><span>5</span>     $(<span>this</span>).fadeOut("slow"<span>);
</span><span>6</span> <span>});
</span><span>7</span> </script>
Copy after login

  6.制作一个按钮,当按钮被单击时以卷帘效果消失:

<span>1</span> <script type="text/javascript" src="jquery-1.4.2.js"></script>
<span>2</span> <input type="button" value="按钮">3</span> $("input").click(d=<span>function</span><span>(){
</span><span>4</span>         $(<span>this</span>).slideUp("slow"<span>);
</span><span>5</span> <span>});
</span><span>6</span> </script>
Copy after login

  7.照片轮换效果:

<span> 1</span> <script type="text/javascript" src="jquery-1.4.2.js"></script>
<span> 2</span> <style>
<span> 3</span> ul{list-<span>style:none;width:350px;height:200px;position:absolute}
</span><span> 4</span> <span>li{position:ansolute}
</span><span> 5</span> </style>
<span> 6</span> <div class="change">
<span> 7</span> <ul>
<span> 8</span> <li><img  ssrc="1.jpg"    style="max-width:90%"PHP求职宝典系列PHP Web 编程篇,求职宝典web" ></li>
<span> 9</span> <li><img  ssrc="2.jpg"    style="max-width:90%"PHP求职宝典系列PHP Web 编程篇,求职宝典web" ></li>
<span>10</span> <li><img  ssrc="3.jpg"    style="max-width:90%"PHP求职宝典系列PHP Web 编程篇,求职宝典web" ></li>
<span>11</span> <li><img  ssrc="4.jpg"    style="max-width:90%"PHP求职宝典系列PHP Web 编程篇,求职宝典web" ></li>
<span>12</span> </ul>
<span>13</span> </div>
<span>14</span> <script>
<span>15</span> $(<span>function</span><span>(){
</span><span>16</span>     $(."change ul li:not(:first)"<span>).hide();
</span><span>17</span>     setInterval(<span>function</span><span>(){
</span><span>18</span>         <span>if</span>($."change ul li:last").is(":visible"<span>)){
</span><span>19</span>             $(."change ul li:first").fadeIn("slow"<span>);
</span><span>20</span>             $(."change ul li:last"<span>).hide();
</span><span>21</span>     }<span>else</span><span>{
</span><span>22</span>             $(."change ul li:visible").next().fadeIn("slow"<span>);
</span><span>23</span> <span>    }
</span><span>24</span>   },1000<span>);
</span><span>25</span> <span>});
</span><span>26</span> </script>   
Copy after login

 

 

 


  鉴于最近要准备各种期末考和大作业,发博时间明显减少,劳烦多多理解啊!本篇都是利用零碎时间编辑的,现在大功告成还是挺满足啦,若您觉得有帮助,可以随手点个赞。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template