structure tag
article: tag defines an article
header: tag defines the header of a region on a page
nav: tag defines navigation link
section: Marker defines a region
aside: mark the sidebar that defines the content part of the page
hgroup: related information of a block in the mark definition file
figure: tag defines a set of media content and their titles
figcaption: label defines the title of the figure element
footer: Marker defines the bottom of a page or area
dialog: tag defines a dialog box (conversation box) similar to WeChat
The first supplement: header/section/aside/article/footer
Second addition: header/section/foooter >aside/article/figure/htroup/nav
multimedia tags
video: tag defines a video
audio: tag defines audio content
source: tag defines the media resource
canvas: Canvas is a very powerful API
embed: markup defines external interactive content or plug-ins
Significance of multimedia tags: The emergence of multimedia tags also promotes the development of rich media and supports the operation of media files without plug-ins, which greatly improves the user experience.
Web application tag
status label
meter: status label (real-time status display: air pressure and temperature) (Chrome Opera)
progress: status label (task process: installation and loading) (Chrome Firefox Opera)
list tag
datalist: Define a drop-down list for the input tag, with option (Firefox Opera)
details: tag defines the detailed content of an element, combined with summary (Chrome)
MenuTag
menu: command list (currently not supported by all major browsers)
menuitem: list in menu command (only supported by FireFox8.0)
command:menu tag defines a command button (only supported by IE9)
annotation tag
ruby: tag definition annotation or phonetic notation
rt: tag definition for ruby true comment content text
rp: Tells browsers that do not support ruby elements how to display them
rp: Do not put it in the rt tag
Other tags
mark: mark defines the text with the mark
output: tag defines some input types, calculates form results and matches oninput time
keygen: a generated value in the tag definition form
time: tag defines a date/time, currently not supported by all major browsers
deleted tags
purely expressive elements
Basefont big center font s strike tt u
Elements that negatively impact usability
frane frameset noframes
confusing elements
acribym applet isindex dir
Redefine labels
b: Indicates that inline text is usually bold and does not convey important meaning.
i: Represents inline text, usually in italics. It does not convey important meaning.
dd: can be used together with details and figures, and definitions containing text dialog can also be used.
dt: can be used together with details and figure to summarize details. Dialog can also be used.
hr: Indicates the end of the topic, rather than a horizontal line, although the display is the same
menu: Redefine the menu of the user interface and use it with commond or menuitem
small: indicates small fonts, such as printing notes or legal clauses
strong: indicates importance rather than emphasis.
input
date Pickers input type
Date——Select day, month, year
Month——Select month and year
Week - select week and year
Time - select time (hours and minutes)
Datetime——Select time, day, month, year (UTC time)
Datetime-local——Select time, day, month, year (local time)
The meaning of the new layout
Semantic
HTML5 can replace a large number of meaningless URL tags with many more semantic structured code tags.
1: This semantic feature improves the quality and semantics of web pages
2: Reduce the class and id attributes previously used for css calls
Search engine friendly
The new structure tag brings about changes in web page layout and improves search engine friendliness
HTML5 attribute changes
input
email /url/ number/ range /Date picker /search /color/ tel
form properties
autocomplete/ autofocus /muiltiple/ placeholder /required
link properties
<link rel='icon' href= 'icon.git' type='images/gif' sezes = '16*16' />
target
<base href = "http://localhost/" target = "_blank" >
a:media "" (handhelp tv )
a:hreflang="zh" (Set the language here to Chinese)
a:rel = "external" (set the reference of the hyperlink, this hyperlink guards the external link)
Other properties
script
defer: The script is not executed after loading, but is executed after the entire page is loaded.
<script defer src="URl"></script>
async: Execute immediately after loading the script, without waiting for the entire page to be loaded, asynchronous execution
ol ordered list
Start - starting value
Reversed - Flashback sorting
html
manifest = "cache.manifest" (define page offline application file)
<html manifest = 'cache.manifest'>
Brief description of API
Brief introduction to Canvas
Mobile application
*CSS3* ****
basic selector
wildcard selector, element selector, class selector, id selector, descendant selector
Newly added selector
Child element selector, adjacent sibling selector, universal sibling selector, group selector
attribute selector
Set styles for HTML elements with specified attributes
Using CSS3 attribute selectors, you can specify an attribute of an element, or you can specify an attribute of an element and its corresponding attribute value at the same time.
a[htrf]{} sets the style for the Element element with the attribute attribute
a[href=""]{} sets the style for the Element element with attribute="value" attribute
a[href~=""]{} contains value
a[href^=""]{} The style of all Element elements starting with value
a[href$=""]{} The style of all Element elements ending with value
a[href*=""]{} The style of all Element elements containing value
a[href|=""]{} Selector attribute attribute value is 'value-' or element starting with 'value'
Pseudo class selector
Dynamic pseudo-class
Anchor pseudo-class::link:visited
User behavior pseudo-class: :hover :active :focus
UI element status pseudo-class: we put: enabled: disabled: checked (opera)
CSS3 structure class:
:first-child selects each Element that is the first child of the parent element
:last-child selects the style of the element element that is the last child element of the parent element
:nth-child() matches the Nth child element belonging to its parent element, regardless of element type
:nth-child(n) :nth-child(2n+1) :nth-child(odd):nth-child(even)
:nth-last-child() matches every element belonging to its nth element regardless of type from the last
A child element starts counting
:nth-of-type(N) selector matches each Nth child element belonging to a specific type of the parent element
element
:nth-last-of-type(n) specifies the element type
nth-last-child(n) does not limit the element type
:first-of-type matches every element that is the first child of a specific type from its parent element
:last-of-type matches every element that is the last child element of a specific type of its parent element
:only-child matches every element that is the only child of its parent element
:only-of-type matches every element that is the only child element of a specific type that is its parent element
:empty matches every element that has no child elements (including text nodes)
negative selector
:not(Element/selector) The selector matches every element that is not the specified element/selector
Parent element: not (child element/child selector) (Father: not (Children/selector))
a:not(:last-of-type)
Weights
Weight levels and weights
Inline styles (1000) > ID selectors > Class attribute selectors and pseudo-class selectors (10) > Elements and pseudo-elements (1) > * (0)
A rule containing a higher-weighted selector has a higher weight
The ID selector (#idValue) has a higher weight than the attribute selector [id='idValue']
Selectors with context relationships have a higher weight than simple element selectors.
No matter how many elements make up the selector, no class selector has a high weight.
The wildcard selector weight is 0, and the inherited css property also has a weight, and the weight is also 0
Pseudo element
css pseudo elements are used to set special effects to certain selectors
Syntax format
Element::pseudo-element
Element::first-line style formats the first line of text of element (can only be used for block-level elements)
Element::first-letter sets a special style for the first letter (only for block-level elements)
Element::before inserts new content row-level elements before the element content
Elemetn::after inserts new content after the element content
Element::selection is used to set the background color and foreground color after text is selected in the browser
Rounded corner theory:
border-radius
One value: the four fillet values are the same
Two values: the first value is the upper left corner and the lower right corner, the second value is the upper right corner and the lower left corner
Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner.
The fourth value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;box shadow
box-shadow property
box-shadow:h-shadow v-shadow blur spread color inset;
border image
border-image property
border-image:source slice width outset repeat;
background-clip: border-box: The background is clipped to the border box
background-clip:padding-box: The background is clipped to the padding box
background-clip:content-box: The background is clipped to the content box
background-origin property
The background-origin attribute specifies that the backg-position attribute should be a relative position
background-origin：padding-box border-box content-box
background-size：length|percentage|cover|contain
When only one value is set, the second value is scaled proportionally according to the width of the image.
When both values are present, the image is displayed according to the set value size.
cover will scale the background image proportionally to fill the entire container
background-image：url（"bg2.png"）,url("bg1.jpg"):
the entire background
background：color position size repeat origin clip attachment image;
background-size: 90%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
Gradient
linear gradientslinear gradients
background：linear-gradient（direction,color-stip1, color-stop2）
background：-o-linear-gradient（direction,color-stip1, color-stop2）
background:linear-gradient(angle.color-stop1.stop2,...)
radial gradients
Make a circular gradient from the starting point to the ending color from the inside to the outside (pull from the middle to the outside)
background:radial-gradient(shape,color-stop1,color-stop2,...)
Shape description
circle - circle
ellipse - ellipse (default)
Radial Gradient Size Keyword
grammar
background:radial-gradient(size,color-stop1,color-stop2,...)
Keyword description
closest-side: the closest side farthest-side: the farthest side
closest-corner: the closest corner farthest-corner: the farthest corner
background: -webkit-repeating-radial-gradient(30% 70%, closest-side circle, red, yellow, blue, green);
CSS3 transformation
css3 rotate() conversion
Specify a 2D rotation on the original element through the specified angle parameter (2D rotation)
grammar
transform: rotate(<angle>) The angle can be positive or negative
css3 translate() translation
The move translate() method moves from the current element position based on the parameters given by the X-axis and top Y-axis positions.
translateX(x) only moves horizontally (X-axis movement)
translateY(Y) only moves vertically (Y-axis movement)
translate(x,y) moves horizontally and vertically (moves simultaneously)
transform:translateX(200px);
css3 scale() scaling
scalescale
The scale() method specifies the 2D scale of the object (2D scaling)
three conditions
scaleX(x) The element is only scaled horizontally (X-axis scaling)
scaleY( y) The element only scales in the direction (Y-axis scaling)
scale(x,y) is the simultaneous scaling of the element horizontally and vertically
grammar
transform:scaleX(<number>)
transform:scaleY(<number>)
css3 skew() twist or bevel
css3 matrix() matrix or mix
matrixmatrix
Specify a 2D transformation in the form of a six-valued (a, b, c, d, e, f) transformation matrix
It is equivalent to drinking a [a, b, c, d, e, f] transformation matrix directly
grammar
transform：matrix(a,b,c,d,tx,ty);
Parameter Description
tx,ty, is to reposition the element based on X and Y coordinates
It is a mixture of rotate, translate, translation, scale, and skew.
css3 rotate3d()
css3 translate3d()
css3 scale3d()
css3 matrix3d()
css3 perspective()
rotate rotateX
The rotateX method specifies the rotation angle of the object on the X axis
grammar
transform:ratoteX(angle)
Parameter Description
angle represents the angle of rotation
rotaterotate3d
The rotate3d method specifies the 3D rotation angle of the object
grammar
transform:rotate3d(x,y,z,angle);
Parameter Description
The first three parameters represent the direction of rotation, x, y, z, and the fourth parameter represents the angle of rotation.
Parameters are not allowed to be ignored
Move translateZ
The translateZ method specifies the translation of the Z axis of the object
grammar
transform:translateZ(z);
Parameter Description
The parameter corresponds to the Z axis and is not allowed to be omitted.
Move translate3d()
trans;ate3d(x,y,z)
Parameter Description
Corresponding to X, Y, Z respectively, the axis parameters are not allowed to be omitted.
scalescaleZ
The scaleZ method specifies the z-axis scaling of the object
grammar
transform:scaleZ(z);
Parameter Description
Z axis of parameter object, not allowed to be omitted
scalescale3d
The scale3d method specifies the 3D scaling of the object
grammar
transform:scale3d(x,y,z)；
Parameter Description
Objects x, y, z respectively, parameters cannot be omitted
transform-origin property
grammar
transform-origin:x-axis y-axis z-axis;
matrix in css3
Matrix in css3 refers to a method written as matrix and matrix3d
matrix is the element's movement transformation trasform 2D transformation matrix is 3*3
matrix3d is the movement transformation transform of the element. The 3D transformation rule is a 4*4 matrix.
transform-style property
The transform-style attribute specifies how nested elements are rendered in three-dimensional space
grammar
transform-style:flat/preserve-3d
perspective attribute
Specifying the distance from the observer [z=0] plane creates a perspective effect on elements with three-dimensional position transformations
grammar
perspective:number | none
default value
perspective:none:
perspective-origin attribute
Specify the location of the perspective point
grammar
perspective-origin:x-axis,y-axis
backface-visibility attribute
Specifies whether the back side of an element is visible to the user
grammar
backface-visibility:visible | hidden;
css3 transition transition
Compatibility IE10+ FireFox16+ CHrome26+ Safari6.1 Opera12.1
transition-property property
Detect or set the properties of the object participating in the transition (specify the name of that transition)
grammar
transition-property ：none /all / property
transition-duration attribute
Detect or set the order time for object transitions
grammar
transtion-duration：time；
css3 transition property
transition-timing-function attribute
Retrieves or sets the animation type of the transition in the object
transition-property specifies the property name
transition-duration transition time
transition-timing-function transition method
transition-delay delay
css3 animation
animation animation anima soul animate giving life
Principle of persistence of vision
Humans have the characteristic of 'persistence of vision'. After seeing a painting or an object, human eyes will not disappear within 0.34 seconds.
Animation principles
By grading the changes in expressions and movements of the task and drawing them into many moment-by-moment pictures, the principle of persistence of vision is used. Playing the next painting before one painting disappears will give you a smooth visual change effect
css3 animation
animation-name property
Detects or sets the name of the animation applied to the object
grammar
animaiton-name : keyframename | none
animation-duration attribute
Retrieves or sets the duration of an object's animation
grammar
animation-duration :time
Parameter Description
time specifies the time it takes for the animation to complete. The default value is 0.
animation-timing-function
timing timing adjustment time selection
animation-delay property
Retrieves or This is the delay time for object animation
grammar
animaiton-delay: time;
What is defined is something other than animation
animation-iteration-count attribute
iteration iteration repeats over and over again
animation-iteration-count:infinte | <number>;
animation-direction attribute
Detect or set whether the object animation moves in reverse direction in the loop
animiatoin-direction: normal | reverse | akterbate | alternate-reverse
initial | inherit
normal normal direction
reverse reverse direction
alternate animation first runs normally and then runs in reverse and continues to run alternately
alternate-reverse: The animation first runs in the reverse direction and then in the forward direction, and continues to run alternately
(The above properties must be set to loop playback to work)
animaiton-fill-node property
Specifies the element style to be applied when the animation is not played (when the animation is completed or when there is a delay in the animation)
grammar
animation-fil-mode:;
Parameter Description
none The default value does not set the state of the object outside of animation
forwards sets the state of the object state at the end of the animation
backwards sets the state of the object state when the animation starts
both sets the object state to the end or start state of the animation
naimation-play-state attribute
Specifies whether the animation is running normally or paused
grammar
animation-play-state : paused | running ；
Parameter Description
paused: Specifies to pause the animation
running: The default value specifies the running animation
animation property
Conforms to property retrieval or set animation effects applied to the object
grammar
animation name duration timeing-function delay iteration-count direction fill-mode play-state;
css3 @keyframes {
keyframes-selector {
css-styles ; }
}
Parameter Description
animationname: You must write the name of the definition animation
keyframes-selector must write the percentage of animation duration 0 - 100% form(0%)
to(100%)
css-styles: One or more legal css style attributes must be written
css3 will-change
1:position-fixed replaces background-atachment
2: Place elements with pictures in pseudo elements
3: Use will-change skillfully
Target
Enhance page rendering performance
CPU Japanese GPU
CPU, the central processing unit, interprets computer instructions and processes data in computer software
GPU is a graphics processor that specializes in processing and drawing graphics-related hardware. GPU is designed to perform complex
Designed for mathematical and geometric calculations, it frees the CPU from graphics processing tasks.
Can perform other more system tasks
status quo
CSS animation deformation gradient does not automatically trigger GPU acceleration, but uses the browser's slightly slower software rendering engine. In the world of transition transform and animation, it should be written in the progress to GPU acceleration. Only 3D deformation will have its own layer. 2D deformation will not meeting
translateZ() (or translate3D) Hack
Adding no changes to elements de 3D deformation trick the browser into triggering hardware acceleration
cost
This case takes up RAM and GPU storage space by overlaying the element onto its own layer
want-change
Notify the browser in advance of what animation will be done at a constant speed, allowing the browser to prepare in advance when to optimize the settings
grammar
will-change ：auto scroll-position contents
auto This keyword indicates no specific intention to use any heuristic optimizations that he usually does
scroll-position indicates that the scroll position of the element will be changed
custom-ident explicitly specifies the name to be changed with the given name
animateable-feature can animate some specific values such as left to[ margin, etc.
Notice
Don't abuse advance life remove
/***/