(1) HTML5 is now not a subset of SGML, it is mainly about the image, location, storage, geographical location and other functions of the increase.
Painting canvas elements;
Video and audio elements for media playback;
Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost, sessionstorage data is automatically deleted after the browser is closed;
Semantically better content elements, such as article, footer, header, nav, section;
form controls, calendar, date, time, email, url, search;
The new technology Webworker,websockt and geolocation.
(2) CSS3 new features:
- Achieve rounded corners (Border-radius), Shadows (Box-shadow), Border picture (border-image);
- Add effects to Text (Text-shadow), Force text Wrapping (word-wrap), linear gradient (linear-gradient);
- Achieve rotation transform:rotate (90deg), zoom scale (0.85,0.90), translate (0px,-30px) positioning, tilt skew ( -9deg,0deg);
- Added more CSS selectors, multi-background, RGBA ();
- The only pseudo-elements introduced are:: Selection;
- Implement media Query (@media), Multi-column layout (flex).
(3) The removed element
- Elements of pure expression: basefont,big,center,font,s,strike,tt,u;
- Elements that have a negative impact on usability: frame,frameset,noframes;
(4) HTML5 new label browser compatibility problem is that the browser does not recognize the HTML5 new label and can not be used, there are two ways to solve:
- Method 1: Implement the label is recognized
The Document.createelement (TagName) method allows the browser to recognize new tags, and after the browser supports new tags, you can also add CSS styles to the new tags.
- Method 2:javascript Solution
A) Use Html5shim:
Call the following code in
<!--[If Lt IE 9]>
<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-->
You can also download the file directly to your website, but this file must be called in the head tag.
B) using the Kill IE6
Call the following code before </body>:
<!--if LTE IE 6]>
<script src= "Http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js" ></script>
<! [endif]-->
(5) distinguish between HTML and HTML5:
- DOCTYPE statement
- New elements
What are the new features and elements removed from HTML5\CSS3? How do I handle browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5?