BAT and major Internet companies 2014 front-end written test interview questions Html, Css_html/css_WEB-ITnose

Many of the interview questions came from my own experience interviewing BAT. I compiled and shared it in the hope that more front-end ers can make progress together. It is not only suitable for job seekers, but also very helpful for consolidating and reviewing the front-end basics.

And more questions are collected by me along the way, as well as from previous years. The answers are not guaranteed to be correct. If there are any mistakes or better solutions, please correct me.

The first few questions will be very basic, and the more you go, the more in-depth they will become.

Attached is the first article: BAT and major Internet companies 2014 front-end written test interview questions - JavaScript article

Html article:

　1. In which browsers have the pages you created been tested? What are the kernels of these browsers?

IE: trident kernel

Firefox: gecko kernel

Safari: webkit kernel

Opera: presto kernel

Chrome: Blink (based on webkit)

　

　2. There is a very important thing at the beginning of every HTML file, Doctype , do you know what this is for?

Answer: The 1a309583e26acea4f04ca31122d8c535 declaration is located at the frontmost position in the document, before the 100db36a723c770d327fc0aef2ce13b1 tag. This tag tells the browser which HTML or XHTML specification the document uses. (Key point: tell the browser according to which specifications to parse the page)

　3. What is Quirks mode? What is the difference between it and Standards mode

Answer:

Starting from IE6, Standards mode was introduced. In standards mode, the browser tries to give standard-compliant documents the correct specification. Processed to the extent available in a given browser.

CSS was not mature enough before IE6, so browsers before IE5 had poor support for CSS. IE6 will provide better support for CSS. However, problems arise at this time, because there are many The pages are written based on the old layout method, and if IE6 supports CSS, these pages will display abnormally. How to ensure that the existing pages are not destroyed and provide a new rendering mechanism?

We often encounter this problem when writing programs, how to ensure that the original interface remains unchanged and provide more powerful functions, especially when the new functions are not compatible with the old functions. A common approach when encountering this kind of problem is to add parameters and branches, that is, when a certain parameter is true, we use the new function, and if the parameter is not true, we use the old function, so that it does not destroy The original program also provides new functions. IE6 does something similar. It treats DTD as this "parameter". Because no one would write DTD on previous pages, so IE6 assumes that if DTD is written, it means that this page will use better support for CSS. layout, and if not, the previous layout will be compatible. This is Quirks mode (quirks mode, weird mode, weird mode).

Difference:

There are overall differences in three aspects: layout, style parsing and script execution.

Box model: In the W3C standard, if you set the width and height of an element, it refers to the width and height of the element content. In Quirks mode, the width and height of IE also include padding and border. .

Set the height and width of inline elements: In Standards mode, setting wdith and height for inline elements such as 45a2772a6b6107b401db3c9b82c049c2 will not take effect, but in quirks mode, it will take effect. .

Setting the height of percentage: In standards mode, the height of an element is determined by the content it contains. If the parent element does not set a height of percentage, it is invalid for the child element to set a height of percentage. margin:0 auto sets horizontal centering: Using margin:0 auto can center the element horizontally in standards mode, but it will fail in quirks mode.

(There are many more. It doesn’t matter what he answers. The key is to see whether the answers he answered came from his own experience, or whether he read them from articles, or even didn’t know them at all.)

　4. What are the advantages of div css layout over table layout?

It is more convenient when revising the version. Just change the css file.

Page loading speed is faster, the structure is clear, and the page display is simple.

Performance is separated from structure.

Easy to optimize (seo), the search engine is more friendly and it is easier to rank higher.

　5.a: What are the similarities and differences between img’s alt and title? b: What are the similarities and differences between strong and em?

Answer:

a:

alt (alt text): For user agents (UA) that cannot display images, forms or applets, the alt attribute is used to specify replacement text. The language of the replacement text is specified by the lang attribute. (In IE browser, alt will be displayed as tool tip when there is no title)

title(tool tip): This attribute provides suggested information for the element on which this attribute is set.

b:

strong: bold emphasis tags, emphasis, indicating the importance of the content

em: italic emphasis tags, stronger emphasis, indicating the emphasis of the content

　

6. Can you describe the difference between progressive enhancement and graceful degradation?

Progressive enhancement: Build pages for lower version browsers to ensure the most basic functions, and then Then, we will improve the effects and interactions and add additional functions for advanced browsers to achieve a better user experience.

Graceful degradation: Build complete functionality from the beginning, and then make it compatible with lower version browsers.

Difference: Graceful degradation starts from the complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, working version and Continuously expand to meet the needs of future environments. Degradation (functional decay) means looking backward; progressive enhancement means looking forward while keeping its roots in a safe zone.

　

The "graceful degradation" viewpoint

The "graceful degradation" viewpoint believes that websites should be designed for the most advanced and complete browsers. Arrange the testing of browsers that are considered "outdated" or have missing functions at the last stage of the development cycle, and limit the test objects to the previous version of mainstream browsers (such as IE, Mozilla, etc.).

Under this design paradigm, older browsers are considered to only provide a "poor, but passable" browsing experience. You can make some small adjustments to suit a specific browser. But since they are not the focus of our attention, other differences will be ignored except for fixing larger bugs.

The "progressive enhancement" perspective

The "progressive enhancement" perspective believes that focus should be on the content itself.

Content is the reason why we build a website. Some websites display it, some collect it, some seek it, some operate it, and some websites even include all of the above, but the same thing is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. This is why it was immediately adopted by Yahoo! and used to build its "Graded Browser Support (Graded Browser Support)" strategy.

Then there’s the problem. Now the product manager sees that the web page effects of IE6, 7, and 8 are much less rounded corners and shadows (CSS3) than modern browsers of higher versions, and they require compatibility (use image backgrounds and abandon CSS3). How will you convince him?

(Free play)

7. Why is it more effective to use multiple domain names to store website resources?

CDN caching is more convenient

Breaking through browser concurrency limits

Saving cookie bandwidth

Saving main content Number of domain name connections, optimize page response speed

Prevent unnecessary security issues

　8. Please talk about your views on web standards and standards Develop an understanding of the importance of institutions.

(No standard answer) Web standards and standard-setting organizations are all designed to make the development of the web more 'healthy'. Developers follow unified standards, reduce development difficulty and development costs, and SEO will also It is better to do, and it will not cause various bugs and security issues due to misuse of code, which ultimately improves the usability of the website.

　9.Please describe the difference between cookies, sessionStorage and localStorage? 　

　SessionStorage is used to locally store data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage. LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.

The difference between web storage and cookies

The concept of Web Storage is similar to that of cookies, but the difference is that it is designed for larger capacity storage. The size of the cookie is limited, and the cookie will be sent every time you request a new page, which wastes bandwidth. In addition, the cookie needs to specify a scope and cannot be called across domains.

In addition, Web Storage has setItem, getItem, removeItem, clear and other methods. Unlike cookies, front-end developers need to encapsulate setCookie and getCookie themselves. But Cookies are also indispensable: Cookies are used to interact with the server and exist as part of the HTTP specification, while Web Storage is only created to "store" data locally.

　10. Briefly describe the difference between src and href.

Answer:

src is used to replace the current element, and href is used to establish a connection between the current document and the referenced resource.

src is the abbreviation of source, which points to the location of an external resource. The pointed content will be embedded in the document at the location of the current tag; when requesting the src resource, the resource pointed to will be downloaded and applied to the document, such as a js script. , elements such as img pictures and frames.

　eacbf2baa01ef0de186989ea2e77009f2cacc6d41bbb37262a98f745aa00fbf0

When the browser parses this element, it will pause the downloading and processing of other resources until the The resource is loaded, compiled, and executed, as are elements such as pictures and frames, which is similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.

href is the abbreviation of Hypertext Reference, which points to the location of the network resource and establishes a link to the current element (anchor) or current document (link). If we add it to the document

　00ce561e60c89b4d56086fb9a22bf2d6

　 Then the browser will recognize the document as a css file and download the resources in parallel without stopping. Processing of the current document. This is why it is recommended to use the link method to load css instead of using the @import method.

　11. What image formats do you know will be used in web page production?

Answer:

png-8, png-24, jpeg, gif, svg.

But none of the above are the final answers the interviewer wants. The interviewer wants to hear that it's Webp. (Are you paying attention to new technologies and new things)

Popular science Webp : WebP format, an image format developed by Google to speed up image loading. The image compression volume is only about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook Ebay have begun testing and using the WebP format.

　With the same quality, the volume of WebP format images is 40% smaller than that of JPEG format images

　12. Do you know what microformats are? Talk about understanding. Should microformats be considered in front-end builds?

Answer:

Microformats are a collection of machine-readable semantic XHTML vocabulary and are an open standard for structured data. It is a special format developed for special applications.

Advantages: Add smart data to web pages so that website content can display additional tips in the search engine results interface. (Application example: Douban, google it if you are interested)

13. After the css/js code is online, developers often optimize performance. Starting from the time the user refreshes the web page, a js Where are requests generally cached?

Answer: dns cache, cdn cache, browser cache, server cache.

14. There are a large number of pictures on one page (large e-commerce website), and the loading is very slow. What methods do you have to optimize the loading of these pictures and give users a better experience? experience.

Images are loaded lazily. You can add a scroll bar event to the unvisible area on the page to determine the distance between the image position and the top of the browser and the distance between the page and the page. If the former is smaller than the latter, it will be loaded first. .

If it is a slideshow, photo album, etc., you can use image preloading technology to download the previous and next image currently displayed first.

If the image is a css image, you can use CSSsprite, SVGsprite, Iconfont, Base64 and other technologies.

If the image is too large, you can use a specially encoded image. When loading, a particularly compressed thumbnail will be loaded first to improve the user experience.

If the image display area is smaller than the actual size of the image, the image will be compressed first on the server side according to business needs, and the compressed image size will be consistent with the display.

　

　15. How do you understand the semantics of HTML structure? 　

When removed or lost, the page can present a clear structure:

html itself has no performance, we see that for example 4a249f0d628e2318394fd9b75b4636b1 It is bold, the font size is 2em, and it is bold; 8e99a69fbe029cd4e2b854e244eab143 is bold. Don’t think that this is the performance of HTML. In fact, the default CSS style of HTML is working, so when it is removed or the style is lost, the page can be rendered. A clear structure is not an advantage of the semantic HTML structure, but browsers have default styles. The purpose of the default styles is to better express the semantics of HTML. It can be said that the browser's default style and the semantic HTML structure are incompatible. divided.

Screen readers (if the visitor is visually impaired) will "read" your page based entirely on your markup.

For example, if you use semantic markup, the screen reader will will "spell out" your word piece by piece, rather than trying to pronounce it in its entirety.

PDAs, mobile phones and other devices may not be able to render web pages like ordinary computer browsers (usually because these devices have weak support for CSS)

Using semantic markup can ensure that these devices can A meaningful way to render web pages. Ideally, the task of the viewing device is to render the web page consistent with the conditions of the device itself.

Semantic markup provides the device with the relevant information it needs, eliminating the need for It's up to you to consider all possible display situations (including existing or new devices in the future). For example, a mobile phone may choose to display a section of text labeled with a title in bold. A handheld computer may choose to display it in a larger font. to display. Either way once you mark text as a title, you can be confident that the reading device will display the page appropriately on its own terms.

Search engine crawlers also rely on markup to determine Context and the weight of each keyword

In the past, you may not have considered that search engine crawlers are also "visitors" to the website, but now they are actually extremely valuable users. Without them, search engines would not be able to Index your website, and then it will be difficult for general users to visit.

It is very important whether your page is easy to understand for crawlers, because crawlers will largely ignore the markup used for performance and only focus on semantic markup. .

Therefore, if the title of the page file is tagged instead, the page may appear lower in the search results. In addition to improving ease of use, semantic markup facilitates the correct use of CSS and JavaScript. , because it provides many "hooks" to apply the style and behavior of the page.
SEO mainly depends on the content of your website and external links.

Easy for team development and maintenance

W3C has set a good standard for us. Everyone in the team follows this standard, which can reduce many differentiated things and facilitate development and maintenance. Improve development efficiency and even achieve modular development.

　16. Let’s talk about what needs to be considered to do SEO well from the front-end perspective?

Understand how search engines crawl web pages and how to index web pages

You need to know the basic working principles of some search engines, the differences between search engines, search robots (SE robots) How does a web crawler (or web crawler) work, how search engines sort search results, etc.

Meta tag optimization

Mainly includes theme (Title), website description (Description), and keywords (Keywords). There are also other hidden texts such as Author (author), Category (directory), Language (encoding language), etc.

How to select keywords and place keywords on web pages

You must use keywords when searching. Keyword analysis and selection is one of the most important tasks of SEO. First, determine the main keywords for the website (usually around 5), and then optimize these keywords, including keyword density (Density), relevance (Relavancy), prominence (Prominency), etc.

Understand the major search engines

Although there are many search engines, there are only a few that play a decisive role in website traffic. For example, the English ones mainly include Google, Yahoo, Bing, etc.; the Chinese ones include Baidu, Sogou, Youdao, etc. Different search engines have different rules for crawling, indexing, and sorting pages. You also need to understand the relationship between search portals and search engines. For example, AOL uses Google's search technology for web search, and MSN uses Bing's technology.

Main Internet Directory

Open Directory itself is not a search engine, but a large website directory. The main difference between it and search engines is the way in which website content is collected. The directory is manually edited and mainly includes the homepage of the website; the search engine automatically collects it and crawls a large number of content pages in addition to the homepage.

Pay-per-click search engines

Search engines also need to survive. As Internet commerce becomes more and more mature, paid search engines have become popular. The most typical ones are Overture and Baidu, and of course Google's advertising project Google Adwords. More and more people use search engine click ads to locate commercial websites. There is also a lot of knowledge about optimization and ranking. You have to learn to get the most clicks with the least advertising investment.

Search engine login

After the website is completed, don’t lie there waiting for customers to fall from the sky. The easiest way to let others find you is to submit your website to a search engine. If you have a commercial website, the major search engines and directories will require you to pay to be included (e.g. Yahoo charges $299), but the good news is that (at least so far) the largest search engine, Google, is currently free, and it dominates Controls over 60% of the search market.

链接交换和链接广泛度（Link Popularity）

　　网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

合理的标签使用 

　

 

　　Css篇：

　　1.有哪项方式可以对一个DOM设置它的CSS样式？　　

外部样式表，引入一个外部css文件

内部样式表，将css代码放在 93f0f5c25f18dab9d176bd4f6de5d30e 标签内部

内联样式，将css样式直接定义在 HTML 元素内部

　　

　　2.CSS都有哪些选择器？

派生选择器（用HTML标签申明）

id选择器（用DOM的ID申明）

类选择器（用一个样式类名申明）

属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

　　除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如div .a{  }）

群组选择器（利用逗号间隔，比如p,div,#a{  }）　

　　那么问题来了，CSS选择器的优先级是怎么样定义的？

　　基本原则：

　　一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

　　复杂的计算方法：

用1表示派生选择器的优先级

用10表示类选择器的优先级

用100标示ID选择器的优先级

div.test1 .span var 优先级 1+10 +10 +1  

span#xxx .songs li 优先级1+100 + 10 + 1  

#xxx li 优先级 100 +1 

　　那么问题来了，看下列代码，e388a4556c0f65e1904146cc1a846bee标签内的文字是什么颜色的？。

 1 <style> 2 .classA{ color:blue;} 3  4 .classB{ color:red;} 5 </style> 6  7 <body> 8  9 <p class='classB classA'> 123 </p>10 11 </body>

　　答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在4631008f41633acb58a65a2e1e68ad55中的先后关系无关。 

　　

　　3.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？　　

　　最基本的：

　　设置display属性为none，或者设置visibility属性为hidden

　　技巧性：

　　设置宽高为0，设置透明度为0，设置z-index位置在-1000

 

　　4.超链接访问过后hover样式就不出现的问题是什么？如何解决？

　　答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

 

　　5.什么是Css Hack？ie6,7,8的hack分别是什么？

　　答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

　　示例如下：

 1  #test {    2  width:300px;    3  height:300px;    4            5  background-color:blue;      /*firefox*/ 6  background-color:red\9;      /*all ie*/ 7  background-color:yellow\0;    /*ie8*/ 8  +background-color:pink;        /*ie7*/ 9  _background-color:orange;       /*ie6*/    }  10  :root #test { background-color:purple\9; }  /*ie9*/11  @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/12  @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/

 

 

　　6.请用Css写一个简单的幻灯片效果页面

　　答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

 1         /**HTML**/ 2  div.ani  3  4         /**css**/ 5  .ani{ 6  width:480px; 7  height:320px; 8  margin:50px auto; 9  overflow: hidden;10  box-shadow:0 0 5px rgba(0,0,0,1);11  background-size: cover;12  background-position: center;13  -webkit-animation-name: "loops";14  -webkit-animation-duration: 20s;15  -webkit-animation-iteration-count: infinite;16         }17  @-webkit-keyframes "loops" {18  0% { 19  background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             20             }21  25% {22  background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;23             }24  50% {25  background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;26             }27  75% {28  background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;29             }30  100% {31  background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;32             }33  }

 

　　7.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

　　块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

　　内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

　　那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　答案：d5fd7aea971a85678ba271703566ebfd 、a1f02c36ba31691bcfe87b2722de723b 、bb9345e55eb71822850ff156dfde57c8 、8eb5ffa65cae04ba07512d6af56b9a15 、2e1cf0710519d5598b1f0f14c36ba674。

 

　　8.什么是外边距重叠？重叠的结果是什么？

　　答案：

　　外边距重叠就是margin-collapse。

　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

　　折叠结果遵循下列计算规则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

　　

　　9.rgba()和opacity的透明效果有什么不同？

　　答案：

　　rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

　　而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

 

　　10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

　　答案：

　　垂直方向：line-height

　　水平方向：letter-spacing

 

　　那么问题来了，关于letter-spacing的妙用知道有哪些么？

　　答案:可以用于消除inline-block元素间的换行符空格间隙问题。

 

　　11.如何垂直居然一个浮动元素？

 1 // 方法一：已知元素的高宽  2  3 #div1{ 4  background-color:#6699FF; 5  width:200px; 6  height:200px; 7  8  position: absolute; //父元素需要相对定位  9  top: 50%;10  left: 50%;11  margin-top:-100px ; //二分之一的height，width 12  margin-left: -100px;13     }14 15 //方法二:未知元素的高宽 16 17  #div1{18  width: 200px;19  height: 200px;20  background-color: #6699FF;21 22  margin:auto;23  position: absolute; //父元素需要相对定位 24  left: 0;25  top: 0;26  right: 0;27  bottom: 0;28     }

 

　　12.px和em的区别。

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

　　浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

　　

　　

　　觉得题目还ok的亲点个推荐哦，题量会不断增加。

　　你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--JavaScript篇。

　　暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。