Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail the "web front-end page elements and attributes of the use of case analysis", the content is detailed, the steps are clear, the details are handled properly, I hope this "web front-end page elements and attributes of the use of case analysis" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

one。 List element 1.ul element

Ul is an unordered list. There is no order level between the list items. They are usually juxtaposed and sorted in no particular order.

The syntax is:

List item 1 list item 2 list item 3.

Example:

The use of ul element in spring, summer, autumn and winter

There are dots in front of each element in the ul li tag

2.ol element

Ol is an ordered list, that is, a list in order.

The format is:

List item 1 list item 2 list item 3.

Example:

The use of ol elements: apples, bananas, oranges, lemons

Each element in the ol li tag is preceded by a number

3.dl element

Dl is a custom list, and the list item of the custom list is not preceded by any symbols.

The format is:

Noun 1 noun 1 explain 1 noun 1 explain 2. Noun 2 noun 2 explanation 1 noun 2 explanation 2

Example:

The use of dl elements computers for large-scale computing machines can surf the Internet and work very efficiently

4. Nesting application of list

The use of the ol element, the drink coffee latte mocha Tea Biluochun Longjing II. Structural element

(this element is generally rarely used)

1.header element

This element can contain all the content that is usually placed at the head of the page, which is usually used to place the title of the entire page or a content block within the page.

Format:

The theme of the page.

2.nav element

Used to define navigation links, this element can summarize navigation links in an area, making the semantics of the page more clear.

Format:

Contact us on the home page of the company profile and product presentation

The nav element is generally used in the following situations:

Traditional navigation bar

Sidebar navigation page

Internal navigation

Page turning navigation

3.article element

The article element represents a separate part of a document, page, or application that is irrelevant to the context. It is used to define a log, a piece of news, a user comment, etc.

Example:

The use of the article element Chapter 1 Section 1 Section 2 Chapter 2

4.aside element

The aside element is used to define the subsidiary information section of the current page or article. It can contain references, sidebars, ads, navigation bars, and other similar parts related to the current page or main content that are different from the main content.

There are two main uses of the aside element:

The subsidiary information contained within the article element as the main content is used outside the article element as the subsidiary information part of the page or site overall.

The most commonly used form is the sidebar, in which the content can be friendship links, advertising units and so on.

5.section element

The section element is used to block content on a page in a Web site or application, and a section element usually consists of content and title.

Don't use the section element as a styling page container, which is a feature of div.

If the article element, aside element, or nav element is more qualified for use, do not use the section element.

Do not use section elements to define content blocks without titles.

6.footer element

The footer element is used to define the bottom of a page or area, which can contain all the content that is usually placed at the bottom of the page.

three。 Grouping element

1.figure element and figcaption element

The figure element is used to define independent stream content (images, diagrams, photos, code, etc.), which generally refers to a single unit. The content of the figure element should be related to Takeuchi, but if deleted, it will not affect the document flow. The figcaption element is used to add a title to a group of figure elements, and a maximum of one figcaption element is allowed within a figure element, which should be placed in the first or last child element of the figure element.

2.hgroup element

The hgroup element is used to combine multiple headings (main headings and subheadings or subheadings) into a title group, usually in combination with the h2~h7 element.

Note the following when using hgroup:

The hgroup element is not recommended if there is only one title element

When one or more headings and elements appear, it is recommended to use the hgroup element as the title element.

When a title contains a subtitle, section, or article element, it is recommended that you store the hgroup element and the title element in the header element container.

Example:

The use of hgroup elements on my personal website, my personal works

Happy, happy every day.

four。 Page interaction element

1.details element and summary element

The details element is used to describe the details of a document or part of a document. The summary element is often used in conjunction with the details element as the first child of the details element to define the title for the details. The title is visible, and when the user clicks the title, the rest of the details is shown or hidden.

Example:

Use of details and summary elements display list 1 list 2

2.progress element

The progress element is used to indicate the progress of completion of a task.

There are two common attribute values for the progress element:

Value: the amount of work done.

Max: how much work is there in total?

(the value of the value and max properties must be greater than 0, and the value of value must be less than or equal to the value of the max property)

Example:

The progress of my work on the use of progress element

3.meter element

The meter element is used to represent a numeric value within a specified range. For example, display the capacity of the hard disk or the proportion of votes cast for a candidate.

The meter element has several commonly used attributes

Attribute description high defines the value of the measure at that point where the value of the measure is defined as high low defines the value of the metric at that point is defined as low, max defines the maximum value, and the default value defines the minimum value for 1min. The default value is 0optimum to define what kind of measure is the best value value defines the value of the measure the use of the meter element student score list

Xiao Hong: 65 Xiao Ming: 80 Xiao Li: 75

five。 Text-level semantic element 1.time element

The time element is used to define an event or date and can represent a time in 24 hours.

The time element has two attributes:

Datetime: used to define the appropriate time or date. The value is a specific time or a specific date. When the attribute is not defined, the date / time is given by the content of the element

Pubdate: used to define that the date / time in the time element is the date the document was published

2.mark element

The main function of the mark element is to highlight certain characters in the text to attract the user's attention.

Example:

The use of the mark element Little Apple

I planted a seed and finally grew fruit.

3.cite element

The cite element can create a reference tag for the reference description of a document reference, and once the tag is used in the document, the document content of the tag is displayed on the page in italics to distinguish other characters in the paragraph.

Example:

Use of the cite element

Maybe the more beautiful it is, the more fragile it is, just like a bubble in the middle of summer.

The Bubble Summer of Mingxiaoxi VI. Global attribute

1.draggable attribute

The draggable attribute is used to define whether an element can be dragged. It has two values: true and false. If it is only true, it means that the element can be dragged after it is selected, otherwise it cannot be dragged.

Format:

Element drag attributes these words can be dragged by draggable pictures

2.spellcheck attribute

The spellcheck attribute is mainly aimed at input elements and textarea text input boxes to check the spelling and grammar of the text entered by the user. The spellcheck property has two values: true (the default) and false, which detects the value in the input box when the value is true, and vice versa.

Example:

Using input box syntax detection of spellcheck elements

The spellcheck attribute value is true html5

The spellcheck attribute value is false html5

3.contenteditable attribute

The contenteditable attribute specifies whether the content of an element can be edited, but only if the element has mouse focus and its contents are not read-only.

Example:

The use of contenteditable elements editable list 1 list 2 list 3 read here, this article "web front-end page elements and attributes use case analysis" article has been introduced If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.