HTML structure

HTML syntax

HTML tags

HTML attributes

XHTML structure

XHTML type

DTD analysis

namespace

HTML5 syntax

HTML5 elements

HTML5 attributes

HTML5 global attributes

HTML5 other features

Understand HTML5 document structure

HTML5 element classification

Identify articles

Segment content

Design navigation information

Design support information

Design microformats

Add release date

Add title block

Group titles

Add footnote block

Add contact information

design outline

design style

Email type applications

url type application

Number type applications

Range type applications

Date checker type application

search type applications

tel type application

color type applications

New autocomplete attribute

New autofocus attribute

New form attribute

New form override properties

New height and width attributes

New list attribute

New min, max and step attributes

New multiple attribute

New pattern attribute

New placeholder attribute

New required attribute

New datalist element

New keygen element

New output element

New autocomplete attribute

New novalidate attribute

Add canvas element to page

How Canvas draws graphics

Understanding Canvas coordinates

When not to use Canvas

If the browser does not support Canvas

Check browser support

Draw a straight line

Draw a rectangle

Draw a circle

draw triangle

Clear canvas

Draw a quadratic Bezier curve

Draw cubic Bezier curve

Save and restore Canvas state

Move coordinate space

Rotate coordinate space

Rotate coordinate space

Zoom graphics

matrix transformation

combination of graphics

clipping path

Apply different line styles

Draw a linear gradient

Draw a radial gradient

draw patterns

Set the transparency of graphics

Create shadow

Draw filler text

Draw outline text

Measure text width

Import images into Canvas

Change image size

Create image slices

Detect audio format support with JavaScript

Detect video format support with JavaScript

Understand audio elements

Play audio

Understanding video elements

play video

Audio and video related properties

Audio and video related methods

Audio and video related methods

Audio and video related events

Control music playback with script

View video frames

Check browser support

Set and get data

Prevent data leakage

Other uses of Web Storage

Web Storage event monitoring

Example 1: Design web skin

Example 2: Tracking localStorage data

Example 3: Design counter

Comprehensive application: real-time tracking of web application projects

Using a Web SQL database

Example 1: Create a simple local database

Example 2: Store local data in batches

Comprehensive application: mixed development of Web Storage and Web SQL

Practical Combat 1: Caching the Home Page

Practical combat 2: Edit content offline

Practical Combat 3: Offline Tracking

Check browser support

Create Web Workers

Communicate with Web Workers

Hands-on practice using Web Workers

Use multi-threading to implement background operations

Filter values ​​in the background

Multi-tasking concurrent processing

Communicate between multiple threads

Calculate Fibonacci series using threading technology

Using multithreading for drawing

Write application main page

Writing Worker js

Communicate with Web Workers

Overview of CSS1.0 and CSS2.0

The relationship between CSS and DIV tags

CSS coding standards

attribute selector

RGBA transparency

multi-column layout

Multiple background images

String overflow

Block shadows and rounded shadows

rounded corners

Border picture

deformation

Application scope of CSS 3

Browsers that currently support CSS 3

Case practice: Design beautiful forms

Understanding attribute selectors

Case practice

Understanding structural pseudo-class selectors

Case practice

Understand common UI pseudo-class selectors

Case practice

Other selectors

Define text-shadow property

Apply shadow effect

Comprehensive practice: designing the homepage of a hacker website

overflow text

text wrap

Use RGBA color values

Use HSL color values

Use HSLA color values

Define opacity attribute

Define transparent color value

Detailed usage explanation

Case practice

Detailed usage explanation

Case practice

Detailed usage explanation

Case practice: Designing elliptical graphics

Detailed usage explanation

Case practice: Designing the interface effect of Windows 7

Define background coordinates

Define background cropping area

Define background image size

Define how the background image loops

Define multiple background images

Get to know transform

Rotation animation

Zoom animation

moving animation

Tilt animation

Transform animation

Case practice: Designing a graffiti wall

Custom transformation

Define complex deformations

Define transition properties

Define transition time

Define transition delay time

Define transition effects

Case practice: Designing OS Navigator

Case practice: Designing picture flipping effects

Designing Webkit Gradient

Webkit case practice

Designing Webkit Gradient

Webkit case practice

Design Gecko Gradient

Gecko case practice

Designing IE Gradient

Designing W3C Gradient

Design gift box

Design folding panels

design can

Design disc sliding animation

Design drop-down menu

Exquisitely designed buttons

Design a multi-column layout

Define column width

Define the number of columns

Define column spacing

Define column border style

Define display across columns

Define column height

Design box layout

Define adaptive width ok

Define column display order

Define column arrangement direction

Define module size adaptation

Eliminate white space

Define alignment

Comprehensive practice: designing multi-column web pages

Change the way the box model is composed

Adjust element size

Define outline

Define contour displacement

Define navigation order

Define the direction key control sequence

Add display content

Cancel element style

Be careful when using initial

Overflow handling

Use @font-face rules

Meet the Media Queries module

Know the @media rules

Use @media rules

Apply @media rules to your site

Add voice function

design reflection