第一次前端面试经验

自学web前端也有几个月了,但一直没有用过,人总是要不断的进步,不断的学习。下午去一家我认为的大公司面试了下,也是想获得一种经验,因为可能下一步我会朝着这个方向前进,二十六七岁,这个年龄说大不大,说小不小,很多事情现在应该考虑了,比如以后的方向。
去了面试公司时间不长,一个多小时,我知道我肯定没戏,因为js我才刚开始学习,有两道编程题我完全不会,当然还有一个卷面考试,我从来没见过,哈哈。一道是编写一个“现在是上午08:20:31星期三”的程序,第二道是编写一个两个表格互相交换的程序,两道第一道题前两天还刚好学过,第二道题我完全不会。
第一道:要求实现一个js获取当前时间的程序

[code]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.demo{
margin: 0px auto;
width: 200px;
background-color: #000;
height: 20px;
border: 5px solid #ccc;
padding: 5px;
color:#33FF33;
}
</style>
<script>
var myDate=new Date();
var x = '';
var h = myDate.getHours();
if (h>=18)
{
x = '晚上好!';
}
else if(h<=6)
{
x = '现在是凌晨';
}else if(h<=9)
{
x = '早上好!';
}else if(h<=12)
{
x = '上午好!';
}else{
x = '下午好!'
}
var attime;
function clock(){
var time = new Date();
var ww = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
var nWeek = time.getDay();
attime =x+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+ww[nWeek];
document.getElementById("demo").innerHTML = attime;//我上面本来只是想插入代码的,没想到居然实现了,呵呵
}
setInterval(clock,1000);
</script>
</head>
<body>
<div id="demo" class="demo"></div>
</body>
</html>
[/code]
然后当然还有第二道题:设置这两个表格的内容互相点击,然后可以交换。

content1 content2

[code]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<table border="1">
<tr>
<td id="td1">content1</td>
</tr>
<tr>
<td id="td2">content2</td>
</tr>
</table>
</body>
<script>
$('#td1').click(function(){
var temp=$('#td1').text();
$('#td1').text($('#td2').text());
$('#td2').text(temp);
});
$('#td2').click(function(){
var temp=$('#td1').text();
$('#td1').text($('#td2').text());
$('#td2').text(temp);
});
</script>
</html>
[/code]
另外还有一道面试用的比较多的斐波那契数组用js表达的
[code]<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var arr = new Array();
function fb(a,b,i){
var z = a+b;
i++;
document.write("第"+i+"位:"+z+"<br />");
if(i>100){
return;
}
fb(b,z,i)
}
fb(0,1,0)
</script>
</body>
<body>
</body>
</html>[/code]

【服务器】网站301重定向实例

服务器301重定向设置方法有二种:

一、空间的伪静态版本为ISAPI Rewrite 3.1,需要设置301重定向的,只用修改伪静态规则文件( .htaccess )即可。

RewriteEngine on
RewriteCond %{HTTP_HOST} ^abc.com [NC]
RewriteRule ^(.*)$ http://www.abc.com/$1 [L,R=301]

将以上绿色代码保存到文件名 .htaccess后上传到空间根目录即可。abc.com 换成你自己的域名。

二、可用程序实现301重定义,只需修改程序即可。

1、如果是ASP程序,只需在index.asp首页的头部加下以下的绿色代码,abc.com换成你自己的域名。

<%
if request.ServerVariables("HTTP_HOST")="abc.com" then
Response.Status="301 Moved Permanently"
Response.AddHeader "Location","http://www.abc.com"
Response.End
end if
%>

2、如果是PHP程序,只需在index.php首页的头部加下以下的绿色代码,abc.com换成你自己的域名。

<?php
if($_SERVER["HTTP_HOST"] == "abc.com")
{
header("HTTP/1.1 301 Moved Permanently");
header("Location:http://www.abc.com");
}
?>

3、如果ASP程序,但首页是html静态的实现301

<%
if request.ServerVariables("HTTP_HOST")="abc.com" then
Response.Status="301 Moved Permanently"
Response.AddHeader "Location","http://www.abc.com"
Response.End
end if
%>
<!--#include file="index.html" -->

把上面绿色代码保存为index.asp(如果文件名有存在可改为301.asp等)上传到WEB目录下,并在管理平台的“修改默认首页”把index.asp(如改成其他文件名就要填其他文件名301.asp等)调到最前面。(index.html为你首页的静态文件名)

4、如果PHP程序,但首页是html静态的实现301

<?php
if($_SERVER["HTTP_HOST"] == "abc.com")
{
header("HTTP/1.1 301 Moved Permanently");
header("Location:http://www.abc.com");
}
?>
< ?php include('index.html'); ?>

把上面绿色代码保存为index.php(如果文件名有存在可改为301.php等)上传到WEB目录下,并在管理平台的“修改默认首页”把index.php(如改成其他文件名就要填其他文件名301.php等)调到最前面。(index.html为你首页的静态文件名)

5、如果你是asp.net 设置方法差不多相同,可以去百度搜索下”.net 301″ 找相关教程。

6、如果你二级栏目或内容页也想实现301,也可以到百度搜索相关的程序教程。

7、http://tool.chinaz.com/pagestatus/ 此工具可以查看设置后有没有生效。

以下是实例演示:

这里我们以www.nikkkang.cnwww.nikangjp.com为实例,需要工具:flashFXP;

1、 由于nikkang.cn是由伪静态ISAPI,所以只需要新建txt文本,拷贝第一种方法的代码

RewriteEngine on
RewriteCond %{HTTP_HOST} ^nikkang.cn www.nikkang.cn [NC]
RewriteRule ^(.*)$ http://www.nikangjp.com/$1 [L,R=301]

2、另存为htaccess文件

QQ截图20150302152720

3、使用flashFXP上传至网站根目录

QQ截图20150302152858

4、大功告成。

【服务器】HTTP状态码(HTTP status code)

一些常见的状态码为:

200 – 服务器成功返回网页 404 – 请求的网页不存在 503 – 服务不可用

1xx(临时响应)
表示临时响应并需要请求者继续执行操作的状态代码。

代码 说明
100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。
101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。

2xx (成功)
表示成功处理了请求的状态代码。
代码 说明
200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
201 (已创建) 请求成功并且服务器创建了新的资源。
202 (已接受) 服务器已接受请求,但尚未处理。
203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
206 (部分内容) 服务器成功处理了部分 GET 请求。

3xx (重定向)
表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

代码 说明
300 (多种选择) 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

4xx(请求错误)
这些状态代码表示请求可能出错,妨碍了服务器的处理。

代码 说明
400 (错误请求) 服务器不理解请求的语法。
401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
405 (方法禁用) 禁用请求中指定的方法。
406 (不接受) 无法使用请求的内容特性响应请求的网页。
407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
408 (请求超时) 服务器等候请求时发生超时。
409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。
411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。
412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。
413 (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
414 (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。
415 (不支持的媒体类型) 请求的格式不受请求页面的支持。
416 (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。
417 (未满足期望值) 服务器未满足"期望"请求标头字段的要求。

5xx(服务器错误)
这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。

代码 说明
500 (服务器内部错误) 服务器遇到错误,无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

【html/css】准确理解CSS clear:left/right的含义及实际用途

一、理解clear: left/clear: right

我不清楚大家是不是跟我一样,我之前文章,写浮动那一块的时候,以及后来,都是以“clear:both清除浮动”这样的陈述出来的。因此,当想到clear: left的时候,自然会认为是“清除左浮动”,clear: right是清除右浮动。

其实现在想想,这样的理解与表示是不严谨的欠考虑的。

一般,现在中文圈流传的表述是:

clear语法:
clear : none | left | right | both

取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

w3.org官方的解释是:「元素盒子的边不能和前面的浮动元素相邻」。

我个人觉得官方解释更好一点。

无论是我“清除左/右浮动”,还是业界流传的“不允许左/右边有浮动对象”,其意思都是,设置的clear的元素让浮动元素如何如何。也就是我让别人如何如何~~大家可以仔细体会,细细感受下……

而官方的说法则是“设置了clear的元素不能怎样怎样”。也就是我自己如何如何~~大家可以再次感受下……

为何官方解释更好呢?难道是“己所不欲勿施于人”的缘故?哈,这个解释赞的,方便记忆。更通俗的原因是:

务必记住这句话:“float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!

但是,官方的解释似乎拗口,缺少点灵性。于是,我根据自己的感性认知,做了如下理解:

clear语法:
clear : none | left | right | both

取值:
none : 默认值。
left : 左侧抗浮动
right : 右侧抗浮动
both : 两侧抗浮动

“抗”这个拟人化的动词的发起者是设置了clear属性的元素,既形象又释义准确。

实例出真知
您可以狠狠地点击这里:clear:left/right的作用效果demo

准确理解CSS clear:left/right的含义及实际用途

例如上图所示的clear:left作用示意:图片左浮动,化身魔鬼,要影响后面相邻的元素。一般的元素都逃不了被影响被束缚的命运。除非拥有clear技能。例如,这里clear:left左侧抗浮动,也就是,左侧的浮动根本就奈何不了我——我还是原原本本在下面显示。

但是,如果图片是右浮动,则clear:left仍逃不过沦陷的命运,可以看到父级容器的高度塌陷了!

单纯的clear:left就像是招潮蟹,一侧雄起,一侧不举。
准确理解CSS clear:left/right的含义及实际用途

因此,考虑到通用性,在抗浮动的处理中,我们都是使用clear:both. 用意很明显:我不必关心你是左浮动还是右浮动,我都通通免疫。

因此,我们才会有下面这段雕琢后的清除浮动通用CSS:

.fix { *zoom: 1; }
.fix:after { content: ''; display: table; clear: both; }

下面又有问题了,貌似我们接触的clear基本上都是both值,似乎left, right值的出现就是鸡肋,没什么用。真的是这样吗?

二、clear:left/right的实际用途

clear:left/right最实际也是最常见的用途就是实现垂直环绕布局

出个简单的题目,下图所示的布局实现,你的HTML结构会是?
准确理解CSS clear:left/right的含义及实际用途

哈,我猜想下,估计你会把“头像img”和“姓名”放在同一个父级容器中,而这个父级容器左浮动;然后右侧的信息元素浮动跟随(自适应布局),对不对?

这是业界主流做法,其实是没什么问题的?

不过,你有没有细细思考过这样一个问题:“为何大家几乎都是这种HTML结构设计?”

实际上,按照我不专业的理解,头像、姓名、自我描述应该是平级的兄弟关系。从语义来看,貌似“头像、姓名”硬生生变成儿子和女儿是不妥的吧~~

当我们只知道票子放银行钱会变多,我们就只会存钱理财。同样的,并不是我们不想尝试其他的结构实现布局,而是,我们不知道方法。说穿了,就是对clear:left/right理解不透,不够重视!

如何“头像”、“姓名”、“自我描述”三兄弟平起平坐,同时达到我们想要的布局效果呢?就是借助clear:left, 半壁clear属性配合float属性可以实现“垂直环绕布局”。

何为“垂直环绕布局”?上面提供的demo中有示意:
准确理解CSS clear:left/right的含义及实际用途

两个图片实际上都是右浮动(float: right)的,这种情况下,显然,图片会是一行排排站。但是,如果后面一张图片设置了右侧抗浮动声明:clear: right. 则,后面一张图片就会落下来,形成垂直布局;加上自身的浮动特性依旧存在,于是,两张图片犹如一个浮动整体。这就是典型的“垂直环绕布局”。

于是,我们如下HTML以及CSS,就有符合题目要求的新型布局方式啦!

<div style="width:500px;font-size:12px;overflow:hidden;_zoom:1;">
    <span style="float:left;width:96px;...">头像</span>
    <strong style="float:left;clear:left;...">姓名</strong>
    <p style="margin-left:106px;...">我是一个帅哥……</p>
 </div>
头像姓名我是一个帅哥……

至此,三兄弟终于平起平坐啦!

原文地址:http://www.zhangxinxu.com/wordpress/?p=4179

(本篇完)