1. Basic knowledge of web pages

1-1. What are the parts of a web page

Text, pictures, audio, video, hyperlinks

1-2. What is the essence behind the web page

Code written by front-end programmers

1-3. What software is used to convert the front-end code into the page in the user’s eyes

Translate (parse and render) the web page that the user sees through the browser

2. The browser

  • Browser is the platform of web page display and operation, and it is the essential weapon of front-end development
  • Top five common browsers: Internet Explorer, Firefox, Chrome, Safari, Opera
  • Different rendering engines result in different speeds, performance, and results when parsing the same code
  • Google Chrome’s rendering engine is fast, efficient and effective, so it is more attractive to users (recommended)

​

​

3. Composition of Web standards

  • Structure: HTML page elements and content
  • Presentation: THE appearance and location of CSS web elements and other page styles
  • Behavior: The definition of a JavaScript web page model that interacts with the page

4.HTML (Hypertext Markup Language)

HTML: Hypertext markup language

4-1. HTML basic skeleton structure

<! - Document declaration -><! DOCTYPEhtml><! - Language type -><html lang="en"><! - Page header -><head><! - Character set type -><meta charset="UTF-8"><! - Browser -><meta http-equiv="X-UA-Compatible" content="IE=edge"><! - the viewport - ><meta name="viewport" content="Width = device - width, initial - scale = 1.0"><! - Page Title -><title>Document</title>
</head><! - Body content of web page -><body>
</body>
</html>
Copy the code

4-2. Layout labels

  • H1 can only be used once on a page. Multiple use does not comply with W3C standards and is not conducive to seo optimization of page search engine. It is generally used in web logo tags

  • Blank lines are generated above and below the paragraph tag p

  • Horizontal line hr

  • Newline br

4-3. Text formatting labels

  • Bold strong b

  • Tilt the em I

  • Underline INS U

  • Delete line del s

  • Superscript sup

  • The subscript sub

4-4. Image label IMG

  • SRC Image source

  • Alt images are not displayed when the text is displayed instead of text

  • Title prompts text to hover over the text displayed on the picture

  • Wide width

  • Height is high

  • Border border

4-5. Hyperlink A

  • Href jump target

  • Target Open mode

    • _blank opens in a new window (the old page does not close)
    • _self opens in the current window (the original page closes)

4-6.base

  • How do all hyperlinks in the control page open

4-7. Anchor point

  • The same page

  • Different pages

4-8. Learning path

  • An absolute path

    An absolute location in a directory that leads directly to the destination, usually from the drive letter

  • Relative paths

    The process of finding the target file starting from the current file

    • At the same directory

      The current file is in the same directory as the destination file

      VS Code quick operation: After you type./, it will automatically prompt you to select the files in the same directory.

    • The lower directory

      The target file is in a subdirectory

      VS Code shortcuts: After you type./, it will automatically prompt you to select the folders in the current directory

    • The higher the directory

      The target file is in the parent directory

      VS Code Shortcut: Directly type.. /, it will automatically prompt you that there are files in the upper directory, directly select!

4-9. Special characters

​

4-10. Audio audio

  • SRC Video path
  • Controls Displays the play control
  • Autoplay (muted play required in Google Browser)
  • Loop play

4-11. Video video

  • SRC Video path

  • Controls Displays the play control

  • Mute play

  • Autoplay (muted play required in Google Browser)

  • Loop play

4-12. Div and SPAN

  • Div is on one line, and span is displayed on one line

4-13. List

  • Unordered list ul

  • Ordered list OL

  • Custom list DL

Table 4-14. Form

Grammar:

Table properties:

  • Tr row TD table cell TH table header cell

  • Border border

  • Cellpadding Distance between the border and the content, default is 1

  • Cellspacing Distance between the border and the border. The default value is 2

  • Width Table width

  • Align =center/left(default)/right

Table title and table header

  • Caption Table
  • Thead Table header
  • Tbody Table body
  • Tfooter table tail

Merged cell

  • Colspan combined column
  • Rowspan merge rows

4-15. The form input

attribute

  • Form form the domain
  • Action Specifies the file to be submitted for processing
  • Name Name of the form field
  • Method Indicates the method of transmitting information
  • Method =’get’ The default value is to send messages via the browser’s address bar

The form controls

  • Single-line text input box text

  • The password the password

  • Lable use (Click text, Input to get focus)

  • Radio radio

  • Checkboxes CheckBox

  • Drop down menu SELECT

  • File domain textarea

  • button

    Submit button

    Reset Reset button

    Button Submit button

4-16. Tags with layout semantics

4-17. Labels without layout semantics

Div and span

5.CSS (Cascading Style Sheets)

5-1. Semantics

Cascading Style Sheets

5 – (2)

Styles HTML tags in a page

5-3.CSS import mode

  • embedded
  • Outreach type
  • The inline type

5-4. Label selector

Select all similar tabs on the page

5-5. Class selectors.

  • Class = ‘class name’

  • A class selector can be called by multiple tags

  • Tags can call multiple class selectors at the same time

5-6.ID selector #

  • You need to call id= ‘id name’
  • An ID selector can only be called once; multiple calls are against the W3C specification
  • Only one ID selector can be invoked for a label
  • A label can call both the class selector and the ID selector

5-7. Wildcard selector *

5-8. Text attribute font

font

  • The browser default font size is 16px
  • Single quotation marks are added to Chinese characters
  • Multiple fonts are separated by commas before English fonts and after Chinese fonts
  • Unicode font:
  • On the console type escape(‘ Chinese font name ‘)
  • Replace %u with the final Unicode encoding of the text

Font-size: text size

  • H1 2 times
  • 1.5 times the h2
  • H3 1.17 times
  • H4 1 times
  • 0.83 times the h5
  • H6 0.75 times

Font-family: Arial ‘times New Roman’

Font-weight Bold text

  • 100-900 without units
  • Normal 400 is not bold by default
  • bold 700

Font-size: 16px! Important

  • Normal The default value is not tilted
  • Italic font
  • Oblique oblique

Font-size: 16px; font-family: arial, helvetica, sans-serif, sans-serif, sans-serif, sans-serif

5-9.CSS appearance attributes

  • Set font color
    • Color: red; Color words
    • Color: RBG,0,255 (0);
    • color:#000000; hexadecimal
  • Set the first line indent: text-indent: 2em; (one EM is the size of a Chinese character)
  • Text-decoration: underline;
    • None has no
    • Underline the underline
    • The line – through deleting lines
    • On the overline crossed
  • Controls box horizontal alignment text-align
    • Left align left by default
    • Center and align
    • Right horizontal and right aligned
  • Note: You cannot use text-align and text-indent directly for inline elements

5-10. Compound selectors

  • Descendant selector:

    • Occurs when nested relationships occur
    • The parent element precedes the child element, followed by Spaces
    • Descendant selectors can have unlimited generations
    • Descendant selectors can be any combination of selectors as long as they represent the parent element, the child element

  • Child selector

  • The selection is the immediate descendant of the parent element, followed by a > link, and can be any combination of selectors

! [1647700722939](http://md.zbztb.cn/uploads/1188715492662/1647700722939.png)Copy the code

  • Intersection selector

  • Find the page that has both the P tag and the red class name and style it

! [1647700791762](http://md.zbztb.cn/uploads/1188715492662/1647700791762.png)Copy the code

  • Union selector

    • Selectors of the same or partially identical style are collectively declared by commas linked together, the last union selector having no comma

  • Adjacent selector

  • Selector 1+ selector 2

  • In order to accurately select selector 2 following selector 1, it must be juxtaposed, the elements next to each other

! [1647701050397](http://md.zbztb.cn/uploads/1188715492662/1647701050397.png)Copy the code

5 to 11. Emmet syntax

Quick code generation through shorthand syntax

5-12. Link pseudo-class selectors

  • Unaccessed status :link, which can be omitted

  • The state after the visit: Visited

  • hovering

  • Active status: Active

5 to 13. Background background

  • The characteristics of
    • The background won’t hold the box
  • Background-color:
  • Transparent transparent
  • #cccc
  • Rgba (255255, 0)
  • red
  • Background-image :url()
  • Background tile background-repeat
  • No – don’t repeat tile
  • Repeat -x horizontal tiling
  • Repeat -y is tiled vertically
  • Repeats default value spreads full box
  • Background position background-position
  • Left right center top bottom
- Write two location words "left" and "right". "top" and "bottom" cannot be written together. - Write one location word and the other value defaults to "center"Copy the code
  • Write specific numbers
- Write two values. The first value is the distance to the left, the second value is the distance to the top edge - write 1 value. The other value defaults to centerCopy the code
  • Use a mixture of azimuth and numerical values
Top bottom center = left right center = top bottom centerCopy the code
  • The percentage:
- percentage = container width (height) - Image width (height) = percentage of the remaining valueCopy the code
  • Background size background-size
  • cover
  • contain
  • Specific numerical
  • The percentage
  • Background with background-attachment
  • The background does not scroll with the scroll bar
  • The default scroll background will scroll as the scroll bar is rolled
  • When the background attached attchment is fixed, and at the same time set the background positioning, its positioning reference is not the size of the box, but the browser position
  • Background attribute conjunctions
  • background:color image repeat attachment position/size
  • Groups of backgrounds are separated by commas, the last group ends with a semicolon, and the background color is written in the last group
  • Note: When setting the large background image, when setting the location, you want it to be centered, you can set top Center
  • The general situation of love, small icon forehead large background picture when using the background picture, the rest of the insert picture, see their mood

5-14. Display mode of labels

  • Block element block,
    • Typical representative div P H1-H6 ul OL Li DL form
    • Features:
    • An exclusive line
    • You can set the width and height
    • The default width for block elements is the width of the parent element, and the default height is 0 for block elements
  • The inline element is inline
  • Typical Representative A span strong B EM INS U s I
  • The characteristics of
- Display on a line - The width and height of inline elements cannot be set - the default width and height of inline elements is 0, the content will be spread wide and height - line and element code newline generate gapCopy the code
  • Inline block element inline-block
  • Input IMG textarea TD
  • The characteristics of
- Display on a line - Width and height can be set - block element newlines within the line generate gapsCopy the code
  • Mode conversion display
  • Block elements turn to inline elements
- display: inlineCopy the code
  • Inline elements and inline block elements are converted to block-level elements
-  display:block 
Copy the code
  • Block elements and inline elements are converted to inline block elements
-  display:inline-block 
Copy the code

5-15. Specification for nesting tags

  • Block elements can nest block elements, inline elements, and inline block elements

    • Div can nest any tag
    • P elements cannot nest other block elements. They can nest inline elements and inline block elements
    • It is not recommended to nest other block elements inside the header, but other inline elements and inline block elements can be nested

  • Inline block elements cannot nest block elements, you can nest inline elements, inline block elements

  • Inline elements cannot nest block elements, and inline block elements can only nest inline elements

  • A tags cannot nest A tags, but can nest other elements (sometimes block elements, etc.)

Line 5-16. High line – height

  • Attribute set
    • Normal The default value is 1.1-1.3 times the text size
    • Line height Distance between text baselines
    • If the line height is the same as the label height, the text is vertically centered
    • A line of text. If the height of the line is smaller than the height of the container, the line is tilted upwards
    • A line of text that is lower than the height of the container

5-17. Three features of the CSS

  • Cascading line

    • Any class that begins with a color text-text-line-text class has a style that the child element inherits from the parent element
    • The a tag cannot inherit the color of the parent element’s text
    • The title tag does not inherit the text size of the parent element
    • In addition, it will be introduced later that for setting text for link A tag, the text size should be set by inheritance as far as possible to avoid problems

  • priority

  • Priority Indicates the ability to resolve style conflicts. A high weight item has a higher priority and is displayed first. A low weight item is not executed

  • The weight

- Inheritance and wildcard 0000 - Label selector 0001 - Class selector 0010 - ID selector 0100 - Inline style 1000 -! Inline style > ID selector > Class selector > Tag selector > Inheritance and wildcard selector Inheritable selectors have the lowest priority, plus! Important weight invalidCopy the code

5-18. Box model width height

  • Wide high Settings

5-19. Set border to border

  • bezel-set

  • A separate set

5-20. Inner margin padding

  • The inside margin is the distance between the borders of the content area

  • Inside margin support big box problem

    • The actual width of the box =width /height + left/right padding + left/right border
    • If a block element has no width set, set the left and right inner margins for this block element, it will not widen the box
    • The width of the block element must support the box
    • Line element, line block element set left and right inner margin, must support the box wide, upper and lower inner margin must support the box high

5-21. Margin

  • Margin setting

  • Margins center the width of the block element horizontally

  • Margin :0 auto Center only the block element with the set width horizontally

  • Text-align :center Allows the contents of the block element (text, inline element, inline block element) to be horizontally centered. Note that there is no block element. The horizontal center of a margin centers the width of the block element horizontally

  • Inline elements can only set left and right margins, not vertical margins up and down

  • Two problems with margins

  • Merging of vertical margins of adjacent block elements

- When two adjacent block elements meet, if the upper element has a lower margin and the lower element has an upper margin, the vertical margin they see will take the greater of the two - avoid this situationCopy the code
  • Merging of vertical margins of nested block elements
- For two nested block elements, if the parent element has no upper margin and border, the upper margin of the parent element is merged with the margins of the child element, merged with the parent element, merged with the greater of the two, even if the parent element has a margin of 0. Margin merging also occurs - define a 1 pixel top border or top inner margin for the parent element - you can add overflow: Hidden for the parent element, triggering the block-level formatting context BFC - no margin collapse occurs when the child element floats or goes off-labelCopy the code

5-22. Table thin border-collapse

5-23. Border cases

  • Height residue method
  • Clear the default input border:0/ None
  • Clear outline outline:0/ None
  • Pseudo-class: focus Gets the state of the cursor focus used with input

5-24. Rounded border- RADIUS

5-25.盒子阴影 border-shadow

  • The first value is the horizontal offset of the shadow, positive to the right and negative to the left
  • The second value is the shadow vertical offset, with positive values down and negative values up
  • The third value is the fuzzy range of the shadow
  • The fourth value is the shadow size
  • The fifth is just the color of the shadow
  • Shadow defaults to outer shadow

5-26. Setting opacity

  • Rbga () sets the transparency of a single color. A is alpha transparent and the 0 of 0.5 can be omitted
  • Opacity: Sets the overall transparency of an element. The value ranges from 0 to 1

5-27. The standard flow

  • On a page, elements are top-down, from left to right, block elements dominate one line, and inline elements are displayed on one line until the parent element boundary is reached, standard flow (plain flow)

5-28. Float float

Float: left/center/right

  • Floating elements are removed from the control of the standard flow and do not occupy their original positions

  • Float allows elements to be displayed on a single line

  • Floats can only float to the left and right of the parent element, controlled by the parent element margin

  • Float element top alignment, code newline without gaps

  • Floating elements do not affect the block elements in the standard flow, only the elements below

  • Floating elements have the display characteristics of inline block elements:

  • After the block element floats, the default width of the parent element is not default, the default height is 0, the content will spread out the box width height

  • After the inline elements float, you can set the width and height

  • When the inline text element encounters a floating element, the inline block element circles around the floating element instead of running underneath it

  • The floating element falls because the width of the floating children adds up to more than the width of the parent element. Floating children do not set widths. The maximum width that the content spreads is less than or equal to the width of the parent element

  • Clear float reason: to solve the problem that the parent element cannot set the height, the child element inside the float cannot expand the parent element height

  • Clear float:

  • Extra label method: Add an extra label to the last floating element

Not recommended! [1647704112668](http://md.zbztb.cn/uploads/1188715492662/1647704112668.png)Copy the code
  • For the floating parent, use Overflow: Hidden to clear the float, trigger the BFC, block level formatting context, and separate layout areas without interference from external factors
! [1647704163233](http://md.zbztb.cn/uploads/1188715492662/1647704163233.png)Copy the code

  • Single pseudo-element elimination method

  • Clearfix double pseudo-element cleanup float

​

5-29 pseudo elements

  • :hover pseudo-element ::before
  • A pseudo-element is inserted in front of an element and can be treated as an inline element
  • ::after a pseudo-element is inserted after an element and can be treated as an inline element
  • It can be written as :before :after
  • Content is a mandatory attribute, otherwise the pseudo-element is not valid

5-30. Locate the position

Positioned above the float

  • Static location: default value
    • Position: the static;
  • Relative positioning:
    • The relative positioning element does not deviate from its original position
    • Positions of relative positioned elements are offset based on their own positions
    • position: relative;
  • Absolute positioning:
    • An absolutely positioned element is off scale and does not occupy its original position
    • Absolutely positioned elements, all parent elements are not positioned, position offset based on the browser
    • For an absolutely positioned element, if the parent element has a position, the position offset is based on the nearest parent element offset that uses the position
    • Absolutely positioned elements have the display characteristics of inline blocks
    • An absolutely positioned block element does not default to the parent element’s width, which defaults to 0
    • An absolutely positioned inline element that can be set in width and height
  • The son and the father:
    • Child absolute parent phase: child element absolute positioning, parent element relative positioning, child element position offset based on the parent element, the parent element is not off scale, still occupy the original position, the box below the top, normal layout
  • Fixed positioning:
    • Fixed positioned element is off scale and does not occupy its original position
    • Fixed the positioning offset of the element based on the browser visual window
    • Fixed positioned elements are displayed as inline block elements
    • Fixed block elements do not default to the parent element’s width, default width height is 0, content is spread out width height
    • Fixed – positioned inline elements are converted to inline block elements, and the width and height can be set
    • Comparison of fixed and absolute positioning
    • Absolute positioning position offset will scroll along with the scroll bar (content) when browser-based
    • Fixed positioning position offset based on the browser visual window that does not scroll along with the scrollbar

5-31. The positioned box is displayed in the center

  • Margin :0 auto invalidates when the element is positioned
  • You can center only block elements in a standard flow horizontally
  • Location box center display
  • Method 1

5-32. Locate the stack order of elements

  • Z-index: The default value is 0. The later the label is, the higher the z-index sequence is
  • If the attribute values are the same, they are written in the order of precedence
  • Numbers are not followed by units
  • Note: Z-index can only be used for relative, absolute, and fixed positions. Static positions are not valid for standard flows and floats

5-33. Show and hide elements

  • Display :none: hides the object, does not occupy the position after hiding
  • Visibility :hidden: The object will be hidden and occupy the position after it is hidden

5-34. Overflow handling of overflow elements

  • Overflow: visible; Overflow visible defaults

  • overflow:scroll; A scroll bar is generated regardless of whether the content overflows

  • overflow:auto; There is a scroll bar when overflow, no overflow does not generate a scroll bar

  • overflow:hidden; Overflow hidden

  • Overflow content does not take up space

5-35. Mouse style

  • Cursor :default Default value Small white
  • Pointer: hands
  • Move move:
  • Text: text
  • Not allowed to ban
  • Help, help

5-36. Clear the outline

  • Outline :0/ None: Clear the outline
  • Resize: None: disables dragging and dropping of text fields

5-37. Single-line text generation ellipsis implementation

5-38. Clear gaps at the bottom of the picture

  • Vertical-align: is the exclusive property of the inline element and the line block element, text, vertical object, not valid for the block element
  • Vertical-align :baseline: clear the gap at the bottom of the image. Set vertical-align to any value other than the baseline, or convert the image to a block element to clear the gap at the bottom of the image
  • Top top alignment
  • Middle is vertically centered and aligned
  • The bottom of the bottom alignment

5-39. Use of Sprite charts

  • Using the step
  • 1. The background picture cannot support the width and height of the box, so measure the size of the part needed and set it to the width and height of the box
  • 2. Set the coordinate value of the measured local size to the negative value of the background location

5-40. Structure pseudo-class selector

  • Div’s first child

  • The last child of the div

  • Select the number of children of the parent element (starting at 1)

  • Select the penultimate child of the parent element

  • Select the number of children of the same type within the parent element

5-41. Placeholder placeholder

  • ::placeholder changes the placeholder style, the placeholder selector, changes the placeholder style, which must be two occupy colons

5-42. Insert the page icon

5-43. Property selector

  • Tags are selected by their attributes

  • Tags are selected by their full attribute values

  • Select tags that begin with certain characters by the value of the tag attribute

  • Tags are selected by ending the value of the tag attribute with some character

  • Select a label by containing certain characters in the value of an attribute

5-44. Write the CSS properties in sequence

  • 1. The location layout (the display/position/float/clear/visibility/overflow)
  • 2. Its properties (width/height/margin/padding/border/background)
  • 3. Text attributes (color/font/text-decoration/text-align/vertical-align/white-space/border-word)
  • 4. Other attributes (CSS3)(Content /cursor/ Boroder-radius /box-shadow/text-shadow/background: Linea-gradient)

5-45. Making of triangles

5-46. Transition

  • Transitions animation from one state to another (changes in property values), transitions require trigger conditions, usually written in the start state

  • Transition-property :(all All attributes Are separated by commas.)

  • Transition-duration :1s

  • Transition-timing-function :linear/ease(default)/ease-in/ease-out/ease-in-out

  • Transition delay: transition-delay:1s

6. New html5 attributes

6-1. Semantic labels

6-2. Added audio labels

6-3. Added form controls

6-4. Added video labels

6-5. Added form properties

  • Placeholder: placeholder
  • Autofocus: automatically obtains the cursor focus
  • Autocomplete: automatic completion
  • On Default value input box Remember what you entered
  • The off input box does not remember what was typed
  • The required mandatory

7.CSS3 added attributes

7-1. Css3 box model new

7-2. Css3 background size

  • background-size:
  • Cover: The background image is scaled to cover the box, which may be incomplete
  • Contain: background picture scale, display complete, there may be box spread dissatisfaction
  • Write two numbers
- The first value represents the width of the background image, and the second value represents the heightCopy the code
  • Usually write a value that represents wide, high scale scaling
  • Percentage: refer to the size of the box
- Write 2 values for width, the first value for width, the second value for height - write 1 value for width, high scaleCopy the code

7-3. Css3 linear gradient

8. Vscode shortcuts

  • The TAB key completes the code
  • CTRL +/ code comment
  • Shift + Alt +↑ ↓ Copy a row up or down
  • CTRL + B shows the hidden sidebar
  • CTRL + f to find
  • CTRL + D quick selection

HTML and CSS mind maps

9-1HTML

9-2CSS