Home > Developer > JavaScript
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
