The header element represents the head title (header) of the page or content block

Usually contains h1-h6 elements or hgrounp

There is no limit to the number of header elements on the page, you can have multiple

You can add a header element to each content block

The hgroup element represents a grouping of titles for a page or block of content.

When an element has multiple levels, the element can put h1 to h6 elements into it

For example, the combination of the main title and subtitle of the article

If you only need one h1-h6 tag, don't use hgroup

The footer element represents the bottom part of the page or content (footer)

Usually contains some basic information about the section (for example: author, related documents, copyright information, etc.)

If footer elements contain entire sections, they represent appendices, indexing similar information.

There is no limit on the number of footers. Except for the different content of the package, the rest is similar to the header.

The nav element represents the navigation link area of ​​the page and is used to define the main navigation part of the page.

Generally, it is only used in the main navigation part of the entire page. If it is not suitable, do not use the nav element.

The section element represents a section in the article or a block of the page

A paragraph refers to a topic-based division of an article, and a block refers to a grouping on a page.

Sections usually have titles

Although section in HTML5 will automatically downgrade h1-h6, it is best to downgrade them manually.

article, nav, and aside can be understood as special sections

So if you can use article, nav, and aside, don’t use section. If it has no practical meaning, use div.

article represents a self-contained piece of content within a document, page, or website

Its purpose is to allow developers to independently develop or reuse

For example, a forum post, a blog article, a user comment, an interactive widget

The article will have a title (usually in the header) and a footer.

If you nest an article inside an article, it means that the embedded article is related to the content outside it.

The aside element is used to place ancillary information part of the main content

The content in aside is relevant information, tags, noun explanations, etc. related to the current article or as ancillary information part of the page or site, such as advertisements, other log links or other category navigation.

min and max

value: Determine the measured value

low, high, optimal: optimal value

Specifies the URL of the file that handles the input control when the current form is submitted.

Note: Only valid for type="submit" and type="image"

Specifies how form data is encoded when submitted to the server and the submission method is post.

Note: Only valid for type="submit" and type="image"

The formenctype attribute of the input element will override the formenctype attribute of the form.

value of formenctype

The formmovalidate attribute overrides the novalidate attribute of the <form> element.

Note: The formnovalidate attribute can be used with type="submit".

max

min

step: Specifies the legal number interval of the input field, the step size of increment or decrement

value: Specifies the default value of the output field

max

min

value: default value

step: number interval

valueMissing

typeMismatch

patternMismatch

tooLong

rangeUnderflow

rangeOverFLOW

stepMismatch

customError

MP3

Ogg

Wav

src: URL of the playback file, which can be passed <source>

controls: Activate the default controls provided by each browser

autoplay: automatic play

loop: loop music after setting

preload: cache settings

duration: total duration

currentTimeCurrent play time

play>play

pause>pause

currentTime = 10; fast forward

currentTime-= 10; rewind

muted>mute

oncanplay: prompts that the video is ready to start playing

OGG: Contains Therora video and Vorbis audio codecs

MP4: Contains H.264 video and AAC audio codecs

Webm contains VP8 video and Ogg Vorbis audio codecs

src: used to read media files

autoplay: Set whether the video plays automatically

width and height attributes: set the width and height of the video

loop: loop playback

poster: used to set the video cover

preload: cache settings

progress: used to update the download progress of the media, which will be triggered periodically

canplaythrough: event that will be triggered when the media plays successfully

canplay: Regardless of the overall status, an event will be triggered as long as a certain playable frame is downloaded.

ended: triggered when the media reaches the end position

pause is called when the media is paused

Triggered when play media is playing

error: triggered when an error occurs during media playback

Example:

method:

strokeStyle: declares the color of the shape line

fillStyle: declares the properties of the inner area of ​​the shape

Supported gradient effects include linear gradients and radial gradients

Gradient supports setting color turning points

grammar:

Attributes:

method:

Attributes:

beginPath(); this method must be called before creating a path

closePath() closes the path and connects the last point to the origin with a straight line. If you want to keep the open path, you do not need to call this method.

stroke() draws a path as an outline shape

fill() draws the path as a solid shape

clip() sets the clipping area in the context

moveTo() moves the stroke to the specified position

lineTo(x,y): Draw a straight line connecting the current stroke position to the specified new position

rect(x,y,width,height) generates a rectangular path

arc(x,y,radius,startAngle,endAngle,direction):

Attributes:

method:

Tile image:

Cut element

Not dependent on resolution

Support event handling

Best for applications with large rendering areas (such as maps)

Not suitable for games

resolution dependent

Event handlers are not supported

Ability to save result images in phg or jpg format

Best for graphics-intensive games

Use the <rect> tag to create a rectangle

Use the <circle> tag to create a circle

cx and cy define the x and y coordinates of the origin (if omitted, the circle center will be set to 0,0,)

The r attribute defines the radius of the circle

Use the <ellipse> tag to create an ellipse

cx and cy define the x and y coordinates of the origin (if omitted, the circle center will be set to 0,0,)

The rx attribute defines the horizontal radius

The ry attribute defines the vertical radius

Use <line> to create lines

The x1 attribute defines the start of the line on the x-axis

The y1 attribute defines the start of the line on the y-axis

The x2 attribute defines the end of the line on the x-axis

The y2 attribute defines the end of the line on the y-axis

Use <polyline> to create polylines

The points attribute is used to store the x- and y-axis coordinates of the starting point, vertex, and end point of the polyline.

Use the <polygon> tag to create polygons with at least three sides

The points attribute defines the x, y coordinates of each corner of the polygon.

Use the <text> tag to create text

Text in SVG can be selected, but text filled using the fillText() method in canvas cannot.

Use the <image> tag to draw pictures

xlink:href=""Link image address

Use the <filter> tag to create filters

The id attribute of the filter tag can define a unique name for the filter

Filter effects are defined through the <feGaussianBlur> tag

<feGaussianBlur> tag stdDeviation attribute defines the degree of ambiguity

in="SourceGraphic" This part defines the creation effect of the entire image

linear gradient

radial gradient

setltem(key, value): Create an item with key-value pairs, and update the value if the primary key exists

getltm(key): Get the corresponding value based on the primary key

sessionStorage.setltem("uname","derek");

var uname =sessionStorage.getlten("uname);

removeItem(key); delete the specified item based on the primary key

clear(): Clear the entire storage space and delete all items

Only IE8 and above versions support the localStorage attribute.

All browsers will convert the value of localStorage to string type

localStorage is not advisable in browser privacy mode

LocalStorage essentially reads strings. If too much content is stored, neicun will be consumed.

localStorage cannot be crawled by crawlers

IE10 and Opera support multi-column attributes

Firefox requires the prefix -moz-

Chrome and Safair require the prefix -webkit-

--transform-function: represents one or more transformation functions, separated by spaces.

--none: Default value, indicating that the element will not be converted

By default, the transformation origin is at the center of the element - or 50% of the X and Y axes

transform-origin: value/percentage/keyword

--One value: represents the position of all axes

--Two values: represents X axis Y axis

--Three values: represents the X-axis, Y-axis, and Z-axis

The translate() method moves the element from the current position to the x or y axis coordinates

translate(x) or translate(x, y)

Possible values

You can also use a single displacement function

The scale() method is used to change the size of the element

scale(x) or scale(x,y)

Possible values

One-way scaling function

The rotate(xx deg) method is used to rotate the element angle size

The skew() method is used to tilt the element

skew(x) or skew(x,y), the value is the angle

You can also use the one-way slope function

perspective property

3D displacement can change the position of the element on the Z axis

3D displacement mainly includes

3D properties

3D zoom

Specify transition attributes, such as background, color, etc.

Specify the time required for the transition

Specify the transition function, which is the speed at which it passes. methods etc.

Specify the transition delay time, indicating the time to start execution

Subtopic 1

Syntax: transition-duration:function

Transition function:

Specifies when the transition effect begins

Syntax: transition-delay:s/ms;

Control every step of the animation with keyframes

Gradually change an element from one style to another

Implement complex animation effects

animation-name: Call animation, specifying the name of the keyframe that needs to be bound to the selector

animation-duration: The time required for the animation to complete a cycle, the value is seconds or milliseconds

animation-timing-function: Specifies the speed curve of animation

animation-delay: Delay time before playback, the value is a numerical value, seconds or milliseconds

animation-iteration-count:play count

animation-direction: animation playback direction