Interview questions 2:bat and major Internet companies 2014 front-end written interview questions: Html/css

BAT and major Internet companies 2014 front-end written interview questions: Html/css HTML article:

1. Which of the Web pages do you test? What are the cores of these browsers?

• Ie:trident kernel
• Firefox:gecko kernel
• Safari:webkit kernel
• Opera: formerly the Presto kernel, opera has now switched to Google Chrome's blink kernel
• Chrome:blink (co-developed with Opera Software based on Webkit,google)

2. Every HTML file has a very important thing at the beginning, Doctype, do you know what this is?

Answer: <! The doctype> declaration is positioned at the front of the document, before the

What is 3.Quirks mode? What's the difference between it and the standards model?

Answer:

Starting with IE6, the standards model was introduced, and in standard mode, the browser tried to give the standard document the correct handling of the specification in the specified browser.

Before the IE6 CSS is not mature enough, so IE5 and so on before the browser support for the CSS is very poor, IE6 will provide better support for CSS, however, the problem comes, because there are many pages are based on the old layout, and if the IE6 support CSS will show these pages are not normal, How do you promise not to break existing pages and provide a new rendering mechanism?

We often encounter this problem when writing programs, how to ensure that the original interface is not changed, but also provide more powerful features, especially when the new features are incompatible with the old features. A common practice when encountering this problem is to add parameters and branches, that is, when a parameter is true, we use the new function, and if the argument is not true, the old function is used so that it does not break the original program and provide new functionality. IE6 is also similar to this, it takes the DTD as the "parameter", because the previous page is not going to write the DTD, so IE6 assumes that if the DTD is written, it means that the page will be a better layout for the CSS support, and if not, adopt the layout before the compatibility. This is the quirks mode (quirks mode, weird mode, weird mode).

Difference:

Overall there are three different aspects of layout, style parsing, and scripting execution.

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

Set the aspect of the elements in the line: In standards mode, setting Wdith and height for inline elements such as <span> will not take effect, and in quirks mode it will take effect.

Set the height of a percentage: In standards mode, the height of an element is determined by the content it contains, and if the parent element does not have a percentage set height, the child element sets a percentage height that is not valid with the margin:0 auto setting horizontally centered: Using margin:0 Auto in standards mode allows elements to be centered horizontally, but is invalidated in quirks mode.

(There are many, to answer what is not important, the key is to see if he answers these are their own experience encountered, or is said to read the article, or even do not know. ）

What are the advantages of the 4.DIV+CSS layout compared to the table layout?

• When the revision is more convenient, just change the CSS file.
• The page loads faster, has a clear structure, and the page is simple to display.
• The performance is separated from the structural phase.
• Easy to optimize (SEO) search engines are more friendly and ranked more easily by the front.

What are the similarities and differences between 5.a:img Alt and title? The similarities and differences between B: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 alternate text. The language of the replacement text is specified by the lang attribute. (In IE, you will see ALT as tool tip when there is no title)
• Title (tool tip): This property provides the recommended information for the element that sets the property.

B:

• Strong: Bold emphasis on labeling, emphasizing, the importance of expressing content
• EM: Italic accent labels, more strongly emphasized, highlighting points of content

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

• Progressive Enhancement Progressive Enhancement: build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.
• Graceful downgrade graceful degradation: Build the full functionality from the beginning and then be compatible with the low-version browser.

The difference: Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while the incremental enhancement begins with a very basic, workable version and is continuously expanded to suit the needs of the future environment. Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone.

The "Graceful downgrade" view

The "Graceful downgrade" view is that the site should be designed for the most advanced and sophisticated browsers. Test work in browsers that are considered "obsolete" or functionally missing is scheduled in the final stages of the development cycle, and the test object is limited to the previous version of the main browser (IE, Mozilla, etc.).

In this design paradigm, older browsers are thought to offer only a "poor, but passable" browsing experience. You can make small adjustments to fit a particular browser. But since they are not the focus of our attention, other differences will be ignored in addition to fixing larger errors.

"Progressive enhancement" view

The "progressive enhancement" view is that the focus should be on the content itself.

Content is the incentive for us to build our website. Some sites show it, some collect it, some seek, some operate, and some websites even contain all the above, but the same point is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. That's why it was immediately adopted by Yahoo! and used to build its "tiered browser support (graded Browser)" strategy.

So here's the problem. Now Product manager See ie6,7,8 page effect relatively high version modern browser a lot less fillet, shadow (CSS3), requirements compatible (use picture background, discard CSS3), how will you persuade him?

(Free to play)

7. Why is it more efficient to use multiple domain names to store site resources?

• CDN Cache is more convenient
• Breakthrough Browser Concurrency Limits
• Save Cookie Bandwidth
• Saves the number of connections to the primary domain and optimizes page response times
• Prevent unnecessary security issues

8. Please talk about your understanding of the importance of web standards and standards-setting bodies.

(no standard) web standards and standards-setting agencies are to enable the web development of more ' health ', developers follow the unified standards, reduce development difficulties, development costs, SEO will do better, and will not because of the abuse of code caused by various bugs, security issues, and ultimately improve the usability of the site.

9. Please describe the difference between cookies,sessionstorage and localstorage?

Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage. While Localstorage is used for persistent local storage, the data will never expire unless the data is actively deleted.

The difference between Web storage and cookies

• The concept of WEB storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.
• In addition, WEB storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, and Web Storage is only for local "storage" of data.

10. Briefly describe the difference between src and href.

Answer:

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

SRC is the abbreviation for source, which points to the location of the external resource, which is embedded in the document where the current label is located, and the resources it points to are downloaded and applied to the document when the SRC resource is requested, such as JS scripts, IMG images, and frame elements.

<script src = "js.js" ></script>

When the browser resolves to the element, it pauses the download and processing of other resources until the resource is loaded, compiled, executed, and so on, like pictures and frames, similar to embedding the resource in the current tag. This is why the JS script is placed at the bottom instead of the head.

The HREF is the abbreviation for the hypertext reference, which points to the location of the network resource, establishes the link between the current element (anchor point) or the current document (link), and if we add in the document

<link href= "Common.css" rel= "stylesheet"/>

The browser will then recognize the document as a CSS file, and it will download the resources in parallel and will not stop processing the current document. This is why it is recommended to use the link method to load the CSS instead of using the @import method.

11. What are the image formats that you will use to know your Web page production?

Answer:

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

But none of the above is the final answer the interviewer wants. The interviewer wants to hear the WEBP. (Are you interested in new technology, fresh things)

Popular Science WEBP: WEBP format, a graphic format developed by Google (Google) to speed up the loading of pictures. Image compression volume is about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites like Facebook and ebay have started testing and using the WEBP format.

In the same quality, the WEBP format image is 40% smaller than the JPEG format image

12. Know what a micro format is? Talk about understanding. Should I consider micro-formats in front-end builds?

Answer:

Micro-format (microformats) is a set of semantic XHTML vocabularies that make machine readable, and an open standard for structured data. is a special format for special applications.

Pros: Add smart data to a Web page, allowing the site content to display additional hints in the search engine results interface. (Application example: watercress, interested in self-Google)

13. After the CSS/JS code is on-line, developers often optimize performance, starting from the user Refresh page, a JS request in general where there will be cache processing?

Answer: DNS cache, CDN cache, browser cache, server cache.

14. A large number of pictures on a page (large e-commerce site), loading is very slow, you have ways to optimize the loading of these images, to give users a better experience.

• Picture lazy loading, in the non-viewable area of the page can add a ScrollBar event, to determine the location of the image and the top of the browser distance from the page, if the former is less than the latter, priority loading.
• If you have a slideshow, photo album, and so on, you can use the picture preload technology to download the previous and next first pictures of the current display.
• If the picture is a CSS picture, you can use Csssprite,svgsprite,iconfont, Base64 and other techniques.
• If the picture is too large, you can use a specially encoded image that loads with a specially compressed thumbnail to enhance the user experience.
• If the picture display area is smaller than the true size of the picture, the image is compressed and the size is consistent with the display, because the image is compressed on the server side according to business needs.

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

• Remove or lose the style to make the page appear clear structure:

HTML itself is not performance, we see for example

• A screen reader (if the visitor has a visual impairment) will "read" your page exactly according to your tag.

For example, if you use a semantic tag, the screen reader will "spell out" your words, instead of trying to pronounce them completely.

• PDAs, mobile phones and other devices may not be able to render web pages like normal computer browsers (usually because these devices are less supportive of CSS)

Use semantic tags to ensure that these devices render Web pages in a meaningful way. Ideally, the task of viewing the device is to render the Web page in accordance with the conditions of the device itself.

Semantic tagging provides the device with the information it needs, eliminating the need for you to consider all possible display scenarios (including existing or future new devices). For example, A mobile phone can choose to make a piece of text marked with a headline appear in bold. The PDA may be displayed in a larger font. Either way, once you mark the text as a caption, you can be confident that the reading device will display the page appropriately based on its own criteria.

• Search engine crawlers also rely on tags to determine the context and weight of individual keywords

In the past you may not have considered search engine crawlers to be the site's "visitors", but now they are actually extremely valuable users. Without them, the search engine will not be able to index your site, and then the average user will be very difficult to come over to visit.

• It is important that your page is easily understood by crawlers, because the crawler largely ignores markup for performance and only focuses on semantic tagging.

Therefore, if the title of the page file is marked instead of, then the location of the page in the search results may be compared. In addition to improving ease of use, semantic tagging facilitates the correct usage of CSS and JavaScript, since it provides many "hooks" to apply the style and behavior of the page.

SEO is mainly by the content of your site and external links.

• Facilitates team development and maintenance

We have set a very good standard, in the team we all follow this standard, can reduce a lot of differentiated things, convenient development and maintenance, improve development efficiency, and even achieve modular development.

16. Talk about the front-end point of view to do SEO need to consider what?

• Learn how search engines crawl Web pages and how to index them

You need to know the basic workings of some search engines, the differences between search engines, how the search robot (SE robot or web crawler) works, how search engines sort the results, and so on.

• Meta tag optimization

Mainly includes the theme (Title), website description (Description), and Keywords (Keywords). There are other hidden text such as author (author), category (directory), Language (encoded language), etc.

• How to select keywords and place keywords in web pages

Search has to use keywords. Keyword analysis and selection is one of the most important tasks in SEO. First of all to the site to determine the main keywords (generally 5 up and down), and then to optimize for these keywords, including keyword density (Density), correlation (relavancy), prominence (prominency) and so on.

• Learn about the main search engines

Although there are many search engines, there are a few things that can make a difference to the website traffic. For example, the main English has google,yahoo,bing, such as Baidu, Sogou, Youdao and so on. Different search engines do not have the same rules for crawling and indexing or sorting pages. Also understand the relationship between search portals and search engines, such as AOL Web search using Google's search technology, MSN with Bing Technology.

• The main Internet directory

Open directory itself is not a search engine, but a large site directory, and the main difference between him and the search engine is that the content of the site is collected differently. The catalogue is manually edited, mainly includes the homepage of the website, the search engine is collected automatically, besides the homepage also crawls a lot of content page.

• Pay-per-click search Engines

Search engines also need to survive, with the growing sophistication of Internet commerce, the search engine fees are also beginning to big line. The most typical are overture and Baidu, and of course Google Adwords, which also includes Google's advertising program. More and more people use search engine Click Ads to locate the business site, which also has a lot of optimization and ranking of learning, you have to learn to spend the least amount of advertising to get the most clicks.

• Search Engine Login

After the website is finished, don't lie there waiting for the guests to fall from the sky. The easiest way to get someone to find you is to submit the site to a search engine. If you're a business site, the main search engines and catalogs will require you to pay for the collection (such as Yahoo $299), but the good news is that (at least so far) the biggest search engine Google is still free, and it dominates more than 60% of the search market.

• Link Exchange and link-wide degrees (link popularity)

Web content is hyperlinked to each other in hypertext (hypertext), as is the case between websites. In addition to search engines, people also surfing ("surfing") every day through links between different websites. The more links you have to your site from other sites, the more traffic you will get. What's more, the more external links you have to your site, the more important the search engine thinks it is, and gives you a higher ranking.

• Use of reasonable labels

CSS article:

1. Is there a way to set its CSS style on a DOM?

• External style sheet, introducing an external CSS file
• Internal style sheet, placing CSS code inside the
• inline style, which defines the CSS style directly inside the HTML element

What selectors are available in 2.CSS?

• Derived selectors (declared with HTML tags)
• ID selector (declared with Dom's ID)
• Class selector (declared with a style class name)
• Property Selector (with Dom property declaration, belongs to CSS2,IE6 not supported, not commonly used, do not know to forget)

In addition to the first 3 basic selectors, there are some extension selectors, including

• Descendant selectors (using space spacing, such as Div. a{})
• Group selector (using comma interval, such as P,div, #a {})

So the question is,how is the precedence of CSS selectors defined?

Basic principles:

In general, the more special The selector, the higher its priority. The more accurate the selector is, the higher its priority.

Complex calculation methods:

• The priority of the derived selector is expressed in 1
• Use 10 to indicate class selector precedence
• The priority of the ID selector is marked with 100
• • Div.test1. span var priority 1+10 +10 +1
  • Span#xxx. Songs Li priority 1+100 + 10 + 1
  • #xxx-li Priority 100 +1

So here's the question, what color is the text in the tag,<p> the following code?

Javascript

1234567891011

<style>.classa{Color:blue;}. classb{color:red;} </style> <body> <p class= ' ClassB ClassA ' > 123 </p> </body>

Answer: Red. Related to the order in which the style definition is in the file, that is, the back of the overlay, regardless of the succession relationship in <p class= ' ClassB ClassA ' >.

What attributes can be defined in 3.CSS so that a DOM element does not appear in the browser's viewable range?

The most basic:

Set the Display property to None, or set the visibility property to hidden

Skill:

Set the width height to 0, set the transparency to 0, set the Z-index position at-1000

4. What is the problem with hover styles after hyperlinks have been accessed? How to solve?

Answer: The clicked Hyperlink style does not have hover and active, the workaround is to change the order of CSS properties: l-v-h-a (link,visited,hover,active)

5. What is CSS Hack? What are the hack of ie6,7,8?

Answer: The process of writing different CSS code for different browsers is CSS hack.

Examples are as follows:

Javascript

123456789101112

#test        {          width :300px;          height:300px;            background-color:blue;      /*firefox*/         background-color:red\9;      /* All ie*/        background-color:yellow;    /*ie8*/         +background-color:pink;         /*ie7*/        _background-color:orange;       /*ie6*/    }           : Root #test {background-color:purple\9;}   /*ie9*/     @media All and (min-width:0px) {#test {backgRound-color:black;} }  /*opera*/     @media screen and (-webkit-min-device-pixel-ratio:0) {#test { Background-color:gray;} }      /*chrome and safari*/

6. Please write a simple slide effect page in CSS

Answer: Know is to use CSS3. Use animation animations to achieve a simple slide effect.

Css

123456789101112131415161718192021222324252627282930313233

/**html**/        div.ani          /**css**/        .ani{           width:480px;          height:320px;           margin:50px auto;           overflow:hidden;           box-shadow:0 0 5px Rgba (0,0,0,1);          background-size:cover;           background-position:center;           -webkit-animation-name: "Loops";           -webkit-animation-duration:20s;          - Webkit-animation-iteration-count:infinite;        }         @-webkit-keyframes "Loops" {             0% {                 Background:url (http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/ e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;                         }             25% {                 background:url (http://b.hiphotos.baidu.com/image/w%3D400/sign= edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;             }            50% {                 background:url (HTTP// b.hiphotos.baidu.com/image/w%3d400/sign=937dace2552c11dfded1be2353266255/ d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;             }            75% {                 background:url (HTTP// g.hiphotos.baidu.com/image/w%3d400/sign=7d37500b8544ebf86d71653fe9f9d736/ 0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;             }            100% {                 background: URL (http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/ 3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;             }        }

7. What are the specific differences between inline and block-level elements? Can the padding and margin of the inline elements be set?

Block-level element features:

• Always exclusive one line, showing the beginning of another row, and the subsequent elements must be displayed on a separate line;
• width, height, padding (padding) and margin (margin) can be controlled;

inline element (inline) Characteristics:

• and adjacent inline elements on the same line;
• Top/bottom (Margin-top/margin-bottom) for width (width), height, padding, top/bottom (padding-top/padding-bottom), and margin are immutable (that is, the left and right of padding and margin can be set), that is, the size of the text or picture inside.

So the problem is, the browser also has the default natural inline-block element ( with intrinsic dimensions, can be set to high width, but not automatically wrapped ), what ?

Answers:<input>, , <button>, <texterea>, <label>.

8. What is margin overlap? What are the overlapping results?

Answer:

margin overlap is margin-collapse.

In CSS, the margins of the adjacent two boxes (which may be sibling or ancestor relationships) can be combined into a single margin. This way of merging the margins is known as folding, and thus the outer margin that is combined is called the folded margin.

The collapsed results follow the following calculation rules:

1. When two adjacent margins are positive, the collapsed result is a larger value between them.
2. When two adjacent margins are negative, the collapsed result is a larger value of both absolute values.
3. Two outer margin a positive and negative, the result of folding is the sum of the two.

What is the difference between the transparency of 9.rgba () and opacity?

Answer:

Both Rgba () and opacity can achieve transparency, but the biggest difference is that opacity acts on the element, as well as the transparency of all content within the element,

The RGBA () is used only for the color of the element or its background colors. (Setting the child elements of an RGBA transparent element does not inherit the transparency effect!) ）

What are the two properties in 10.css that allow text to overlap vertically and horizontally?

Answer:

Vertical direction: Line-height

Horizontal direction: letter-spacing

So the question comes, what do you know about Letter-spacing's magical magic?

Answer: Can be used to eliminate the spaces gap between inline-block elements.

11. How do I vertically center a floating element?

Css

12345678910111213141516171819202122232425262728

//Method One: High width   #div1 of known elements {    background-color: #6699FF;     width :200px;    height:200px;     position:absolute;         //parent element requires relative positioning     top:50%;    left:50%;     margin-top:-100px;  //One-second Height,width    margin-left:- 100px;    } //method Two: High width     #div1 {    width:200px; of unknown elements     height:200px;    background-color: #6699FF;      margin:auto;    position:absolute;        // Parent element requires relative positioning     left:0;    top:0;    right:0;     bottom:0;    }

so the question comes, how to center a vertically; (in a more convenient way.) ）

Css

123456

The container of the #container// is set as follows {Display:table-cell;    Text-align:center; Vertical-align:middle;}

The difference between 12.px and EM.

PX and EM are length units, the difference is that the PX value is fixed, specifying how much is how much, the calculation is relatively easy. The EM value is not fixed, and EM inherits the font size of the parent element.

The browser's default font height is 16px. So the unmodified browser is compliant with: 1EM=16PX. So 12px=0.75em, 10px=0.625em.

13. Describe a "reset" CSS file and how to use it. You know normalize.css? Do you know the difference between them?

There are so many reset styles that a front-end developer must have a common reset CSS file and know how to use them. Are they doing it blindly or do they know why? The reason is that different browsers have different default styles for some elements, and if you don't deal with them, there will be the necessary risk in different browsers, or more dramatic sexual occurrences.

You may use normalize to replace your reset style file. It does not reset all style styles, but only provides a reasonable set of default style values. It allows a wide range of browsers to be consistent and reasonable without disturbing other things (such as bold headings).

In this regard, it is not possible to do every reset reset. It also does have more than one reset, which deals with quirks you'll never have to think about, like HTML audio elements that are inconsistent or line-height inconsistent.

What is 14.Sass and less? Why do you use them?

They are CSS pre-processors. He is a layer of abstraction on CSS. They are a special kind of grammar/language compiled into CSS.

For example, less is a dynamic style language. CSS is assigned to dynamic language features such as variables, inheritance, operations, and functions. Less can be run on the client (ie 6+, Webkit, Firefox) or on the server (with node. js).

Why use them?

• The structure is clear and easy to expand.
• It is easy to block browser private syntax differences. This needless to say, the package of browser syntax differences in the repetition of processing, reduce meaningless mechanical labor.
• Multiple inheritance can be easily implemented.
• Fully compatible with CSS code, can be easily applied to the old project. Less just expands on CSS syntax, so old CSS code can also be compiled with less code.

What is the difference between 15.display:none and Visibility:hidden?

• display: hides the corresponding element without crowding out the original space of the element.
• Visibility: hides the corresponding element and crowding out the original space of the element.

That is, after using the CSS Display:none property, the various attribute values, such as the width and height of the HTML element (object), are "lost", and the HTML element (object) is only visually invisible (completely transparent) after using the Visibility:hidden property. And the space it occupies is still there.

Face question 2:bat and major Internet companies 2014 front-end written interview questions: Html/css article