Finishing the 2014 major internet companies front html,css Pen test

HTML article:

1. What browser have you done to test the page? What are the kernels 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 (based on Webkit,google and Opera Software jointly developed)

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

Answer: <! The doctype> declaration is in the front of the document, before the
What is 3.Quirks mode? What's the difference between it and standards mode?

Answer:

Starting with IE6, the standards mode is introduced, in standard mode, the browser attempts to properly handle compliant documents in a specified browser.

CSS is not mature enough before IE6, so IE5 and so on before the browser to support the CSS is very poor, IE6 will provide better support for CSS, but then the problem comes, because there are many pages are based on the old layout of the way, and if IE support CSS will these pages appear abnormal, How to ensure that you do not destroy existing pages, but also provide a new rendering mechanism?

When writing programs, we often encounter such problems, how to ensure that the original interface is not changed, but also provide more powerful features, especially when the new features are not compatible with the old features. A common practice when encountering this type of problem is to add parameters and branching, that is, when a parameter is true, we use the new feature, and if the parameter is not true, use the old feature, so that it can not break the original program, but also provide new features. IE6 is doing the same thing, it takes the DTD as the "parameter", because the previous page is not written to the DTD, so IE6 assumes that if the DTD is written, it means that the page will have a better layout for CSS, and if not, a compatible layout. This is the quirks pattern (quirk pattern, weird mode, weird mode).

Difference:

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

Box model: In the standard of the consortium, if you set the width and height of an element, it refers to the width and height of the element's content, while in quirks mode, the width and height of IE include padding and border.

Sets the width of an inline element: In standards mode, setting Wdith and height for <span>, and so on, will not take effect, and in quirks mode, it takes 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 set a percentage height, the child element sets a percentage of the height is not valid with margin:0 Auto Set horizontal center: Use margin:0 Auto in standards mode enables elements to be centered horizontally, but is invalidated in quirks mode.

(There are a lot, the answer is not important, the key is to see if he answered these are not their own experience encountered, or said to read the article, or even completely unaware. ）

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

Revision of the time is more convenient as long as the CSS file changes.
The page loads faster, the structure is clear, the page displays succinctly.
The performance is separated from the structure.
Easy to optimize (SEO) search engines are more friendly, ranking easier than before.

What are the similarities and differences between 5.a:img's ALT and title? Similarities and differences of 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 alternate text is specified by the lang attribute. (Alt will be displayed as tool tip in IE browser without title)
Title (tool tip): This property provides the recommended information for the element that sets the property.

B:

Strong: Bold emphasis on labeling, emphasizing, expressing the importance of content
EM: Italic accent Tag, more strongly emphasized, denotes the emphasis point of content

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

Progressive Enhancement Progressive Enhancement: build pages for lower-version browsers, ensure the most basic functionality, and then achieve a better user experience with improved and additional functionality for advanced browsers, such as effects, interactions, etc.
Graceful demotion graceful degradation: build complete functionality at the outset and then be compatible with a lower version of the browser.

Difference: Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while progressive enhancement starts with a very basic, functional version and expands to suit the needs of the future environment. Demotion (functional decay) means looking back, and progressive enhancement means looking ahead while keeping its roots safe.

The "Graceful downgrade" view

The "Graceful downgrade" view is that the Web site should be designed for the most advanced and perfect browsers. The test work in browsers that are considered "outdated" or functionally missing is scheduled at the end of the development cycle, and the test object is limited to the previous version of the mainstream browser (IE, Mozilla, etc.).

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

"Progressive enhancement" view

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

Content is the incentive for us to build our website. Some websites show it, some collect it, some seek, some operate, and some sites even contain all the above, but the same point 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 "Hierarchical browser support (graded Browser Support)" strategy.

So the question. Now product manager See ie6,7,8 Web page effect relatively high version of modern browser less rounded, shaded (CSS3), requirements compatible (use picture background, give up CSS3), how would you persuade him?

(Free play)

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

CDN Caching is more convenient
Break through browser concurrency restrictions
Save Cookie Bandwidth
Save the connection number of the main domain name, optimize the page response speed
To prevent unnecessary security problems

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

Web standards and standard-setting institutions are designed to make web development more ' healthy ', developers follow the unified standard, reduce the difficulty of development, development costs, SEO will do better, also will not because of abuse of code to cause a variety of 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 the data is destroyed when the session ends. So sessionstorage is not a persistent local store, it's just session-level storage. The localstorage is used for persistent local storage, and 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 cookies, except that it is designed for greater capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent to the past, which wastes bandwidth, and the cookie needs to specify the scope and not be called across domains.
In addition, WEB storage have methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. But cookies are also unavailable or missing: Cookies are used to interact with the server and exist as part of the HTTP specification, and the Web Storage is intended only for storing 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 for source, point to the location of the external resource, the content will be embedded in the document in the location of the current label, when the SRC resource is requested to download and apply the resources to the document, such as JS script, img pictures and frame and other elements.

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

When the browser resolves to the element, it suspends downloading and processing of other resources until the resource is loaded, compiled, executed, and so on, such as pictures and frames, similar to embedding the resource in the current tab. This is why the JS script is placed at the bottom rather than the head.

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

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

If the browser recognizes the document as a CSS file, it downloads the resource in parallel and does not stop processing the current document. This is why it is recommended that you use link to load CSS instead of using the @import method.

11. What is the format of the picture that you know will be used for Web page production?

Answer:

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

But those are not the last answers the interviewer wants. The interviewer wants to hear Webp,apng. (whether there is a focus on new technology, new things)

Popular Science WEBP:WEBP format, Google (Google) developed a graphic designed to speed up the image loading speed of the picture format. Picture compression volume is approximately 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook ebay have started testing and using the WEBP format.

In the case of the same quality, the volume of the WEBP format image is 40% smaller than the JPEG format image.

Apng: Full name is "animated Portable Network Graphics", is the PNG bitmap animation extension, can realize the PNG format dynamic picture effect. 04 was born, but has not been the support of major browser vendors, until recently received IOS Safari 8 support, is expected to replace GIF to become the next generation of dynamic map standards.

12. Do you know what a micro format is? Talk about understanding. Should the micro format be considered in the front-end build?

Answer:

Micro-format (microformats) is a collection of machine-readable semantic xhtml words, which is an open standard for structured data. is a special format for special applications.

Advantages: Add intelligent data to the Web page, so that the site content in the search engine results interface can display additional hints. (Application example: watercress, interested in google)

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

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

14. A large number of pictures on a page (large electric Dealer website), loading is very slow, you have any way to optimize the loading of these pictures, to give users a better experience.

The picture lazy load, in the invisible area on the page can add a scroll bar event, judge the picture position and the top of the browser distance from the page, if the former is less than the latter, priority loading.
If for slides, albums, etc., you can use the picture preload technology, the current display picture of the previous one and the next one priority to download.
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 picture to load a particularly powerful thumbnail to improve the user experience.
If the picture display area is less than the actual size of the picture, because the server side according to the business needs of the first image compression, image compression size and display consistent.

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

When you remove or lose style, you can make the page appear in a clear structure:

HTML itself is not expressive, we see for example
Screen readers (if visitors have visual impairments) will "read" your Web page entirely according to your logo.

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

Devices such as PDAs and mobile phones may not be able to render web pages like regular computer browsers (usually because they are less supportive of CSS).

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

Semantic tagging provides the necessary information for the device, leaving you to consider all possible displays (including existing or future new devices). For example, A mobile phone you can choose to make a paragraph marked with a title in bold. The handheld may be displayed in a larger font. Either way, once you mark the text as a caption, you can be sure that the reading device will display the page appropriately according to its own criteria.

Search engine crawler also relies on tags to determine the context and the weight of each keyword

In the past you may not have considered the search engine crawler is also the site "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 the crawler, because the crawler largely ignores the markup used for performance, but only the semantic markup.

Therefore, if the title of the paging file is marked instead of, the page may be in the position of the search results. In addition to improving ease of use, semantic tagging facilitates the proper usage 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 site and external links.

Facilitate team development and maintenance

The consortium has given us a very good standard, in the team we all follow this standard, you can reduce a lot of different things, convenient development and maintenance, improve development efficiency, and even realize the modular development.

16. What do you need to think about SEO?

Find out 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 search bots (SE robot or web crawler) work, how search engines sort search results, and so on.

Meta tag optimization

Main topics include title, website description (Description), and Keywords (Keywords). There are other hidden words such as author (author), Category (catalogue), Language (code language), etc.

How to select keywords and place keywords in a Web page

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

Understand the main search engine

Although the search engine has a lot of, but to the website traffic decides the function is so few. For example, the main English has google,yahoo,bing and so on, the Chinese have Baidu, Sogou, Youdao and so on. Different search engines on the page crawl and indexing, sorting rules are not the same. 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 web site directory, he and the main difference between the search engine is the content of the site to collect different ways. Catalog is manually edited, mainly included in the site homepage, search engine is automatically collected, in addition to the home page also grab a lot of content pages.

Pay-per-click Search Engines

Search engines also need to survive, as the internet business is becoming more and more mature, the search engine fees are also beginning to do a great way. The most typical are overture and Baidu, and of course Google's advertising program, Google Adwords. More and more people through the search engine's click ads to locate the business site, which also has a great deal of optimization and ranking of knowledge, you have to learn to use the least advertising input to get the most clicks.

Search Engine Login

After the website is finished, don't lie there waiting for the guest to fall from the sky. The easiest way to get someone to find you is to submit the site (submit) to the search engine. If you are a commercial site, the main search engines and directories will require you to pay for the collection (such as Yahoo to 299 dollars), but the good news is (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 breadth (link popularity)

The content of the Web page is a hypertext (hypertext) way of linking to each other, and so is the case between websites. In addition to search engines, people surfing ("surf") every day through links between different websites. The more links other websites have to your site, the more traffic you will get. More importantly, the more external links you have on your site, the more important the search engine thinks it is, giving you a higher ranking.

Reasonable use of labels

CSS article:

1. What is the way to set its CSS style for a DOM?

External style sheet, introducing an external CSS file
Internal style sheets, placing CSS code inside inline style, defining CSS styles directly inside HTML elements

2.CSS What are the selectors?

Derivation selector (declared with HTML tag)
ID selector (declared with the DOM ID)
Class selector (declared with a style class name)
Attribute selector (with the properties of the Dom declaration, belong 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 intervals, such as Div. a{})
Group selector (using comma interval, such as P,div, #a {})

So the question is, what is the definition of the CSS selector priority?

Basic principles:

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

Complex methods of calculation:

Use 1 to indicate the priority of the derivation selector
Use 10 to indicate the priority of the class selector
Use 100 to mark the priority of the ID selector
Div.test.span var priority 1+++1
Span#xxx. Songs Li priority 1+100 + + 1
#xxx-li Priority 100 +1

So the question is, look at the following code,<p> the text in the label is what color?

code is as follows	copy code
<style>  .classa{Color:blue;}    .classb{color:red;}  </style>    <body>   <p class= ' ClassB classa ' > 12</p </body>

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

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

The most basic:

Either set the Display property to none or set the visibility property to hidden

Skill:

Set width to 0, set transparency to 0, set Z-index position in-1000

4. What is the problem that the hover style does not appear after the hyperlink access? How to solve?

Answer: The hyperlink style that has been clicked on has not been hover and active, the solution is to change the order of CSS attributes: 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:

The code is as follows

Copy Code

#test { width:300px; height:300px; Background-color:blue; /*firefox*/ BACKGROUND-COLOR:RED9; /*all ie*/ Background-color:yellow; /*ie8*/ +background-color:pink; /*ie7*/ _background-color:orange; /*ie6*/} : Root #test {background-color:purple9;} /*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 use CSS to write a simple slide effect page

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

The code is as follows

Copy Code

/**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 (yun_qi_img/e824b899a9014c08e5e38ca4087b02087af4f4d3.gif) no-repeat; } 25% { Background:url (yun_qi_img/30adcbef76094b364d72bceba1cc7cd98c109dd0.gif) no-repeat; } 50% { Background:url (yun_qi_img/d8f9d72a6059252d258e7605369b033b5bb5b912.gif) no-repeat; } 75% { Background:url (yun_qi_img/0df431adcbef76095d61f0972cdda3cc7cd99e4b.gif) no-repeat; } 100% { Background:url (yun_qi_img/3b87e950352ac65ce2e73f76f9f2b21192138ad1.gif) no-repeat; } }

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

Block-level element (blocks) attribute:

Always an exclusive line, which begins with another line, and the elements that follow must also be displayed on a separate line;
width, height, interior margin (padding) and outer margin (margin) are controllable;

inline element (inline) attributes:

and adjacent inline elements on the same line;
width, height, top/bottom (padding-top/padding-bottom) of the inner margin, and top/bottom of the outer margin (Margin-top/margin-bottom) Cannot be changed (that is, the left and right of padding and margin can be set), which is the size of the text or picture inside.

So the problem is, browsers also have the default natural inline-block elements (with intrinsic size, can be set to high width, but do not automatically wrap), what are?

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

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

Answer:

The outer margin overlap is margin-collapse.

In CSS, the outer margin of the adjacent two boxes (which may be sibling or ancestral) can be combined into a single outer margin. This method of merging the outer margins is called folding, and thus the outer margin that is combined is called the outer margin of the fold.

The collapsed results follow the following calculation rules:

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

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

Answer:

RGBA () and opacity can all achieve transparency, but the biggest difference is that opacity acts on elements and 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 a 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 is, what do you know about Letter-spacing's magical uses?

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

11. How do I center a floating element vertically?

The code is as follows

Copy Code

Method One: The high width of the known element #div1 { Background-color: #6699FF; width:200px; height:200px; Position:absolute; Parent element needs relative positioning top:50%; left:50%; margin-top:-100px; One-second of Height,width Margin-left: -100px; } Method Two: The high width of unknown elements #div1 { width:200px; height:200px; Background-color: #6699FF; Margin:auto; Position:absolute; Parent element needs relative positioning left:0; top:0; right:0; bottom:0; }

So the question is, how do you vertically center a ?? (in a simpler way.) ）

The code is as follows	Copy Code
The container for #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 PX value is fixed, the number of specified is how much, calculation is relatively easy. The EM value is not fixed, and EM inherits the font size of the parent element.

The default font height for browsers is 16px. So the unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em, 10px=0.625em.

13. Describe a "reset" CSS file and how to use it. Do 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 is a need for risk in different browsers, or more dramatic sexual occurrences.

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

In this respect, it is not possible to do each reset reset. It does have some more than one reset, which deals with quirks that you never have to consider, like HTML audio elements or line-height inconsistencies.

14.Sass, what is less? Why do people use them?

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

For example, less is a dynamic style language. CSS is given the characteristics of dynamic language, such as variables, inheritance, operations, functions. Less can be run either on the client (ie 6+, Webkit, Firefox) or on the server (with the help of Node.js).

Why do you use them?

The structure is clear and easy to expand.
You can easily screen out browser private syntax differences. This needless to say, encapsulation of browser syntax differences in the duplication of processing, reduce the senseless mechanical labor.
Multiple inheritance is easy to implement.
Fully compatible with CSS code, can be easily applied to old projects. Less only expands on CSS syntax, so older 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 property values, such as the width and height of the HTML element (object), are "lost", and when the Visibility:hidden property is used, the HTML element (object) is visually invisible (completely transparent), and the spatial position it occupies remains.

16. Do you know that CSS has a content attribute? What's the effect? What's the application?

Answer:

Know. The content properties of CSS are specifically applied on before/after pseudo elements to insert the generated content.

The most common application is to use pseudo classes to clear floats.

The code is as follows	Copy Code
A common use of pseudo classes to clear floating code . clearfix:after { Content: "."; The content attribute is used here Display:block; height:0; Visibility:hidden; Clear:both; } . clearfix { *zoom:1; }

The

After pseudo element generates a block-level element with content at the back of the element, using Clear:both to clear the float.

So the question continues. Do you know that the CSS counter (sequential numeric characters are automatically incremented)? How do I implement CSS counters through CSS content properties?

Answer: CSS counters are implemented by setting Counter-reset, counter-increment two properties, and counter ()/counters () One method with the After/before pseudo class.