Now let's learnHtmlStructure(We only discuss strictly typed items, includingXHTML).
First, give a strictHtmlSome common rules:
1.A web pageDoctypeStart, followed,<HTML>The element must appear at the beginning and end of the webpage.
2.Only<Head>,<Body>Elements can be directly included in<HTML>All other elements must be included in<Head>Or<Body>.
3.Required<Head>Element 1<Title>Element.
4.Only<Body>Directly place block elements (such<H1>, <p>, <div>). All inline elements and text must be in the block element to run.
5.Only text and other inline elements can be embedded in inline elements. Block elements are not allowed to be included in the element in any situation.
6.Block elements cannot be included in<P>Element.
Please remember this rule, because it is a good structureHtmlMinimum condition.
The1,2,3It is easy to understand. I will not go into details here.4,5,6Point, you must first understand what is a block element and what is an inline element.
HtmlMedium,<Body>The internal elements are basically divided into two categories: block elements and inline elements.
The so-calledBlock ElementIt refers to the Independent display, exclusive whole line, as if there is a line break before and after the element, such<Div>, <p>, Are block elements.
The so-calledInline ElementIt refers to the elements in the row that flow out of text in a webpage, such<Span>, <A>, <em>, And so on.
I wonder if you understand what block elements and inline elements are. If you still don't understand them, write a fewHtmlFile to see their performance, orGoogleI believe it is not hard to understand.
Now,Div + CSSThe layout is very popular.DivIs the block element.<Div>. Actually,<Div>It is not mysterious at all. It isDivisionThe abbreviation represents a structure like "region ",<H1>,<P>There is no essential difference, the difference is that it represents a "region", so we can use a web page<Div>Separated into several regions. For example, the following document
< Body >
<Div ID= "Header">
</Div>
< Div ID= "Content">
<Div ID= "Leftbar">
</Div>
<Div ID= "Details">
</Div>
</Div>
<Div ID= "Footer">
</Div>
</Body>
Let's take the wholeBodyInto3Regions, which areHeader","Content","Footer". Then, we can3Add nested<Div>, Like"Content"Continue to be divided into"Leftbar"And"DetailsThe two parts are the same, so that the area can be divided down step by step. In this way, a document with a clear structure and good readability is born. Of course, this document does not contain any elements used for presentation. It represents a pure structure. This document is matched with differentCSSIt will have different appearances, just like people wearing different clothes have different images.Div + CSSIn fact, it is so simple.
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
