Brief overview of new and repealed tags for html5

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.

Indicates a piece of independent content on the page that is not related to the context. For example, an article.

Represents auxiliary information other than the article element content and related to the article element content.

Represents the title of a content block or real page in the page.

Indicates combining the titles of a real page or a content block in a page.

A 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.

Represents the part of the navigation link in the page.

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>

Video Elements

Define 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>

Define 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>

Used 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>

It 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>.

Represents 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>.

It indicates a date or time, and it can also be both at the same time.

Define 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>

Defines the interpretation or pronunciation of characters (Chinese pronunciations or characters).

Used in ruby ​​comments to define what is displayed in browsers that do not support ruby ​​elements.

Indicates 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.

Define 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>

Represents 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>

Used 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.

Define 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>

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.

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>

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>

Tags define media resources for media elements (such as <video> and <audio>).

Define 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>

Email 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

1. 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.