15道HTML5面试题小白必备

15道HTML5面试题新手必备

基础强化

1. 聊一聊前端存储。

（1）cookie

（2）短暂的sessionStorage

（3）简易强大的localStorage

（4）websql与indexeddb

详细参见：https://https://www.wendangku.net/doc/d71821727.html,/a/1190000005927232

2. BFC

(1) w3c规范中的BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks, table-cells, 和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

(2) BFC的通俗理解：

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

详细参见：

https://www.wendangku.net/doc/d71821727.html,/css/understanding-bfc-and-margin-collapse.html

https://https://www.wendangku.net/doc/d71821727.html,/question/28433480

前端工程化

3. 场景：你是第一天来公司上班的，项目代码托管在GitLab，项目地址：

git@https://www.wendangku.net/doc/d71821727.html,:org/project.git,现在有一处代码需要你修改。请下完成此项任务中，与git/gitlab 相关的操作步骤。

第一步：$> ssh-keygen -t rss -C zhangsan@https://www.wendangku.net/doc/d71821727.html,

第二步：拷贝公钥到gitlab

第三步：

$> git config —global https://www.wendangku.net/doc/d71821727.html, zhangsan

$> git config —global user.email zhangsan@https://www.wendangku.net/doc/d71821727.html,

第四步：$> git clone git@https://www.wendangku.net/doc/d71821727.html,:org/project.git

第五步：$> git checkout -b project-20170227-zhangsan-bugfix

第六步：修改代码

第七步：git status

第八步：git add .

第九不：git commit -am ‘bugfix’

第八步：git push --set-upstream origin project-20170227-zhangsan-bugfix

4. CSS，JS代码压缩，以及代码CDN托管，图片整合。

（1）CSS,JS 代码压缩：

可以应用gulp的gulp-uglify，gulp-minify-css模块完成；可以应用webpack的UglifyJsPlugin压缩插件完成。

（2）CDN：

内容分发网络(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。主要特点有：本地Cache加速，镜像服务，远程加速，带宽优化。关键技术有：内容发布，内容路由，内容交换，性能管理。CDN网站加速适合以咨询为主的网站。CDN是对域名加速不是对网站服务器加速。CDN和镜像站比较不需要访客手动选择要访问的镜像站。CDN使用后网站无需任何修改即可使用CDN获得加速效果。如果通过CDN后看到的网页还是旧网页，可以通过URL推送服务解决，新增的网页和图片不需要URL推送。使用动态网页可以不缓存即时性要求很高的网页和图片。CDN可以通过git或SVN来管理。

（3）图片整合

减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。缺点是可维护性差。可以使用百度的fis/webpack来自动化管理sprite。

5. 如何利用webpack把代码上传服务器以及转码测试？

（1）代码上传：

可以使用sftp-webpack-plugin，但是会把子文件夹给提取出来，不优雅。可以使用gulp+webpack来实现。

（2）转码测试

webpack应用babel来对ES6转码，开启devtool: “source-map" 来进行浏览器测试。应用karma 或mocha来做单元测试。

6. 项目上线流程是怎样的？

（1）流程建议

- 模拟线上的开发环境

本地反向代理线上真实环境开发即可。（apache，nginx，nodejs均可实现）

- 模拟线上的测试环境

模拟线上的测试环境，其实是需要一台有真实数据的测试机，建议没条件搭daily的，就直接用线上数据测好了，只不过程序部分走你们的测试环境而已，有条件搭daily最好。

- 可连调的测试环境

可连调的测试环境，分为2种。一种是开发测试都在一个局域网段，直接绑hosts即可，不在一个网段，就每人分配一台虚拟的测试机，放在大家都可以访问到的公司内网，代码直接往上布即可。

- 自动化的上线系统

自动化的上线系统，可以采用Jenkins。如果没有，可以自行搭建一个简易的上线系统，原理是每次上线时都抽取最新的trunk或master，做一个tag，再打一个时间戳的标记，然后分发到cdn就行了。界面里就2个功能，打tag，回滚到某tag，部署。

- 适合前后端的开发流程

开发流程依据公司所用到的工具，构建，框架。原则就是分散独立开发，互相不干扰，连调时有hosts可绑即可。

（2）简单的可操作流程

- 代码通过git管理，新需求创建新分支，分支开发，主干发布

- 上线走简易上线系统，参见上一节

- 通过gulp+webpack连到发布系统，一键集成，本地只关心原码开发

- 本地环境通过webpack反向代理的server

- 搭建基于linux的本地测试机，自动完成build+push功能

7. 工程化怎么管理的?

gulp和webpack

8. git常用命令

Workspace：工作区

Index / Stage：暂存区

Repository：仓库区（或本地仓库）

Remote：远程仓库

详细参见：https://www.wendangku.net/doc/d71821727.html,/blog/2015/12/git-cheat-sheet.html

9. webpack 和gulp对比

Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock 数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”另外，Gulp是通过task对整个开发过程进行构建。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

Gulp和Webpack功能实现对比：从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。

详细参见：https://www.wendangku.net/doc/d71821727.html,/articles/e632EbA

10. webpack打包文件太大怎么办?

webpack 把我们所有的文件都打包成一个JS 文件，这样即使你是小项目，打包后的文件也会非常大。可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。

详细参见：https://www.wendangku.net/doc/d71821727.html,/p/a64735eb0e2b

11. 不想让别人盗用你的图片，访问你的服务器资源该怎么处理？

目前常用的防盗链方法主要有两种：

（1）设置Referer：适合不想写代码的用户，也适合喜欢开发的用户

（2）签名URL：适合喜欢开发的用户

详细参见：https://https://www.wendangku.net/doc/d71821727.html,/articles/57931

12. 精灵图和base64如何选择？

css精灵，用于一些小的图标不是特别多，一个的体积也稍大，比如大于10K（这个没有严格的界定）。

base64，用于小图标体积较小（相对于css精灵），多少都无所谓。字体图标，用于一些别人做好的图标库（也有少数自己去做的）用起来比较方便，他的图标只能用于单色，图标用只能于一种颜色。

13. webpack怎么引入第三方的库？

拿jQuery为例：

entry: {

page: 'path/to/page.js',

jquery: 'node_modules/jquery/dist/jquery.min.js'

}

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true,

chunks: ['jquery', 'page'] // 按照先后顺序插入script标签})

14. 如果线上出现bug git怎么操作？

参见第1题。

15. 用过Nginx吗？都用过哪些？

nginx是一个高性能的HTTP和反向代理服务器。

常使用场景：

（1）反向代理

（2）网站负载均衡

详细参见：https://www.wendangku.net/doc/d71821727.html,/hobinly/p/6023883.html

计划组织面试题

1、要对一个农作物的新品种进行推广，但是却没有多少农民来进行咨询和寻求帮助，你怎么做（2010年3月4日下午其他部门国家公务员面试真题） 【试题类型】计划组织类 【考查能力】沟通协调能力和计划组织能力 【解题要点】 1．深入调查，分析原因，制定相应计划； 2．沟通协调，保证计划顺利实施； 3．向领导汇报，并做好相应的宣传。 华图参考要点： 任何时候，人们对新事物的产生都有一个由不接受到接受的过程。新事物在推广阶段遇到困难是很正常的。关键是要不断的深入调查，有针对性的进行宣传推广，使之逐渐被接受。 对于农作物新品种的推广也是这样。我会通过集中调查和入户访谈的方式，深入田间地头，走入农户家里，了解农民的看法，然后对这些数据进行细致地分析，并据此制定更加有针对性地宣传和推广计划，明确推广计划的时间、地点、对象、预算、相关服务和产品等要素，报领导审批并修改。 在计划实施阶段，依照采取多种方式，争取各方面的支持的帮助，比如利用村委会组织动员村民，利用相关的媒体进行宣传，尤其要针对调查中有困惑的村民，对他们不理解的问题进行讲解，方便农民加深对这一新品种的了解。注意推广的方式方法，特别是保证活动中的秩序问题，防止意外的发生。 计划结束之后，统计农民采用新品种的比例，深入总结，并写出书面报告向领导汇报，最后我还会充分利用机关网络和媒体进行宣传。 2、某市城管执法部门实行“公众接待日”制度，有上级领导要来参加，你单位领导让你来组织，怎么做（2010年3月5日上午其他部门国家公务员面试真题） 参考答案： 实行公众接待日工作制度，是城管执法部门进一步转变作风、提高办事效率、全面加强机关效能建设的具体体现，也是实现其全心全意为人民服务的重要保证。因此我会认真组织好这次活动。 首先，我会向单位领导咨询这次“接待日”的目的及要求，向有经验的同事们请教，集思广益确定一份详细的计

Web前端开发笔试题集锦(已读)

Web前端开发笔试题集锦 HTML/CSS篇 1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2，截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3，判断一个字符串中出现次数最多的字符，统计这个次数 //将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table，获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:"+max+" max_key:"+max_key); 4，IE与FF脚本兼容性问题 (1) window.event： 表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象 (2) 获取事件源

前端面试题大全(html篇)

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。最主要的不同： (1)XHTML元素必须被正确地嵌套 (2)XHTML元素必须被关闭 (3)XHTML标签名必须用小写字母 (4)XHTML文档必须拥有根元素 2.什么是语义化的HTML html5的语义化是指用正确的标签包含正确的容，比如nav标签就应该包含导航条容 (1)直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ (2)html语义化就是让页面的容结构化，便于对浏览器、搜索引擎解析 (3)在没有CCS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下和各个关键字的权重，利于SEO。 (4)使阅读源代码的人更容易将分块，便于阅读维护理解。 写一段语义的html代码(HTML5中新增加的很多标签如：