use tools:
Vscode uses:
Need to download the plug-in: open in browser. This plugin can quickly open the browser.
There are two ways to select a folder: choose to open the file, drag and drop (this is the most convenient)
Shortcut key: Quickly generate Htm structure file: !+Enter (note that it is an English symbol)
Code formatting: shift+alt+f
Move up: Alt+up
Quickly copy a line (copy to the upper line): shift+Alt+up
1. HTML Supplement
HTML5 is Hypertext Markup Language. It comes in two forms: double tags (html, p, div) and single tags (img, meta).
<meta> is a single tag used to specify the format of a web page. Commonly used: <meta charset="utf-8">
path:
Paths are divided into absolute paths and relative paths. The absolute path is from the d disk all the way to the target.
Relative path: divided into
Parent path: ../ generally means to fall back to the previous folder. Then find the location of the picture.
Child path: /1.jpg
Same level path: ./images/1.jpg
In general, child paths and sibling paths are used together. Take the example above.
Hypertext link: <a>
Inline and block-level elements:
New tags added in the new version of HTML5:
The purpose of adding tags is to facilitate SEO (search engine) rankings. It is beneficial for search crawlers to find quickly.
Note: There are browser version compatibility issues.
Priority of selectors:
2. CSS Supplement
CSS is Cascading Style Sheets, also known as Cascading Style Sheets, or Style Sheets for short.
Syntax: Consists of two parts: selector; one or more declarations.
CSS import style:
Divided into:
Inline styles: <p style="~"> </p>
Internal styles: defined in the head. <style> </style>
External styles: <link rel="stylesheet" href=" .css">
Selector:
Divided into:
Global selector: *{ } It has the lowest priority
Element Selector: Select based on HTML elements. And once selected, it is the style of all this element in the body part.
Class selectors: Defined with a dot. Use for the desired label. Pay attention to the naming: it cannot start with a number. The same tag can use multiple class selectors, separated by spaces. For example: <p class="first second"></p>
ID selector: Defined with # in css. <h2 id="content" /> #content{ } . Features: Its name can only be used once. (Unlike class selectors, which can be used multiple times.)
Merge selectors: p,h2{ } or: .text, .title{ }
Need to pay attention to the priority of the selector: the inline style has the highest priority, and the same level element, the latter will override the former.
Relationship selector:
Divided into
Descendant selector: E F{ } Select all F tags in E
Child selector: div > p { } followed by the p tag immediately after the div
Adjacent sibling selector: h3+p{ } only adjacent. no other
Universal sibling selector: E~F{ } selects all sibling tags after E.
CSS box model:
Note the four concepts in the image below.
Margin: Transparent, eliminating the area outside the border. (expand itself, the size of the content remains unchanged)//It is not stretched
frame:
Padding: Eliminates the area around the content and is transparent. But it will change because of the background change, the outer margin will not. (It stretches itself, and the content size stays the same.)
content: display text and images.
Flex box model (flex box):
Purpose: To adapt to different screen sizes. Provides a more efficient way of arranging, aligning, and distributing white space among child elements within a container.
Composition: composed of flex-container and flex-item.
Set display: flex; (Define a flexible container) The default is horizontal placement.
flex-direction property:
row, row-reverse, column (vertically placed), column-reverse.
justify-content：
It is equivalent to the direction of the child element, then its style is the direction.
align-items attribute:
It is equivalent to the direction of the child element, and its direction is the vertical direction of the child element. It is generally used in conjunction with justify-content. Used together, you can define the position in five directions.
Summary: The flexbox model can only define the orientation of 5 positions. If necessary, specify a location for storage. In the follow-up, floating point elements and positioning elements will be introduced.
Extension: flex element, defines width weight.
For example: define n child frames in a parent frame. Set in child frame: flex:2; flex:1; flex:1. Then it is a fraction of the parent frame.
Document flow:
There are several problems: the height is uneven, the bottom edge is aligned; there is no gap between elements; the space is folded.
The document flow is some selectors that are generally defined, and they will be styled in a document.
In order to solve the problem of document flow, a method out of document flow is proposed.
They are: floating, absolute positioning, fixed positioning.
Out of document flow:
float:
Definition: It will break away from the document flow, which is equivalent to having a layout on the upper layer. (If two pictures are defined: float:left; they are both displayed on the upper layer, and there will be no gap.)
Floating can also make horizontal elements of the same level. Similar to: display: flex;
When a floated element exceeds the frame of the container, it will be squeezed under the container.
The difference: float can set the width and height, and flex can adapt to the screen.
Note: Floating makes the element out of the document flow, and only floats left and right, not up and down.
Clear floats:
Disadvantages of floating: it will cause the height of the parent element to collapse; subsequent elements will be affected.
For example: If the height of the parent frame is not set, its frame is opened by child elements. Once the child element is set to float, the height of the parent element will become 0. Moreover, the child element or sibling element added later will appear in the position of the original parent element and be covered by the child element set to float.
How to clear floats:
Set the height of the parent element; //It can directly open the frame, so there is no need for child elements to open it.
Add the clear attribute to the affected elements. For example: for sub-elements added later, use clear:both; whether it is left floating or right floating, it can be eliminated.
overflow clears the float. Add on the parent element: overflow:hidden; clear:both; In this case, the height of the parent element cannot be set.
Pseudo-object approach. Add in the parent element: .container::after{ content:""; display:block; clear:both; }. Also, parent elements cannot set height.
Summary: In the case that the height of the parent element is not set, the third way to clear the float is generally used. The second method of clearing floats is only used for affected child elements or elements of the same level.
Position position:
Divided into: relative, absolute, fixed. The latter two methods can break away from the document flow. They have four property values: left, right, top, bottom.
Absolute positioning absolute: Each setting of an absolute positioning is equivalent to setting a separate layer.
Fixed positioning fixed: Its characteristic is that no matter how the page flows, it will be fixed on the page.
Relative positioning and absolute positioning are to adjust the position relative to the parent attribute with positioning. If there is no parent element, look up until the bottom layer is the document flow.
z-index: Determines the stacking order. Whoever is bigger will be placed on top.
New features of CSS:
Rounded corners: border-radius
Either 50% or 100% means a circle. It has four values: the order of representation is: upper left, lower right; upper right, sit down.
border-radius：1px 2px 3px 4px；
Review: margin: 0 auto; indicates that the graphics are centered on the screen. 0 means that the upper and lower positions are ignored, and auto means that the left and right are self-adaptive.
Shadow: box-shadow
It also has four values, respectively meaning: h-shadow horizontal shadow, v-shadow vertical shadow, blur (blur) and color.
Note that blur and color can be expressed together in rgba. rgba(0,0,0,0.1). 0.1 is the blurriness.
box-shadow：2px 2px rgba(0,0,0,0.1)；
Animation:
Refers to the effect of gradually changing an element from one style to another. (can be changed any number of times)
Need to specify the time of change: two ways:
Use keywords: from (equal to 0%), to (equal to 100%); use percent signs: 0% means animation start, 100% means animation completion.
@keyframes create animations:
@keyframes myAnim{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Animation execution animation: p{ animation: myAnim 5s linear 0s infinite} //represent the name of the animator, duration, speed (constant speed), delay time, number of cycles (innumerable times)
You can also add the effect of stopping when the mouse is touched: p:hover { animation-play-state: paused;}
Some detailed values for executing the animation are shown in the figure below:
Media inquiries:
It will automatically recognize and load different styles according to the size of the device.
Usually set the meta tag at the beginning: use the width of the device as the view width and disable the initial zoom. (For example: after setting the width of the PC screen, it will be scaled proportionally, instead of keeping the same style as we need.)
<meta name="viewport" content=" width=device-width ，initial-scale=1，maximum-scale，user-scale=1 ">
The syntax of a media query:
@media screen and（）
Sprite map Css Sprite:
Also called css sprite map.
Principle: introduce the background image through background-image; move the background image to the desired position through background-position.
Note: display: block; means to turn an inline element into a block-level element.
Font icons:
When using icons, we may encounter image distortion, or the page may load slowly due to the large number of images. Then the way of font icon is proposed.
Its usage: You can refer to the icon library. Download the code from the icon library, then copy it into our project and use it directly.
iconfont-Alibaba Vector Icon Library
If you want to change the style of the font icon, it is recommended to create a new class. For example, the following picture:
