Chapter 2 project practice-fixed PC deployment [2], practice-pc

Source: Internet
Author: User

Chapter 2 project practice-fixed PC deployment [2], practice-pc

Learning points:

1. Outline Algorithm

2. section and div

3. Structure Analysis

Lecturer: Li Yanhui

 

This chapter describes how to use HTML5 and CSS3 to build Web pages. The first project is implemented with a fixed PC layout.

I. Outline Algorithm

There is a very important concept in HTML5, called the HTML5 outline algorithm (HTML5Outliner). Its purpose is to provide users with a page information structure directory. For example, the manual we often use is a very good outline structure:

Https://gsnedders.html5.org/outliner/

This tool can upload a local html file, enter a URL, or write HTML5 code on multiple lines of text boxes to understand the outline.

By writing the code of the previous lesson, we can find that the outline on this page is very ugly and there are three Untitled sections. This indicates that the outline title is missing and is not standardized. If your page is tested here and the outline is clear, the HTML5 page is relatively standard.

// Outline directory structure

1. UntitledSection

1. UntitledSection

1. Luancheng Travel Service

2. UntitledSection

Ii. section and div

First, we will not discuss how to make the html5 page outline compliant. First, we will discuss the differences between section and div.

Div elements are commonly used labels before html5. They have no semantics and are used for page layout, CSS styles, and JS calls. The purpose of the div is clear:

1. If the page layout is not exclusive areas such as header and footer, div should be used;

2. If you just define CSS styles for one end content, you should also use div;

3. If you want to perform JS control on a piece of content, you should also use div.

In html5, section is not used to replace div. I have learned a little about the basic course. It is a semantic document tag. It indicates a section in a document. For example, it contains a title and a paragraph. In the outline specification, it must contain at least one title.

// Section requires at least one h1 ~ H6

<Section> 

Through the description of appeal, we add h2 to the section label below to fulfill the outline requirements. The final outline is structured as follows:

// Outline directory structure

1. UntitledSection

1. UntitledSection

1. Luancheng Travel Service

2. Potter

It is found that the last UntitledSection already has a title and complies with the specifications. For the first two, we will talk about them later. Now let's look at another question. Since div is used for layout without any semantics or style definition, we need to look at the following code using div or section.

// Use section or div here?

<Section class = "center"> 

In terms of structure, the section must contain at least one h1 ~ H6. But what is confusing is that section is the title of a region section, and h1 is the title of the entire website. The ul part is navigation hyperlink. Strictly speaking, it is not the content of the chapter. The most important part is the section used for layout style definition, so I personally think it is more appropriate to use div here.

Note: The Usage Frequency of section itself is not very high, and section is not an element that replaces div.

// Reasonable practice

<Div class = "center"> 

The outline has undergone an interesting change, as shown below:

// New Outline

1. UntitledSection

1. Luancheng Travel Service

2. Potter

Through the current outline, we can understand that there is only one title Left to implement the perfect outline. Which element is the remaining question? The answer is: body element. We only need to create an h1 under the body element and write the title name above.

// Add the body title to solve the outline problem.

<Body> 

Although adding a title to the body solves the outline problem, the problem is that we do not need to create an h1 in the body during page design. Is this method hidden after creation? Let's look at this question later. Let's discuss the structure of the header first.

Iii. Structure Analysis

First, we will discuss the elements of nav. This element is essentially used to store a group of navigation links, such as ul.

In our first class, it is not very reasonable to store all the headers. Therefore, it is best to store them on the periphery of ul. The LOGO + navigation can be understood as the header. Therefore, the structure is rewritten as follows:

// The header element is replaced with the header, and the nav element only contains ul

<Header id = "header"> <div class = "center"> 

With the removal of <body>

1. The header element does not need to force the title h1 ~ H6. If there is a title, it counts as the body. In this way, the title of the main outline will be available;
2. The section and nav element outlines must have the title h1 ~ H6, but the section must be standardized, and nav is reasonable if there is no title. Of course, adding a title will make the outline look better and the page can be hidden.

// The final format is as follows:

<Header id = "nav"> <div class = "center"> 

Modify the CSS as needed based on the changed element content.

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.