Web front-end questions HTML CSS------finishing 1

Organize others ' work so that they are easy to learn.

Html+css

1. What are the Web standards and the understanding?
(1) Web Standard requirements, the writing label must be closed, the label lowercase, not random nesting, can improve the search robot Web content search probability;
(2) It is suggested to use the external chain CSS and JS script, so as to achieve the separation of structure and behavior, structure and performance, improve the rendering speed of the page, can display the content of the page more quickly;
(3) The separation of style and label, more reasonable semantic label, so that content can be accessed by more users, content can be accessed by a wider range of devices, less code and components, thereby reducing maintenance costs, revision more convenient;
(4) Do not need to change the content of the page, you can provide a printed version without the need to copy content, improve the usability of the site;
According to the Web standards developed by the Internet, it can make the users ' readers more convenient to read and make the Web developers communicate better.

What is the difference between 2.xhtml and HTML?
HTML is a basic Web page design language, XHTML is an XML-based labeling language;
The most important differences are:
XHTML elements must be nested correctly.
XHTML elements must be closed.
The label name must be in lowercase letters.
The XHTML document must have a root element.

3.Doctype? Strict and promiscuous modes-how do you trigger these two patterns to differentiate between them?
Used to declare documents using that specification (html/xhtml) is generally strictly over-frame-based HTML documents
Adding an XML declaration can be triggered and resolved to a bug that IE5.5 has IE5.5

4. What are the inline elements? What are the block-level elements? CSS box model?
Block-level elements: div p H1 H2 H3 h4 form UL
Inline elements: A b br i span input Select
CSS box model: Content, Border, margin,padding

What are the ways 5.CSS is introduced? What is the difference between link and @import?
Inline embedded outer chain import
Difference: Loading at the same time
The former does not have compatibility, the latter CSS2.1 the following browsers do not support
Link supports the use of JavaScript to change styles, which cannot be

What are the 6.CSS selectors? What attributes can be inherited? How is the priority algorithm calculated? Inline and important which priority is high?
Tag Selector class Selector ID Selector
Inheritance is better than specifying id>class> tag selection
The latter has a high priority

7. What are the three layers of the front-end page, and what are the roles?
Structure Layer Html Presentation layer CSS behavior Layer JS

What is the basic statement composition of 8.CSS?
Selector {Attribute 1: value 1; Property 2: Value 2; ...}

9. What are the browsers that you have made? What are the cores of the browser?
IE (ie kernel) firefox (Gecko) Google (WebKit) opear (Presto)

10. How to solve several IE6 bugs
1. The use of display:inline caused by a double-sided bug float;
2.3 Pixels problem using float caused by using dislpay:inline-3px or margin-right:-3px
3. Hyperlinks hover After click fail to use the correct writing order link visited hover active;
4.Ie z-index problem add position:relative to parent;
5.Png Transparent use JS code to change;
6.min-height min Height! Important solution ';
7.select cover using IFRAME nesting under IE6;
8. Why there is no way to define the width of the container around 1px (IE6 default row height caused by the use of over:hidden,zoom:0.08 line-height:1px);

11. What is the difference between the title and ALT attribute on the label?
The ALT attribute is a hint that appears on the page when your image is not loaded for some reason, and it will output directly to the image where it was originally loaded;
The Title property is when you hover over the picture when a small hint, the mouse left there is no, a bit like jquery hover, you can try it yourself, in addition, the majority of HTML tags are supported by the title attribute, the title attribute is specifically to do cue information;

12. Describe the role and purpose of CSS reset?
Reset resets the browser's CSS default properties, the browser's variety, the styles are different, and then resets to make them unified.  For example (with the simplest *{margin:0; padding:0});

13. Explain CSS sprites, how to use it.
CSS Wizard to integrate a bunch of small pictures into a large picture, to reduce the number of server requests for pictures;

14. What is the difference between browser standard mode and weird mode?
The so-called standard mode refers to the browser according to the standards of the code to parse execution;
The weird pattern is to parse the execution code using the browser's own way, because different browsers parse the execution differently, so we call it a weird pattern.
whether the browser resolves using standard mode or weird mode, directly related to the DTD declaration in your Web page, the DTD declaration defines the type of standard document (standard schema Parsing) document type, causes the browser to load the Web page and display it in the appropriate way, ignoring the DTD declaration, which will put the Web page into a weird mode (quirks mode).
Different rendering modes for box models
Use Window.top.document.compatMode to show why the pattern

15. How do you optimize your website's files and resources? The expected solutions include:
File merge
File minimization/File compression
Using CDN Hosting
Use of the cache

16. What is semantic HTML?
Semantic HTML is the writing of HTML code, in line with the structure of content (content semantics), the choice of appropriate tags (code semantics), can be easy for developers to read and write more elegant code, while the browser crawler and machine to parse well.
1. Semantic is conducive to SEO, is conducive to search engine crawler better understanding of our web page, so as to obtain more effective information, improve the weight of the page.
2. In the absence of CSS, you can clearly see the structure of the page, enhance readability.
3. To facilitate team development and maintenance, semantic HTML can make it easier for developers to see and improve the team's efficiency and coordination ability.
4. Support for multi-terminal device browser rendering.
(Summary: Intuitive understanding of the tag for the search engine is good for crawling)

17. Several ways to clear the float, the advantages and disadvantages of each
1. Use empty label to clear floating clear:both (theoretically clear any label,, add meaningless label)
2. Use Overflow:auto (empty tag element to clear floating and have to increase the abuse of unintentional code, using zoom:1 for IE compatibility)
3. Clear float with Afert pseudo element (for non IE browser)

Javascript
What data types are returned by the typeof of 1.javascript
Object, number, function, Boolean, Underfind

2. Examples of 3 coercion type conversions and 2 implicit type conversions?
Force (Parseint,parsefloat,number)
Implicit (==–===)

3.split () The difference between join ()
Split () Method: Used to split a string into an array of strings.
The join () method is used to put all the elements in an array into a string.
(Summary: The former is the form of an array of cuts, the latter is the conversion of arrays into strings);

4. Array method Pop () push () unshift () Shift ()
Push () tail add; pop () tail delete;
Unshift () head add; Shift () head delete;

5. What is the difference between event bindings and ordinary events?
Event bindings are events for DOM elements that are bound to DOM elements
An ordinary event is a non-dom element event;
For example:
Common events
var btn = document.getElementById ("Hello");
Btn.onclick = function () {
Alert (1);
};
Btn.onclick = function () {
Alert (2);
}; This event will only pop up 2;

Event Bindings
var btn = document.getElementById ("Hello");
Btn.addeventlistener ("click", Function () {
Alert (1);
},false);
Btn.addeventlistener ("click", Function () {
Alert (2);
},false); This event will first pop up 1 and then pop up in 2;


What is the difference between 6.IE and DOM event streams?
1. The order of execution is not the same;
2. parameters are different;
3. The event is not added on;
4.this pointing problem;

What is the compatibility of 7.IE and standard?
Var ev = EV | | Window.event
Document.documentElement.clientWidth | | Document.body.clientWidth
Var target = ev.srcelement| | Ev.target

What is the difference between the Get and post modes when 8.ajax requests?
1, get is to add the parameter data queue to the submission form of the Action property refers to the URL, the value and the form of each field one by one corresponding, in the URL can be seen;
Post is the HTTP post mechanism that places the fields within the form with their contents in the HTML header, along with the URL address referred to by the Action property. The user does not see the process;
2. The GET request has the following characteristics: It adds data to the URL, which is passed to the server in this way, usually using a question mark? Represents the end of the URL address and the beginning of the data parameter, followed by a parameter each data parameter in the form of "name = value", the parameters and parameters are separated by a connector &.
The POST request has the following characteristics: The data is placed in the HTTP body, its organization is not only one, there is a & connection, there is a delimiter way, can hide parameters, transfer large numbers of data, more convenient.
3, get the amount of data transmitted less than 2KB;
Post transmits a large amount of data, which is generally not restricted by default. In theory, however, the server varies.
4, get security is very low, post security is high;
Summary
One in the back of the URL and placed inside the virtual carrier
There is a size limit
Security issues
Application of a different one is a forum, etc. only need to request, one is similar to change the password)

What is the difference between 9.call and apply?
The same point: two methods produce exactly the same effect
Different points: Methods pass different parameters
Object.call (THIS,OBJ1,OBJ2,OBJ3) invokes one method of an object, replacing the current object with another object
Object.apply (This,arguments) applies one method of an object, replacing the current object with another object.

10.ajax request, how to interpret JSON data?
Use the Eval parse in view of security considerations using parse more reliable

11.b How to inherit a?
B.prototype=new A;

12. Write a function that gets a non-inline 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 an event delegate?
Let's take advantage of the event bubbling principle, let your own trigger event, let his parent element instead of execution!
The event delegate is the event object itself does not handle the event, but the processing task is delegated to its parent element or ancestor element, or even the root element (document);
jquery provides the. bind (),. Live (), and. Delegate () Methods for binding and delegate events;
Http://www.tuicool.com/articles/zQVvau example shows this link

14. What are closures, what are the features, and what are the effects on the page?
Closures are functions that can read other functions ' internal variables.
http://blog.csdn.net/gaoshanwudi/article/details/7355794 This link can be viewed (not a company asking this question)

15. How do I block event bubbling and default events?
Cancebubble return False
View http://www.2cto.com/kf/201412/359961.html Cases

16. Add Delete to replace the method inserted into a contact?
Obj.appendchidl ()
Obj.innersetbefore
Obj.replacechild
Obj.removechild

17. Explain the principles of JSONP, and why not real Ajax?
Dynamically create a script tag, callback function
Ajax is a page no refresh request data operation

18.javascript local objects, built-in objects and host objects?
The local object is an array of obj regexp, etc. that can be instantiated with new
The built-in objects are gload Math, etc. that cannot be instantiated.
The host is the browser's own Document,window, etc.

What is the difference between 19.document load and document ready?
Document.onload is executed after the structure and style are loaded. js
Document.ready native species there is no such method, there is $ () in jquery. Ready (function)

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

21.javascript's homologous strategy?
A script can read only the properties of windows and documents from the same source, where the same source refers to a combination of host name, protocol, and port number

22. Write an array-to-weight 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
}

Web front-end questions HTML CSS------finishing 1