Front-end HTML5+CSS3 (goddess version)

• Chapter1 First introduction to HTML
• 1-1 Tutoring
• 1-2 Web page composition and nature
• 1-3 Getting to know browsers for the first time
• 1-4 web standards
• 1-5 HTML awareness
• 1-6 HTML skeleton
• 1-7 Introduction and use of vscode
• 1-8 Comment
• 1-9 Tag composition and relationships
• 1-10 titles and paragraphs
• 1-11 Line breaks and horizontal line labels
• 1-12 text formatting tag
• 1-13 Basic use of pictures
• 1-14 Image properties
• 1-15 absolute path
• 1-16 Relative paths - siblings and subordinates
• 1-17 Relative path-parent
• 1-18 audio tag
• 1-19 video tag
• 1-20 Hyperlink
• 1-21 Comprehensive Case-Recruitment
• 1-22 Comprehensive case-jump-index
• 1-23 Comprehensive case-jump-other pages
• Chapter2 HTML basics
• 2-1 List-usage scenarios
• 2-2 Lists - unordered and ordered
• 2-3 List-Custom
• 2-4 Table-Use
• 2-5 Table - table title and header cells
• 2-6 Table-Structure Tag
• 2-7 Table-Merge Cells
• 2-8 Form-application scenario
• 2-9 Basic use of form-input
• 2-10 Form-input-placeholder (prompt message)
• 2-11 Form-radio function and default selection
• 2-12 Form-upload multiple files
• 2-13 form-button-input
• 2-14 form-button-button
• 2-15 Form-drop-down menu
• 2-16 form-textfield
• 2-17 form-label label
• 2-18 Semantic tags
• 2-19 character entity
• 2-20 Comprehensive Case-Student Information Form
• 2-21 Comprehensive case-form
• Chapter3 CSS basics
• 3-1 Experience css
• 3-2 css introduction method
• 3-3 selector-label
• 3-4 selector-class
• 3-5 selector-id
• 3-6 Selector-Wildcard
• 3-7 Text basic style
• 3-8 Character-font
• 3-9 Expansion - cascading
• 3-10 font composite property
• 3-11 text indent
• 3-12 horizontal alignment
• 3-13 text decoration line
• 3-14 Yukidaka
• 3-15 Google Debugging Tools
• 3-16 Expansion-color value
• 3-17 Expand-Label Centering
• 3-18 Comprehensive Case 1-Title Completed
• 3-19 Comprehensive Case 1-News-Content
• 3-20 Comprehensive case 2-picture completed
• 3-21 Comprehensive Case 2-Product-Text Effect
• Chapter4 CSS advanced
• 4-1 selector-descendent
• 4-2 Selector-Children
• 4-3 selector-union
• 4-4 selector-intersection
• 4-5 Selector-pseudo-class
• 4-6 emmet syntax
• 4-7 background - background color
• 4-8 Background - background image
• 4-9 Background - background tile
• 4-10 background-background position
• 4-11 background-background
• 4-12 The difference between background image and img
• 4-13 Display Mode-Block
• 4-14 Display mode - inline
• 4-15 Display mode - inline block
• 4-16 display mode-conversion
• 4-17 Expansion-Tag nesting
• 4-18 CSS Properties - Inheritance
• 4-19 CSS properties - cascading
• 4-20 Comprehensive case 1
• 4-21 Comprehensive case 2
• Chapter5 CSS box model
• 5-1 Priority - Basic Testing
• 5-2 Priority-overlay calculation
• 5-3 Priority - Calculation Question
• 5-4 Google-Troubleshooting
• 5-5 PxCook
• 5-6 Box model-composition
• 5-7 Box model-browser effect
• 5-8 Box model - content width and height
• 5-9 Box model-border usage
• 5-10 Box model-size calculation-border
• 5-11 Box Model-Case
• 5-12 Sina Navigation-Layout div
• 5-13 Sina Navigation-Content a
• 5-14 Box model-padding-multi-value
• 5-15 Box model-size-border and padding
• 5-16 Sina Navigation-padding optimization
• 5-17 Box model-internal subtraction mode
• 5-18 Box model-margins
• 5-19 Clear default styles
• 5-20 Centered version
• 5-21 Comprehensive case-news list-div layout
• 5-22 Comprehensive Cases-News List-Titles
• 5-23 Comprehensive Cases-News List-Content
• 5-24 Margins-problem
• 5-25 Vertical inner and outer margins for inline elements
• Chapter6 CSS float
• 6-1 Structural pseudo-class-basic usage
• 6-2 Structural pseudo-class-formula
• 6-3 Pseudo element
• 6-4 standard stream
• 6-5 Float - Experiencing inline block issues
• 6-6 float-effect
• 6-7 float-features
• 6-8 Comprehensive case-Xiaomi layout
• 6-9 Extension-css attribute order
• 6-10 Comprehensive case-Xiaomi products-left and right structure
• 6-11 Comprehensive case-Xiaomi products-li
• 6-12 Comprehensive Case-Navigation
• 6-13 Clear float-scene construction
• 6-14 clear float-extra tags
• 6-15 Clear float-single pseudo-element
• 6-16 clear float-double pseudo-element
• 6-17 clear float-overflow
• Chapter7 online projects
• 7-1 Preparation
• 7-2 Typesetting and clearing default styles
• 7-3 header layout
• 7-4 logo and nav layout
• 7-5 nav content completed
• 7-6 Search-Layouts and TextBoxes
• 7-7 Search-Button
• 7-8 user area
• 7-9 banner-layout
• 7-10 banner-left completed
• 7-11 banner-right-title
• 7-12 banner-right-content
• 7-13 banner-right-all courses
• 7-14 Recommended
• 7-15 Premium Course-Title
• 7-16 Premium course content
• 7-17 Copyright territory-layout
• 7-18 Copyright territory-content
• Chapter8 positioning decoration
• 8-1 Function and usage steps
• 8-2 relative relative
• 8-3 Understand - Position - Things to note
• 8-4 Absolute absolute-reference browser
• 8-5 paternity
• 8-6 Case—Xuecheng Online-hot
• 8-7 center
• 8-8 migrating
• 8-9 Case-QR code
• 8-10 case-banner
• 8-11 fixed
• 8-12 display hierarchy
• 8-13 vertical-align-01
• 8-14 vertical-align-02
• 8-15 Cursor type
• 8-16 Rounded Border-Basic Use
• 8-17 Rounded Border-Working Scene
• 8-18 Overflow display effect-overflow
• 8-19 Show Hide-Basic Use
• 8-20 Case - QR code display and hide
• 8-21 Transparent attribute opacity
• Chapter9 Little Rabbit Fresh Project Construction
• 9-1 css elf-function
• 9-2 css sprite-use
• 9-3 Background image zoom
• 9-4 box shadow
• 9-5 transition
• 9-6 skeleton tag
• 9-7 SEO
• 9-8 favicon - title icon
• 9-9 Project directory
• 9-10 Project code preparation
• 9-11 Quick Navigation-Layout
• 9-12 Quick Navigation-Content
• 9-13 header-layout
• 9-14 logo and navigation
• 9-15 search
• 9-16 shopping cart
• 9-17 Copyright-Layout
• 9-18 Copyright-li content completed
• 9-19 Copyright bottom
• Chapter10 Little Rabbit Fresh Project Main Body
• 10-1 banner-image
• 10-2 banner-side navigation-layout
• 10-3 banner-side navigation-text content
• 10-4 banner-arrow
• 10-5 banner-dot
• 10-6 Fresh and Good Things-Title
• 10-7 Fresh and Good Things-Content-Layout
• 10-8 Fresh and good stuff - content completed
• 10-9 Fresh and good things-new product text
• 10-10 Fresh Food-Title-Layout
• 10-11 Fresh food area
• 10-12 Fresh Food-Content-Layout