1-1 HTML structure

1-2 HTML syntax

1-3 HTML tags

1-4 HTML attributes

1-5 XHTML structure

1-6 XHTML type

1-7 DTD analysis

1-8 namespace

2-1 HTML5 syntax

2-2 HTML5 elements

2-3 HTML5 attributes

2-4 HTML5 global attributes

2-5 HTML5 other features

2-6 Understand HTML5 document structure

2-7 HTML5 element classification

2-8 Identify articles

2-9 Segment content

2-10 Design navigation information

2-11 Design support information

2-12 Design microformats

2-13 Add release date

2-14 Add title block

2-15 Group titles

2-16 Add footnote block

2-17 Add contact information

2-18 design outline

2-19 design style

3-1 Email type applications

3-2 url type application

3-3 Number type applications

3-4 Range type applications

3-5 Date checker type application

3-6 search type applications

3-7 tel type application

3-8 color type applications

4-1 New autocomplete attribute

4-2 New autofocus attribute

4-3 New form attribute

4-4 New form override properties

4-5 New height and width attributes

4-6 New list attribute

4-7 New min, max and step attributes

4-8 New multiple attribute

4-9 New pattern attribute

4-10 New placeholder attribute

4-11 New required attribute

4-12 New datalist element

4-13 New keygen element

4-14 New output element

4-15 New autocomplete attribute

4-16 New novalidate attribute

5-1 Add canvas element to page

5-2 How Canvas draws graphics

5-3 Understanding Canvas coordinates

5-4 When not to use Canvas

5-5 If the browser does not support Canvas

5-6 Check browser support

5-7 Draw a straight line

5-8 Draw a rectangle

5-9 Draw a circle

5-10 draw triangle

5-11 Clear canvas

5-12 Draw a quadratic Bezier curve

5-13 Draw cubic Bezier curve

5-14 Save and restore Canvas state

5-15 Move coordinate space

5-16 Rotate coordinate space

5-17 Rotate coordinate space

5-18 Zoom graphics

5-19 matrix transformation

5-20 combination of graphics

5-21 clipping path

5-22 Apply different line styles

5-23 Draw a linear gradient

5-24 Draw a radial gradient

5-25 draw patterns

5-26 Set the transparency of graphics

5-27 Create shadow

5-28 Draw filler text

5-29 Draw outline text

5-30 Measure text width

5-31 Import images into Canvas

5-32 Change image size

5-33 Create image slices

6-1 Detect audio format support with JavaScript

6-2 Detect video format support with JavaScript

6-3 Understand audio elements

6-4 Play audio

6-5 Understanding video elements

6-6 play video

6-7 Audio and video related properties

6-8 Audio and video related methods

6-9 Audio and video related methods

6-10 Audio and video related events

6-11 Control music playback with script

6-12 View video frames

7-1 Check browser support

7-2 Set and get data

7-3 Prevent data leakage

7-4 Other uses of Web Storage

7-5 Web Storage event monitoring

7-6 Example 1: Design web skin

7-7 Example 2: Tracking localStorage data

7-8 Example 3: Design counter

7-9 Comprehensive application: real-time tracking of web application projects

7-10 Using a Web SQL database

7-11 Example 1: Create a simple local database

7-12 Example 2: Store local data in batches

7-13 Comprehensive application: mixed development of Web Storage and Web SQL

7-14 Practical Combat 1: Caching the Home Page

7-15 Practical combat 2: Edit content offline

7-16 Practical Combat 3: Offline Tracking

7-17 Check browser support

7-18 Create Web Workers

7-19 Communicate with Web Workers

7-20 Hands-on practice using Web Workers

8-1 Use multi-threading to implement background operations

8-2 Filter values ​​in the background

8-3 Multi-tasking concurrent processing

8-4 Communicate between multiple threads

8-5 Calculate Fibonacci series using threading technology

8-6 Using multithreading for drawing

8-7 Write application main page

8-8 Writing Worker js

8-9 Communicate with Web Workers

9-1 Overview of CSS1.0 and CSS2.0

9-2 The relationship between CSS and DIV tags

9-3 CSS coding standards

9-4 attribute selector

9-5 RGBA transparency

9-6 multi-column layout

9-7 Multiple background images

9-8 String overflow

9-9 Block shadows and rounded shadows

9-10 rounded corners

9-11 Border picture

9-12 deformation

9-13 Application scope of CSS 3

9-14 Browsers that currently support CSS 3

9-15 Case practice: Design beautiful forms

9-16 Understanding attribute selectors

9-17 Case practice

9-18 Understanding structural pseudo-class selectors

9-19 Case practice

9-20 Understand common UI pseudo-class selectors

9-21 Case practice

9-22 Other selectors

9-23 Define text-shadow property

9-24 Apply shadow effect

9-25 Comprehensive practice: designing the homepage of a hacker website

9-26 overflow text

9-27 text wrap

9-28 Use RGBA color values

9-29 Use HSL color values

9-30 Use HSLA color values

9-31 Define opacity attribute

9-32 Define transparent color value

9-33 Detailed usage explanation

9-34 Case practice

9-35 Detailed usage explanation

9-36 Case practice

9-37 Detailed usage explanation

9-38 Case practice: Designing elliptical graphics

9-39 Detailed usage explanation

9-40 Case practice: Designing the interface effect of Windows 7

9-41 Define background coordinates

9-42 Define background cropping area

9-43 Define background image size

9-44 Define how the background image loops

9-45 Define multiple background images

9-46 Get to know transform

9-47 Rotation animation

9-48 Zoom animation

9-49 moving animation

9-50 Tilt animation

9-51 Transform animation

9-52 Case practice: Designing a graffiti wall

9-53 Custom transformation

9-54 Define complex deformations

9-55 Define transition properties

9-56 Define transition time

9-57 Define transition delay time

9-58 Define transition effects

9-59 Case practice: Designing OS Navigator

9-60 Case practice: Designing picture flipping effects

9-61 Designing Webkit Gradient

9-62 Webkit case practice

9-63 Designing Webkit Gradient

9-64 Webkit case practice

9-65 Design Gecko Gradient

9-66 Gecko case practice

9-67 Designing IE Gradient

9-68 Designing W3C Gradient

9-69 Design gift box

9-70 Design folding panels

9-71 design can

9-72 Design disc sliding animation

9-73 Design drop-down menu

9-74 Exquisitely designed buttons

10-1 Design a multi-column layout

10-2 Define column width

10-3 Define the number of columns

10-4 Define column spacing

10-5 Define column border style

10-6 Define display across columns

10-7 Define column height

10-8 Design box layout

10-9 Define adaptive width ok

10-10 Define column display order

10-11 Define column arrangement direction

10-12 Define module size adaptation

10-13 Eliminate white space

10-14 Define alignment

10-15 Comprehensive practice: designing multi-column web pages

10-16 Change the way the box model is composed

10-17 Adjust element size

10-18 Define outline

10-19 Define contour displacement

10-20 Define navigation order

10-21 Define the direction key control sequence

10-22 Add display content

10-23 Cancel element style

10-24 Be careful when using initial

10-25 Overflow handling

10-26 Use @font-face rules

10-27 Meet the Media Queries module

10-28 Know the @media rules

10-29 Use @media rules

10-30 Apply @media rules to your site

10-31 Add voice function

10-32 design reflection