HTML issues
What is the difference between HTML and 1.XHTML
WEB is a basic HTML web design language, XHTML is an XML-based markup language
The main difference:
XHTML elements must be properly nested.
XHTML elements must be closed.
Label names must be lowercase.
XHTML documents must have a root element.
2. What is the Semantic HTML?
An intuitive understanding of the label is good for search engines to crawl, do the right thing with the right label!
html semantic structure is to make the content of the page, easy to browsers, search engines resolve;
also available in one document format without CCS style case, and is easy to read. Search engine crawlers rely on markers to determine the weight of each keyword contextual and heavy, which will help SEO.
So read the source code of the Web site are more likely to block the site, easy to read maintenance understood.
3. Common browser kernel What?
Trident kernel: IE, MaxThon, TT, The World, 360, Sogou browser and so on. [Also called the MSHTML]
the Gecko core: Netscape6 and above, FF, MozillaSuite / SeaMonkey like
Presto kernel: Opera7 and above. [Opera kernel source as: Presto, now: Blink;]
Webkit kernel: Safari, Chrome and so on. [In the Chrome: (a branch WebKit) Blink]
What's new 4.HTML5 have to remove those elements? How to deal with a new label HTML5 browser compatibility problems? How to distinguish between HTML and HTML5?
HTML5 is now no longer a subset of SGML, mainly to increase about image, location, storage, multi-tasking and other features.
Support HTML5 New Tags:
painting canvas;
for media playback of video and audio elements;
local offline storage localStorage long-term storage of data, the browser is closed after data is not lost;
sessionStorage data is automatically deleted when the browser is closed;
semantics of better content elements, such as article, footer, header, nav, section;
form controls, calendar, date, time, email , url, search;
new technologies webworker, websockt, Geolocation;
removing elements:
pure performance elements: basefont, big, center, font, s, strike, tt, u;
the elements negatively affect the availability of: Frame, frameset, noframes;
IE8 / IE7 / IE6 support label produced by document.createElement method, you can use this feature to make these the new browser supports HTML5 tags; the browser to support the new label, the label also need to add the default style.
5. Describe the difference between cookies, sessionStorage and localStorage of?
cookie passed back and forth between the browser and the server, sessionStorage and localStorage not;
greater sessionStorage localStorage and storage space;
sessionStorage and localStorage more abundant use interface;
sessionStorage and localStorage have a separate storage space.
6. How to achieve communication between multiple tabs within the browser?
Call localstorge, cookies and other local storage
7.HTML5 Why just write! DOCTYPE HTML?
HTML5 is not based on SGML, and therefore does not need to be referenced DTD, doctype but need to regulate the behavior of the browser (let the browser run in accordance with the way they should be); and HTML4.01 based on SGML, DTD is required to be a reference to tells the browser the document type used in the document.
8.Doctype role? Standard mode with a compatible models have what is the difference?
! DOCTYPE statement in the first line of the document in HTML, before the html tag is. Tells the browser parses the document parser what the document standard. DOCTYPE is not present or incorrectly formatted documents presented will result in compatibility mode.
JS standard mode layout and mode of operation are run to the highest standards of the browser supports. In compatibility mode, the page displayed in a loose way backwards-compatible, simulate the behavior of older browsers to prevent the site does not work.
9.Doctype strict mode and mixed mode -? How to trigger these two models, which distinguish what is the significance?
Which is used to declare the document specification (html / Xhtml) excessive use is generally based on the strict framework of the html document.
Join XMl statement can be triggered, resolve to change the way the Bug IE5.5 IE5.5 have.
Compare 10.Canvas with SVG's
Canvas
rely resolution
does not support event handlers
weak text rendering capabilities
can .png or .jpg image format to save the results
best suited to graphics-intensive games, many objects are frequently redrawn
SVG
does not depend on the resolution of
support incidents processor
best suited to applications with a large rendering areas (such as Google Maps)
high complexity can slow down rendering speed (excessive use of any application is not fast DOM)
is not suitable for gaming applications
CSS-related issues
Levels to achieve vertical centering 1.CSS
A classic question, there are many methods to achieve, which is an implementation of the following:
HTML structure:
<div class="wrapper">
<div class="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
What value 2.display there? Explain their role.
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 缺省值。像行内元素类型一样显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。
3. What are inline elements? What? CSS box model of block-level elements have?
Block-level elements: div, p, h1, form , ul, li;
inline elements: span, A, label, INPUT, IMG, strong, EM;
the CSS box model: content, border, margin, padding, there are two types:
IE box model, W3C standard box model;
Content IE contains border portion and pading;
2) box model: content (content), filler (padding), border (margin), the border (border).
4.CSS way of introducing what? Link and @import difference is?
Inline embedded outside the chain introducing
differences:
(. 1) .link part of the HTML tags, and CSS @import is provided;
. (2) when the page is loaded, link will also be loaded, the referenced CSS wait until @import page is loaded completely reloaded;
(. 3) to recognize only the .import IE5 above, the link is the HTML tag, no compatibility problems;
right pattern (4) .link embodiment of a weight higher than the weight @import weight.
(5). link supports the use of javascript change pattern, which is not
5.CSS selectors What? What attributes can be inherited? How priority algorithm? Which high inline and important priority?
Tag selectors class selectors id selectors
Inheritance is better specified Id> class> tag selection
! Important high priority
Several methods 6.CSS Clear floating (at least two)
Element with an empty clear property;
using the CSS overflow property;
using CSS: after pseudo-element;
use adjacent processing elements;
7.CSS center (including horizontal and vertical centering)
Inline elements centered scheme
Horizontal center settings:
elements in row 1.
Set-align = left text: Center;
2.Flex layout
settings display: flex; justify-content: center; ( flexibility, support Chroime, Firefox, IE9 +)
Centrally disposed vertically:
1. parent element determining the height of a single line of text (inline elements)
height = height set-Line;
multiline text height determining the parent element 2 (inline element)
A: Table inserted (insertion method and centered horizontally the same), then set the vertical-align: middle;
B: to set display: table-cell re provided vertical-align: middle;
Program center block elements
Horizontally disposed centrally:
1. block element fixed width
left margin setting is Auto;
2. variable width block element
a: addition of an outer element tag table (complete, including table, tbody, tr, td) , the element written in the td, and then set the margin value Auto;
B: to the element disposed displa: inine method;
C: parent element set position: relative and left: 50%, child element set position: relative and left: 50%;
Centrally disposed vertically:
Use position: absolute (fixed), set the left, top, margin-left, margin-top property;
use position: fixed (absolute) properties, margin: auto This must not forget;
use display: table-cell properties of the content vertical center;
with new attributes css3 the transform: translate (x, y) attribute;
use: before element;
8. What issues would need to be considered when writing efficient CSS?
reset.
Specification name. For no particular semantic html tags, e.g. div, the class value to be given special attention.
Extracting reusable components, attention "Priority" cascading style sheets.
9.display: none and visibility: hidden difference?
display: none to hide the corresponding elements are no longer assigned to it in the document layout in space, it will close the sides of the elements, when he would never exist.
visibility: hidden hides the corresponding elements, but still retain the original space in the document layout.
10.position the absolute and fixed in common and different points
A. in common:
1. Change the inline elements presentation, display is set to Block;
2. make elements flow out of the ordinary, does not occupy space;
3. default cover non positioned elements
different from B.:
Absolute "root element" is disposed, and fixed the "root element" is fixed to the browser window. When you scroll, the distance between the fixed elements of the browser window is constant.
JS-related issues
1. JavaScript to talk about the scope chain
When executing JavaScript code (global code or function), JavaScript engine will create a scope, also known as the execution context (Execution Context), will first create a global scope after the page is loaded, then each perform a function , creates a corresponding scope, thus forming a scope chain. Each scope has a scope chain corresponding to the chain head is a global scope, the end of the chain is a function of the current scope.
The role of the scope chain is used to resolve identifier, when the function is created (not executed), will be this, arguments, named arguments, and all local variables in the function added to the current scope, need to find when JavaScript variable X when (a process called multivariate analysis), it will first end of the chain from the scope chain is the current scope to find if there is X property, if it does not find the scope chain continue to look down, look up the head of the chain, which is the global scope chain, has yet to find the variable, then it is considered a variable x does not exist on the scope chain of this code, and throw a reference error (ReferenceError) exception.
2. How to understand the JavaScript prototype chain
Each JavaScript object has a prototype property, we call prototype, and the prototype is also an object of value, it also has its own prototype, so linked together a prototype chain, chain head prototype chain is the object, its special prototype, is null.
Action prototype chain for object inheritance, property function A prototype (prototype property) is an object, when this function is used to create an instance constructors, properties of the prototype of the function to be assigned to all object instances as a prototype , such as we create a new array, the array method begins with inherited prototype array.
When a property to access the object, first locate the object itself, find returns; if not found, continue to look for a property of its prototype object (if it can not find the will actually look up the prototype chain until the root) . As long as it is not covered, the properties of the prototype object is to find all instances, if an entire prototype chain is found returns undefined
How 3.JavaScript inheritance?
Inheritance configured
prototype inheritance
example inheritance
copies inheritance
Apply and call mechanism or method to achieve relatively simple prototype prototype, prototype recommended constructor and mixed mode.
function Parent(){
this.name = 'wang';
}
function Child(){
this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性
4.JavaScript typeof return of what type of data
object
number
function
boolean
underfind
The mentioned three kinds of casts and 2 implicit type conversions?
Forced: parseInt, parseFloat, number
implicit: == ===
Difference 6.split () and join () of
The former is cut in the form of an array, which is the array into a string
7. Method Array pop () push () unshift () shift () it is understood
pop () deletes tail
push () tail added
unshift () to add the head
shift () Delete the head
8.IE and DOM event flow differences
The execution order is not the same
parameter is not the same
event plus without ON
the this point to problems
When the difference between get and post requests 9.ajax way
In the back of a url, a virtual carrier on the inside
there is a size limit
safety
applications that require different forum is only a request, is similar to a password change
What's written there under 10.IE compatibility and standards
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
When 11.ajax request, how to interpret the json data
Use eval parse, in view of security considerations to use parse more tricky.
12. What event delegates are?
Using the principle of event bubbling, the event triggered his own, let him parent element instead of performing!
13. What Closures are, what characteristics have any effect on the page? Brief closures you understand
Closure to read other functions is a function of internal variables. Variables are not destroyed, has been stored in memory, it can cause a memory leak.
14. Add Remove replaced inserted into a contact method
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
15 .. "==" and "===" different
The former type is automatically converted, the latter will not
16. The preparation of a b inherits a method
function A(name){
this.name = name;
this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
this.temp = A;
this.temp(name); //相当于new A();
delete this.temp;
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}
17. How do I prevent a default event and event bubbling
function stopBubble(e){
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
return false
18. The following program what kind of results after performing pop?
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 subject.
this is a key js, with different functions using the occasion, this value will change.
But there is a general principle, that is, this means that the target function is called.
Under normal circumstances this: the global object Global. As a method call, then this refers to the object
20. The following procedure results
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);答案：
a: undefined,0,0,0
b: undefined,0,1,2
c: undefined,0,1,1
21. The output of the program below
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
22. Node understand it? Node usage scenarios are what?
High concurrency, chat, instant messaging push
Your most commonly used framework 23. The introduction of a
jquery, rn, angular and the like;
24. Learn to do front-end automated build tools? Brief
Gulp,Grunt等；
25. What is said about the JavaScript same origin policy?
A script can only be read from the document properties window and the same source, the same source here refers to the combination of a host name, protocol and port number.
other problems
1. The recent talk about the most popular of something, right? Which sites frequented?
Node.js, MVVM, React-native, Angular, Weex such as
CSDN, Segmentfault, blog Park, Denver, Stackoverflow, Bole Online
2. If you're going to master a new technology this year, what would it be?
webapp technology via the development of a single page.
SAP can be a seamless connection between pages and pages, to avoid white pages, and with a dynamic effect, improve the user experience. At the same time the SAP, there JavaScript to render the page, and then a small amount of data acquired from the server, and so forth, no need for the server data request processing, reduce server load.
SAP high technical requirements. To consider the fold load event is too long; animation effects to consider low-end phones; garbage collection, you need to release resources themselves from page change card.
PS: JavaScript five typical questions:
Question 1: Scope (Scope)
ponder the following code:
(function(){
var a=b=5;
})();
console.log(b);
Console (console) will print what?
Answer: The above code will print 5.
Trap this problem is in the implementation of immediate function expression (IIFE), there are two names, but where the variable is declared by the var keyword. This means that a local variable of the function. On the contrary, b is in global scope.
Another pitfall is that this issue, in the function he did not use "strict mode" ( 'use strict';) . If strict mode is turned on, the code will be reported uncaught reference error (Uncaught ReferenceError): b is not defined. Remember, strict mode requires you when you need to use global variables, explicitly reference the variable. So, so you need to write something like:
(function(){
'use strict'
var a=window.b=5;
})();
console.log(b);
Question 2: Create a "native (native)" method
Repeatify define a function on the String object. This function takes an integer parameter to clear the string needs to be repeated several times. This function requires string specified number of iterations. for example:
console.log('hello'.repeatift(3));
It should print out hellohellohello.
Answer: One possible implementation is as follows:
String.prototype.repeatify=String.prototype.repeatify||function(times){
var str='';
for(int i=0;i<times;i++){
str+=this;
}
return str;
};
The problem for JavaScript developers to test the inherited control, and prototype the property. It also verified whether the developer has the ability to extend the native data type of the function (although it should not do).
Another focus of this issue is to verify that you are aware of and know how to avoid a function of coverage that already exists. This can be done prior to customization by determining whether the function is a function exists.
String.prototype.repeatify=String.prototype.repeatify||function(times){
/*code here*/
};
When you need backward compatibility functions for older browsers, this technique is very useful.
Question 3: variable lift (Hoisting)
The following code execution What happens? why?
function test(){
console.log();
console.log(foo());
var a=1;
function foo(){
return 2;
}
}
test();
The answer: the results of this code is undefined and 2.
The reason for this result is that variables and functions have been improved (hoisted). Therefore, when a printed, it already exists (that is, it has been declared) in the function scope, but its value is still undefined. In other words, the above code and the following code is equivalent.
function test () {
var a=1;
function foo(){
return 2;
}
console.log();
console.log(foo());
a=1;
}
test();
Question 4: this in JavaScript is how it works
What is the result of the following code? Please explain your answer.
var fullname='AAA';
var obj={
fullname:'BBB';
prop:{
fullname:'CCC',
getFUllname:fullname(){
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test=obj.prop.getFullname;
console.log(test());
Answer: The above code prints out the CCC and AAA. The reason is that in JavaScript, a function of context, this keyword is referenced object is dependent on how the function is called, rather than relying on how the function is defined.
In the first the console.log () call, getFullname () is invoked as a function of obj.prop. Accordingly, where the context and the function returns this latter point object fullname properties. In contrast, when GetFullName () when the test is assigned the value of the variable, the contextual the global object (window). This is because, test is implicitly set as the attribute global object. Thus, the window function call returns fullname attribute value, in this code, this value is set by the first row of the assignment statement.
Question 5: call () and apply ()
Fix a problem, let the last console.log () to print out the CCC.
Answer: To solve this problem, you can force the context of a function call through a function call () or apply ().
console.log(test.call(obj.prop));
This article is continually updated, the limited personal capacity, is wrong with the hope that small partners were eager to point out.