HTML5

  • The preparatory work

    • Installing the editor
    • Simple use of the editor
    • Install the browser
    • Simple use of the browser

  • Introduction of HTML

    • What is HTML
    • Common Browser
    • Browser kernel
    • Web standard Components
    • HTML syntax rules

  • Composition of labels

    • Annotation of tag
    • Composition of attributes
    • The basic structure of a web page
    • Commonly used tags

  • Typesetting label

    • Header, nav, main, aside, footer, section
    • h1-h6
    • p
    • br
    • Text formatting tag
    • B and strong
    • I and em

  • Absolute path and relative path

    • An absolute path
    • Relative paths

  • Multimedia labels (Image, Audio, video)

    • Image labels (Image format, application scenarios, features)
    • The audio tag
    • Video tags

  • Hyperlink tag (call H5 app, send email)

  • A list of tags

    • Unordered list
    • An ordered list
    • Custom list

  • Table label

    • Table size
    • Table borders
    • Form the alignment
    • Form merge
    • Form groups

  • The form tag

    • Form fields (Form tags)
    • Input field (Input tag)
    • Radio buttons
    • Check box
    • Drop-down box (Select TAB)
    • Multiline text
    • button
    • Other tags (Fieldset, Legend)

  • HTML entity symbol

    • Double quotation marks”
    • Ampersand &
    • Less than”
    • Is greater than the number >
    • The blank space

  • CSS3

  • CSS 3 introduction

    • What is CSS
    • The history of THE CSS
    • Introduction to CSS Syntax
    • CSS comment

  • Basic selector for CSS

    • Label selector
    • The ID selector
    • Class selectors
    • Wildcard selector

  • Text properties of the CSS

    • The font-family property
    • The font – the size attribute
    • The font – weight attribute
    • The font and style attributes
    • Font composite attribute

  • Font type

    • Serif fonts
    • Non-serif fonts

  • CSS text appearance properties

    • Color attributes
    • The text – decoration properties
    • The line – height attribute
    • The letter spacing attribute
    • Word – spacing attributes
    • The text – the align attribute
    • The text text-indent properties

  • Writing mode of the CSS

    • Inline style
    • Inline style
    • Outside the chain style

  • CSS composite selector

    • Descendant selector
    • Union selector
    • Intersection selector
    • Sibling selector
    • Child element selector
    • Property selector
    • Structure pseudo-class selector
    • State pseudo-class selector
    • Pseudoelement selector (mainly after before)

  • CSS display mode

    • Block-level elements
    • Inline elements
    • Inline block elements
    • Display mode conversion

  • CSS Background Properties

    • Background color background-color
    • Background image background-image
    • Background tile background-repeat
    • Background with background-attachment
    • Background position background-position
    • Background compound property background
    • Background size background-size

  • Three features of CSS

    • inheritance
    • Cascading sex
    • priority

  • The box model

    • The composition of the box model
    • Calculation of box model
    • Margin properties
    • Border properties
    • Padding attribute
    • The box – sizing properties
    • Resolve upper and lower margin merging
    • Resolve box collapse (child box margin pulls parent box down)

  • CSS float

    • Floating usage scenarios
    • Floating characteristics

  • The way to clear the float

    • Extra label method
    • Overflow property law
    • After Pseudo-element Method (Main)

  • Basic skills of drawing cutting

    • Basic cut figure
    • PS plugin cutterman cuts images
    • Use of the Pixel Chef annotation tool
    • Blue lake or copy guest cutting tool to use

  • The CSS positioning

    • Positioning way
    • Relative positioning
    • Absolute positioning
    • Fixed position
    • Sticky fixing
    • Locate the zIndex level

  • Show and hide elements

    • overflow
    • display
    • visibility

  • Network pictures advanced

    • The elves figure
    • Web fonts
    • The fonts icon

  • transform

    • The 2 d transformation
      • Translational transform
      • Rotation transformation
      • Scaling transformation
      • Lean transformation
    • 3 d transform
      • Translational transform
      • Rotation transformation
      • Scaling transformation

  • Dynamic effect

    • Transition the transition
    • Animation animation