New structure Tags
- Section element
Represents a chunk of content in a page, such as a chapter, header, footer, or other part of a page. Can and H1, H2 ... Such elements are used to represent the document structure. Example: <section>......</section>; in HTML5 HTML4 <div> ......</div>.
- article Elements
Represents a piece of independent content in the page that is not relevant to the context. such as an article.
- aside elements
Represents the secondary information that is related to the content of the article element outside the content of the article element.
- Header Element
Represents the title of a content block or a page in a page.
- Hgroup Elements
Represents a combination of the title of a chunk of content in a page or page.
- Footer Elements
A footnote that represents a chunk of content in an entire page or page. In general, he will include the creator's name, date of creation, and the author's contact information.
- nav Element
Represents the part of a navigation link in a page.
- Figure element
Represents a separate stream content that typically represents a separate unit in the content of the document body flow. Use the Figcaption element to add a caption to the group of figure elements. For example:
<figure>
<figcaption>PRC</figcaption>
<p>the people ' s Republic of China is born in 1949</p>
</figure>
HTML4 Writing in common
<dl>
<p>the people ' s Republic of China is born in 1949</p>
</dl>
Additional elements to add
- Video Element
Define the video. Like movie clips or other video streams. Example: <video src= "Movie.ogg" controls= "controls" >video elements </video>
HTML4 in:
<object type= "Video/ogg" Data= "MOVE.OGV" >
<param name = "src" value= "MOVIE.OGV" >
</object>
- Audio Element
Defines the audio. such as music or other audio streams. Example: <audio src = "someaudio.wav" >audio element </audio>
HTML4 in:
<object tyle= "Application/ogg" Data= "Someaudio.wav" >
<param name = "src" value= "someaudio.wav" >
</object>
- Embed elements
Used to embed content (including various media). The format can be midi, Wav, AIFF, AU, Mp3,flash and so on. Example: <embed src= "flash.swf"/>
HTML4 code sample <object data= "flash.swf" type= "Application/x-shockwave-flash" ><object>
- Mark Element
It is primarily used to visually present to the user which text to highlight or highlight. The search keywords are highlighted in the typical application's results.
html5<mark></mark>; HTML4 <span></span>.
- Progress Elements
Represents a running process that can use the progress element to display the process of a time-consuming function in JavaScript. Wait ... please wait a moment. <progress></progress>.
- Time Element
Represents a date or time, and can also be both.
- Ruby Elements
Defines a ruby annotation (Chinese phonetic notation or character).
Used in conjunction with <ruby> and <rt> tags. A RUBY element consists of one or more characters (requiring an explanation/pronunciation) and an RT element that provides that information, and an optional RP element that defines what is displayed when the browser does not support the "Ruby" element.
<ruby>
Han <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt>
</ruby>
- RT Element
Defines the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).
- RP Element
Used in Ruby annotations to define what is displayed by browsers that do not support ruby elements.
- WBR Elements
Represents a soft line break. Differences from BR elements: The BR element indicates that a line must be wrapped here, wbr means that the browser window or parent element is full-width (no need to change lines), does not wrap, and is active here when the width is not enough.
- Canvas Elements
Define graphs, tables, and other images. The <canvas> element is just a graphics container (canvas), and you must use a script to draw the graphic.
<canvas id="myCanvas"></canvas><script type= "Text/javascript" >
var Canvas=document.getelementbyid (' MyCanvas ');
var ctx=canvas.getcontext (' 2d ');
ctx.fillstyle= ' #FF0000 ';
Ctx.fillrect (0,0,80,100);
</script>
- Command Element --it seems to have little effect. Is there a problem with support?
Represents a command button, such as a radio button, a check box, or a button.This element is visible only if the command element is inside a menu element. Otherwise, this element is not displayed, but it can be used to specify keyboard shortcuts.
<menu>
<command onclick= "alert (' Hello World ')" >
Click me!</command>
</menu>
details tab currently only Chrome supports Details tab
A detail used to describe a part of a document or document.
Can be used with summary tags, summary can define headings for details. The title is visible, and when the user clicks on the title, the details are displayed. Summary should be the first child element of details.
DataList label
Defines a list of options. Use this element in conjunction with the INPUT element to define the possible values for input. DataList and its options are not displayed, it is just a valid list of input values. Use the INPUT element's List property to bind the DataList.
<input id= "MyCar" list= "Cars"/>
<datalist id="cars">
<option value= "BMW" >
<option value= "Ford" >
<option value= "Volvo" >
</datalist>
Defines a list of optional data. The DataGrid is displayed as a tree list.
If you set the Multiple property to True, you can select more than one item in the list.
How does the keygen tag work?
The label specifies the key pair generator field used for the form.
When the form is submitted, the private key is stored locally and the public key is sent to the server.
<form action= "demo_keygen.asp" method= "Get" >
Username: <input type= "text" name= "Usr_name"/>
Encryption: <keygen name="security" />
<input type= "Submit"/>
</form>
- Output label
Defines different types of output, such as the output of a script.
<form action= "form_action.asp" method= "Get" name= "Sumform" >
<output name= "Sum" ></output>
</form>
- Source Label
Tags define media resources for media elements such as <video> and <audio>.
- Menu Label
Defines a menu list. Use this label when you want to list the form controls. Note the difference from NAV, where menu is used exclusively for form controls.
<menu>
<li><input type= "checkbox"/>red</li>
<li><input type= "checkbox"/>blue</li>
</menu>
Add input Tag
- Email
Email must be entered
- wr.
You must enter a URL address
- Number
Value must be entered
- Range
Values must be entered in a certain range
- Date pickers (day selector)
There are several new input types that can be selected for the date and time:
Date-Select day, month, year
Month-Select months, years
Week-Select minute
Time-Select the Times (hours and minutes)
DateTime-Select time, day, month, year (UTC time)
Datetime-local-Select time, day, month, year (local time)
- Search
For the search domain, the field is displayed as a regular text field.
- Color
Elements of abolition
1. Elements that can be replaced with CSS
Basefont, big, center, font, S, Strike, TT, U. These elements are purely for the screen display service, HTML5 in the promotion of the display features in the CSS unified editing.
2, no longer use frame frame.
Frameset, frame, noframes. Frame frames are not supported in HTML5, only the IFRAME framework is supported, or the above three tags are removed with a page-by-page format created by the server side.
3. Only some elements supported by the browser
Applets, Bgsound, Blink, Marquee and other tags.
4. Other elements that have been abolished
Abolish RB, Tree Yong Ruby instead.
Repeal acronym use ABBR substitution.
Revoke DIR using UL instead.
Repeal Isindex use form and input in a way that replaces
Repeal listing using the pre override
Revoke XMP Using code substitution
Abolition of NextID using GUIDs
Repeal Plaintex uses the "Text/plian" (unformatted body) MIME type substitution.
===========================================================
Looking at so many new tags and elements, I was thinking HTML5 really came? Overwhelming information, tutorials, everyone mouth closed HTML5, CSS3 and the major browser manufacturers announced the support of HTML5, let me feel that the HTML5 era really came. Can I use it safely in my project? Not yet. Although IE9 has claimed support for HTML5, IE8 does not support it at all. There are still a large number of people sitting in the 06, 07, Ben Four old machine, using the XP system, installed IE8 in the crawl network, there are some nostalgia elder brother, elder sister, buy new machine to remove the genuine Win7, change on the D version XP. Although now with the Html5shiv, can let IE8 limited support some new HTML tags, but also just a few new tags. I can choose what new technology to use, but I can't ask the user of your product to install what browser (unless you do something for competes, the Spring Festival ticket is only for me to sell, must be loaded IE10 to buy tickets ...). ）。 In fact, do not necessarily have to do something new technology, suitable for the good, think now some with Asp.net2 write the East function as powerful; Just like Grandpa Deng's "Cat theory", it works just fine.
Links: http://www.cnblogs.com/mzwhj/archive/2013/02/18/2916393.html
