HTML5 Label Summary

Source: Internet
Author: User
Tags html form table definition time and date

Objective: To statistic the label of HTML5 and divide it according to the application scene

PS: "Tags" for "content" to mark, tell the browser what is "content", how to resolve the "content", tags can also refer to resources embedded documents ...
PS: "tag attributes" are used to modify tags and "content", to tell the browser about the label and "content" additional information, and further tell the browser how to resolve the label and "content", form labels, table tags, a label ... These tags have more unique label properties, while other tags such as most of the document tags, text labels in addition to some of the global label properties (such as: ID, Title, Class), the unique label is basically no
PS: Label attributes: Global, part of the label owned, a label unique

First, the Division of the label (there are 102 of the following statistics)
1, for the structure: document elements, grouped elements
2, for the package content: text labels, table tags, form labels
3, for the introduction of resources, embedded content to the page: embedded tags (not necessarily a single label)
4, the document must label

Second, the document label (16)
H1~h6 Title
Header a relatively independent content of the head
Footer The tail of a relatively independent content
Nav a set of navigation elements
Section A set of related content
Article a piece of independent content
Address represents the contact information for a document or article
Aside represents something that is not relevant to the subject
Hgroup a set of headings
Details to create an area, click on the receive/put, preferably with summary use
Summary used in the details element, set the caption

Third, the Grouping label (12)
P denotes paragraph
div a common element without any semantics, and span is the corresponding element, H5 's document tag can be regarded as the tag after Div semantics
The content format between the pre tags will be preserved
Blockquote says it's a quote from the big part.
HR horizontal line, semantically representing the paragraph-level principal conversion
Ul,ol unordered list, ordered list, need to cooperate with Li
Li list item, the Sub label of UL, OL
DL, DT, and DD DT represent the term internally in the DL, generally serving as the title, and DD in the DL internal definition, generally the content.
Figure represents the picture, with IMG, figcaption use
Figcaption represents the caption of the figure element

Four, text label (28)
1. A generates a hyperlink
2, span common elements, without any semantics, and div corresponding, a default block level of a default line, if not the pursuit of semantics, span tags can achieve most of the text label effect
PS: The above two elements, plus the P element can basically achieve the need to mark the text content, but the semantic label more clear the meaning of the content

3, Time and date
4, U mark a paragraph of text but do not emphasize
5. SUP indicates superscript font
6, sub represents the subscript font
7, small represents the small font content
8, BDO control the direction of the text
9. Ruby denotes a phonetic symbol located above or to the right of the Ideograph
10. RT is used in conjunction with Ruby elements to mark parentheses
11. RP is used in conjunction with Ruby elements to mark parentheses
12. Q Indicates the contents of the quote from elsewhere
13. Mark denotes content related to another context
14, DFN to express the definition of terms
15, S indicates that the text is no longer confirmed
16, Del indicates the deleted text
17, cite the title of other works
18, ABBR Express abbreviation
19. KDB represents user input
20, Samp expression variables
21. var indicates program output
22, code to represent the computer codes
23, EM expressed emphasis
24. I denotes a foreign language or scientific term
25, Strong express important
26, B mark a paragraph but do not emphasize
27. WBR can be safely wrapped
28. BR Forced Line Wrapping

Five, table tags (10)
1, table definition of a table, the table tag should be placed in the label
2, thead+th thead defines a table header, th defines the cell in the table header, th needs to be tr wrapped
3, tbody definition of the main content of the table
4, TFOOT definition of the tail of the table
5. TR defines the rows of the table
6, TD defines the table cell, and th similar, cell label must be in the TR tag
7, col portrait of a column
8, Colgroup A group of longitudinal columns
9, caption The title of the table

Six, Form label (12)
1, form represents HTML form
2. Input represents a control used to collect user input data, and a control that obtains different functions by setting different property values of the Type property
3. Label can bind other controls in the form through the for property to explain other control uses
4, select, option, optgroup form dropdown box combination
5, textarea represents a control that can enter multiple lines of text
6. DataList defines a set of recommended values provided to the user
7, FieldSet, legend groups the controls in the form
8, output expression calculation results
9, button buttons, you can set the type value to get reset, submit, the normal button of the three functions of the button, the control of these functions can be obtained through the input

Seven, embedded tags (15)
1, img embedded picture
2, Map+area Create the partition response map, need to cooperate with the IMG tag
3, the IFRAME embedded in another document
4, embed is used to expand the browser's functionality, most of which are used to add support for Plug-ins.
5, object+ param the label and embed label, but object is the standard of HTML4, and embed is the standard of HTML5. Object not only can embed plug-ins, but also can embed pictures and other content.
6, progress the label can display a progress bar, generally through JS control of the internal value.
7, meter display a range of values
8, audio embedded audio, preferably with the source label use
9. Video embedding, preferably with source label
10, canvas to generate a dynamic graphics canvas
11. svg structured vector content
12, source refers to a variety of media resources
13, track to express the additional track of the media, such as subtitles

Document Prerequisite Tags: define document Types! DOCTYPE, HTML, head, Meta, title, body, script, link, annotation

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.