Review the newly added and abolished tags of html5. review the new and abolished tags of html5.
HTML5 has been prevalent for a while. Do you know how to use tags according to standards, what should be used, and what should not be used. Today I will detail the following:
New Structure label section element
Indicates a content block in a page, such as a chapter, header, footer, or other part of the page. And h1, h2 ...... And other elements are used together to represent the document structure. Example: <section> ...... </Section>; <div>…… In HTML4 ...... </Div>.
Article Element
Indicates an independent content on the page that is irrelevant to the context. For example, an article.
Aside Elements
Auxiliary information related to the content of the article element outside the content of the article element.
Header element
Indicates the title of a content block or a real page in the page.
Hgroup Element
The title of a content block in a real page or page.
Footer Element
Indicates the footer of a content block on the entire page or page. Generally, it includes the Creator's name, creation date, and contact information of the Creator.
Nav Element
The navigation link of the page.
Figure Element
It indicates an independent stream content. Generally, it indicates an independent unit in the content of the main stream of the document. Use the figcaption element to add titles to the figure element group. For example:
- <Figure>
- <Figcaption> PRC </figcaption>
- <P> The People's Republic of China was born 1949 </p>
- </Figure>
- <Dl>
- <H1> prc
- <P> The People's Republic of China was born 1949 </p>
- </Dl>
Other new video elements
Define a video. Such as movie clips or other video streams. Example: <video src = "movie.ogg" controls = "controls"> video element </video>, written in HTML4:
- <Object type = "video/ogg" data = "move. ogv">
- <Param name = "src" value = "movie. ogv">
- </Object>
Audio Element
Define audio. Such as music or other audio streams. Example: <audio src = "someaudio.wav"> audio element </audio>
Written in html4:
- <Object tyle = "application/ogg" data = "someaudio.wav">
- <Param name = "src" value = "someaudio.wav">
- </Object>
Embed element
Used to embed content (including various media ). The format can be Midi, Wav, AIFF, AU, MP3, and flash. Example: <embed src = "flash.swf"/>
Sample Code in HTML4 <object data = "flash.swf" type = "application/x-shockwave-flash"> <object>
Mark Element
It is mainly used to visually display the text to be highlighted or highlighted. The keyword search is highlighted in the search result of a typical application.
HTML5 <mark> </mark>; HTML4 <span> </span>.
Progress Element
Indicates a running process. You can use the progress element to display the time-consuming functions in JavaScript. Waiting ...... , Please wait. <Progress> </progress>.
Time Element
The date or time.
Ruby Elements
Define ruby annotations (Chinese phonetic symbols or characters ).
Used with the <ruby> and <rt> labels. The ruby element consists of one or more characters (one explanation/pronunciation required) and an rt element that provides the information. It also includes optional rp elements, defines the content displayed when the browser does not support the "ruby" element.
<Ruby>
Latency <rt> <rp> (</rp> latency ratio <rp>) </rp> </rt>
</Ruby>
Rt Element
Defines the interpretation or pronunciation of a character (Chinese phonetic alphabet or character.
Rp Element
Used in ruby annotations to define the content displayed by browsers that do not support ruby elements.
Wbr Element
Soft line feed. Difference from the br element: the br element indicates that a line break must be entered here; the wbr indicates that the browser window or the parent element is at the foot width (no line change is required), without line feed, when the width is not enough, take the initiative to wrap the line here.
Canvas Element
Define images, such as tables and other images. <Canvas> elements are only graphical containers (canvases) and must be drawn using scripts.
- <Canvas id = "myCanvas"> </canvas> <script type = "text/javascript">
- Var canvas = document. getElementById (''mycanvas '');
- Var ctx = canvas. getContext (''2d '');
- Ctx. fillStyle = ''# FF0000 '';
- Ctx. fillRect (80,100 );
- </Script>
Command element
It seems that there is no effect. Is there a problem with support?
A command button, such as a single-choice button, check box, or button.
The command element is visible only when it is in the menu element. Otherwise, this element is not displayed, but you can use it to specify keyboard shortcuts.
- <Menu>
- <Command onclick = "alert ('Hello World')">
- Click Me! </Command>
- </Menu>
Details tag
Currently, only Chrome supports the details tag.
Describes the details of a document or a part of the document.
It can be used with the summary label, and the summary can define the title for the details. The title is visible. When you click the title, the details is displayed. Summary should be the first child element of details.
Datalist tag
Define a list of options. Use this element with the input element to define the possible input values. Datalist and its options are not displayed. It is only a list of valid input values. Use the list attribute of the input element to bind datalist.
- <Input id = "myCar" list = "cars"/>
- <Datalist id = "cars">
- <Option value = "BMW">
- <Option value = "Ford">
- <Option value = "Volvo">
- </Datalist>
Datagrid label
Defines a list of optional data. The datagrid is displayed as a tree list.
If you set the multiple attribute to true, you can select more than one project in the list.
Keygen tag
The tag specifies the key pair Generator Field Used for the form.
When a 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 tag
Define different types of outputs, such as the output of scripts.
- <Form action = "form_action.asp" method = "get" name = "sumform">
- <Output name = "sum"> </output>
- </Form>
Source tag
Tags define media resources for media elements (such as <video> and <audio>.
Menu label
Define the menu list. This label is used when you want to list form controls. Note the difference with nav. menu is specifically used for form controls.
- <Menu>
- <Article> <input type = "checkbox"/> Red </article>
- <Article> <input type = "checkbox"/> blue </article>
- </Menu>
Add input tag
Email
Email is required
Url
Url address required
Number
A value is required.
Range
You must enter a value in a certain range.
Date Pickers)
There are multiple new input types available for Date and Time Selection:
Date: Select day, month, and year
Month-select month and year
Week-select week and year
Time-Select time (hours and minutes)
Datetime-select the time, day, month, and year (UTC time)
Datetime-local-Select time, day, month, and year (local time)
Search
Used to search for domains. The domains are displayed as common text domains.
Color
Abolished tags
1. elements that can be replaced by css
Basefont, big, center, font, s, strike, tt, u. These elements are purely for the image display service. HTML5 advocates that the image display function be centrally edited in css.
2. frame is no longer used.
Frameset, frame, and noframes. HTML5 does not support the frame framework. It only supports the iframe framework, or uses the webpage-compliant form created by the server to delete the preceding three tags.
3. Only some elements supported by browsers
Applet, bgsound, blink, marquee, and other labels.
4. Other abolished Elements
Abolished rb and replaced by Shuyong ruby.
Use abbr instead of acronym.
Use ul instead of dir.
Dissembling isindex by combining form with input
Abolish listing and use pre-substitution
Abolish xmp using code substitution
Abolish nextid and use guids
Use the text/plian (unformatted body) MIME type instead of plaintex.
Reprinted from: http://www.aspnetjia.com/Cont-68.html