HTML5 browser support, new elements, and html5 browser New Elements

HTML5 browser support, new elements, and html5 browser New Elements
HTML5 browser support and new elements

Modern browsers support HTML5. In addition, all browsers, including the old and the latest, automatically process unrecognized elements as inline elements. Because of this, you can "teach" browsers to process "unknown" HTML elements. You can even teach IE6 (Windows XP 2001) browsers to process unknown HTML elements (that is, to make some earlier browsers (HTML5 not supported) Support HTML5 ).

1. Define HTML5 elements as block elements

HTML5 has 8 new HTML semantic elements. All these elements are block-level elements. To make the browser of the old version correctly display these elements, you can set the display attribute value of 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 HTML. This instance adds a new element to HTML and defines a style for this element. The element name is<MyHero>:

<! DOCTYPE html> 

Running result:



Note:JavaScript statementsDocument. createElement ("myHero ")To add new elements to the IE browser.


3. You can use the above method to add HTML5 elements to Internet Explorer. However, Internet Explorer 8 and earlier IE versions do not support the above methods. Fortunately, Sjoerd Visscher created "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, which is used to read the html5.js file and parse it when the IE browser version is earlier than IE9.
Note:Domestic users should use Baidu static resource library (Google resource library is unstable in China ):
<!--[if lt IE 9]>  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->


Html5shiv is a good solution for IE browsers. Html5shiv mainly solves the problem that the new elements proposed by HTML5 are not recognized by the IE6-8. These new elements cannot wrap child elements as parent nodes, and they cannot apply CSS styles.


4. Perfect Shiv Solution
<! DOCTYPE html> 

Running result:




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


5. New HTML5 Elements

Since 1999, HTML 4.01 has changed a lot. Today, several elements in HTML 4.01 have been discarded and have been deleted or redefined in HTML5.
To better process today's Internet applications, HTML5 has added many new elements and functions, such as graphic rendering, multimedia content, better Page Structure, and better form processing, and several api drag-and-drop elements, including web application caching, storage, and network workers.



6. <canvas> New Elements

  

 
   
 
    
 
     
Tag
 
     
Description
 
    
 
    
 
     
<Canvas>
 
     
Labels define graphs, such as tables and other images. JavaScript-Based Drawing API
 
    
 
   

  




7. New multimedia elements

  

 
   
 
    
 
     
Tag
 
     
Description
 
    
 
    
 
     
<Audio>
 
     
Define audio content
 
    
 
    
 
     
<Video>
 
     
Define a video (video or movie)
 
    
 
    
 
     
<Source>
 
     
Define multimedia resources <video> and <audio>
 
    
 
    
 
     
<Embed>
 
     
Defines embedded content, such as plug-ins.
 
    
 
    
 
     
<Track>
 
     
Specifies an external text track for media such as <video> and <audio>.
 
    
 
   

  




8. New form elements

  

 
   
 
    
 
     
Tag
 
     
Description
 
    
 
    
 
     
<Datalist>
 
     
Define a list of options. Use this element with the input element to define the possible input values.
 
    
 
    
 
     
<Keygen>
 
     
Specifies the key pair Generator Field Used for the form.
 
    
 
    
 
     
<Output>
 
     
Define different types of outputs, such as the output of scripts.
 
    
 
   

  




9. New semantic and structural elements

HTML5 provides new elements to create a better Page Structure:

  

 
   
 
    
 
     
Tag
 
     
Description
 
    
 
    
 
     
<Article>
 
     
Define the sidebar content of the page
 
    
 
    
 
     
<Aside>
 
     
Defines content other than the page content.
 
    
 
    
 
     
<Bdi>
 
     
You can set a text segment to remove it from the text direction of its parent element.
 
    
 
    
 
     
<Command>
 
     
Define command buttons, such as single-choice buttons, check boxes, or buttons
 
    
 
    
 
     
<Details>
 
     
Used to describe details of a document or part of the document.
 
    
 
    
 
     
<Dialog>
 
     
Define dialog box, such as prompt box
 
    
 
    
 
     
<Summary>
 
     
The label contains the title of the details element.
 
    
 
    
 
     
<Figure>
 
     
Define independent stream content (images, charts, photos, Code, etc ).
 
    
 
    
 
     
<Figcaption>
 
     
Define the title of the <figure> element
 
    
 
    
 
     
<Footer>
 
     
Define the footer of a section or document.
 
    
 
    
 
     
<Header>
 
     
Defines the header area of the document.
 
    
 
    
 
     
<Mark>
 
     
Defines text with a mark.
 
    
 
    
 
     
<Meter>
 
     
Define a scale. It is used only for measurements with the largest and minimum values known.
 
    
 
    
 
     
<Nav>
 
     
Define the running Progress (process ).
 
    
 
    
 
     
<Progress>
 
     
Defines the progress of any type of task.
 
    
 
    
 
     
<Ruby>
 
     
Define ruby annotations (Chinese phonetic symbols or characters ).
 
    
 
    
 
     
<Rt>
 
     
Defines the interpretation or pronunciation of a character (Chinese phonetic alphabet or character.
 
    
 
    
 
     
<Rp>
 
     
Used in ruby annotations to define the content displayed by browsers that do not support ruby elements.
 
    
 
    
 
     
<Section>
 
     
Define sections (sections and sections) in the document ).
 
    
 
    
 
     
<Time>
 
     
Defines the date or time.
 
    
 
    
 
     
<Wbr>
 
     
Specifies where to add line breaks in the text.
 
    
 
   

  


10. removed Elements

The following HTML 4.01 elements have been deleted in HTML5:

  

 
   
<Acronym>
 
   
<Applet>
 
   
<Basefont>
 
   
<Big>
 
   
<Center>
 
   
<Dir>
 
   
<Font>
 
   
<Frame>
 
   
<Frameset>
 
   
<Noframes>
 
   
<Strike>
 
   
<Tt>