|导语：欢迎来到本站，本站为你提供最新的it面试信息、it面试技巧以及it面试题等相关it求职面试信息，希望对你的it面试之路有所帮助，下面是本站为大家推荐的“最新web前端工程师面试题大全分享！”，详情如下：|
最近看到web群里的人，特别关心面试web前端开发工程师时，面试官都会问那些问题，今天本站小编整理了一份，web前端开发工程师岗位面试题的大全，大家可看看，做为参考。
一、HTML常见题目
01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
02、HTML5为什么只需要写&!DOCTYPE HTML&？
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
11、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
12、请描述一下cookies，sessionStorage和localStorage的区别？
13、iframe有那些缺点？
14、Label的作用是什么？是怎么用的？(加for或包裹)
15、HTML5的form如何关闭自动完成功能？
16、如何实现浏览器内多个标签页之间的通信? (阿里)
17、webSocket如何兼容低浏览器？(阿里)
18、页面可见性(Page Visibility)API可以有哪些用途？
19、如何在页面上实现一个圆形的可点击区域？
20、实现不使用border画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
21、网页验证码是干嘛的，是为了解决什么安全问题？
22、tite与h1的区别、b与strong的区别、i与em的区别？
二、、CSS类的题目
01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有那些？
05、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
11、一个满屏品字布局如何设计?
12、常见兼容性问题？
13、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
14、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
15、为什么要初始化CSS样式。
16、absolute的containing block计算方式跟正常流有什么不同？
17、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
19、对BFC规范(块级格式化上下文：block formatting context)的理解？
20、CSS权重优先级是如何计算的？
21、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
22、移动端的布局用过媒体查询吗？
23、使用CSS预处理器吗？喜欢那个？
24、CSS优化、提高性能的方法有哪些？
25、浏览器是怎样解析CSS选择器的？
26、在网页中的应该使用奇数还是偶数的字体？为什么呢？
27、margin和padding分别适合什么场景使用？
28、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
29、元素竖向的百分比设定是相对于容器的高度吗？
30、全屏滚动的原理是什么？用到了CSS的那些属性？
31、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
32、视差滚动效果，如何给每页做不同的动画？(回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？)
33、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。
34、如何修改chrome记住密码后自动填充表单的黄色背景？
35、你对line-height是如何理解的？
36、设置元素浮动后，该元素的display值是多少？(自动变成display:block)
37、怎么让Chrome支持小于12px的文字？
38、让页面里的字体变清晰，变细用CSS怎么做？(-webkit-font-smoothing:)
39、font-style属性可以让它赋值为“oblique” oblique是什么意思？
40、position:在android下无效怎么处理？
41、如果需要手动写动画，你认为最小时间间隔是多久，为什么？(阿里)
42、display:inline-block什么时候会显示间隙？(携程)
43、overflow: scroll时不能平滑滚动的问题怎么处理？
44、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
45、png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？
46、什么是Cookie隔离？(或者说：请求资源的时候不要让它带cookie怎么做)
47、style标签写在body后与body前有什么区别？
您可以选择一种方式赞助本站
淘宝内部优惠券
分享面试经验与技巧，关注各行各业面试信息，打造求职者专属的面试网专题，让你的求职道路与众不同！
部分文章为网友分享与转载，如有侵权请联系qq: 我们会及时处理(不提供删除负面信息服务)
想要与本站交换友链的站长，麻烦点击以下咨询链接来私聊我：5271被浏览564107分享邀请回答37312 条评论分享收藏感谢收起// Good
let $body = $('body');
for (let i = 0; i & 100000; i ++) {
$body.text();
for (let i = 0; i & 100000; i ++) {
let $body = $('body');
$body.text();
// 其实这里并不是想强调let放在循环里面和外面的区别，而是想强调通过DOM去获取一个element是很费时的操作，懂得意思就好了。
4. 热爱这个行业作为一个技术半衰期只有一年的方向，随时保持进取心是非常非常非常重要的。ES6有哪些新特性？用过吗？江湖传言
仅用一行new Set()就征服了面试官，拿到了offer ?(?д??)有没有任何开源的项目？学过什么前端以外的新东西？当然这些东西不必全部都掌握（做过），但如果没有任何一项有经验的话，那确实就让人怀疑你的进取心了。以上就是我的一些不成熟的小建议，欢迎探讨 (o?ω?o)21452 条评论分享收藏感谢收起web前端面试题精选 - 简书
web前端面试题精选
第一部分HTML&CSS整理答案1.什么是HTML5？答：HTML5是最新的HTML标准。注意：讲述HTML5推出的设计目的，以及现在市场的使用情况，浏览器支持情况等。。。。设计目的HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：· 新的解析规则增强了灵活性· 新属性· 淘汰过时的或冗余的属性· 一个HTML5文档到另一个文档间的拖放功能1.HTML5中什么是不同的新的表单元素类型？答：提示本地验证表单需要再外面添加form标签包起来，才能查看效果colordatedatetime-localemailtimeurlrangetelephonenumbersearch1.HTML5的页面结构同HTML4或者更前的HTML有什么区别？答：一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读以下是形成页面结构的HTML5元素的更多细节：（注意主要考的是标签语意化）：代表HTML的头部数据：页面的脚部区域：页面导航元素：自包含的内容：使用内部article去定义区域或者把分组内容放到区域里：代表页面的侧边栏内容1.哪些浏览器支持HTML5？答：几乎所有的高版本浏览器Safari，Chrome，Firefox，Opera，IE8以上都支持HTML51.为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？答：HTML5没有使用SGML或者XHTML，他是一个全新的东西，因此你不需要参考DTD，对于HTML5，你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档即可1.HTML5的离线储存？答：localStorage
长期存储数据，浏览器关闭后数据不丢失；sessionStorage
数据在浏览器关闭后自动删除。1.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？答：在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后 浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资 源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。1.请描述一下cookies，sessionStorage 和 localStorage 的区别？（1）cookie在浏览器和服务器间来回传递， sessionStorage和localStorage不会。（2）sessionStorage和localStorage的存储空间更大。（3）sessionStorage和localStorage有更多丰富易用的接口。（4）sessionStorage和localStorage各自独立的存储空间。1.页面可见性（Page Visibility）API 可以有哪些用途？答：在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。1.HTML5的form如何关闭自动完成功能？答：给不想要提示的input是设置autocomplete=off即可。1.一个div，要求实现当内容过少时，div的最低高度为200px，当内容较多时，div的高度被内容撑开。答：min-height:200px1.实现一个布局，分左中右三栏。左栏固定宽为200px，右栏固定150px，中栏随屏幕宽自动适应。写出html和css。#content{background:#ff6;}#left,#right{width:200background:#fc0;float:}#middle{float: width:100%;margin:0 -200}#middle .inner{margin:0 200background:#}#right{float:}法二：位置不能换css*{margin:0;padding:0;}#left{float:width:200height:100background:}#middle{margin:0200height:100background:}#right{float:width:200height:100background:}法三：下面是css样式代码：#main {float:width:100%;}.content {margin:0 200height:100%;background:}#left{float:width:200margin-left:-100%;background:}#right{float:width:200margin-left:-200background:}ut?h??1.a标签的四个伪类是什么？如何排序？为什么？爱恨分明原则: l v h alink visited hover active注释：为了产生预期的效果，在CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后 !注释：为了产生预期的效果，在CSS 定义中，a:active 必须位于 a:hover 之后！！注释：Pseudo-class（伪类）的名称对大小写不敏感。注释：伪类可与CSS 类配合使用：a.red:visited {color: #FF0000;}如果上面这个例子中的链接已访问过，那么它会显示为红色。1.如何实现浮动元素居中我是浮动的我也是居中的.box{float:position:left:50%;}p{float:position:right:50%;1.已知一个div内有一个img，两者的高度均不知道，但图片的高度一定小于div的高度。用css实现图片在div内的垂直居中。参考：/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/&.box{/*非IE的主流浏览器识别的垂直居中的方法*/display:table-vertical-align:/*设置水平居中*/text-align:/*针对IE的Hack */*display:*font-size:175/*约为高度的0.873，200*0.873约为175*/*font-family:A/*防止非utf-8引起的hack失效问题，如gbk编码*/width:200height:200border:1pxsolid#}.boximg{/*设置图片垂直居中*/vertical-align:}1.HTML静态页面出现中文乱码如何解决？答：1.下列标签既是行内属性标签又可以设宽高的标签是？（D）A.div
C. inputD. imgE. h11.用一两句话说一下你对“盒模型”这个概念的理解，和它都涉及到哪些css属性。答：网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。1.外边距、内边距、边框有几种书写形式,列举说明。参考：1.有上下两个div，上一个div 设置margin-bottom：10px；下一个div设置margin-top： 5px；那么两个div最后的间距是多少？答：10px1.写出下列CSS命令的最简写法{margin-left:20 margin-bottom:50 margin-right:20 margin-top:20}答：margin: 20px 20px 501.我们用hack调兼容时，用到如下命令 div{height：300px；*height：400px；_height：500}，在ie6里div显示高度是多少，火狐里显示高度是多少？答：ie6:400px,
火狐：3001.三层嵌套用在什么地方最合适，有什么优点。答：有圆角边框不固定宽度同时兼容ie的时候1.背景图合并用在什么地方最适合，有什么优点。答: 通常当遇到一个网站要加载大量icon(小图标)的时候，我们会把它合并成sprite(图片拼接)。目的是为了减少HTTP请求次数。这样做既能减少页面加载时间，又可以减轻服务器的负载1.页面如何在浏览器里达到居中，并且左右自适应？答：margin: 01.HTML5版本类型声明怎么写。有什么用？答：1.XHTML1.0版本你知道么，跟html5版本有什么区别答: XHTML 1.0 是 XML 风格的 HTML 4.01。XHTML 1.1 主要是初步进行了模块化。HTML5 是下一代 HTML，取代 HTML 4.01。W3C 原本确实计划用 XHTML 系列替代 HTML 4.01，但 XHTML 系列实际上只活到了 1.1（1.1 和夭折的 1.2 已经体现出过分 XML 的迹象，而 W3C 的理想其实在疯狂的 XHTML 2 身上，当然，它没能诞生），还没脱离 HTML 4.01 的阴影就死了。还没等XHTML 兴起，它的地位就被 HTML5 取代了。1.书写ol，ul，table的嵌套规范答：1.前端页面有哪三层构成，分别是什么？作用是什么？答: 分成：结构层、表示层、行为层。结构层由HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”表示层由CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。1.img的alt和title有什么区别？答: alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字1.HTML代码的书写规范有哪些？答:1.浏览器的调试工具有哪些？都有什么功能？答:1.table的合并边框属性是什么？跨行是什么？跨列是什么？答:合并边框:cellspacing, 跨行:rowspan, 跨列: colspan1.CSS是什么？有什么用处。答: 层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。1.你知道less,sass这些东西么（小米）；答: CSS 预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。1.解释W3C答: 万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。1.页面重构答: 网站重构不是一种技术，不是css+div，更不是标准，网站重构是一种思想，是一种理念。引用WebReBuild.ORG 的话：当前国内的同行普遍的认为：所谓的网站重构就是“DIV+CSS”，想法固然极度局限。但也不是另一部分的人认为是“XHTML+CSS”，因为“XHTML+CSS”只是页面重构。真正的网站重构理应包含结构、行为、表现三层次的分离以及优化，行内分工优化，以及以技术与数据、人文为主导的交互优化等。重构网站先重构人，重构你的理念，不要光光追求技术，追求还原设计稿，追求浏览器的兼容性，重要的是基础和理念。当你真正了解什么是网站重构的时候网站重构也就真正开始了。1.div+css与table布局的有何区别？答: div+css:布局简洁明了，使用方便，相对于表格来说更容易搜索的到！优化程度高点。不易出现错误或者不可控！样式繁多，易控易修改。Table: 表格布局不建议使用，这个算是快要被淘汰的一种布局方式。布局不容易调整和规划。容易失控。大部分都不能使用太多样式。1.后台编码格式不是UTF-8怎么办？答: 统一编码格式1.一个CSS文件如果过大的话，加载会很慢，占用过大带宽，如果解决？答: 1.去除空格和换行,压缩css代码;2.尽量使用简写, 缩减代码;3.将css文件分成多个文件1.input标签存在的兼容问题？答:当input标签在type为text时，在Firefox和Safari中的默认高度为22像素（包括上下边框）宽度为146像素（包括左右边框），而在IE中的默认高度为24像素，而宽度却和Firefox和Safari是一致的，也是146像素。当input标签在type为submit时，在Firefox中的高度为23像素（包括阴影），宽度为75像素。在Safari中高度为21像素，宽度为73像素，在IE中高度为为25像素、宽度为73像素。1.input中disabled与readonly有何区别？答: Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而 readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)。1.input属性有哪些？1.position属性值，如只写了absolute，是相对谁定的位？答:离它最近的已经定位的父元素1.CSS选择器中div.ps是什么意思答: 类名是ps的div1.使用display:inline-block在IE6中不能正常显示，如何解决？答:方法1：直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的 layout（如：zoom:1 等）。兼容各浏览器的代码如下：div {display:inline-*display: *zoom:1;...}方法2：先使用display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 样式声明中才有效果，这是 IE 的一个经典 bug，如果先定义了display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）： div {display:inline-...}div {*display:}1.png图片有几种格式答:png有3种不同深度的格式：png8、png24、png321.display的属性值有哪些？2.标签的隐藏（display:none和visibility:hidden）的区别答：visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！1.在页面内居中（水平和垂直方向）*3答：垂直居中:水平方向给父级设置text-使用左右margin值为auto竖直方向:设置line-height值为元素高度;设置元素绝对定位,top:0;bottom:0 margin:auto, 0;1.如何让链接访问过后的hover消失正常情况下: 爱恨原则: l —& v —& h — & a为了达到上述效果,改变顺序即可: l —& h —& v —& a1.Ie6中为什么不能设置1px高的div答：在用DIV构建网页的时候，有时候需要的高度很小，这时候就可能会出现问题，因为，IE6下DIV有个默认的高度，大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候，IE 会固执的认为这个层的高度不应该小于字体的行高。解决办法：第一：定义该DIV字体大小。例如:第二：直接限制自动调整1.div中内容没有撑开高度的原因，怎么解决父亲div没有设置高度孩子div设置高度了,此时,父亲的高度是靠孩子撑起来的但是当孩子浮动了,父亲的高度也就没了此时需要给孩子增加一个兄弟div,并且clear:both,问题完美解决1.双倍边距bug连接地址:在产生双边距bug的元素内,增加一行属性:display:第二种办法:采用cssHack:margin-left:20_margin-left:201.如何让div水平排列1:浮动2.定位1.定义id名和class名有什么区别从概念上来说:id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。从样式效果上来说:id的优先级要比class高出一个层次html中不管有几个id,在css获取到的就是所有的但是在js中通过document获取到的是第一个1.CSS有几种引入方式？link和@import有什么区别link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。1.在IE中给div设display:inline-它还会占一行不会?答：ie不支持display属性1.如何制作渐变效果（不使用CSS3）这里的关键点是h1 { position: relative } 和h1 span { position: absolute }h1 {font: bold 330%/100% "Lucida Grande";position:color: #464646;}h1 span {background: url(gradient.png) repeat-x;position:display:width: 100%;height: 31}是的，就这些，你已经搞定了1.上下两个div分别设置了margin-bottom和margin-top，两个div之间的距离是多少？会发生融合效果,距离就是数值比较大的那个1.除了ul、ol还用什么写列表dl dt dd1.如果不写头部声明会有什么问题通常html DOCTYPE声明是必须的，而且使用div+css更是必不可少，如果缺少或错误document将会造成你的CSS失效或半失效，即因为css失效，网页布局变乱，有的css属性不能体现。另外:由于万恶的IE（尤其指IE6和IE7），我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题，例如IE6、IE7不能良好应对的inline-block和.clearfix问题.所以就加入了IE版本区分代码，主要还是解决IE版本兼容性问题。1.如何优化你的页面一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。结构中主要包括了head和body两个部分，但是我们经常说的是结构语义化主要是body中的标签，但是我在这里还是简单的说一下head，head中其实包括了一些对于我们seo很有用的一些东西，比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的，当然，还有其他的一些，我在此就不一一说明了，比如设置缓存等一些其他的信息。那么body中的话，包括的标签就很多了，我觉得作为一个合格的前端开发人员你应该去熟悉他们，比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理，还有就是注意h标签的断层，及h1标签的使用，这些都是非常重要的。同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。二、css，js文件数量及大小的优化那么关于css、js的优化的话，一般情况下建议css和js采用外联式。但是如果你的页面内容比较多，设计师把整个效果做得比较花的话，恐怕css就非常多了，那么这种情况下，你一定要把你的css规划好，尽量的采用缩写，这样可以减少css文件的大小，那么对css做相应的规划也可以减少css的个数，减少http请求数，js同理。三、背景图片数量及大小的优化由于我们的背景图片数量比较多，这样的话，会给服务器带来影响，增加了http请求数，我们是否有一种好的解决办法呢？这个答案是肯定的，如果你是一个合格的前端开发，你应该清楚，在我们的css定义背景的时候，可以通过坐标来实现对背景进行定位的，既然如此，那么我们可以将这些背景合并起来，这样即可减少http请求数，同时，我们在背景整合的时候，也需要考虑图片质量，同时也需要考虑图片的大小.你的背景图片保证不超过3个以上，你的css文件不超过2个，js文件不超过3个。而且良好的遵守web标准的一些规定，css放到head中，js文件放到之前或者之后.建议body中增加text-align:center用 代替 @import作为大型网站来说，首页使用内联式样式表，这样可以减少http请求数的同时，也可以防止裸奔。当然其他页面需要使用外联样式表，这样才可以方便维护。因为作为大型网站来说，他的首页访问量是非常的大的，所以。。把样式表置于顶部把脚本置于页面底部避免使用CSS 表达式（Expression）使用外部JavaScript 和 CSS削减JavaScript 和 CSS用 代替 @import避免使用滤镜剔除重复脚本减少DOM访问开发智能事件处理程序?4-?y=?+?最好的方案就是按照HTML 规范在文档
内加载你的样式表。使用此方法的时候，我们每次都要加载两个js文件或者写两个标签才行，这样不太好，http请求会增多，那么我们可以打开DD_belatedPNG.js文件，在尾部加入如下代码即可：window.onload = function(){DD_belatedPNG.fix(".pngFix,.pngFix:hover");}这样我们只需要引入此，在需要透明的标签上加入class="pngFix"即可，简单 · 方便 · 快捷！优点：1、CSS代码无需任何修改，按照平时的思路来写即可；2、无需配置；3、没有多余的gif图片；4、支持img；5、支持平铺；6、支持CSS Sprite；8、支持Hover等伪类；缺点：1、额外加入了js文件（6.39k）和http请求，可以忽略不计；2、当文件载入之前，会先暂时呈现灰底；3、js文件过多的时候，可能会报错，导致js无法正常运行（这种情况极少出现，可以忽略不计）；使用情况：1、当前6种方法均不能解决问题的时候可考虑；2、当png图片过多的时候可考虑，因为png图片太多，使用前面的几个方法，有的会导致CSS代码冗余过多，还不如引入此文件划算；方案8 - PNG8格式的图片解决方案：介绍：png8和gif都是8位的透明度，IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小~思路：一个最简单也最保险的方法让IE6支持PNG图片透明（小小的分享一下）text-t????1.Hack是什么怎么用？1.Border 虚边border: 11.li在ie6与ie8下的高度问题在li样式上加上vertical-align:1.Css常见兼容性问题，如何解决？1.Css常见选择器有哪些？优先级？选择器:优先级:id & class & 层级选择器和标签选择器1.你如何理解绝对定位和相对定位的？都用在什么地方？有什么优点和缺点？绝对定位就是你的位置已经不属于你了，你只能漂浮在半空中。相对定位就是你的位置你还占用的，人还在飘着有意思的是这些都是相对父辈元素有position为相对或者绝对属性来定位的，都找不到的话就以body窗口来定位因为绝对定位（和文档流没关系）如无申明，则其是对与body而言的，处理不好的话。如显示器尺寸变了，可能就会变型。相对定位的元素属文档流，所以稳定的，相对定位是相对他该出现的位置，如无设top left之类，和普通div基本一样。一般的绝对定位是这样用的，父元素要是相对定位的且须有布局，如有个高度，这样子元素用绝对定位，就可以相对它的父元素进行绝对定位，父元素若不这样做，那么子元素用绝对定位其实是相对body定位1.左侧样式固定，右侧文本宽度自适应如何布局看第五十六题面试题.1.下面的布局如何实现,如何不用浮动还能使用什么布局方式定位. 或则flex-box1.HTML静态页面出现中文乱码如何解决？答:1.下列哪个选择器优先级是最高的？a. #a b. .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o c. #a .b d. div.b#a答:d1.写CSS命令，设置字体为宋体，12px大小，颜色为#eeeeee,加粗。一、字体属性主要包括下面几个font-family，font-style，font-variant，font-weight，font-size，fontfont-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;font-weight (字体浓淡): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em如果用font 属性的话，就可以把几个样式进行简化，减少书的情况；font 属性的值应按以下次序书写(各个属性之间用空格隔开)：顺序：font-style | font-variant | font-weight | font-size | line-height | font-family二、font的简写实例.font{font-style:font-variant:small-font-weight:font-size:12line-height:1.5font-family:arial,}上面的样式简写为：.font{font:italic small-caps bold 12px/1.5em arial,}三、font的简写注意事项1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值1.常用布局属性有哪些？有什么特点？margin , padding , position , float1.填空题一个div，css设置如下：{width:200margin:200px 20padding:50px 60px 70border:100overflow:}在IE6怪癖解析下，这个div的实际宽是_360px___？在正常解析下，这个div的实际宽度是_560px___?1.web网页中常见的图片格式有哪些？分别有什么特点？常用的图片格式有JPG、GIF、PNG。1、jpg：jpg全名是JPEG。JPEG图片以 24 位颜色存储单个位图。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。2、gif:GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然是图片文件格式。但GIF只能显示256色。和jpg格式一样，这是一种在网络上非常流行的图形文件格式。3、png：PNG，图像文件存储格式，其设计目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG的名称来源于“可移植网络图形格式(Portable Network Graphic Format，PNG)”，也有一个非官方解释“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读作“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法，一般应用于JAVA程序、网页或S60程序中，原因是它压缩比高，生成文件体积小。1.在HTML中，SEO常见的白帽优化技巧有哪些？1.块属性标签与行属性标签的区别？哪些标签是块属性的，哪些是行的?在标准文档流里面，块级元素具有以下特点：①总是在新行上开始，占据一整行；②高度，行高以及外边距和内边距都可控制；③宽如果不设置,默认是父级的宽度，与内容无关；④它可以容纳内联元素和其他块元素。行内元素的特点：①和其他元素都在一行上；②高，行高及外边距和内边距部分可改变；③宽度只与内容有关；④行内元素只能容纳文本或者其他行内元素。不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用1.IE6和IE7有什么不同？答：I.打开IE7，第一感觉就是简洁干净了许多。主要是去除了工具菜单，按钮图标变得更加圆滑。-transf&?bb?
程序员就是我们的标签
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
&!DOCTYPEhtml&&html&&head&&metacharset=&utf-8&/&&title&3_3HOMEWORK&/title&&scriptsrc=&https://cdnj...
前端开发面试题 前言 只看问题点这里 看全部问题和答案点这里 本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可能的！ 前端...
HTML Doctype作用？标准模式与兼容模式各有什么区别?
（1）、&!DOCTYPE&声明位于位于HTML文档中的第一行，处于
标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
（2）、标准模式...
请参看我github中的wiki，不定期更新。/ivonzhang/Front-End-Developer-Questions/wiki Welcome to the Front-End-Developer-Questions wiki!...
最直接的方法就是使用如下属性设置：imgView.layer.cornerRadius=10;//这一行代码是很消耗性能的imgView.clipsToBounds=YES;这是离屏渲染（off-screen-rendering），消耗性能的给UIImage添加生成圆角图片...
1 台风天闲来无事，找来老电影看了看。 看的是吴孟达主演的《臭屁王》，剧中吴孟达饰演的达叔喜欢上一个失明的卖花女，他每天都会来到卖花女的摊位，假装自己刚从汽车上下来，装作是个有钱人，每天问卖花女买一束花然后送给她，卖花女问他什么模样是不是很帅他也会说还好还好。 而事实上，就...
定义： JavaScript 的 isNaN()函数用于检查参数是不是非数字值。 用法： isNaN(x) x:需要检测的值。
在我们现实生活中无论是创新还是创业，都要通过企业来进行。这本书讲的是企业如何做大的经济学。 企业在生产与经营中会遇到什么问题呢？首先要看企业运行制度背景。不同经济制度下的企业经营目标与运行当时都不同，比如：改革开放前计划经济体制下的企业与今天市场经济下企业就不同。 那么中国...
马上就元旦了吧，没错，我特么又单身了，真棒。那些要给我介绍对象的，如果有特别优秀的，今年我见。记住喔，是特别优秀的。有什么要求嘛，懂礼貌，25+，不要同行括号就是不要男老师，开朗外向（虽然很俗的四个字但我绝不找闷木头），拒绝摩羯座（各位大姨大婶估计也不分什么星座到时候你就问...