HTML layout tags and list markers

Statement: The material used in this column is written by the VIP students of the Kay Academy, who has the right to be anonymous and has the final right to interpret the article; The Edith Academy is designed to promote students to learn from each other on the basis of public notes.

Layout markup

The first thing to introduce is the layout tag is the div tag, div can do the page layer also can do the partition of the page. When a div makes a layer of web pages, it can achieve the effect of floating on a Web page, just like the floating ads that we can often see on the site. Div to do the partition of the page, it is possible to decorate the layout of the Web page, a Web page into multiple modules, by the structure of these modules to build a Web page.
The DIV has a style property that is used to control the style, such as the background color, the width of the component, the position of the component, and so on, both basic and style related can be controlled using the Style property.
Example:

Operation Result:

From the running results can be seen, a div is the size of its set, each div is separate, the Web page into a block.

We look at the source code of Baidu Search can be seen, this page with the most mark is div, so you can know that this page is used to layout the div tag:

Let us briefly analyze the layout of this page, from the overall page can be seen that the page is a div to cover the entire page, and then in this div is used in the upper and lower layout mode:
The head Div, which is the div that covers the entire page:

Inside the general upper and lower layout:

On

In

Under

The entire Web page is such a general way of layout:

From the simple analysis above, we can find that almost every div is nested in a div to continue the layout, a Web page like stacked Wood, the div together to build a page, this is a DIV partition application.

We can also imitate such a layout way to make a "Baidu", code example:

Operation Result:

The submission page of the form can be searched using Baidu's receiving page:

The function of the search is very simple first use Baidu casually search, you can get to its server to receive the address of the page and the properties that represent the search keyword:

Then in the Action property of the form to fill in the address of the server to receive the page, and then the text box Name property assigned to WD can take advantage of Baidu Server receive page to achieve the search function:

The above is a DIV partition application, the following is a brief introduction to the DIV layer implementation, in fact Div partition is like a row, and div layer is like columns, code example:

Operation Result:

From the run results you can see that the DIV is a column, and the position is automatically changed when the window is zoomed:

Table tags and div tags are the same as the markup of the page layout, table is mainly used to make tables, table commonly used properties are: Border table boundary line, cellpadding table fill degree, cellspacing spacing distance, Table should be nested THEAD, tbody, Tfood, tr, TH, TD and other labels to implement the table.
Thead is used to represent the head part of a table, and tbody is used to represent the content part of a table, and Tfood is used to represent the end of a table. These three tags have no practical effect, just to get the data to be crawled to identify what part of the table is.
TR implementation table of the row, th implementation table of the table header, TD Implementation table cells, the table is mainly using these three tags to complete, code example:

Operation Result:

There is a colspan attribute in the TD tag that allows the column to be merged, and the number of the attribute represents a combination of columns, noting that the number is the column in which the property itself is located, and the code example:

Operation Result:

From the running results you can see that there is a cell content is squeezed out of the table, because there is no corresponding to delete a cell, the number of columns to be merged to delete the corresponding number of cells:

Operation Result:

The value of the CellPadding property can change the fill level of the table, the larger the value of the table, the larger the value of the CellSpacing property can change the inner spacing distance of the table, code example:

Operation Result:

Border can get rid of the boundary line of the table, code example:

Operation Result:

We can use the Style property to adjust the color of the table, code example:

Operation Result:

The above is the table to make the basic usage of the table is finished, the next introduction to NAV: Navigation bar and footer: The end of the page, in fact, these two marks just play a role in a description of nothing practical, but also in order to crawl the data at the time to let others know that this is a navigation bar this is a page tail , code example:

Operation Result:

The above is the page Layout class label content, mind map Summary:

List tags

The first list to be introduced is the UL unordered list, which is a list of items that are marked with a bold dot (typically a small black circle), and UL needs to nest the Li to implement the list effect. The unordered list starts with the < ul > tag, and each list item starts with < Li; code example:

Operation Result:

This unordered list is the most used list, although the original effect of the unordered list is not good to look at because the style is not used. Unordered list features are suitable for multi-item lists and list boxes in the navigation bar, for example, this page is a navigation bar made with the UL unordered list:

Next is the OL ordered list similarly, a sequence table is also a column of items, and list items are labeled with an increment of numbers, so they are called sequential tables. The sequence table starts with the < OL > tags, and each list item also starts with the < li > tag, code example:

Operation Result:

Finally, the DL custom list, which is not just a list of items, but a combination of items and their annotations. The custom list starts with the < DL > tag, and each custom list item starts with < DT >, and the definition of each custom list item starts at < DD >, and the code example:

Operation Result:

Common List Tags:

HTML layout tags and list markers