Html

The code structure is clearer
By name, even people with no basic knowledge can figure out what this part of code does
Convenient team development and maintenance, more readable code
Conducive to SEO optimization, crawlers rely on tags to determine context

Meta tags provide metadata about HTML documents that are not displayed on the page, but are readable to machines, tell browsers how to parse the page, and tell search engines keywords (SEO optimization)
Meta tells the browser how to parse the page, describes the main content of the page, and sets the HTTP header content that the server sends to the browser
Charset =” UTF-8 “Sets the character encoding used on the page
Viewport Sets the viewport and mobile adaptation

The introduction of script tag is generally placed at the end of the body, so as to avoid the script being too large and taking a long time to load, which will lead to a blank page for a long time. This is because the rendering process and JS process are mutually exclusive, and the script will block the rendering of the page. The loading between scripts is synchronous and executed in the order of introduction. But there are two attributes that affect the order in which the script executes and the page renders
- Defer: Rendering will not block, so that even if placed inside the header it will not block page loading, but js will finish loading before document and will not affect the order of execution between scripts, in the order introduced
- Async: Just like defer, it solves blocking rendering, but it is executed after the document is loaded, and its execution order is based on which document is loaded first. Therefore, there are requirements on file order, so do not use it if there is a dependency

What are HTML block-level elements, inline elements, inline block elements? What’s the difference?

Block level elements: div, H1-H6, P, ul, OL, DL, li, HR, DT, DD, form, table
- Block elements have a single row
- Wide and high effective
- The default width is the same as the parent element, and the content is spread out height
- Margin, padding all in effect
Line elements: EM, I, del, small, strong, INS, SPAN, A
- Width and height do not take effect
- Left and right margin does not take effect
- Line up
- Size depends on content
- Padding is effective
Inline block elements: img, input(form element, excluding form)
- Line up
- Wide and high effective
- Margin, padding works

CSS

Border – radius rounded corners
Border-image Border image
- border-image: url() top right bottom left
- border-width: top right bottom left
Box-shadow: x, Y,size, opCity
Text-shadow Indicates the shadow of the text
Linear-gradient linear gradient
- background: linear-gradient(to position , color,color,… ,color)
Radial gradient
- background: radial-gradient(shap size at position , color,color,… ,color)
2D/3D transform: Rotate scale translate
@media Media query, set according to the screen width, used to solve mobile adaptation, according to the screen size of the CSS to take effect
Flex Layout (Elastic box)

Display: None no placeholders, source code visible
Opacity: 0, source code visible, 0
Visibility: hidden Placeholder, source code visible
Position: top:-9999px,left:-9999px Moves the element out of the window using position

Horizontal center
- Text-align: center
- Margin: 0 auto
- position: left: 50%; transform: translate(-50%)
Vertical center
- height = line-height
- verticle-align: middle
- position: top: 50%; transform: translate(0,-50%)

The static default
Relative positioning does not deviate from its own position, does not affect the characteristics of the element itself, and z-index increases the level
Absolute, off-scaling, deviation from the parent element, and no deviation from the body element
Fixed Fixed position, off scale, deviation relative to Windows

Sets the height of the parent element
Use Overflow: Hidden
Use extra label method: Add a label to the end of the child element, add a style to the label, style definition clear:both closed float
Pseudo-element cleanup float

.clearfix:after{
 content: ' ',
 height: 0,
 display: block,
 clear: both,
 visibility: hidden
}
.clearfix{
 *zoom: 1
}
Copy the code

.clearfix:before,
.clearfix::after {
 content: ' ',
 display: table
}
.clearfix:after:{
 clear: both
}
.clearfix{
 *zoom: 1
}
Copy the code

The two block elements are vertically aligned to add a margin on top and a margin on bottom, resulting in a margin merge where the largest element is displayed
If you put a margin on a nested block element, the parent element will fall down. This is called margin collapse
- Setting a border on the parent box (not recommended)
- With the overflow: hidden
- Add padding (without margin)

Part of the render tree (or the entire render tree) needs to be re-analyzed and the node sizes recalculated. This is called rearrangement. Note that there is at least one rearrange-initialization page layout.
Parts of the screen need to be updated when the node’s geometry changes or when the style changes, such as changing the element’s background color. Such updates are called redraws.
When will rearrange redraw be triggered
- Add, delete, and update DOM nodes
- Display: None Hides a DOM node – triggering rearrangement and redrawing
- Hide a DOM node by visibility: Hidden – only triggers redraw because there are no geometric changes
- Move or animate the DOM nodes in the page
- Add a style sheet and adjust the style properties
- User actions, such as resizing a window, changing font size, or scrolling.

The id selector
Class selectors
Property selector
Pseudo class selector
Label selector
Pseudo element selector
Wildcard selector
Priority: Inline Style > ID selector (100)> Class selector (10) = Attribute selector = Pseudo-class selector > Element selector (1) = Relation selector = Pseudo-element selector > Wildcard selector (0)
! important
Descendant selector selects all
The child selector selects only parent children