preface

The school recruitment of 2019 began gradually, sorting out some high-frequency interview questions.

HTML part

1. What is <! DOCTYPE >?

DOCTYPE is the HTML5 standard web page declaration and must be declared on the first line of an HTML document. To tell the browser’s parser what standard document to use to parse the document.

Document parsing types are:

  • BackCompat: weird mode, the browser uses its own weird mode to parse the rendered page. (If no DOCTYPE is declared, the default is this mode.)
  • CSS1Compat: Standard mode, the browser uses W3C standards to parse and render pages.

2. Meta tags

Some meta information (name/value pairs) provided to the page to help SEO.

Attribute values:

  • Name: The name in the name/value pair. Author, Description, Keywords, Generator, Revised, Others. Associate the Content property with a name.

  • Http-equiv: The value of this property is used when there is no name. Content-type, Expires, Refresh, set-cookie. Associate the Content property with the HTTP header

  • Content: The value in the name/value pair, which can be any valid string. Always use with the name attribute or http-equiv attribute

  • Scheme: Used to specify the scheme to be used to translate attribute values

3. Semantic HTML

  • Do the right thing with the right label.
  • HTML semantics let the content of the page structure, structure more clear, easy to browser, search engine parsing;
  • Displays in a document format even without styling CSS and is easy to read;
  • Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO.
  • Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

4. Common browser cores

  • Trident kernel: IE,MaxThon,TT,The Word,360, Sogou browser, etc.
  • Gecko: kernel Netscape6 and above version, FF, MozillaSuite/SeaMonkey, etc.;
  • Presto kernel: Opera7 and above. [Now: Blink]
  • Webkit kernel: Safari,Chrome, etc. [Chrome :Blink(Webkit offshoot)]

5. Briefly introduce the understanding of the browser kernel

It is mainly divided into two parts: rendering engine and JS engine.

  • Rendering engine: Converts code to pages. It takes the content of a web page (HTML, XML, images, etc.), collates information (such as adding CSS, etc.), and calculates how the web page should be displayed for output to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel.
  • Javascript engine: Parses and executes javascript to achieve dynamic web pages.

At first there was no clear distinction between rendering engines and JS engines, but as JS engines became more and more independent, the kernel tended to refer only to rendering engines.

6. What are the new features and elements removed from HTML5? How to deal with the browser compatibility of HTML5 new tags?

  • New features:

(1) Canvas element for painting; (2) Video and audio elements for media playback; (3) Better support for local offline storage, localStorage long-term storage data, data will not be lost after the browser is closed; SessionStorage data is automatically deleted after the browser closes; (4) semantic better content elements, such as header, nav, section, article, footer. (5) new form controls: calendar, the date, time, email, url, search; (6) New technologies webworker,websockt, Geolocation;

  • Remove elements:

Pure performance elements: (1) the basefont, big, center, the font, s, strike, tt, u; (2) Elements that negatively affect usability: Frame, Frameset, Noframes;

  • Dealing with compatibility issues:

IE8/IE7/IE6 supports tags generated by the document.createElement method. You can use this feature to enable these browsers to support new HTML5 tags.

7. Html5 which tags can be SEO optimized?

Title, Meta, Header, footer, nav, article, aside

8. Difference between SRC and href

  • SRC is the location pointing to an external resource. The content pointing to it will be embedded in the current tag position in the document. When requesting a SRC resource, the resource pointing to it will be downloaded and applied to the document, such as JS scripts, IMG images and frame elements. When the browser parses this element, it pauses downloading and processing of other resources until the resource is loaded, compiled, and executed, so js scripts are typically placed at the bottom rather than at the head.

  • Href refers to the location of the web resource and establishes a link between the current element (anchor) or the current document (link) for hyperlinking.

9. Progressive enhancement and graceful degradation

  • Progressive enhancement: Build the page for the lower version browser to ensure the most basic functions, and then improve and add functions for the effect and interaction of the advanced browser to achieve a better user experience.
  • Graceful degradation: Build full functionality from the start and then make it compatible with older browsers.

10. The difference between defer and Async

  • deferIt doesn’t execute until the entire page has been rendered properly in memory (the DOM structure has been fully generated, and other scripts have been executed). Multiple defer scripts are loaded in the order they appear on the page. == “Render before execution” ==
  • asyncOnce the download is complete, the rendering engine interrupts the rendering, executes the script, and continues rendering. Multiple Async scripts do not guarantee loading order. == Execute as soon as download is complete ==

11. How to implement communication between multiple tabs in the browser?

Method 1: Call localStorge

TAB Page 1:

<input id="name">  
<input type="button" id="btn" value="Submit">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); // Store the required information}); }); </script>Copy the code

TAB Page 2:

$(function(){   
    window.addEventListener("storage".function(event){    
	   console.log(event.key + "="+ event.newValue); }); // use storage event to listen for add, modify, delete actions});Copy the code

Method 2: Use cookie+setInterval

The information to be transmitted is stored in the cookie, and the cookie information can be read at certain intervals to obtain the information to be transmitted at any time.

TAB Page 1:

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});    
Copy the code

TAB Page 2:

 $(function() {function getCookie(key) {    
	   return JSON.parse("{\" "+ document.cookie.replace(/; \s+/gim,"\ \", "").replace(/=/gim, "\", \ "") + "\"}")[key];    
	}     
	setInterval(function(){    
	   console.log("name=" + getCookie("name"));    
	}, 10000);    
});  
Copy the code

The CSS part

1. CSS box model

  • Box-sizing :border-box; (Weird mode);
  • Box-sizing :content-box; (Standard mode).

Application Scenarios:

(1) Form: Some input elements in the form actually show the traditional IE box model with some default styles, and their performance varies on different platforms or browsers, resulting in the difference in form presentation. At this point we can use the box-sizing attribute to create a uniform form element.

(2) Margin or border may break the parent element’s size, so box-sizing: border-box will not break the parent element’s size.

2. What is the difference between inline elements and block-level elements? Compatibility use of inline block-level elements? (Below Internet Explorer 8)

  • Block-level elements: p, div, h1, form, ul, li

(1) Each occupies a row and is arranged vertically; (2) can contain other block-level or inline elements; (3) Height, line height, margins and margins can be controlled; (4) The default width is 100% of the parent container, regardless of the content.

  • Inline elements: the span, a, label, input, img, strong, em

(1) Horizontal arrangement, no automatic line wrapping; (2) Cannot contain block-level elements, but can contain other inline elements or text; (3) The width and height Settings are invalid. The margin and padding Settings are invalid. (4) Width is the width of its text and picture, which cannot be changed.

  • Inline block-level elements compatibility below IE8 (block elements emulate inline-block)
Div {display: inline-block; Zoom: 1; // Trigger hasLayout display: inline; // Once the hasLayout setting display: inline is triggered, the effect is similar to display: block. }Copy the code

Haslayout is a property specific to Internet Explorer 7. HasLayout is a read-only property with two states: True or False. When true, it means that the element has its own layout, otherwise it means that the element’s layout inherits from the parent element. Note: the element, currentStyle hasLayout hasLayout can be concluded that the current element.

3. What is the difference between using link and @import when importing page styles?

(1) Link is an XHTML tag. In addition to loading CSS, it can also define other transactions such as RSS. @import belongs to CSS and can only load CSS. (2) Link references CSS, loading at the same time when the page is loaded; @import requires the page to be loaded after the page is fully loaded. (3) Link is XHTML tag, no compatibility problem; @import was introduced in CSS2.1 and is not supported by older browsers (below IE5). (4) Link supports the use of Javascript control DOM to change the style; @import is not supported.

4. What are the methods for clearing floats?

(1) Add a non-floating element below the floating element

<div>
    <div style="float:left; width:45%;"></div>
    <div style="float:right; width:45%;"></div>
    <div style="clear:both;"></div>
</div>
Copy the code

The parent container must now consider the position of the non-floating child elements, which must appear below the floating element, so when displayed, the parent container includes all the child elements. This approach is relatively simple, but adding redundant tags to a page violates the principles of the Semantic Web.

(2) Change the parent container to float positioning

<div style="float:left;">
    <div style="float:left; width:45%;"></div>
    <div style="float:right; width:45%;"></div>
</div>
Copy the code

This method does not change the HTML code, but the disadvantage is that when the parent container becomes floating, it affects the positioning of subsequent elements, and sometimes the parent container is dead and cannot become floating.

(3) The parent container sets Overflow: hidden or auto. (Enable BFC)

<div style="overflow: hidden;">
    <div style="float:left; width:45%;"></div>
    <div style="float:right; width:45%;"></div>
</div>
Copy the code

Disadvantages: One is that IE6 does not support it, and the other is that there are display problems once the child element size exceeds the parent container size.

(4) Automatically create a child element == (recommended) == at the end of the parent container using the :after pseudo-selector

.clearfix:after {
    content: ""; display: block; clear: both; } // Compatible with IE6: activate the parent element"hasLayout"Property to give the parent element its own layout. Clearfix {zoom: 1; // or height: 1%; }Copy the code

5. Briefly introduce the BFC and IFC

BFC – Block level formatting context

(1) BFC triggering conditions:

  • Root element or any other element that contains it
  • Float element float: left/right
  • Position: absolute/fixed
  • Display: inline – block, table – cell, table – caption
  • The overflow is not visible
  • Flexible box: display: flex or inline-flex

(2) BFC features

  • The internal boxes are placed vertically one on top of the other;
  • The distance of vertical direction is determined by margin (margin of two adjacent boxes belonging to the same BFC will overlap, independent of direction).
  • Margin box to the left of each element, with the containing block border; The left side of the box is touched (for formatting from left to right, otherwise the opposite). This is true even if there is a float;
  • The BFC region does not overlap the float element region;
  • When calculating the height of BFC, the floating child element is also involved in the calculation, which can solve the height collapse problem of the parent element.
  • A BFC is a separate container on a page, in which child elements do not affect outside elements and vice versa.
  • The BFC element in the document flow, whose width is auto, fills the remaining width of the current line.

(3) Application

  • Prevent vertical margin folding of block elements in two adjacent normal streams;
  • The BFC can contain floating elements that prop out the parent element;
  • The BFC prevents elements from being overwritten by floating elements.

(4) BFC and hasLayout

Ie6-7 does not support BFC and instead uses the private hasLayout property, which is triggered by Zoom: 1. Zoom is used to set or retrieve the scale of an element, and a value of “1” uses the actual size of the element.

IFC – Inline formatting context

(1) Creation method:

In contrast to BFC, it is created passively, implicitly, by the contained child elements: only if a region contains only horizontally arranged elements, which can be text, inline-level elements, or inline-block-level elements.

(2) Features:

  • The elements inside IFC are arranged from left to right and from top to bottom.
  • For each element inside the IFC, the vertical alignment can be adjusted by setting the vertical-align attribute.
  • The rectangular area that contains these inner elements, forming each row, is called a line box.

6. Selector priority

! Important > Inline Style > ID selector > Class selector > Label selector > Wildcard > Inheritance

Weight algorithm :(0,0,0,0) — > the first 0 corresponds to the number of important, the second 0 corresponds to the number of id selectors, the third 0 corresponds to the number of class selectors, and the fourth 0 corresponds to the number of tag selectors.

Compare: Start with the first 0. If the first 0 is large, the selector has a high weight. If the first 0 is the same, compare the second, and so on.

7. How to achieve horizontal and vertical center

(1) The elements in the row are horizontally centered

text-align: center;
line-height: 100px;
Copy the code

(2) The block-level elements are horizontally centered

margin: 0 auto;
Copy the code

(3) The horizontal and vertical centers of height and width elements are known

  • Using absolute positioning and negative margins
.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}
Copy the code
  • Use absolute positioning and margins
.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Copy the code

(4) Horizontal and vertical center of unknown height and width elements

  • The centered elements are inline or inline-block elements
.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
Copy the code
  • Css3’s Transform property
.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code
  • Flex layout
.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code
  • The simplest way to write this is:
.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}
Copy the code

8. Realize the left fixed width and the right adaptive layout

Margin-left = margin-left; margin-left= margin-left; margin-right = margin-left; margin-left= margin-left; margin-left= margin-left; margin-left= margin-left; margin-left= margin-left; margin-left= margin-left; margin-left= margin-left; margin-left= margin-left; margin-left= margin-left; margin-left= margin-right; Calc (100% – left box width) (4) Parent container set display: flex, right box flex: 1

9. Realize adaptive width in the middle and fixed width layout in the left and right columns

2 moves to complete the 3 – column layout – Grail layout, twin wings layout

10. Get out of the document stream

(1) Float out of the document flow: When float is used out of the document flow, other boxes ignore the element, but the text in other boxes still makes room for the element and surrounds it. (2) absolute positioning from the document flow: using absolute position | fixed elements from the document flow, other boxes and other text box will ignore it.

11. New CSS3 features

  • Color: added RGBA and HSLA modes
  • Text-shadow
  • Border: rounded (border-radius) Border shadow: box-shadow
  • Box model: box-sizing
  • Background: Background-size sets the size of the background image. Background-origin sets the origin of the background image. Background-clip sets the clipping area of the background image
  • Gradient: Linear-gradient, radial-gradient
  • Transition: Transition can be animated
  • Custom animation
  • The only pseudo-element introduced in CSS3 is :: Selection
  • Multimedia query, multi-column layout
  • border-image
  • Rotate (x,y) Rotate (x,y) Skew (x,y)scale(x,y)
  • 3 d conversion

12. display:none; What is the difference with visibility:hidden?

(1) display:none; The width, height, and other attributes of HTML elements (objects) are “lost” as they do not exist and are not loaded.

(2) visibility:hidden; The HTML element (object) is only visually invisible (completely transparent), but the spatial position it occupies still exists, that is, it still has height, width and other attribute values.

13. Responsive layout principles

Media query, query the width of the current screen (media), set different styles for different screen widths to adapt to different screens.

14. The flex layout

Flex layout can be seen in ruan Yifeng teacher’s two articles: Flex layout tutorial: grammar, Flex layout tutorial: examples, very detailed.

(1) Set the properties on the container

  • The flex - direction: row | row - reverse | column | column - reverseAlignment of items
  • The flex - wrap: nowrap | wrap | wrap - reverseWhether a newline
  • The flex - flow: < flex - direction > | | < flex - wrap >Short for flex-direction and flex-wrap
  • The justify - content: flex - start | | flex - end center | space - between | space - aroundAlignment in the horizontal direction
  • align-items: flex-start | flex-end | center | baseline | stretchDefines the alignment in the vertical direction
  • align-content: flex-start | flex-end | center | space-between | space-around | stretchDefines the alignment of multiple axes. This property will not work if items have only one axis (if items have multiple lines)

(2) Set the properties on the project

  • Order: < number >Defines the order in which items are sorted in the container. The smaller the value, the higher the order. The default value is 0
  • The flex - basis: < length > | autoDefines the amount of spindle space that the project occupies before allocating excess space. Based on this property, the browser calculates whether the spindle has excess space
  • flex-grow: <number>Define the scale of the project. The default value is 0, that is, if there is free space, it is not enlarged
  • flex-shrink: <number>Define the scaling of the project. Default value: 1, that is, the item will shrink if there is insufficient space. Negative values do not apply to this property.
  • Flex: none | [< 'flex - turns' > < >' flex - the shrink '? | | < > 'flex - basis']Short for flex-grow, flex-shrink, and flex-basis Default value: 0 1 auto. The size is the size of the project itself.
  • The align - self: auto | flex - start | flex - end | center | baseline | stretchAllow individual items to have different alignments than other items

It will continue to be updated…