HTML related issues

What is the difference between 1.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.
2. What is semantic HTML?

Intuitive understanding of the tag for the search engine is good for crawling, with the right label to do the right thing!
HTML semantics is to make the content structure of the page, easy to browser, search engine analysis;
It is also displayed in a document format without a style CCS, and is easy to read. Search Engine crawler relies on the tag to determine the context and the weight of each keyword, conducive to SEO.
Make it easier for people who read the source code to block the site and maintain understanding of the site.
3. What are the common browser cores?
Trident kernel: ie,maxthon,tt,the world,360, Sogou browser and so on. [also known as MSHTML] Gecko Kernel: Netscape6 and above, Ff,mozillasuite/seamonkey, etc.
Presto kernel: Opera7 and above. [Opera kernel originally: Presto, now: Blink;]   WebKit kernel: Safari,chrome and so on. [Chrome's: Blink (WebKit's branch)]
What are the new features and elements removed from 4.HTML5? How do I handle browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5?

HTML5 is now not a subset of SGML, mainly about image, location, storage, multi-tasking and other functions.
Painting Canvas
Video and audio elements for media playback
Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost;
Sessionstorage data is automatically deleted after the browser is closed
Semantically better content elements such as article, footer, header, nav, section
form controls, calendar, date, time, email, url, search
New technology Webworker, Websockt, geolocation
Removed elements
Elements of pure expression: Basefont,big,center,font, s,strike,tt,u;
Elements that have a negative impact on usability: frame,frameset,noframes;
Support for HTML5 new tags:
IE8/IE7/IE6 supports labels generated by the Document.createelement method,
You can use this feature to enable these browsers to support HTML5 new tags,
After the browser supports new tags, you also need to add the default style of the tag:
5. Please describe the difference between cookies,sessionstorage and localstorage?

Cookies are passed back and forth between the browser and the server. Sessionstorage and Localstorage will not
Sessionstorage and localstorage have larger storage space;
Sessionstorage and Localstorage have more rich and easy-to-use interfaces;
Sessionstorage and Localstorage have their own separate storage space;
6. How can I achieve communication between multiple tabs in the browser?

Call Localstorge, cookies and other local storage methods
7.HTML5 Why just Write! DOCTYPE HTML?

HTML5 is not SGML-based, so there is no need to reference the DTD, but it requires DOCTYPE to regulate the browser's behavior (let the browser run as it should), and HTML4.01 is based on SGML, so the DTD needs to be referenced, To inform the browser document of the type of document used.
8.Doctype function? What is the difference between standard mode and compatibility mode?

! The DOCTYPE declaration is located in the first line in the HTML document, before the HTML tag. Tells the browser that the parser parses this document with what documentation standards. DOCTYPE does not exist or is incorrectly formatted to cause the document to render in compatibility mode.
The standard mode of typesetting and JS operation mode are all supported by the browser to run the highest standards. In compatibility mode, pages are displayed in a relaxed, backwards-compatible fashion, simulating the behavior of older browsers to prevent sites from working.
9.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 by changing the parsing to a bug that IE5.5 has IE5.5.

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

Cookies are passed back and forth between the browser and the server. Sessionstorage and Localstorage will not
Sessionstorage and localstorage have larger storage space;
Sessionstorage and Localstorage have more rich and easy-to-use interfaces;
Sessionstorage and Localstorage have their own separate storage space;
11. How can I achieve communication between multiple tabs in the browser?

Call Localstorge, cookies and other local storage methods


CSS related issues

1.CSS for Vertical Horizontal centering

A classic problem, there are many ways of implementation, the following is one of the implementation:
HTML structure:

<div class= "wrapper" >
<div class= "Content" ></div>
</div>

Css:

. wrapper{position:relative;}
. content{
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;
}


What are the 2.display values? Explain their role.

Block type. The default width is the width of the parent element, which can be set to a wide height and a newline display.
The default value of None. Displayed as an element type in the row.
inline element type in line. The default width is the width of the content, not set wide, peer display.
Inline-block The default width is the content width, you can set the width of the high, peer display.
List-item is displayed like a block type element, and a style list tag is added.
Table This element is displayed as a block-level table.
Inherit specifies that the value of the display property should be inherited from the parent element.

3. What are the inline elements? What are the block-level elements? CSS box model?
Block-level elements: Div,p,h1,form,ul,li;
Inline elements: span>,a,label,input,img,strong,em;
CSS box model: Content, Border, margin,padding

What are the ways 4.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 5.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

6.CSS several ways to clear floats (at least two types)

Use an empty element with the clear property
Use CSS's Overflow property;
Using CSS: after pseudo-elements;
Processing using adjacency elements;
7.CSS centered (both horizontally centered and vertically centered)

Inline element centering scheme
Horizontal centering settings:
1. Inline elements

Set Text-align:center;
2.Flex layout

Set Display:flex;justify-content:center; (Flexible use, support chroime,firefox,ie9+)
Vertical centering Setting:
1. Single-line text (inline element) for parent element Height determination

Set height = line-height;
2. Multi-line text (inline element) with parent element height determination

A: Insert Table (insert method and horizontal center), then set vertical-align:middle;
B: Set the Display:table-cell and set the Vertical-align:middle first;
Block-level element centering scheme
Horizontal centering settings:
1. Fixed-width block elements
Set the left and right margin value to auto;

2. Variable width block elements

A: Add the table label outside the element (complete, including table, TBODY, TR, TD), the element is written in TD, and then set the value of margin to auto;
B: Set the Displa:inine method for the element;
C: Parent elements set position:relative and left:50%, child elements set position:relative and left:50%;
Vertical centering Setting:

Using Position:absolute (fixed), set the properties of left, top, Margin-left, margin-top;
Using the position:fixed (absolute) attribute, Margin:auto this must not be forgotten;
Use the Display:table-cell attribute to center the content vertically;
Use CSS3 's new attribute transform:translate (x, y) attribute;
Use: Before elements;
8. What are the issues to consider when writing an efficient CSS?
Reset Refer to the answer to the question "Describe the role of the" reset "CSS file and the benefits of using it".
Canonical naming. Especially for non-semantic HTML tags, such as div, given the class value to pay special attention.
Extract reusable parts, and pay attention to the "priority" of cascading style sheets.



JS related issues

1. A talk about JavaScript scope chain
When a piece of JavaScript code (global code or function) is executed, the JavaScript engine creates a scope for it, also known as the execution context (execution context), after the page loads, it first creates a global scope, and then each function executes, A corresponding scope is created, thus forming a chain of scopes. Each scope has a corresponding scope chain, the chain head is the global scope, the chain tail is the current function scope.

The role of the scope chain is to parse the identifier, and when the function is created (not executed), the This, arguments, named argument, and all local variables in the function are added to the current scope, and when JavaScript needs to find the variable x (this process is called variable resolution), It will first look for the X attribute from the chain end in the scope chain, which is the current scope, and if it is not found, follow the scope chain to continue the lookup until the variable is found in the chain header, which is the global scope chain, and it is assumed that there is no X variable on the scope chain of the code. and throws a reference error (REFERENCEERROR) to the exception.



2. How to understand the JavaScript prototype chain
Each object in JavaScript has a prototype property, which we call a prototype, and the value of the prototype is an object, so it also has its own prototype, so it is connected together with a prototype chain, the chain head of the prototype chain is object, its prototype is very special, The value is null.

The function of the prototype chain is for object inheritance, and the prototype property of function A is an object, and when the function is used as a constructor to create an instance, the prototype property of the function is assigned to all object instances as a prototype, for example, we create a new array, prototype. Array methods are inherited from the array's prototype.

When a property of an object is accessed, the object itself is first found and then returned; If it is not found, it continues to find the properties of its prototype object (if it is not yet found, it will actually look up along the prototype chain until it goes to the root). The properties of the object prototype can be found in all instances as long as it is not overwritten, and returned if the entire prototype chain is not found undefined



How does 3.JavaScript implement inheritance?
Construct inheritance
Prototype inheritance
Instance inheritance
Copy inheritance
The prototype prototype mechanism or the apply and call methods are simpler to implement, and it is recommended to use constructors and prototypes in a hybrid manner.
function Parent () {
this.name = ' Wang ';
}

function Child () {
This.age = 28;
}
Child.prototype = new parent ();//Inherits parent, through prototype
var demo = new Child ();
alert (demo.age);
alert (demo.name);//Get inherited properties


What data types are returned by the typeof of 4.JavaScript

Object number function Boolean Underfind;
5. Examples of 3 coercion type conversions and 2 implicit type conversions?

Mandatory (Parseint,parsefloat,number) implicit (==–===);
6.split () The difference between join ()

The former is the form of an array of cuts, the latter is the conversion of arrays into strings

7. Array method Pop () push () unshift () Shift ()

Push () trailing add pop () trailing delete
Unshift () header add Shift () header Delete

The difference between 8.IE and DOM event streams
The execution order is different,
parameter is not the same
Event not added on
This points to the problem

The difference between the Get and post modes when 9.ajax requests
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 and so on only need to request, one is similar to change the password

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

How to interpret JSON data when 11.ajax requests

Using the Eval parse, the use of parse is more reliable in view of security considerations;
12. What is the event delegate?

Let's take advantage of the event bubbling principle, let your own trigger event, let his parent element instead of execution!
13. What are closures and what are the characteristics that affect the page? A brief introduction to the closures you understand

Closures are functions that can read other functions ' internal variables.
14. Add Delete to replace the method inserted into a contact

Obj.appendchidl ()
Obj.innersetbefore
Obj.replacechild
Obj.removechild

15. The difference between "= =" and "= = ="

The former will automatically convert the type, which will not

16. Writing a method for B to inherit a

function A (name) {
THIS.name = name;
This.sayhello = function () {alert (this.name+ "Say Hello!");};
}
function B (name,id) {
This.temp = A;
This.temp (name); Equivalent to New A ();
Delete this.temp;
This.id = ID;
This.checkid = function (ID) {alert (this.id==id)};
}

17. How to block event bubbling and default events

function Stopbubble (e)
{
if (e && e.stoppropagation)
E.stoppropagation ()
Else
Window.event.cancelbubble=true
}
return False

18. What is the result of the following program execution?

function fn () {
THIS.A = 0;
this.b = function () {
Alert (THIS.A)
}
}
Fn.prototype = {
B:function () {
THIS.A = 20;
alert (THIS.A);
},
C:function () {
THIS.A = 30;
alert (THIS.A);
}
}
var myfn = new FN ();
MYFN.B ();
MYFN.C ();

19. Talk about the understanding of this object.

This is a keyword of JS, and the value of this will change as the function is used in different situations.
But there is a general principle that this refers to the object that invokes the function.
This is the general case: global object. As a method call, then this refers to this object

20. Results of the following procedure

function Fun (n,o) {
Console.log (o)
return {
Fun:function (m) {
Return fun (m,n);
}
};
}
var a = fun (0);  A.fun (1);  A.fun (2); A.fun (3);
var B = Fun (0). Fun (1). Fun (2). Fun (3);
var c = Fun (0). Fun (1);  C.fun (2); C.fun (3);

Answer:

a:undefined,0,0,0
b:undefined,0,1,2
c:undefined,0,1,1

21. Output of the following program

var name = ' world! ';
(function () {
if (typeof name = = = ' undefined ') {
var name = ' Jack ';
Console.log (' Goodbye ' + name);
} else {
Console.log (' Hello ' + name);
}
})();

22. Do you know node? What are the usage scenarios for node?

High concurrency, chat, real-time message push
23. Introduce your most used framework

Jquery,rn,angular, etc.;
24. Do you know anything about the front-end automation build tool? Simply introduce

Gulp,grunt, etc.;
25. What is 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


Code-related issues

1. Tell me about some of the most popular things lately? Which websites do you often visit?

node. js, MVVM, React-native,angular,weex, etc.
Csdn,segmentfault, Blog Park, Nuggets, StackOverflow, bole online, etc.
2. What would it be if you were to master a new technology this year?

Via develops a single-page WebApp technology.
SAP can be a seamless connection between pages and pages, avoiding white pages and having a dynamic effect to improve the user experience. At the same time, SAP, there is JavaScript rendering page, and then get a small amount of data from the server display, so repeatedly, the requested data does not need server processing, reduce server load.
SAP has high technical requirements. Consider that the first screen load event is too long, the animation effect should consider the low-end phone, garbage collection, you need to release resources, to avoid page card change.

HTML related issues