Many places are very brief, and many are omitted. (Mainly I want to try the interview questions), for Huanong who wants to become a full member of the Boiling Point Front-end Group or children's shoes who are interested in developing the front-end.

Html

html5 new elements

#<canvas></canvas>

The label is just a graphic container, and the graphic must be drawn through a script
#<audio controls> <source src="" type=""> </audio> Define audio content
#<video controls> <source src="" type=""> </video> tags define video

Inline elements and block-level elements

Block-level element	Elements in the line
Occupy a line, by default, its width automatically fills the width of its parent element	Adjacent in-line elements will be arranged in the same row, and will not wrap until they can’t fit in a row, and their width will vary with the content of the element
You can set the width and height attributes	Inline elements set width and height attributes are invalid
You can set margin and padding properties	Only margin-left, margin-right, padding-left, and padding-right play a marginal role for inline elements, and other attributes will not play a marginal effect.
Corresponds to display:block	Corresponds to display:inline;

The block-level elements mainly include:

<div>
<form>
<dl><ol><li><ul>
<form>
<h123456>
<p>
<table>
<td><tr><th><thead>

The main inline elements are:

<a>
<input>
<img>
<label> Label the input
<b><big><i>Bold, large and italic
<strong>The tone is emphasized
<sub><sup>Define subscript and superscript text

Frequently used labels

<!doctype html> is declared as an html5 file, which must be the first line of the html document, before the <html> tag

<meta>:
Metadata is data used to describe data. It will not be displayed on the page, but the machine can recognize it. This information is stored in the browser and how to layout or reload the page. Search engines and other services.
Two attributes http-equiv attribute and name attribute
1. The name attribute is mainly used to describe web pages, such as web keywords, narratives, etc. The attribute value is content
<meta name="parameter" content="specific description">.
A. keywords
Description: Used to tell search engines the keywords of your webpage. For example:
<meta name="keywords" content="Lxxyx, blog, liberal arts students, front-end">
B. description (description of website content)
Description: Used to tell search engines the main content of your website. For example:
<meta name="description" content="A liberal arts student, loves front-end and programming. Currently sophomore year, this is my front-end blog">
The more important is the viewport attribute. Often used in mobile design.
<meta name="viewport" content="width=device-width, initial-scale=1">
2. The http-equiv attribute is equivalent to the file header attribute of http.
<meta http-equiv="parameter" content="specific description">
content-type is used to set the type of web page character set, which is convenient for the browser to render
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐
C. cache-control (specify the cache mechanism followed by requests and responses)

CSS

Box model

CSS box-model

Definition of three common positioning

Default (position: static)

Relative positioning (position: relative): The position of the positioned element moves relative to its position in the ordinary stream. Regardless of whether an element that uses relative positioning is moved or not, the element still needs to occupy its original position. Moving an element will cause it to cover other boxes.
Absolute positioning (position: absolute): Relative to the positioned nearest ancestor element, if there is no positioned nearest ancestor element, then its position is relative to the original containing block (such as body). An absolutely positioned box can move up, right, down, and left from its containing block. Absolutely positioned boxes are separated from the normal flow, so it can cover other elements on the page, and the stacking order of these boxes can be controlled by setting the Z-Iindex property.
Floating positioning (float:right): As shown in the figure below, if the containing frame is too narrow to accommodate the three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the floating elements have different heights, they may be "stuck" by other floating elements when they move down:

Floating elements will generate a block-level box, regardless of what kind of element it is

Clear float:

1. Add a pseudo-class element to the parent element
```
#father:after{
    content:'';
    display:block;
    clear:both;
}
```
2. Add attributes to the parent element: overflow: hidden;
Fixed positioning (position: fixed): Relative to the browser window, the remaining features are similar to absolute positioning.

Centering in CSS

text-align:center: Inline elements in block-level elements can be centered horizontally
margin:0 auto: Center block-level elements horizontally, and cannot be separated from the document flow

                width: 20px;
                height: 20px;
                background-color: blue;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -10px;
                margin-left: -10px;

verticle-align:middle: Vertically centered, the premise for vertical to take effect is the element’s display: inline-block
Parent element: display:flex; Child element: align-self:center to achieve vertical centering
The child element directly sets the line-height equal to the height of the parent element, which is suitable for text, and the block itself will not move

JavaScript

Basic data type

Number
String
Boolean
Null
Undefined

Reference data type (Object)

Object
Array
Funtion
Data

Data method

pop(): delete the last element of the array and return the popped value
push(): Add new elements to the end of the array and return the length of the new array
shift(): delete the first element and return
unshift(): add a new element at the beginning and return the new array length
splice(a,b,'','',,,): a defines the position of the new element, b defines how many elements to delete, and returns a new array
concat(): a = b.concat(c,d,e,,,) concatenation array
slice(a,b): return a as the starting point and b as all elements in the open interval
toString(): Convert an array to a string

String method

length()
indexOf("") returns the index of the first occurrence of the text, returns -1 if not found
lastIndexOf("", start) returns the index of the last occurrence of the text in the string, starting from start, and returning -1 if not found
slice(): Same as above
substr(a,b): intercept b characters from a
replace(a,b): Replace the first a with b and return a new string
toUpperCase(): Convert string to uppercase
toLowerCase(): convert the string to lowercase
concat(): concatenate multiple strings
trim(): remove white space at both ends of the string
split(a,b) a is a string or regular, b is the length of the returned array

Closure

What should we do if we want to have limited access to variables in another function within a function? Closures are used to solve this need. The essence of closures is to create another function inside a function.

Js DOM

JS event

onchange: HTML element changes
onclick: the user clicks on the HTML element
onmouseover: Move the mouse on the HTML element
onmouseout: remove the mouse from an HTML element
onkeydown: the user presses the keyboard key
onload: The browser has finished loading the page
onblur: the element loses focus

Node.js

Common modules

fs
path
http
url
express
events

Interview Questions for Official Members of the Boiling Point Big Front-end Group