Front face question 2016--html

This article by my collection summarizes some front-end interview question, the beginner reads also must diligently delve into the principle, the important knowledge needs the system study, thorough study, forms own knowledge chain. Million can not be opportunistic, cramming for interview luck mixed pass is wrong! And it's impossible! It's impossible! It's impossible!

The front end is still a young industry, new industry standards, frameworks, and libraries are constantly being updated and added. As Holman in the 2015 Deep JS Conference "front End service Road" keynote speech: "Every 18-24 months, the front end will be difficult one times", these changes make the front-end ability richer, the creation of the application will be more perfect. So focus on the various front-end technologies to keep up with the fast-changing rhythm and be one of the skills necessary for a front-end programmer.

Hope that the front-end er to be able to use can also be expressed, the theoretical knowledge has its own understanding. According to the following knowledge point one to go to the advanced learning, to form their own professional skills chain.

There are several points to note in the interview: (Source GitHub: @wintercn)

1. Interview title: Depending on your level and position changes, the entry level to the expert level, breadth and depth will increase.

2, the topic Type: theoretical knowledge, algorithm, project details, technical vision, open questions, work cases.

3, the details of the inquiry: You can ensure that you do not understand the beginning or the interviewer began to understand so far, so that can greatly extend the problem of the degree of differentiation and depth, know your actual ability. Because this knowledge association is a long period of learning, cramming is definitely not remember.

4, answer the question is great, the interviewer (perhaps the direct leader of your interview position), will consider I want this person to be my colleague? So attitude is very important, in addition to work, but also to be a person. (It feels more like a Blind Date ())

5, senior front-end development can be mixed absolute and relative, such people do not matter, because the team needs is: you this person has the ability to rely on (reliable).

Front-end development knowledge points:

HTML&CSS:

Understanding of Web standards, browser kernel differences, compatibility, hack

CSS Basics: layout, box model, selector priority

HTML5, CSS3, Flexbox

Javascript:

Data types, operations, objects, function, inheritance, closures, scopes, prototype chains, events, REGEXP, JSON, Ajax,

DOM, BOM, memory leak, cross-domain, asynchronous mount, template engine, front-end MVC, routing, modularity, Canvas, ECMAScript 6, Nodejs

Other:

Mobile, responsive, automated build, HTTP, off-line storage,

Web security, optimization, refactoring

Team collaboration, serviceability, ease of use, SEO, UED, architecture

Professional career, fast learning ability

As a front-end engineer, regardless of the length of the working years should be mastered knowledge points:

1. DOM structure--what relationships may exist between two nodes and how to move between nodes arbitrarily.

2. Dom operations-How to add, remove, move, copy, create and find nodes, etc.

3, events-how to use events, and the differences between IE and the standard DOM event model.

4. xmlhttprequest--What this is, how to perform a GET request completely, and how to detect the error.

5, strict mode and promiscuous mode-how to trigger these two patterns, what is the point of distinguishing them.

6. Box model--the relationship between margin, padding, and border, and the box model in browsers IE8 the following versions

7, block-level elements and inline elements-how to control them with CSS, and how to use them reasonably

8. Floating elements-how to use them, what their problems are, and how to solve these problems.

9. What is the difference between HTML and xhtml--, and which one do you think should be used and why?

10, json--function, use, design structure.

Note:

According to their own needs of selective reading, the interview question is a summary of theoretical knowledge, so that they learn how to express.

The data answer is not correct and comprehensive, welcome star and submit issues.

The format is continuously modified in the update.

HTML face question Set

DOCTYPE role? What is the difference between standard mode and compatibility mode?

(1) <! The doctype> declaration is located in the first line in the HTML document, before the

(2) The standard mode of typesetting and JS operation mode are all supported by the browser to the highest standards of operation. In compatibility mode, pages are displayed in a relaxed, backwards-compatible fashion, simulating the behavior of older browsers to prevent sites from working.

Why HTML5 only need to write <! DOCTYPE html>?

HTML5 is not SGML-based, so it does not require references to DTDs, but requires DOCTYPE to regulate the behavior of the browser (allowing the browser to run in the way that it should);

HTML4.01 is based on SGML, so a reference to the DTD is required to tell the document type used by the browser document.

What are the inline elements? What are block-level elements? What are the empty (void) elements?

First: The CSS specification stipulates that each element has the display property, determines the type of the element, each element has a default display value, such as the display of the div default value is "block", or "blocks-level" element; The span default display property value is " Inline ", is the" inline "element.

(1) Inline elements are: A b span img input Select strong (Accent tone)

(2) block-level elements are: div ul ol li DL DT DD H1 H2 H3 H4...P

(3) Common empty elements:

<br>

Little-known is:

<area> <base> <col> <command> <embed> <keygen> <param> <source> < Track> <wbr>

What is the difference between using link and @import when page import style?

(1) Link is XHTML tag, in addition to loading CSS, can also be used to define RSS, define the Rel connection properties, and @import is provided by CSS, can only be used to load CSS;

(2) When the page is loaded, link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded and then loaded;

(3) Import is CSS2.1 proposed, only in IE5 above to be recognized, and link is XHTML label, no compatibility problem;

Describe your understanding of the browser kernel?

It is divided into two main parts: the rendering engine (layout engineer or rendering engine) and the JS engine.

Rendering Engine: Responsible for obtaining the content of the Web page (HTML, XML, images, etc.), organizing the message (such as adding CSS, etc.), and calculating how the Web page is displayed, and then outputting it to the monitor or printer. The browser's kernel is different from the syntax of the Web page, so the effect of rendering is not the same. The kernel is required for all Web browsers, e-mail clients, and other applications that need to edit and display Web content.

JS Engine: Parsing and executing JavaScript to achieve the dynamic effect of Web pages.

The first rendering engine and the JS engine are not clearly distinguished, and then the JS engine becomes more independent, the kernel tends to refer only to the rendering engine.

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 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, WebSocket, geolocation;

Elements to remove:

Elements of pure expression: Basefont,big,center,font, s,strike,tt,u;

Elements that have a negative impact on usability: frame,frameset,noframes;

* Support 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 the new tab, you also need to add a default style for the label.

Of course, you can use the mature framework directly, such as Html5shim;

<!--[If Lt IE 9]>

<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>

<! [endif]-->

* How to distinguish the Html5:doctype declaration \ New structure element \ Function element

Briefly describe your understanding of HTML semantics?

Do the right thing with the right label.

HTML semantics to make the content of the page structured, clearer structure, easy to browser, search engine analysis;

It is displayed in a document format even in the absence of CSS, and is easy to read;

Search engine crawler also relies on the HTML tag to determine the context and the weight of each keyword, in favor of SEO;

Make it easier for people who read the source code to block the site and maintain understanding of the site.

HTML5 offline storage How to use, the principle of work can explain?

When a user is not connected to the Internet, the site or app can be accessed normally, and the cached files on the user's machine are updated when the user connects to the Internet.

Principle: HTML5 's offline storage is based on a new. AppCache file's caching mechanism (not the storage technology) that stores resources offline through the parse list on the file, and these resources are stored as cookies. Then, when the network is offline, the browser will display the page with data that is stored offline.

How to use:

1, the page head as below add a manifest attribute;

2, the Cache.manifest files in the preparation of offline storage resources;

CACHE MANIFEST

#v0.11

CACHE:

Js/app.js

Css/style.css

NETWORK:

Resourse/logo.png

FALLBACK:

//offline.html

3, in the offline state, the operation Window.applicationcache to achieve the requirements.

How does the browser manage and load HTML5 's offline storage resources?

In the case of online, the browser found that the HTML header has the Manifest property, it will request the manifest file, if it is the first time to access the app, then the browser will be based on the contents of manifest files to download the appropriate resources and offline storage. If the app has been accessed and the resource has been stored offline, the browser will load the page with an offline resource, then the browser will compare the new manifest file with the old manifest file, and if the file does not change, do nothing, if the file changes, Then the resources in the file will be downloaded again and stored offline.

Offline, the browser directly uses resources that are stored offline.

Please describe the difference between cookies,sessionstorage and localstorage?

A cookie is the data (usually encrypted) stored on the user's local terminal (client Side) for the purpose of marking the user's identity.

Cookie data is always carried in the same-Origin HTTP request (even if not required), and is passed back and forth between the browser and the server.

Sessionstorage and Localstorage do not automatically send data to the server and are saved locally only.

Storage size:

The cookie data size cannot exceed 4k.

Sessionstorage and Localstorage have a storage size limit, but are much larger than cookies and can reach 5M or larger.

Period of time:

Localstorage Store persistent data, the browser is closed after the data is not lost unless the data is actively deleted;

Sessionstorage data is automatically deleted after the current browser window is closed.

Cookies are set to expire before the cookie expires, even if the window or browser is closed

What are the drawbacks of IFRAME?

*iframe will block the OnLoad event on the main page;

* Search engine Retrieval program can not read this page, not conducive to SEO;

*iframe shares the connection pool with the main page, and the browser restricts the connection to the same domain, which can affect the parallel loading of the page.

These two drawbacks need to be considered before using an IFRAME. If an IFRAME is needed, it is best to use JavaScript

Dynamically adds the SRC attribute value to the IFRAME, which can bypass the above two questions.

What is the label's role? How is that used?

Label label to define the relationship between form controls, and when the user selects the label, the browser automatically shifts focus to the label-related form controls.

<label for= "Name" >Number:</label>

<input type= "text" name= "name" id= "name"/>

<label>date:<input type= "text" name= "B"/></label>

How does the HTML5 form turn off auto-complete?

Set the form or input to autocomplete=off that you do not want to prompt.

How can I communicate between multiple tabs within a browser? (Ali)

WebSocket, Sharedworker;

You can also call Localstorge, cookies and other local storage methods;

Localstorge when added, modified, or deleted in another browsing context, it triggers an event,

We use the event, control its value to carry on the page information communication;

Note that Quirks:safari throws a Quotaexceedederror exception when setting the Localstorge value in the non-trace mode;

How is websocket compatible with low browsers? (Ali)

Adobe Flash sockets,

ActiveX Htmlfile (IE),

Send XHR based on multipart encoding,

XHR based on long polling

What is the use of page visibility (the pages Visibility API)?

Detects whether the page is currently visible through the value of visibilitystate, and when the page was opened

Automatically pauses the playback of music or video when the page is switched to another background process;

How do I implement a circular clickable area on a page?

1, Map+area or SVG

2, Border-radius

3, Pure JS implementation needs to find a point in the not round simple algorithm, get mouse coordinates and so on

Achieve a 1px high line without the use of border and maintain consistent results in both standard and weird modes in different browsers.

<div style= "height:1px;overflow:hidden;background:red" ></div>

What is a Web page verification code for, is to solve any security problem.

Distinguish whether the user is a computer or a human public automatic program. Can prevent malicious crack password, brush tickets, forum irrigation;

Effectively prevent hackers on a particular registered user with a specific program of brute force to make a continuous landing attempt.

What is the difference between title and H1, the difference between B and strong, and the difference between I and EM?

The Title property does not have the explicit meaning only is the title, H1 is the level clear title, to the page information crawl also has the very big influence;

Strong is the key content, the meaning of the tone strengthening, the use of reading equipment to read the network:<strong> will be stressed, and <B> is to display the emphasis of content.

I content is shown in italics, EM denotes the underlined text;

Physical style Elements--Natural style label

b, I, U, S, pre

Semantic style Elements--Semantic style tags

Strong, EM, ins, Del, code

It should be accurate to make the semantic style label, but not abusive, if you are not sure when you prefer to use natural style labels.

Front face question 2016--html