下载文档原格式
HTML5答辩问题总结1.HTML5 新的 DocType是什么？答案：<!doctype html>；2.HTML5 页⾯中⾳频标签，视频标签?答案：<audio></audio>；<video></video>；3.HTML5 引⼊什么新的表单属性？答案：range,email,number,url,time,week,month,date,datalist,datetime,color4.HTML5中的datalist是什么？怎么写的?答案：HTML5中的Datalist元素有助于提供⽂本框⾃动完成特性,写法<input list="Country"><datalist id="Country"><option value="India"><option value="Italy"><option value="Iran"><option value="Israel"><option value="Indonesia"><datalist>5：HTML5中获取画布上下⽂的js代码答案：var canvas = document.getElementById('myCanvas');//获取界⾯canvas标签对象var ctx = canvas.getContext('2d');//获取画布上下⽂6.画布中怎么绘制⼀条直线答案：ctx.beginPath();ctx.moveTo(10,10);ctx.lineTo(200,100);ctx.stroke();7.ctx.beginPath()是什么意思;答案：起始⼀条路径，或重置当前路径8.ctx.moveTo(10,10);是什么意思,两个参数是什么意思?答案：把路径移动到画布中的指定点，不创建线条,参数对应x,y轴坐标9.ctx.stroke()和ctx.fill()是什么意思?答案：⼀个是绘制路径,相当于只画边框，⼀个是填充路径10.⽤⾃⼰的语⾔描述⼀下对画布路径的理解,moveTo,lineTo(),fill(),stroke(),beginPath(),closePath()答案：1.⾸先来说moveTo()⽅法，相当于你告诉我，把笔移动到哪⾥，开始画图，这只是⼀个定点，lineTo()就是画线到哪个坐标，当然开始点就是moveTo所指定的坐标,lineTo()指定的点就是结束点2.其次,fill()和stroke()⽅法相当于最后绘制图形，什么意思呢？也就是路径我们制定了之后，就最后需要画图了，⽽fill表⽰填充，stroke()简单来说就是描边画线3.beginPath()相当于告诉画布要开始路径了，这⾥是路径的起点，如果没有这⼀句，下⼀次再绘制线条时，会接着上⼀次的结束位置继续绘制，closePhath(),关闭路径，如果没有这⼀句，路径不会⾃动闭合11.HTML5中画圆(弧)和画矩形的⽅法，画圆(弧)的⽅法有⼏个参数，分别是什么意思答案：arc(),rect()；arc(x坐标，y坐标，r半径，0起始地弧度，2*Math.PI结束的弧度，false顺时针|true逆时针)12.度数转化为弧度的公式答案：弧度 = 度数 * Math.PI / 18013.线性渐变，放射性渐变如何实现，说出关键代码答案：var grd=ctx.createLinearGradient(x0,y0,x1,y1);var grd= ctx.createRadialGradient();14.样式，阴影的API答案：fillStyle 设置或返回⽤于填充绘画的颜⾊、渐变或模式strokeStyle 设置或返回⽤于笔触的颜⾊、渐变或模式shadowColor 设置或返回⽤于阴影的颜⾊shadowBlur 设置或返回⽤于阴影的模糊级别shadowOffsetX 设置或返回阴影距形状的⽔平距离shadowOffsetY 设置或返回阴影距形状的垂直距离grd.addColorStop(stop,color);15.如果要⽤到HTML5中的拖拽API，需要给被拖拽的标签什么属性，拖拽的事件有哪些？答案：draggable；拖拽对象 :A.dragstart：当元素拖拽开始触发；B.drag：在元素拖拽过程中触发；C.dragend：元素拖拽结束时触发投放对象：A.dragenter：当拖拽对象进⼊投放区时触发；B.dragover：拖拽对象在投放区内移动时触发；C.dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；D.drop：拖拽对象投放在投放区时触发。
前端面试题及答案在前端领域中，面试是获取工作机会的重要环节。
为了帮助准备前端面试的候选人们，本文将提供一些常见的前端面试题及其答案，以供参考。
一、HTML相关面试题1. 请简述HTML的概念和作用。
HTML是超文本标记语言的缩写，用于构建网页的标准标记语言。
它通过标签来定义页面的结构和内容，并与CSS和JavaScript等其他技术协同工作，实现页面的渲染和交互。
2. 请解释一下HTML5的新特性。
HTML5引入了许多新特性，例如语义化标签（如header、footer、nav等）、视频和音频元素、Canvas绘图功能、本地存储（localStorage 和sessionStorage）、WebSocket等。
这些特性提升了网页的功能和性能，使开发者能够更好地构建富交互、多媒体的网页应用。
3. 请描述一下HTML元素的块级元素和内联元素的区别。
块级元素会独占一行，相邻的两个块级元素会自动换行。
常见的块级元素有div、p、h1等。
而内联元素不会换行，会在一行内按照从左到右的顺序排列。
常见的内联元素有span、a、em等。
此外，块级元素可以包含内联元素，但是内联元素不能包含块级元素。
二、CSS相关面试题1. 请解释一下盒模型。
盒模型描述了一个HTML元素所占空间的模型。
它由内容区、内边距、边框和外边距组成。
其中，内容区的大小由width和height属性决定，内边距由padding属性决定，边框由border属性决定，外边距由margin属性决定。
2. 如何实现水平居中一个块级元素？要实现水平居中一个块级元素，可以设置其左右外边距为auto，同时将其display属性设置为block。
例如，假设元素的宽度为300px，可以使用如下CSS代码：```css.element {width: 300px;margin-left: auto;margin-right: auto;display: block;}```3. 请解释一下CSS选择器的优先级。
关于H5的20道⾯试题及答案1 DOCTYPE有什么作⽤？标准模式与混杂模式如何区分？它们有何意义?告诉浏览器使⽤哪个版本的HTML规范来渲染⽂档。
DOCTYPE不存在或形式不正确会导致HTML⽂档以混杂模式呈现。
标准模式（Standards mode）以浏览器⽀持的最⾼标准运⾏；混杂模式（Quirks mode）中页⾯是⼀种⽐较宽松的向后兼容的⽅式显⽰。
2 HTML5为什么只需要写？HTML5不基于SGML（Standard Generalized Markup Language 标准通⽤标记语⾔），因此不需要对DTD（DTD ⽂档类型定义）进⾏引⽤，但是需要DOCTYPE来规范浏览器⾏为。
HTML4.01基于SGML，所以需要引⽤DTD。
才能告知浏览器⽂档所使⽤的⽂档类型，如下：3 ⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？⾏内元素：a span img input select块级元素：div ul ol li dl dt dd h1 p空元素：4 页⾯导⼊样式时，使⽤link和@import有什么区别？相同的地⽅，都是外部引⽤CSS⽅式，区别：link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSSlink引⽤CSS时候，页⾯载⼊时同时加载；@import需要在页⾯完全加载以后加载，⽽且@import被引⽤的CSS会等到引⽤它的CSS⽂件被加载完才加载link是xhtml标签，⽆兼容问题；@import是在css2.1提出来的，低版本的浏览器不⽀持link⽀持使⽤javascript控制去改变样式，⽽@import不⽀持link⽅式的样式的权重⾼于@import的权重import在html使⽤时候需要标签5 ⽆样式内容闪烁（FOUC）Flash of Unstyle Content@import导⼊CSS⽂件会等到⽂档加载完后再加载CSS样式表。
html常见面试题
HTML常见面试题包括：
1.HTML是什么？它的主要作用是什么？
2.HTML中的主要标签有哪些？它们分别有什么作用？
3.什么是HTML语义化？为什么它很重要？
4.什么是HTML5？它有哪些新特性？
5.HTML5有哪些废弃的标签和属性？
6.如何创建一个HTML文档结构？
7.HTML文档的头部部分应该包含哪些内容？
8.HTML中的meta标签有哪些常见用法？
9.如何在HTML中创建超链接？如何设置链接的目标和打开方式？
10.如何创建一个HTML表格？如何设置表格的边框和间距？
11.HTML中的表单标签有哪些？如何创建一个表单并设置表单控件？
12.如何设置表单的提交方式和目标URL？
13.如何创建一个HTML块级元素和行内元素？它们有什么区别？
14.如何设置元素的宽度和高度？有哪些常见的方法？
15.HTML中的CSS样式应该如何引入和应用？
16.如何使用CSS选择器来选择和样式化特定的元素？
17.如何使用CSS来设置元素的背景颜色、字体样式和边框样式等属性？
18.如何使用CSS来控制元素的布局和定位？有哪些常见的布局方式？
19.HTML中的JavaScript应该如何嵌入和使用？
20.JavaScript有哪些常见的DOM操作方法？如何使用它们来操作HTML元素？。
10个最常见的 HTML5 面试题及答案10个最常见的 HTML5 面试题及答案这里选择了10个 HTML5 面试问题并给出了答案。
这是 Web 开发人员最常见的面试问题，相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了。
一起来看看吧。
1、新的 HTML5 文档类型和字符集是？HTML5 文档类型很简单：<!doctype html>HTML5 使用 UTF-8 编码示例：<meta charset=”UTF-8″>2、HTML5 中如何嵌入音频？HTML5 支持 MP3、Wav 和 Ogg 格式的`音频，下面是在网页中嵌入音频的简单示例：<audio controls><source src=”jamshed.mp3″ type=”audio/mpeg”>Your browser does’nt support audio embedding feature.</audio>3、HTML5 中如何嵌入视频？和音频类似，HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：<video width=”450″ height=”340″ controls><source src=”jamshed.mp4″ type=”video/mp4″>Your browser does’nt support video embedding feature.</video>4、除了 audio 和 video，HTML5 还有哪些媒体标签？HTML5 对于多媒体提供了强有力的支持，除了 audio 和 video 标签外，还支持以下标签：<embed> 标签定义嵌入的内容，比如插件。
<embed type=”video/quicktime” src=”Fishing.mov”><source> 对于定义多个数据源很有用。
html5面试题汇总HTML5是一种用于构建和呈现Web页面的标准语言，它具有丰富的功能和广泛的应用。
在面试过程中，掌握HTML5相关知识是非常重要的。
本文将总结一些常见的HTML5面试题，帮助读者更好地准备面试。
1. 介绍一下HTML5的新特性及其优势。
HTML5引入了许多新特性，包括语义化标签、视频和音频嵌入、本地存储、Canvas绘图等。
相比于之前的HTML版本，HTML5具有更好的可访问性、更高的页面性能、更丰富的多媒体支持、更强的表单验证以及更好的移动端兼容性。
HTML5还为开发者提供了更多的API，例如Web Workers和Web Sockets等，使得开发更加便捷和高效。
2. 什么是语义化标签？举例说明一下HTML5新增的语义化标签。
语义化标签是指在HTML中使用具有明确含义的标签来描述页面内容结构的方法。
它可以增加代码的可读性和可维护性，并有助于搜索引擎的理解和索引网页内容。
HTML5新增的语义化标签包括<header>、<nav>、<aside>、<section>、<article>、<footer>等。
例如，<header>用于定义文档或节的头部，<nav>用于定义导航链接，<article>用于表示独立的、完整的内容等。
3. 解释一下HTML5的本地存储技术。
HTML5提供了一系列的本地存储API，使得Web应用能够在本地存储数据，而无需依赖于服务器。
其中最常用的本地存储技术是WebStorage和IndexedDB。
Web Storage提供了localStorage和sessionStorage两个对象，用于在浏览器中存储键值对数据。
IndexedDB 是一个更底层的数据库API，允许开发者在客户端存储和检索结构化数据。
4. 如何在HTML5中播放视频和音频？HTML5提供了<video>和<audio>标签用于在网页中播放视频和音频。
h5面试题选择
1. 请问你在过去的工作经验中，最有挑战性的项目是什么？你是如何解决挑战的？
2. 在你上一份工作中，你是如何与团队合作的？
3. 请分享一次你在工作中提出的创新想法，并且该想法是如何被实施的？
4. 你是如何处理工作压力和紧迫任务的？
5. 请分享你最喜欢的领导风格是什么，以及为什么喜欢这种风格？
6. 当你被安排完成一项任务，但你发现该任务不符合你的能力和兴趣时，你会怎么做？
7. 请描述一次你在工作中遇到的最大挑战，并解释你是如何克服它的？
8. 你在工作中遇到过与同事或领导不合的情况吗？如果是，你是如何处理的？
9. 请分享一次你主动学习新技能或知识的经历，以及这对你的发展有何影响？
10. 请描述一次你在工作中犯过错误的经历，以及你是如何纠
正错误和从中吸取教训的？
11. 你平常是如何保持自己的工作效率和时间管理的？
12. 当你提出一个新项目或想法时，你是如何协调不同部门或团队的合作的？
13. 请分享一次你在工作中成功解决了一个复杂问题的经历，以及你是如何分析和解决这个问题的？
14. 你认为你目前的技能和经验能够为我们的公司带来什么价值？
15. 请描述一次你在工作中展示你的领导才能的经历，以及你是如何激励团队的？
16. 在工作中，你是如何评估和处理风险的？
17. 您是否对我们公司的产品/服务有过深入研究和了解？请分享一些您的观察或建议。
18. 请描述一次你在工作中被批评的经历，以及你是如何处理和改进的？
19. 当你发现一个项目或任务被耽误时，你会怎么做？
20. 在你过去的工作经验中，你觉得自己取得了最大的成就是什么？请解释原因。
html5 css3 面试题HTML5 CSS3面试题HTML5和CSS3是前端开发人员必备的技术，也是面试中常见的考点。
在准备面试时，我们应该了解一些常见的HTML5和CSS3面试题，以便更好地回答问题。
本文将就HTML5和CSS3的相关面试题进行讨论。
一、HTML5的新特性HTML5是HTML的最新版本，具有一些令人兴奋的新特性。
下面是一些常见的HTML5新特性：1.语义化标签：HTML5引入了一些新的语义化标签，如<header>，<nav>，<section>等。
这些标签使代码更具可读性，也有利于搜索引擎优化。
2.视频和音频支持：HTML5的<video>和<audio>标签使网页能够直接嵌入视频和音频文件，不再需要使用Flash等插件。
3.本地存储：HTML5提供了本地存储的能力，可以在客户端存储数据，减少对服务器的请求和响应，提升性能。
4.Canvas绘图：HTML5的<canvas>标签允许通过JavaScript绘制图形、动画和游戏等。
5.表单增强：HTML5为表单元素提供了一些新的属性和类型，如<input type="date">和<input type="email">等。
二、CSS3的新特性CSS3是CSS的最新版本，为网页设计师提供了更多的样式处理功能。
下面是一些常见的CSS3新特性：1.圆角边框：使用CSS3的border-radius属性可以创建圆角边框，不再需要使用图片或其他技术实现。
2.阴影效果：通过box-shadow属性，可以在元素上创建阴影效果，使页面更具层次感。
3.渐变效果：CSS3允许使用gradient属性实现线性渐变和径向渐变，可以为元素添加更灵活的背景。
4.过渡效果：使用CSS3的transition属性，可以在元素状态改变时实现平滑过渡效果，增强用户体验。
ps操作1、Ctrl+r 调出标尺的快捷键2、按住空格键鼠标单机拖动画布3、切片工具1）网页的结构划分-逐级划分原则4、画布的缩放，alt加滑轮5、切片的选择工具，按住ctrl键+鼠标左键6、选择工具移动标尺线一、HTML标签（留4面，2页）1、html 超文本标记语言–所有网页标签的一个容器2、head 网页的头部信息，（去放用户看不到的东西。
）3、body 网页的主体区域（游览器窗口中显示的内容）4、meta网页的元信息（声明网页的编码类型）5、title网页的标题6、div 俗称为盒子（指搭建网页结构）1）默认宽度是100%；2）高度默认为0，会根据内容自适应3）默认独立成行(垂直分布)7、img标签：图片标记（单闭合标记）<img src=”图片的路径地址” />title=”我是鼠标划上去显示出来的字”alt=”我是当服务器路径地址发生错误的时候显示”特点：前景图是占位的，不会平铺，位置是放在结构中的，行级元素8、br 换行标签–单闭合标签9、h1~h6 标题标签级别是由高到低的特征：自带加粗，字体大小，外间距，且是块级元素，独立成行，具有div的全部特征10、p 段落标签特征：具有div的全部特征，自带外间距。
11、ul 无序列表li 列表项语法格式：<ul><li></li><li></li></ul>特点：ul，li具有div的全部特征，自带列表符，外间距，内填充。
Ol 有序列表语法格式：<ol><li></li><li></li></ol>去掉默认的列表符，ul{ list-style:none; }12、span 万能标签（行级元素）13、a标签–超链接标签格式：<a href=”链接地址”>文字或者图片</a>特征：自带蓝色，下划线，访问过后变为紫色，如果为空链接，用#来占位。
h5前端面试题在你准备参加H5前端开发的面试之前，了解并准备一些常见的面试题目是非常重要的。
以下是一些常见的H5前端面试题，帮助你更好地应对面试挑战。
1. 请解释一下H5的相关概念和特点。
H5是HTML5的简称，是一种用于构建和呈现Web内容的标准。
与之前的HTML版本相比，H5具有更多新特性和功能，例如语义化标签、本地存储、Canvas绘图、音频和视频等。
它也支持更多的设备和浏览器。
2. 你能谈谈对移动端开发和响应式设计的了解吗？移动端开发是指根据手机、平板等移动设备的屏幕大小和交互特点，进行网页和应用的开发。
响应式设计是指根据用户使用的设备，自动调整网页布局和显示效果，以提供更好的用户体验。
3. 请解释一下HTML5语义化标签的作用和使用场景。
HTML5语义化标签通过直观明确的标签名称，使得网页的结构更易读懂和理解。
使用语义化标签可以提高搜索引擎的识别和索引效果，同时语义化标签也有利于屏幕阅读器等辅助技术的使用。
4. 请解释一下Canvas是什么，以及H5中如何使用Canvas进行绘图。
Canvas是H5中的一个元素，用于通过JavaScript进行绘图。
它提供了一套API，可以绘制图形、路径、文字和图像等。
通过获取Canvas的上下文对象，可以使用绘图方法来创建和修改图像。
5. 什么是Web存储？请谈谈H5中的Web存储技术。
Web存储是H5中用于在浏览器端临时或持久存储数据的技术。
在H5中，有两种Web存储技术：localStorage和sessionStorage。
前者用于持久存储数据，后者用于临时存储数据。
6. 请解释一下响应式图片是什么，以及如何实现响应式图片的优化。
响应式图片是指根据用户设备的屏幕大小和分辨率，自动选择并加载合适的图片。
为了实现响应式图片的优化，可以使用srcset和sizes属性来指定不同尺寸的图片，以及借助CSS媒体查询来设置不同条件下的图片样式。
7. 请解释一下H5中的音频和视频标签，以及如何使用它们。
html5面试题大全汇总基础强化1. 聊一聊前端存储。
（1）cookie（2）短暂的sessionStorage（3）简易强大的localStorage（4）websql与indexeddb详细参见：https:///a/11900000059272322. 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中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
详细参见：/css/understanding-bfc-and-margin-collapse.htmlhttps:///question/28433480前端工程化3. 场景：你是第一天来公司上班的，项目代码托管在GitLab，项目地址：git@:org/project.git,现在有一处代码需要你修改。
请下完成此项任务中，与git/gitlab 相关的操作步骤。
第一步：$> ssh-keygen -t rss -C zhangsan@第二步：拷贝公钥到gitlab第三步：$> git config —global zhangsan$> git config —global user.email zhangsan@第四步：$> git clone git@: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-bugfix4. 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和webpack8. git常用命令Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库详细参见：/blog/2015/12/git-cheat-sheet.html9. webpack 和gulp对比Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock 数据等功能的一个前端自动化构建工具。
说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。
”另外，Gulp是通过task对整个开发过程进行构建。
Webpack 是当下最热门的前端资源模块化管理和打包工具。
它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
通过loader的转换，任何形式的资源都可以视作模块，比如CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。
Gulp和Webpack功能实现对比：从基本概念、启动本地Server、sass/less预编译、模块化开发、文件合并与压缩、mock数据、版本控制、组件控制八个方面对Gulp和Webpack进行对比。
详细参见：/articles/e632EbA10. webpack打包文件太大怎么办?webpack 把我们所有的文件都打包成一个JS 文件，这样即使你是小项目，打包后的文件也会非常大。
可以从去除不必要的插件，提取第三方库，代码压缩，代码分割，设置缓存几个方面着手优化。
详细参见：/p/a64735eb0e2b11. 不想让别人盗用你的图片，访问你的服务器资源该怎么处理？目前常用的防盗链方法主要有两种：（1）设置Referer：适合不想写代码的用户，也适合喜欢开发的用户（2）签名URL：适合喜欢开发的用户详细参见：https:///articles/5793112. 精灵图和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）网站负载均衡详细参见：/hobinly/p/6023883.html。
