去百度面试基础架构部的前端开发实习生，感觉应该跪得很惨。百度上海研发中心挺偏的，离张江还挺远的，还要打车过去。到了百度那边门卫管的挺严的，还要面试官来接。后来，就一个程序员来接我，也就是我的面试官。后来就在他们三楼一个休息的地方开始面试。首先就是自我介绍了，然后就是blabla我一些经历项目而已了。他强调了了一下前端相关的项目经历，但是讲道理我是真心没有前端的项目经历，所以也说不上什么。唯一做的也就是我自己的个人主页，还基本上都是静态页面。然后开始正式面试，他首先问了我标签和标签有什么区别，然后我说了和的本质区别是他们的默认display 属性不同，然后他又问了有没有其他的不同，我并不知道。然后他接着问了常见的块级标签和行内标签有哪一些。接着他问了我清除浮动的知识，我只是临时记住了一些清楚浮动的方法，但是还是没有弄懂实际的原理，所以场面也是比较的尴尬。他问了怎么优化网页，说可以怎么做。我不禁一喜，把之前准备的东西背出来，刚说到第一条，减少 http请求，他就问我如何减少 http请求。尴尬，一下子gg，我也想不起来如何减少http请求。后来他看我说不上来就让我继续往下说，我又说了压缩，以及代码精简之类的。然后他又问了具体的，我说了一下，他好像也不是特别满意。我的简历，尼玛，我为什么要写个对于html5有充分的认识！！！我天天又懒得改，每个面试官都要问我这个问题。不过我事先也准备了，就把一些基础的特性说了一下。他说还有别的，然后提醒我缓存之类的，然后就说起来sessionStorage，localStroage之类的，并问了我和cache之间的区别之类的。这里面有个问题他炸了我一下，他说你确定localStorage在本地是不会删除的么，很明显是不会的。然后他问对于缓存请求有没有了解，很明显我并没有什么了解。他又问了我一些对于哪些开源的框架比较熟悉，那也就只有jQuery和bootstrap。他问我对于这些开源框架的更新清不清楚，很明显，宝宝不清楚啊！！！然后他问了一系列图标改变颜色如何实现，实现鼠标挪上去，就改变颜色。这个我说用hover改变css 属性，但他应该是质疑这样的做法吧。后来他又说道bootstrap其实有这样的实现，其实我好像也看到过，但是我也没关注过是如何实现的，真是悲剧。接着他问了js的问题。首先问了一下事件流，这个地方我说错了，事件流应该是补货，处理，冒泡。我把顺序说反了，反正事件流还问了详细的问题，但是我对这个并不是特别了解，所以说的也是不好的。后来出了一个js的题目，如何实现像trim一样去掉两端的空白，我用js写了一下，里面有很多问题，具体就是不说了。后来他提示说是用正则表达式，我说我只会python的，然后他说可以。但是宝宝也写不出来啊，然后他说那你就说下原理吧。然而我并不知道如何做，然后就罢了。 第二个面试官就长得更像程序员了，直接穿个拖鞋就过来了。他是直接让我写代码的，第一题如何实现三列布局，两边各100px，中间自动拓展，我说了用float或者css3的新属性。他直接让我写代码了，然后就写一写，估计也不太对。第二个，他说ie和chrome等绑定的事件的方法不同，如何写一个函数进行不同的处理。这一题我并不知道如何区分，所以也就没写。第三题，他说有没有做过移动端的开发，我说没有。然后我就老实说了，其实自己并没有接触太多的前端。然后她说也看了我简历没什么前端的经历之类的，然后就是说说，然后就没了。 总结一下，这次面试经历讲道理并不是特别困难的。前端的书我也是看了好几本，但其实并没有什么特别的意思，还是做项目成长的比较快。所以，赶紧实习，实际参与项目对于我来说实在是太重要了。

html语义话 img标签alt属性和title属性的区别 alt属性是图片在因浏览器兼容、加载失败活着地址出错等原因无法显示为浏览用户所做的代替语言，其性质为图片的代替；而title属性是表达该图片的一些额外信息，其性质为一种备注或注释，鼠标过去显示该文字。 css布局 常见的布局有四种：表格布局，浮动布局，css框架，flexbox 两列布局，三列布局可以由浮动来实现 css3已经实现了多列布局，主要属性包括 column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width div{ -webkit-column-count: 3; Chorome, Safari, Opera -moz-column-count :3; Firefox -column-count:3; } 清除浮动的知识 在浮动元素后面增加标签 在浮动元后面增加一个清楚浮动层： ajax 基本实现步骤 1、创建XMLHttpRequest对象 2、使用XMLHttpRequest对象打开一个连接，制定连接方式<post/get> 和链接地址以及是否同步 3、设置请求的头部（请求的类型和请求的编码格式） 4、设置回调函数 5、发送请求 6、更新页面显示 XMLHttpRequest状态码： 0 uninitialized 初始化状态，XMLHttpRequest已经被创建或者重置 1 open open 方法已经调用，但是send 方法还没有调用，还没有发送请求 2 sent send方案已经发送，请求已经发送到服务器，但是还没有接受到请求 3 receiving 所有响应头已经接受到，响应体开始接受，但没有接受完成 4 loaded 请求已经完全接受 取消a链接默认跳转行为 href属性设置为javascript:void(0)

行内元素有哪些？块级元素有哪些？CSS的盒模型？ 行内元素：a b br i span input select 块级元素：div p h1 h2 h3 h4 form ul css盒模型：content border margin padding 前端页面由哪三层构成，分别是什么，作用是什么？ 结构层：主要指DOM节点：HTML/XHTML 样式层：主要指页面渲染：CSS 脚本层：主要指页面动画效果：JS/AS CSS引入的方式有哪些?link和@import的区别是？ 内联 内嵌 外链 导入 区别：同时加载 css选择符号有哪些 标签选择符 类选择符 ID选择符 标签上title和alt属性的区别是什么？ alt当图片不显示用文字代表 title为该属性提供信息 什么是语义话的HTML？ 直观的认识标签，对于搜索引擎抓取有好处 清除浮动的几种方式以及优缺点： 1 使用空标签清除浮动 clear:both（理论上可以清楚任何标签，缺点增加无意义的标签） 2 使用overflow:auto 3 使用afert伪元素清除浮动 IE和标准下有哪些兼容性的写法 var ev = ev || window.event document.documentElement.clientWidth || document.body.clientWidth var target = ev.srcElement || ev.target 闭包就是能够读取其他函数内部变量的函数 添加，插入，替换，删除，到某个节点的方法 obj.appendChildl() obj.innersetBefore() obj.replaceChild obj.removeChild

github是一种开源的版本控制工具，现在已经得到很多人的应用。所以想介绍一下github的一些使用。 github安装 github提供了桌面客户端，我们也可以通过命令行的方式来进行控制。 windows https://windows.github.com mac https://mac.github.com 配置工具 对于本地版本配置用户信息 git config --global user.name "username" git config --global user.email "email" 上面的分别是设置用户名和邮箱 建立版本库 git init project-name //create a new local repost with the specified name git clone url //download a project and its entire version history 提交变化版本 git status // list all new of modified files to be committed git diff //show file differences not yet staged git add file //snapshot the file in preparation for versioning git diff --staged //show file difference between staging and the last file version git reset file //unstage the file, but preserve its contents git commit -m "description message" 群组版本控制 git branch //list all local branches in the current respority git branch branch-name //create a new branch git checkout branch-name //switch to the specific branch and update the working directory git merge branch //combine the specified branch's history into the current branch git branch -d branch-name //delete the specified branch 重构文件名 git rm [file] //delete the file from the working directory and stage the deletion git rm --cached [file] //remove the file from version control but pressure the file locally git mv [file-origin] [file-renamed] //change the file name and prepare it for commit 排除版本控制 *.log build/ temp-* 以.log为结尾的文件都不会被进行版本控制

在javascript里面看到javascript的继承模式和传统的继承模式是有区别的，就想查资料看一下到底有区别，就看到了这篇文章，觉得讲得还可以，暂时先放上来，以后有别的东西再补充： http://segmentfault.com/a/1190000000766541 基本模式 var Parent = function(){ this.name = 'parent'; ｝; Parent.prototype.getName = function(){ return this.name; }; Parent.prototype.obj = {a:1}; var Child = function(){ this.name = 'child'; } Child.protytype = new Parent(); var parent = new Parent(); var child = new Child(); console.log(parent.getName());//parent console.log(child.getName());//child 这种事最简单实现原型继承的方法，直接把父类的对象复制给子类的构造函数的原型，这样子类的对象就可以访问到父类以及父类构造函数的protytype 这种方法的优点就是实现起来比较简单，不需要任何特殊的操作；同时他的缺点也很明显，如果子类需要做跟父类构造函数中相同的初始化动作，那么就得在子类构造函数中再重复一遍父类中的操作： var Parent = function(name){ this.name = name || 'parent'; }; Parent.prototype.getName = function(){ return this.name; }; Parent.prototype.obj = {a:1}; var Child = function(name) { this.name = name || 'child'; }; Child.prototype = new Parent(); var parent = new Parent('myParent'); var child = new Child('myChild'); console.log(parent.getName());//myParent console.log(child.getName());//myChild 上述还只是初始化name属性，如果初始化工作不断增加，这种方式也不是很方便。

css里面的盒子模型里面设置padding,margin的上下或者左右的大小有很多方式，下面说说两种不同的方式： original method: padding-top:0px padding-right:20px padding-bottom:30px padding-left:10px new method: padding:0px 20px 30px 10px // top right bottom left respectively 同理： margin-top:0px margin-right:20px margin-bottom:30px margin-left:10px margin:0px 20px 30px 10px 如果上下左右的值都是一样的话，那我们可以这样设置： the old method: padding-top:20px padding-right:20px padding-bottom:20px padding-left:20px the new method: padding:20px 如果上下值和左右值分别一样呢： the old method: margin-top:0px margin-right:20px margin-bottom:0px margin-left:20px the new method margin:0px 20px // top and bottom right and left respectively border的属性设置: the old method border-width:thin border-style:solid boder-color black the new method: border:thin solid black //width style color respectively border的属性设置更加灵活多变：

pythonanywhere是一个免费的托管python的代码，可以测试你的web应用，用起来还是比较方便的，现在就来介绍如何在pythonanywhere部署你的应用。 下载你的代码 我的代码是托管在github，我们首先从github下代码： git clone https://github.com/<username>/my-first-blog.git 产生一个virtualenv cd my-first-blog // create virtualenv virtualenv myvenv // activate vitalness . myvenv/bin/activate 数据库什么的我就不说了，pythonanywhere支持两种数据库，另外由于django本身就是支持sqlite数据库的，所以这里我们就不说了。 这里讲一下如何发布你的应用： 在他那个dashboard里面的vitualenv里面设置路径： /home//my-first-blog/myvenv/. 配置wsgi文件： import os import sys path = '/home/<your-username>/my-first-blog' # use your own username here if path not in sys.path: sys.path.append(path) os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' from django.core.wsgi import get_wsgi_application from whitenoise.django import DjangoWhiteNoise application = DjangoWhiteNoise(get_wsgi_application()) ok,可以访问你的网站了，网站地址：http://neal1991.pythonanywhere.com。那个是我的用户名，你可以设置成你自己的用户名。

经常在购物网站，看到那种图片轮滑的效果，所以看到有人实现了，所以我也就学习下了。 首先贴出html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="javascript.js"></script> </head> <body> <div id="flash"> <ul id="pic"> <li style="display:block"><img src=""></li> <li><img src="" ></li> <li><img src=""></li> <li><img src=""></li> <li><img src=""></li> <li><img src=""></li> </ul> <ol id="num"> <li class="activate">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> <a href="javascript:;" class="arrow" id="left">&lt;</a> <a href="javascript:;" class="arrow" id="right">&gt;</a> </div> </body> </html> 图像的原路径我就不制定了，css文件 * { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; color: #fff; } #flash { width: 730px; height: 454px; margin: 100px auto; position: relative; cursor: pointer; } #pic li { position: absolute; top: 0; left: 0; z-index: 1; display: none; } #num { position: absolute; left: 40%; bottom: 10px; z-index: 2; cursor:default; } #num li { float: left; width: 20px; height: 20px; border-radius: 50%; background: #666; margin: 3px; line-height: 20px; text-align: center; color: #fff; cursor: pointer; } #num li.active { background: #f00; } .arrow{ height: 60px; width: 30px; line-height: 60px; text-align: center; display: block; position: absolute; top:45%; background-color: rgba(0,0,0,0.3); z-index: 3; display: none; } .arrow:hover { background: rgba(0,0,0,0.7); } #flash:hover .arrow { display: block; } #left { left: 2%; } #right { right: 2%; } js代码：

接着上一节的内容来说。我们将继续关注与上一节制作的polls应用以及Django自动产生额度管理网站。 产生一个管理员用户 首先我们需要产生一个管理员用户，运行如下命令； python manage.py createsuperuser 下面会让你输入用户名，邮箱以及用户密码，按照要求填写就可以了，这样我们就产生了一个管理员账户了。 开发服务器 Django的管理员网站是默认激活的，我们可以通过上节讲到的方式激活服务器： python manage.py runserver 现在打开浏览器，输入http://localhost:8000/admin/你就可进入管理员登录界面了，输入用户名和密码就可以登录了。 进入管理员网站 当你以超级管理员的身份进去管理员网站，你就可以看到管理员的默认界面了。 在管理员中修改poll应用 在默认管理员界面中我们看不到我们的poll应用。我们需要高速管理员Question对象具有一个管理员接口，打开polls/admin.py from django.contrid import admin from .models import Question admin.site.register(Question) 定制管理员表单 现在我们来开始定制管理员表单，打卡polls/admin.py from django.contrib import admin from .models import Question,Choice //Register your models here. class ChoiceInline(admin.TabularInline): model = Choice extra = 3 class QuestionAdmin(admin.ModelAdmin): #fields = ['pub_date','question_text'] list_display = ('question_text','pub_date','was_published_recently') list_filter = ['pub_date'] search_fields = ['question_text'] fieldsets = [ (None,{'fields':['question_text']}), ('Date information',{'fields':['pub_date'],'classes':['collapse']}), ] inlines = [ChoiceInline] admin.site.register(Question,QuestionAdmin) 这里面他做了很多细节的改变，他是一个个的加进去，好麻烦，我这给的就是最终的一个版本，主要里面增加一个收缩的功能。

需要找到django的安装路径，官方说的那个方法不好用，国内搜索都是都不到的，后来谷歌搜到了很简单 import django django 这样就可以找django的安装路径了，真心不懂为什么国内都看不到