New elements of the HTML5

Today to open a blog to see that they have a small fan, to tell the truth is quite happy, insist on blogging for half a year, and finally ushered in their first small partner. Finally, it's been a long time to see the result.

A few days ago participated in our College teacher's competition---"The Young Teacher competition preliminary". I was pulled by our teacher to volunteer-----a timer. Watching all the teachers of the game, although very good, but I was impressed by a HTML5+CSS3 course. Seeing that cool effect, I was instantly attracted to it. So busy with the homework on hand, from someone else to the HTML5 tutorial, began my study HTML5 road. Although saw 6 lessons, still did not learn the kind of effect that the teacher demonstrates, but in this six class really felt the charm of HTML5, greatly reduced the amount of code, not only so, the previous tedious effect can be easily realized. And you can also adapt to the screen, if you really mastered the technology, my Android development will benefit a lot of it.

• Structural elements

Header Elements

HTML5 in the Header An element is a structure element that has a bootstrap and navigation effect that can contain all the content placed on the head of the page. Header elements are usually used to place the entire page or the title of a content chunk within a page , or to include a logo image of the site , and a search form for other relevant content. Its basic syntax format is:

......

Exp01.html

Note: Header element is not Head element, in HTML Web page, there is no limit Header number of elements, a Web page can use multiple Header element can also be added for each content block. Header element.

article Elements

The article element represents a separate part of the document, page, or application that is not relevant to the context. This element is often used to define a log, a news article, or user comments. Article elements are often partitioned using multiple section elements, and article elements in a page can appear multiple times.

Exp02.html

Time Elements

The time element is used to define times or dates, which can represent a time in a 24-hour period. Time does not render any special effects in the browser, but the element can encode dates and times in a machine-readable manner so that users can add birthday reminders or other events to the timeline, and search engines can generate smarter search results.

The time element has two properties:

Datetime: Used to define the appropriate time or date. When the value is a specific time (such as 14:00) or a specific date (for example: 2015-09-01), when the attribute is not defined, the content of the element is given a date/time.

Pubdate: Used to define the date/time in the timing element as the publication date of the document (or article element). The value is generally "pubdate".

Exp03.html

Address element

Exp05.html

Footer elements

The footer element is used to define the bottom of a page or area, which can contain all the content that is normally placed at the bottom of the page. Before HTML5 appears, it is common to use <div id= "footer" ></div> tags to define the bottom of the page, which is easily implemented by HTML5 elements.

As with the header element, a page can contain multiple footer elements. You can also add footer elements to the article element or section element.

Exp06.html

Nav element

The nav element is used to define a navigation link, which is a new element of HTML5, which can be summarized in a region with a navigational link, making the semantics of the page element more explicit. The navigation elements can be linked to other pages of the site, or to other parts of the current page.

Exp07.html

In the above code, the navigation structure is built by nesting the unordered list ul inside the nav element. Typically, an HTML page can contain more than one NAV element as a navigation for the whole or different parts of the page. Specifically, the NAV element can be used for several occasions.

Traditional navigation bar: At present, there are different levels of navigation bar on the main website, which is to jump to other main page of the website.

Sidebar Navigation: The current mainstream blog site and e-commerce site has a sidebar navigation, the purpose of the current article or the current product page to jump to other articles or other product pages.

In-page navigation: its role is to jump between several major components of this page.

Page Action: The page turn operation is in the Content section of this webpage, you can click "Previous page" or "next page" to toggle, or you can click the actual number of pages to jump to a page.

In addition to the above, the NAV element can also be used in other important, basic navigation link groups.

It is important to note that not all link groups are placed in the nav element, only the main and basic links are placed in the nav element.

Aside elements

The aside element is used to define the current page or the subordinate information portion of the article, which can contain references to the current page or main content, sidebar, ads, navigation bars, and other similar parts that are different from the main content.

The use of aside elements is divided into two main types:

The ancillary information that is contained within the article element as the primary content.

Used outside of the article element as a part of the subsidiary information for a page or site global. The most commonly used form is the sidebar, where content can be links. Ad units and so on.

Exp08.html

The first aside element is located in the article element to add additional information about the article, and the 2nd aside element is used to hold the sidebar content of the page

Section element

A section element is used to block content on a page in a Web site or application, and a section element is usually composed of content and headings. There are 3 points to note when using the section element.

Do not use the section element as a style-setting page container, which is the attribute of the Div. The section element is not an ordinary container element, and it is recommended to use a div when a container needs to be defined directly or through a script definition behavior.

If the article element, aside element, or NAV element are more qualified, do not use the section element.

Content chunks without headings do not use the section element definition.

Exp09.html

The header element is used to define the title of the article, and the section element is used to store the comment content of the sheet, and the article element is used to divide the content defined by the sections element into two parts.

Grouping elements

Grouping elements are used to group the contents of a page. The 3 elements related to grouping in HTML5 are the figure element, the figcaption element, and the Hgroup element, respectively.

Hgroup elements

The Hgroup element is used to make multiple headings (main and subtitle or subheadings) a group of headings, typically used in combination with H1-H6 elements. Typically, the hgroup element is placed in the header element.

The following points should be noted when using Hgroup elements.

The Hgroup element is not recommended if only one header element is used.

When one or more of the headings and elements appear, it is recommended to use the Hgroup element as the caption element.

When a title contains a subtitle, section, or article element, it is recommended that the elements associated with the Hgroup element and caption be placed in the header element container.

Exp04.html

To better illustrate the capabilities of each group, hgroup elements are often used in conjunction with Figcaption.

The following is a demonstration of a case:

Figure element

In HTML5, figure elements are often used to define independent content (images, charts, photos, code, and so on), and generally refer to a single unit. The content of the figure element should be related to the main content, but it will not affect the flow of the document if it is deleted. The figcaption element is often used to add a caption to a group of figure elements, allowing a maximum of one figcaption element within a figure element, which should be placed at the position of the first or last child of the figure element.

Exp10.html

Type of input for the new type of form type

Meter elements

The meter element is used to represent a numeric value within a specified range. For example, the meter element can be used to display the capacity of a hard disk or to vote for a candidate as a percentage of the total number of votes.

Property	Description
High	Value that defines the value of the measure at which point is defined as high
Low	Defines the value at which the value of the measure is defined as low
Max	Defines the maximum value, the default value is 1
Min	Defines the maximum value, the default value is 0
Optimum	Defines what measures are the best values. If the value is higher than the high value, it means that the higher the value, the better. If the value is lower than the value of the low property, it means that the lower the value, the better
Value	Define a value for a measure

Progress elements

The progress element is used to represent the completion progress of a task. The progress can be indeterminate, just to indicate that progress is underway, but it is unclear how much work is still not done. You can also use a number between 0 and a maximum number (such as 100) to indicate accurate progress completion (such as percent progress)

There are two common attribute values for the progress element.

Value: The amount of work that has been completed.

Max: The total amount of work.

It is important to note that the value and the Max property must have values greater than 0, and value is less than or equal to the value of the Max property.

Exp10.html

Video properties:

New elements of the HTML5