H5 new tags and CSS3 new properties

-H5 New Tags

new Element	Description
Video	Represents a video and provides a user interface for playback
Audio	Represents audio
Canvas	Represents a bitmap region
Source	Provide data sources for video and audio
Track	Specifying letters for video and audio
Svg	Defining vector graphs
Code	Code snippet
Figure	Legends related to documents
Figcaption	Description of the Legend
Main
Time	Date and time values
Mark	Highlighted reference text
DataList	Predefined options available to other controls
Keygen	Key pair Generator Control
Output	Calculated value
Progress	Progress bar
Menu	Menu
Embed	Embedded external resources
MenuItem	User-clickable menu items
Menu	Menu
Template
Section
Nav
Aside
Article
Footer
Header

-CSS3
CSS3 is divided into modules, the most important modules are: selectors, box models, backgrounds and borders, text effects, 2d/3d transformations, animations, multi-column layouts, user interfaces

• Selector Selector

• Box model

• Backgrounds and Borders
  Border-radius, Box-shadow, Border-image,
  Background-size: Specify the size of the background image
  Background-origin: Specify the location of the background image
  Background-clip: The drawing area of the specified background
• Text effects (common)
  Text-shadow: Setting text Shadows
  Word-wrap: Force line break
  Word-break
  CSS3 proposes @font-face rules, which define font-family, Font-weight, Font-style, Font-stretch, SRC, unicode-range
• 2/3d Conversion
  Transform: Applying 2/3d transformations to elements
  Transition: Transition
• Animation
• @keyframes Rules:
  Animation, Animation-name, animation-duration, etc.
• User interface (Common)
  Box-sizing, resize
  CSS3 New Pseudo-class
  : Nth-child ()
  : Nth-last-child ()
  : Only-child
  : Last-child
  : Nth-of-type ()
  : Only-of-type ()
  : Empty
  : Target this pseudo-class allows us to select a URL-based element, if the element has a recognizer (for example, followed by a #), then: Target adds a style to the element that uses the ID recognizer.
  : Enabled
  : Disabled
  : Checked
  : not

Semantic Tags:

Improve code readability and maintainability from a developer perspective

From the site perspective, SEO optimization

Semantic label compatibility issues: IE9 The following do not support H5/CSS3 tags, some of the H5 API (IE9 these tags as inline elements only)

How to resolve:

Semantic tags need to be dynamically created Document.createlement (), while the newly created elements are set to block-level elements

or use plug-in ' Html5shiv.js '(must be introduced in the header before the page structure is loaded)

For the high-version browser does not need to judge, only need to determine the low version of the browser: JS can determine the client browser version can be done, but can not do JS pre-loading (navigator.useragent)

FIX: Conditional comment: Load content based on browser version (HTML/CSS, etc.)

<title></title>
<!--[if LT IE 9]><script src= "Bower_components/html5shiv/dist/html5shiv.js" ></script> <! [endif]-->

　　
H5 new tags and CSS3 new properties