HTML5 browser support, new elements

HTML5 Browser support, new elements

Modern browsers support HTML5. In addition, all browsers, including the old and the latest, are automatically processed as inline elements for unrecognized elements. Because of this, you can "teach" the browser to handle "unknown" HTML elements. You can even teach the IE6 (Windows XP 2001) browser to handle unknown HTML elements ( that is, let some older browsers (not support HTML5) support HTML5).

1. Define the HTML5 element as a block element

HTML5 has set 8 new HTML semantics (semantic) elements. All of these elements are block-level elements. In order for the older browsers to display these elements correctly, you can set the Display property value of the CSS to block:

Header, section, footer, aside, nav, main, article, figure {    display:block;}

2. Add new elements to HTML

You can add new elements to the HTML. The instance adds a new element to the HTML and defines a style for the element, with the element name <myHero> :

<! DOCTYPE html>

Operation Result:

Note: The JavaScript statement document.createelement ("Myhero") is to add a new element for IE browser.

3,Internet ExplorerBrowser IssuesYou can use the method above toIEBrowser AddHTML5element, however:Internet Explorer 8and earlierIEversion of the browser does not support the above methods. Fortunately,Sjoerd Visschercreated a"HTML5 enabling JavaScript", " Shiv":
<!--[if Lt IE 9]>  <script src= "Http://html5shiv.googlecode.com/svn/trunk/html5.js" ></script> <! [endif]-->

The above code is a comment that will read the Html5.js file when the version of IE is less than IE9 and parse it.
Note: domestic users please use Baidu Static resource library (Google resource library in the domestic instability):
<!--[if Lt IE 9]>  <script src= "Http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js" ></ script><! [endif]-->

For IE browser Html5shiv is a better solution. Html5shiv Main solution HTML5 proposed new elements are not recognized by ie6-8, these new elements cannot wrap child elements as parent nodes, and CSS styles cannot be applied.

4, the perfectShivSolution Solutions
<! DOCTYPE html>

Operation Result:

Note: The Html5shiv.js reference code must be placed in the 

5,HTML5new Element
 from  1999   years later  html 4.01   has changed a lot    Today, in  html 4.01   HTML5     
to better handle today's Internet applications, HTML5 added a lot of new elements and features, such as : graphic drawing, multimedia content, better page structure, better form treatment, and several API drag and drop elements, positioning, including web pages application caching, storage, network workers, etc. 

6, <canvas> new elements
 
  
 
  
   
 
    
 
     
Label
 
     
Describe
 
    
 
    
 
     
<canvas>
 
     
Labels define graphs, tables, and other images. The label's JavaScript-based drawing API
 
    
 
   
 
 
  

7. New Multimedia Elements
 
  

  
   
 
    
 
     
Label
 
     
Describe
 
    
 
    
 
     
<audio>
 
     
Defining audio Content
 
    
 
    
 
     
<video>
 
     
Defining videos (video or movie)
 
    
 
    
 
     
<source>
 
     
Define multimedia resources <video> and <audio>
 
    
 
    
 
     
<embed>
 
     
Define embedded content, such as plugins.
 
    
 
    
 
     
<track>
 
     
Specify external text tracks for media such as <video> and <audio> elements.
 
    
 
   
 
  

8. New TABLE Element
 
  
 
  
   
 
    
 
     
Label
 
     
Describe
 
    
 
    
 
     
<datalist>
 
     
Defines a list of options. Use this element in conjunction with the INPUT element to define the possible values for input.
 
    
 
    
 
     
<keygen>
 
     
Specifies the key pair generator field used for the form.
 
    
 
    
 
     
<output>
 
     
Defines different types of output, such as the output of a script.
 
    
 
   
 
 
  

9. New semantics and structural elements
HTML5 provides new elements to create a better page structure:

 
  

  
   
 
    
 
     
Label
 
     
Describe
 
    
 
    
 
     
<article>
 
     
Define the sidebar contents of a page
 
    
 
    
 
     
<aside>
 
     
Define content beyond the content of the page.
 
    
 
    
 
     
<bdi>
 
     
Allows you to set a piece of text away from the text orientation setting of its parent element.
 
    
 
    
 
     
<command>
 
     
Define a command button, such as a radio button, a check box, or a button
 
    
 
    
 
     
<details>
 
     
Details used to describe a part of a document or document
 
    
 
    
 
     
<dialog>
 
     
Define dialog boxes, such as prompt boxes
 
    
 
    
 
     
<summary>
 
     
Label contains the title of the details element
 
    
 
    
 
     
<figure>
 
     
Specify separate stream content (images, charts, photos, code, and so on).
 
    
 
    
 
     
<figcaption>
 
     
Define the title of the <figure> element
 
    
 
    
 
     
<footer>
 
     
Defines the footer of a section or document.
 
    
 
    
 
     
 
     
Defines the header area of the document
 
    
 
    
 
     
<mark>
 
     
Defines the text with a token.
 
    
 
    
 
     
<meter>
 
     
Define weights and measures. Measures that are used only for the known maximum and minimum values.
 
    
 
    
 
     
<nav>
 
     
Defines the progress (process) in the run.
 
    
 
    
 
     
<progress>
 
     
Defines the progress of any type of task.
 
    
 
    
 
     
<ruby>
 
     
Defines a ruby annotation (Chinese phonetic notation or character).
 
    
 
    
 
     
<rt>
 
     
Defines the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).
 
    
 
    
 
     
<rp>
 
     
Used in Ruby annotations to define what is displayed by browsers that do not support ruby elements.
 
    
 
    
 
     
<section>
 
     
Define the sections (section, section) in the document.
 
    
 
    
 
     
<time>
 
     
Defines the date or time.
 
    
 
    
 
     
<wbr>
 
     
Specifies where in the text to fit the line break.
 
    
 
   
 
  

 The removed element 
The following HTML 4.01 elements have been deleted in HTML5:

 
  

  
   
 
    
<acronym>
 
    
<applet>
 
    
<basefont>
 
    
<big>
 
    
<center>
 
    
<dir>
 
    
<font>
 
    
<frame>
 
    
<frameset>
 
    
<noframes>
 
    
<strike>
 
    
<tt>
 
   
 
  




HTML5 browser support, new elements