Summary of HTML5 and CSS3

A simple list of HTML5 new things, in the next few days in detail over
A very useful website: www.css88.com

"New label for H5"

The previous tags are completely replaced: header footer aside atrical nav address time Mark section

New Important Tags: video audio caves (drawing)

The role of these new tags: semantic, make the code more readable, easy to improve the search optimization.

Talk about compatibility: compatible IE9+,IE8 and some of the following can be resolved, but most of it is abandoned. Here are two words I feel very good, simply write two sentences.
Graceful downgrade: Guarantee the use of features on advanced browsers, discard low-level browsers.
Progressive enhancement: Low-level browsers only guarantee the implementation of basic functions, and advanced browsers ensure a better user experience.

A useful little thing that can solve some of the Internet Explorer compatibility issues: Html5shiv.js

"JS part of the new Thing"
1 "Get the Element
Odiv=document.queryselectorall (' CSS selector '); --"Select a group

Odiv=document.queryselector (' CSS selector '); Select one, select only the first one if you select a group

Compatibility: only compatible with ie8+ (IE8 only supports css2.0 selectors)

2 "JS custom attribute

Not standard
FF Chrome does not support the browser's view that custom attributes are not canonical, filtering them out

H5 custom properties in front of add: data-custom Property Browser admits this is a custom attribute

Print Custom Properties Console.log (This.dataset); ----> Print out is a JSON, no length
This,dataset. Custom attribute = "Value" to set the value of a custom property

Test performance
Program before Consolog.time (' Hello ');
Program End consolog.timeend (' Hello ');

This.dataset performance is higher than getattribute

3 "Classlist
Used to add, delete, and toggle CSS classes in elements;
The Classlist property is read-only, but can be modified by the Add ()/remove () method;
Multiple items can be added and deleted, add more than one CSS class name within the parentheses;

Compatible with ie10+

Element.classList.add (); Add class name
Element.classList.remove (); Delete class name
Element.classList.contains (); Returns a Boolean value TRUE indicates that the element contains the class name, false means that it does not contain

"New features of HTML5"
1 "geographical location (important) geolocation
2 "Websql front-End Database chicken, no privacy.
3 "JS in multi-threaded and single-thread +

Single thread: Only one thing can be done at a time
Multithreading: A colleague can do a lot of things

Multithreading implementation: Webworker Chicken Ribs: Only a few calculations
4 "WebSocket (important)
Ajax: Single Request Server---and then the server gives you back data performance general
WebSocket: Two-way performance high live
5 "Local Storage (important):
Cookies
Localstorage
View F12--applition Cookie above

Localstrorage and cookies: No cross-domain,

Cookielocalstorage

Size 4k4m
Session End: Close Browser not valid period
Environment required to go Network (delivery mode) do not go Network (local)
Compatibility compatible IE6 incompatible IE6

Simple wording: localstorage.username= ' xiaoer ';
Standard notation Localstorage.setitem (' username ', ' xiaoer ');
Alert (Localstorage.getitem (' username '));

SetItem
GetItem
RemoveItem
Clear

Compatibility:
Compatible with ie7+

6 "Form
The original table cell element input

Input new Attribute Placeholder
Required cannot be empty and must be filled
AutoComplete input prompt, default value is on (on), off (off)
Tel: Phone type
Data date
Month months
Week Week
Color —————— "Get value with onchange This.value
Range Slider (extent)

<progress></progress > Progress bar
Value
Min
Max
<meter></meter>
Value
Min
Max
Event:
New forms, advantages on the phone: auto-Switch keyboard
Oncopy when you copy it.
Oninput

7 "Canvas Drawing label
<canvas></canvas>
The drawing is a vector graphic: amplification without losing true

Umbrella

CSS3: New Style
CSS Triangles
Graphic characters
Icon-font

Border-radius:

Tianox.com

Animation effect:
Transition:1s all ease/linear;
Time which property accelerates deceleration
Compatibility:
Browser prefix
chrome-webkit-
ff-moz-
ie-ms-
Opear original with its own kernel, now with WebKit kernel
Standard kernel does not write or line-webkit-transition:

JS Add browser prefix:----> Some of the browser is also lowercase
ODiv.style.transiton
ODiv.style.WebkitTransition
ODiv.style.MozTransition
ODiv.style.msTransition

Box shadow: box-shadow:0px 0px 100px #000;
X-Direction displacement y-direction displacement blur degree color

Linear gradient: background:-webkid-linear-gradient (gradient angle/gradient start position, color 1 color 1 start gradient position, color 2 color 2 start gradient position);

When the position is top left/right bottom-websit-must write
-45deg from top left to bottom right

Write a four-color transition
Background:-webkit-linear-gradient (Red 25%,green 25%,green 50%,yellow 50%,yellow 75%,deepskyblue 75%);

Radial gradient: background:-webkit-radial-gradient (position of center, shape (circle), color 1 color 1 start gradient position, color 2 color 2 start gradient position);

Center position can write center Center/top left and so on

Repeating gradient: background:-webkit-repeating-linear/radial-gradient ();
You can draw a dart tray.

Mask:-webkit-mask:url ();

Background-size:contain/cover, Height-open, Width-adaptive/width-open, highly adaptive

"Some other infrequently used filters"
-webkit-filter:blur (px);
1. Image Gaussian Blur
-webkit-filter:blur (4PX);
Just write the range, and remember to add PX.
2. Sepia treatment of pictures
-webkit-filter:sepia (1);
Processing range is 0-1 or 0%-100%
3. Image Gray Processing
-webkit-filter:grayscale (1);
The range is 0-1 or 0%-100%.
4. Image reverse Color processing
-webkit-filter:invert (1);
The range is 0-1 or 0%-100%.
5. Image saturation Adjustment
-webkit-filter:saturate (30);
Range is value range >=0 number or Percent 1 is no effect, 0 is grayscale
6. Image contrast adjustment
-webkit-filter:contrast (90);
Value range >=0 number or Percent 1 is no effect
7. Image Brightness Adjustment
-webkit-filter:brightness (3);
Value range >=0 number or Percent 1 is no effect
8. Image Hue Rotation
-webkit-filter:hue-rotate (300DEG);
Value range 0deg-365deg, 0 default value, no effect
9. Shadow Filter
-webkit-filter:drop-shadow (5px 5px 3px #333);

I'll write this today and continue tomorrow.

Summary of HTML5 and CSS3