The most comprehensive front-end questions (including answers) and answers in history

The most comprehensive front-end questions (including answers) and answers in history

HTML + CSS
1. Understanding and understanding of WEB standards and W3C
Tag closure, lower-case tags, non-chaotic nesting, increased search robot search probability, use of external link css and js scripts, separation of structure behavior, faster file download and page speed, more content users can access more devices, and have fewer code and components, it is easy to maintain and revise, and does not need to change the page content, provide print versions, but do not need to copy content, to improve the ease of use of the website;

2.what is the difference between XHTML and html?
HTML is a basic WEB page design language. XHTML is an XML-based markup language.
Major differences:
XHTML elements must be correctly nested.
The XHTML element must be disabled.
The tag name must contain lowercase letters.
The XHTML document must have the root element.

3. Doctype? Strict mode and hybrid mode-how to trigger these two modes and distinguish between them?
Used to declare that the document uses that specification (html/Xhtml) is generally a framework-based html document.
The XMl declaration can be triggered, and the parsing method is changed to IE5.5 with IE5.5 bug

4. What are the elements in the row? What are the block-level elements? CSS box model?
Block-level element: div p h1 h2 h3 h4 form ul
Row Element: a B br I span input select
Css box model: content, border, margin, padding

5. What methods does CSS introduce? What is the difference between link and @ import?
Inline external link Import
Difference: loading at the same time
The former is not compatible, and the latter is not supported by the following browsers: CSS2.1
Link supports using javascript to change the style. The latter cannot

6. What are CSS Selection Characters? What attributes can be inherited? How is the priority algorithm calculated? Which of the following is the highest priority for inner and important?
Tag selector class selector id Selector
It is better to specify the Id> class> label selection for inheritance.
The latter has a high priority.

7. What are the three layers of front-end pages? What is the role?
Structural layer Html presentation layer CSS behavior layer js

8.what are the basic statements of CSS?
Selector {attribute 1: value 1; Attribute 2: Value 2 ;......}

9. Which browser have you tested on the page? What are the kernels of these browsers?
Ie (Ie kernel) Firefox (Gecko) Google (webkit) opear (Presto)

10. Write several solutions to IE6 bugs
1. display caused by bilateral float
Use dislpay: inline-3px due to float 2.3 pixel Problems
3. Click the hyperlink hover and use the correct writing sequence link visited hover active
4. For Ie z-index, add position: relative to the parent level.
5. Png transparent use js Code Change
6. Min-height minimum height! Important work'
7. select uses iframe nesting in ie6
8. Why is there no way to define the width container of around 1 px (IE6 is caused by the Row height by default, using over: hidden, zoom: 0.08 line-height: 1px)

11. What is the difference between the title and alt attributes on the tag?
Alt is represented by text when the image is not displayed.
Title provides information for this attribute

12. Describe the function and purpose of css reset.
Reset the default css attribute of the browser. The browser has different types and styles, and then Reset them to unify them.

13. explain how to use css sprites.
The Css genie integrates a bunch of small images into a large image to reduce the number of requests from the server to the image.

14. What is the difference between the standard and weird browser modes?
Different box model rendering Modes
Use window.top.doc ument. compatMode to display the Mode

15. How do you optimize website files and resources? The expected solutions include:
File Merging
File Minimization/File compression
Use CDN for hosting
Cache Usage

16. What is semantic HTML?
Intuitive understanding of tags is good for search engines

17. The advantages and disadvantages of several methods for clearing floating
1. clear floating clear: both with empty labels (theoretically any labels can be clear, and add meaningless labels)
2. Use overflow: auto (the empty label element removes the float and has to add unintentional code drawbacks. Use zoom: 1 for IE compatibility)
3. Use the afert pseudo element to clear the floating (for non-ie browsers)

Javascript
1. What data types are returned by typeof javascript?
Object number function boolean underfind

2. What are three types of forced conversions and two types of implicit conversions?
Force (parseInt, parseFloat, number)
Implicit (=-=)

3. Differences between split () join ()
The former is the form of cutting into an array, and the latter is to convert the array into a string

4. array method pop () push () unshift () shift ()
Add pop () and delete at the end of Push ()
Unshift () header add shift () header Delete

5. What is the difference between event binding and common events?

6. Differences between IE and DOM Event streams
1. The execution sequence is different,
2. Different Parameters
3. Event addition without on
4. this points to the problem

7. Compatibility between IE and standards
Var ev = ev | window. event
Document.doc umentElement. clientWidth | document. body. clientWidth
Var target = ev. srcElement | ev.tar get

8. Differences between get and post methods in ajax requests
One is placed behind the url in the virtual carrier
Limited size
Security Questions
Different applications are requested only for forums and so on, and one is similar to changing passwords.

9. Difference between call and apply
Object. call (this, obj1, obj2, obj3)
Object. apply (this, arguments)

10. How to interpret json data during ajax requests
Using eval parse is more reliable considering Security
11. B inherits the method of

12. Write a function to obtain a non-interline style.

Function getStyle (obj, attr, value)
{
If (! Value)
{
If (obj. currentStyle)
{
Return obj. currentStyle (attr)
}
Else
{
Obj. getComputedStyle (attr, false)
}
}
Else
{
Obj. style [attr] = value
}
}

13. What is event Delegate?
Let's use the principle of event bubbling to let the event triggered by ourselves Replace the execution with its parent element!
Http://www.webasily.com /? The link is shown in the example of p = 78.

14. What Are closures, what are their features, and what are their influences on pages?
A closure is a function that can read internal variables of other functions.
Http://blog.csdn.net/gaoshanwudi/article/details/7355794 this link can be viewed (not a company asking this question)

15. How to Prevent event bubbles and default events
CanceBubble return false

16. add, delete, replace, and insert to a contact
Obj. appendChidl ()
Obj. innersetBefore
Obj. replaceChild
Obj. removeChild

17. Explain the principles of jsonp and why it is not the real ajax
Dynamically create script tags and callback Functions
Ajax is an operation for refreshing request data on pages

18. Local javascript objects, built-in objects and host objects
The local object is array obj regexp and can be instantiated by new.
Built-in objects such as gload Math cannot be instantiated.
The host is the document and window provided by the browser.

19. Differences between document load and document ready
Document. onload is executed only after the structure and style are loaded.
This method is not available in Document. ready functions. $ (). ready (function) is available in jquery)

20. The difference between "=" and "="
The former will automatically convert the type
The latter does not

21. javascript Same-Origin Policy
A script can only read the properties of windows and documents from the same source. The same source here refers to the combination of host names, protocols, and port numbers.

22. Compile an array deduplication method.
Function oSort (arr)
{
Var result = {};
Var newArr = [];
For (var I = 0; I <arr. length; I ++)
{
If (! Result [arr])
{
NewArr. push (arr)
Result [arr] = 1
}
}
Return newArr
}