web前端开发框架logo Web前端面试的常见面试题汇总

大家平时对前端开发都十分关注，今天为大家整理了web前端开发框架logo Web前端面试的常见面试题汇总，下面就随我爱编程网小编一起来看一下吧。

web前端如何让网页布局稳定性和标准性

为了实现网页布局的稳定性和标准性，我们可以从下面几方面努力：
一、 <!DOCTYPE> 标记的重要性。
位 于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范，我们必需在开头处使用<!DOCTYPE>标记为 所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有 效的XHTML文档，并按指定的文档类型进行解析。
<!DOCTYPE> 标记和浏览器的兼容性相关，删除<!DOCTYPE>，就是把如何展示HTML页面的权利交给浏览器， 这 时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少中显示效果，这是不被允许的。
二、合适地方用到合适的标签
物尽其用人尽其才。 再合适的地方用到合理的标签，对网页布局和优化都有很多的好处，比如logo ，一般我们都用h1 标签包括。 还有理解行内元素和块级元素的区别。
一个页面不要只用div，太多反而太泛滥了。table虽然用的少，但是，再做一些数据处理的时候，还是比较好用的。
三、站在标准流的角度看padding 和 maring 、width等属性稳定性
我们知道页面布局的时候，控制盒子位置距离等，有盒子本身大小，padding和margin来做。
因此，再这里我们会根据稳定性来看这三者的先后顺序：
其中稳定性最好的就是盒子本身的高度和宽度了，我们优先考虑这个。 因此，很多情况下，我们会考虑利用高度剩余法，宽度剩余法来做，而不是padding和margin。
这个评论和下面的文本域框有个小距离， 此时，我们给这个评论一个h3标签，高度正好从评论上方，到文本域上的高度就好了。
h3 里面文字内容默认是靠左上对齐的，高度用不了，就剩下了，这就是高度剩余法。
其次，我们才考虑padding ，因为padding也可以看做特殊的盒子高度和宽度，最后我们再用margin来做。因为margin会有边距合并的问题。
四、标准流、浮动流和定位的稳定性
标准流再里面是最稳定的，就是块级元素上下显示，行内一行显示，都是最稳定的。
浮动和定位都“脱标”了，稳定性没那么稳定，所以，我们应该遵循如下原则：
页面布局，能用标准流去做的不用浮动去做，如果要用浮动做的，就不用定位去做。
五、知己知彼百战百胜
总会有特殊的浏览器，比如ie6 ，这些奇葩浏览器总是有自己独到的地方，那我们怎办? 兵法云，知己知彼百战百胜，因此，需要我们详细的了解这些浏览器自己独特的特性，或者掌握他们ie6常常出现的bug，以及对于css 的理解，那么我们根据他们的不同解析，写出合理的布局。
六、不要让清除内外边距带来麻烦
html, body, ul, li, ol, dl, dd, dt, p, h1, h3, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
这句话，大家都知道，清除浏览器样式的。但是如果你不加，不同浏览器肯定显示不太一样。所以，css的第一句话就是它。还有就是要使用大部分浏览支持的css属性不至于引起不必要的麻烦。

面试Web前端需要注意什么？会面试哪些问题？

作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：

第一：注意自己的仪容仪表

面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。

第二：再次检查面试时所需的资料是否都已带全

这些资料主要包括：身份证明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。

第三：面试之前将通信工具调成振动或关闭状态

虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。

第四：等候面试官时，仔细观察多了解面试公司

在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。

第五：放松心情，保持自信

面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。

作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了，像以上五点细节性的东西也是一定要掌握的。

面试题系列：

网页链接 我爱编程网

Web前端面试的常见面试题汇总

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。





1.渐进增强与优雅降级


渐进增强
并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。


优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。


这两种思想的区别在于：


1.渐进增强是向上兼容，优雅降级是向下兼容;


2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;


3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML
的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。


DOCTYPE是用来声明文档类型和DTD
规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。


HTML5的文档类型声明：





HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML
元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：


"-strict.dtd">


标准模式与怪异模式


怪异模式(Quirks
Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的
DOCTYPE都会触发怪异模式。


浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE
可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。


怪异模式与标准模式的主要区别：


1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:
border-box将标准盒模型转化成怪异模式下的盒模型。


2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。


3.怪异模式下，在表格中的字体样式(如font-size)不会继承。


4.怪异模式下颜色值必须使用十六进制标记法。


3.语义化


HTML5
中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS
样式控制内容的呈现，像 元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。


优点


·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。


·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。


·方便其他设备解析，如盲人阅读器根据语义渲染网页。


·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。


语义化标签


·

定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;


·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;


·article
文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;


·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;


·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;


·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站
logo，搜索框(搜索框作为文档的主要内容);


·aside
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。


4.超链接伪类


:link、:visited、:active和:hover的声明顺序是怎样的?


:link表示未访问的链接状态;


:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。


推荐顺序是LVHA，即:link:visited:hover:active。理由如下：


·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link
之前声明，那么(:hover)就会被覆盖;


·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited
之前声明，那么(:hover)就会被覆盖;


·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active
样式，因此:active在:hover之后声明;


·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和
:visited两者的顺序无所谓，互不影响。


5.CSS常见的长度单位


CSS中除了px长度单位之外，还有下面几个长度单位：


·pc六分之一英寸，1pc=12pt=1/6*1in=16px;


·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸，1in=2.54cm=96px;


·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;


·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;


·rem当用在根元素()的font-size上面时，它代表了它的初始值;


·ch代表元素所用字体font中“0”这一字形的宽度;


·vh1vh相当于视口高度的1%，100vh就是视口的高度;


·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;


·vmax视口高度vw和宽度vh两者中的最小值


·vmin视口高度vw和宽度vh两种中的最大值;


·%相对于父级元素的大小来确定;


参考：CSS [1]


CSSpercentage[2]


6.事件对象


冒泡与捕获


事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。


在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：


·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;


·
然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;


而冒泡与捕获恰恰相反：


·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;


·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;


而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。


addEventListener函数的第三个参数是个布尔值。含义：


·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;


·当布尔值是true时，表示向下捕获触发事件;


不能冒泡的事件


有些事件是不会冒泡的。比如：


·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;


·focus元素获取焦点时触发;


·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;


·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;


事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用
e.target属性可以获取到当前触发事件的子元素。


事件对象中的方法


·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;


·preventDefault()阻止默认事件的发生;


·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div
元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用
stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;


比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click
事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。

paragraph

“


在IE浏览器中，使用e.cancelBubble=true也可以取消事件冒泡;使用e.returnValue=false
也能阻止默认事件的发生。


target与currentTarget


target属性指向的是事件目标，而currentTarget属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而target
指向的可能不是定义时的事件目标。


例如：


div.addEventListener('click',(e)=>{


console.log(e.target,e.currentTarget);


},false);


e.target可能指向div元素，也可能指向它的子元素。而e.currentTarget总是指向div元素。


以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章，希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。


参考资料


[1]


CSSlength:#/zh-CN/docs/Web/CSS/length


[2]


CSSpercentage:
#/zh-CN/docs/Web/CSS/percentage

以上就是今天分享给大家的内容了，想要了解更多前端开发资讯，敬请关注我爱编程网！