HTML5 Enhanced page elements

Source: Internet
Author: User
Tags disk usage

I. Types of HTML5 modified input elements

1.<input type= "number" id= "NUM1" >

var n1 = document.getElementById ("Num1"). Valueasnumber;

Vii. HTML5 Enhanced page elements

1.figure, Figcaption

The <figure> tag provides separate streaming content (images, charts, photos, code, and so on). The content of the figure element should be related to the main content, but if deleted, it should not affect the flow of the document.

The <figcaption> tag defines the caption of the figure Element (caption). The "figcaption" element should be placed in the position of the first or last child element of the "figure" element.

1 <!DOCTYPE HTML>2 <HTML>3 <Body>4 <P>Shanghai Lupu Bridge is the world's first steel structure Arch bridge, is the world's largest span of arched bridges. It is also the world's first fully welded process connected to the large-scale arch bridge (in addition to the closure of the interface using bolted), the total length of the welding seam on the spot of more than 40,000 meters, close to the total length of Shanghai city Ring viaduct. The Lupu Bridge, like the Gulf Bridge in Sydney, Australia, has the function of sightseeing.</P>5 < Figure>6   <figcaption>The Lupu bridge on the Huangpu River</figcaption>7   <imgsrc= "/i/shanghai_lupu_bridge.jpg"width= " the"Height= "234" />8 </ Figure>9 </Body>Ten </HTML>

2.details, summary

<details> tags are used to describe the details of a document or part of a document.

The properties open defines whether details are visible.

Use with <summary> tags to define a title for details. The title is visible, and when the user clicks on the title, the details are displayed.

<! DOCTYPE Html>

  

3.mark, emphasis, highlighting

1 <!DOCTYPE HTML>2 <HTML>3 <Body>4 5 <P>Don't forget to buy<Mark>Milk</Mark>Today.</P>6 7 </Body>8 </HTML>

4.progress Labeling Task Progress (process)

5.meter

The <meter> tag defines a scalar measurement within a known range or a fractal value. Also known as gauge (scale).

Examples: disk usage, correlation of query results, and so on.

Note the:<meter> label should not be used to indicate progress (in the progress bar). If you mark the progress bar, use the <progress> tab.

1 <!DOCTYPE HTML>2 <HTML>3 <Body>4 5 <P>Show measure values:</P>6 <Metervalue= "3"min= "0"Max= "Ten">3/10</Meter><BR>7 <Metervalue= "0.6">40g</Meter>8 9 <P><b>Comments:</b>Internet Explorer does not support meter tags.</P>Ten  One </Body> A </HTML>

6.ol

The <ol> tag defines a sequence table.

1 <!DOCTYPE HTML>2 <HTML>3 <Body>4 <ol>5   <Li>Coffee</Li>6   <Li>Milk</Li>7   <Li>Tea</Li>8 </ol>9 <olStart= " the"Reversed>Ten   <Li>Coffee</Li> One   <Li>Milk</Li> A   <Li>Tea</Li> - </ol> - </Body> the </HTML>

7.dl

The <dl> tag defines a definition list.

<dl> tags are used to combine <dt> (define items in a list) and <dd> (describe items in a list).

1 <Body>2 <H2>A list of definitions:</H2>3 <DL>4    <DT>Computer</DT>5    <DD>The instrument used for calculation ...</DD>6    <DT>Display</DT>7    <DD>A device that visually displays information ...</DD>8 </DL>9 </Body>Ten </HTML>

8.cite

The <cite> tag usually represents a reference to a reference in the text it contains, such as the title of a book or magazine.

By convention, the referenced text is displayed in italics.

Use <cite> tags to separate references to other documents, especially those in traditional media, such as books, magazines, periodicals, and so on. If you refer to these documents with an online version, you should also include the references in a <a> tag to point a hyperlink to the online version.

The <cite> tag also has a hidden feature: it allows you or someone else to automatically extract the bibliography from the document. We can easily imagine a browser that can automatically organize reference tables and display them as footnotes or as separate documents. The semantics of <cite> tags far outweigh the effects of changing the appearance of the text it contains; It enables the browser to express the content of the document to the user in a variety of practical ways.

1 < P > My favorite sport is <cite> basketball </cite></ P >

9.small

<small> label renders small font effect.

The <small> tag is the same as the <big> tag it corresponds to, but it shrinks the font instead of zooming in. If the enclosing font is already the minimum size supported by the font model, then the <small> tag will have no effect.

Similar to <big> tags,,<small> tags can also be nested, thus continuously reducing the text. Each <small> tag will make the text smaller by one number until it reaches the lower limit of one word.

HTML5 Enhanced page elements

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.