Represents a content block in the page, such as a chapter, header, footer, or other parts of the page. It can be used in combination with elements such as h1, h2, etc. to represent the document structure. Example: <section>…</section> in HTML5; <div>…</div> in HTML4.
article elementIndicates a piece of independent content on the page that is not related to the context. For example, an article.
aside elementRepresents auxiliary information other than the article element content and related to the article element content.
header elementRepresents the title of a content block or real page in the page.
hgroup elementsIndicates combining the titles of a real page or a content block in a page.
footer elementA footnote that represents an entire page or a content block in the page. Generally speaking, it will include the creator's name, creation date, and the creator's contact information.
nav elementsRepresents the part of the navigation link in the page.
Figure element Represents an independent streaming content, generally representing an independent unit in the streaming content of the document body. Use the figcaption element to add a title to the figure element group. For example:<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
Commonly written in HTML4
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>
Other new elements Video ElementsDefine the video. Like movie clips or other video streams. Example: <video src=movie.ogg controls=controls>video element</video>
How to write in HTML4:
<object type=video/ogg data=move.ogv>
<param name =src value=movie.ogv>
</object>
audio elementsDefine audio. Such as music or other audio streams. Example: <audio src =someaudio.wav>audio element</audio>
How to write in html4:
<object type="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>
embed elementUsed to embed content (including various media). The formats can be Midi, Wav, AIFF, AU, MP3, flash, etc. Example: <embed src=flash.swf />
Code example in HTML4 <object data=flash.swf type=application/x-shockwave-flash><object>
mark elementIt is mainly used to visually present the user with text that needs to be highlighted or highlighted. Search keywords are highlighted in typical application search results.
HTML5<mark></mark>;HTML4 <span></span>.
Progress elementRepresents a running process. You can use the progress element to display processes that consume time-consuming functions in JavaScript. Waiting..., please wait later. <progress></progress>.
time elementIt indicates a date or time, and it can also be both at the same time.
Ruby elementDefine ruby comments (Chinese pronunciation or characters).
Use with <ruby> and <rt> tags. The ruby element consists of one or more characters (requires an explanation/pronunciation) and an rt element that provides that information, and also includes an optional rp element that defines what is displayed when the browser does not support the ruby element.
<ruby>
<rt><rp>(</rp>ㄏㄢ<rp>)</rp></rt>
</ruby>
rt elementDefines the interpretation or pronunciation of characters (Chinese pronunciations or characters).
rp elementUsed in ruby comments to define what is displayed in browsers that do not support ruby elements.
wbr elementIndicates soft line breaks. Difference from br element: br element means that line breaks must be opened here; wbr means that when the browser window or parent element has a wide arch (when there is no need to be opened), there is no line break, and when the width is not enough, it actively wraps the line breaks here.
canvas elementDefine graphics, such as charts and other images. The <canvas> element is just a graphic container (canvas) and must be drawn using a script.
<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 -seems to be of little effect. Is there any support problemRepresents a command button, such as a radio button, a check box, or a button.
The command element is visible only if it is within the menu element. Otherwise, this element will not be displayed, but you can use it to specify keyboard shortcuts. .
<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>
details tags Currently only Chrome supports details tagsUsed to describe the details of a document or part of a document.
Can be used with the summary tag, which defines the title for details. The title is visible, and details will be displayed when the user clicks on the title. summary should be the first child element of details.
datalist tagDefine the list of options. Please use this element in conjunction with the input element to define possible input values. datalist and its options will not be displayed, it is just a legal list of input values. Use the list attribute of the input element to bind the datalist.
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
How to use the datagrid tag ?Defines a list of optional data. datagrid is displayed as a tree list.
If the multiple attribute is set to true, you can select more than one item in the list.
How to use the keygen tag ?The tag specifies the key pair generator field used for the form.
When submitting the form, 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 tag Define 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 tagsTags define media resources for media elements (such as <video> and <audio>).
menu tagDefine menu list. Use this tag when you want to list form controls. Note the difference from nav, menu is specifically used for form controls.
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>
Added input tag emailEmail url must be entered
Must enter the URL number
The value range must be entered
The value within a certain range must be entered. Date Pickers (date selector)
New input types with multiple dates and times available:
date - select day, month, year
month - select month and year
week - Select week and year
time - Select time (hours and minutes)
datetime - Select time, day, month, year (UTC time)
datetime-local - select time, day, month, year (local time) search
Used to search for domains, the domain is displayed as a regular text domain. color
Abolished Elements1. Elements that can be replaced by css
basefont, big, center, font, s, strike, tt, u. These elements are purely for picture display. HTML5 advocates the unified editing of picture display functions in CSS.
2. No longer use frame frames.
frameset, frame, noframes. The frame frame is not supported in HTML5, it only supports the iframe frame, or uses a form that conforms to the page composed of multiple pages created by the server, and deletes the above three tags.
3. Only some elements supported by browsers
Applet, bgsound, blink, marquee and other tags.
4. Other abolished elements
Abolish RB and replace Shuyong Ruby.
Abolish acronym using abbr substitution.
Abolish dir to use ul substitution.
Abolish isindex to replace it by combining form and input
Abolish listing using pre substitute
Abolish xmp using code instead
Abolish Nextid's use of guids
Abolish plaintex to use text/plian (unformatted body) MIME type substitution.
=================================================================================
Looking at so many new tags and elements, I wonder if HTML5 is really here? The overwhelming relevant information and tutorials, the announcement of support for html5 by all the HTML5, CSS3 and major browser manufacturers, makes me feel that the html5 era is really coming. So can I use it with confidence in my project? Not yet. Although IE9 has claimed to support html5, IE8 does not support it at all. There are still a large number of people sitting in front of the Bensi master's phone in 2006 and 2007, using the XP system and installing IE8 to crawl the Internet; there are also some old men and sisters who bought the new phones that they clicked off the genuine win7 and replaced it with D version XP. Although now with Html5shiv, IE8 can support some new HTML tags in limited capacity, and only a few new tags. I can choose what new technology to use, but I cannot ask what browser the user of your product must install. In fact, it is not necessary to make new technologies. It is good to be suitable. I think some things written in asp.net2 are as powerful as the function; just like Grandpa Deng’s cat theory, it works.