[Must-read for front-end job hunting] Selected front-end development interview questions and answers

HTML

What is the role of Doctype? How to distinguish between strict mode and mixed mode? What do they mean?

(1), <!DOCTYPE> declaration is located first in the document, before the <html> tag. Tell the browser's parser what document type specification to use to parse this document.

(2), strict mode typesetting and JS operation mode are run according to the highest standard supported by the browser.

(3). In mixed mode, the page is displayed in a loose backward-compatible manner. Emulates the behavior of older browsers to prevent the site from not working.

(4), DOCTYPE does not exist or the format is incorrect, which will cause the document to be presented in mixed mode.

What are the inline elements? What are block-level elements? What are the void elements?

(1) CSS specifications stipulate that each element has a display attribute, which determines the type of the element. Each element has a default display value.

For example, the default display attribute value of div is "block" , becomes a "block-level" element;
The default display attribute value of span is "inline", which is an "inline" element.

(2) Inline elements include: a b span img input select strong (emphasis tone)
Block-level elements include: div ul ol li dl dt dd h1 h2 h3 h4…p

(3) Well-known empty elements:
<br> <hr> <img> <input> <link> <meta>
Little known are:
< area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

link and@ What is the difference between import?

(1) link belongs to the XHTML tag, and @import is provided by 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 before loading;

(3) import can only be recognized in IE5 or above, and link is an XHTML tag, there is no compatibility issue;

(4) The weight of the link style style The weight is higher than @import.

What are the kernels of browsers?

* IE browser’s kernel Trident, Mozilla’s Gecko, Chrome’s Blink (WebKit branch), the Opera kernel was originally Presto, and is now Blink;

Common compatibility issues?

* The png 24-bit image appears as a background on the iE6 browser. The solution is to make it PNG8.

* The default margin and padding of the browser are different. The solution is to add a global *{margin:0;padding:0;} to unify.

* IE6 double margin bug: After the block attribute label is floated and there are horizontal margins, the margin displayed in IE6 is larger than the set value.

Double distance generated by floating IE #box{ float:left; width:10px; margin:0 0 0 10px;}

In this case, IE will generate a distance of 20px. The solution is to add -_display:inline; to the float label style control to convert it into an inline attribute. (_This symbol can only be recognized by ie6)

The method of gradual recognition gradually excludes parts from the whole.

First, cleverly use the "\9" mark to separate the IE browser from all situations.
Then, use " " again to separate IE8 from IE7 and IE6, so that IE8 has been independently recognized.

css
.bb{
background-color:#f1ee18;/*All recognitions*/
.background-color:#00deff\9; /*IE6, 7, 8 recognition */
background-color:#a200ff;/*IE6, 7 recognition*/
_background-color:#1e0bd1;/*IE6 recognition*/
}

* Under IE, You can use the method of getting regular attributes to get custom attributes,
You can also use getAttribute() to get custom attributes;
Under Firefox, you can only use getAttribute() to get custom attributes.
Solution: Unifiedly obtain custom attributes through getAttribute().

* Under IE, the even object has x, y attributes, but not pageX, pageY attributes;
Under Firefox, the event object has pageX, pageY attributes, but There are no x, y attributes.

* Solution: (Conditional comment) The disadvantage is that additional HTTP requests may be added under IE browser.

* Chrome Chinese interface will force text smaller than 12px to be displayed at 12px by default.
This can be solved by adding the CSS property -webkit-text-size-adjust: none;

After the hyperlink is visited, the hover style no longer appears. The hyperlink style that was clicked and visited no longer has hover and active. The solution is to change the order of CSS attributes:
L-V-H-A: a:link {} a:visited {} a :hover {} a:active {}

What are the new features of html5 and which elements have been removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

* HTML5 is no longer a subset of SGML, it is mainly about the addition of images, location, storage, multitasking and other functions.

* Painting canvas
Video and audio elements for media playback
Local offline storage localStorage long-term storage of data, the data will not be lost after the browser is closed;
sessionStorage data will be closed after the browser is closed Automatically delete

Content elements with better semantics, such as article, footer, header, nav, section
Form controls, calendar, date, time, email, url, search
New technology webworker, websockt, Geolocation

* Removed elements

Purely expressive elements: basefont, big, center, font, s, strike, tt, u;

Yes Elements that negatively impact usability: frame, frameset, noframes;

Support HTML5 new tags:

* IE8/IE7/IE6 supports tags generated by the document.createElement method,
can Use this feature to make these browsers support HTML5 new tags.

After the browser supports the new tags, you need to add the default style of the tags:

* Of course, the best way is to use mature tags directly. The most used framework is the html5shim framework

How to distinguish: DOCTYPE declaration\new structural element\functional element

Semantic understand?

Use the right tags to do the right thing!
HTML semantics is to structure the content of the page to facilitate analysis by browsers and search engines;
It is also displayed in a document format without style CCS and is easy to read.
Search engine crawlers rely on tags to determine the context and weight of individual keywords, which is beneficial to SEO.
Make it easier for people who read the source code to divide the website into chunks for easier reading, maintenance and understanding.

Offline storage of HTML5?

localStorage long-term storage of data, the data will not be lost after the browser is closed;
sessionStorage data will be automatically deleted after the browser is closed.

(Write) HTML code that describes a piece of semantics.

(Many new tags added in HTML5 (such as <article>, <nav>, <header> and <footer>, etc.)
are based on semantic design principles)
< div id="header">
< h1>Title< /h1>
< h2>Focus on Web front-end technology< /h2>
< /div>

What are the disadvantages of iframe?

*iframe will block the Onload event of the main page;

*iframe and the main page share the connection pool, and the browser has restrictions on connections in the same domain, so it will affect the parallel loading of the page.
You need to consider these two disadvantages before using iframe. If you need to use an iframe, it is best to dynamically add the src attribute value to the iframe through javascript
, which can circumvent the above two problems.

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 spaces;
sessionStorage and localStorage have more rich and easy-to-use interfaces;
sessionStorage and localStorage have independent storage spaces;