The zero-based HTML tutorial (4): The Basics of Web page layout

The <div> label of dividing blocks

We usually look at the site has a lot of modules layout, these layouts are through the <div> tag to achieve. <div> has no innate semantic meaning, it can be used to specify a specific block or row, that is, the circle of a piece of land,div attributes affect all the content of this land. The <div> label is equivalent to a container, which can contain a variety of data images, and so on, and <p>, which is used to define a passage.

We tried to add the <div> element to the previous example. Here it defines the background color to be red, div this piece of background all turned to red

Block-level elements and inline elements

Most HTML elements are defined as block-level elements or inline elements . block-level elements usually start with a new row when the browser is displayed, and the browser breaks the block-level elements automatically . Inline elements do not start with a new row when they are displayed. <div>, <p> tags are block-level elements , previously learned <span> is inline elements .

The original <p> elements of the text into the new Div, a paragraph of text after the use of <br> tags (automatic career change label, only the beginning is not over)

<p>
<span style= "font-family: Song body; Font-size:200%;color: #000000;" > My first website </span>
</p>

<div style= "background: #DD5053" >
<span style= "Color:white" >111</span>
A piece of text <br/>
A piece of text
</div>

As can be seen, block-level elements <p> block-level <div> elements between the empty line (<p> label definition is a paragraph, so will automatically empty a line), inline elements <span> before just a little space.

Third, modify the visual effects of the Web page

After the <p> labels are changed to <div>, the simple and beautiful layout will come out.
<div style= "background: #2CA4CF" >
<span style= "font-family: Song body; Font-size:200%;color: #000000;" > My first website </span>
</div>
<div style= "background: #DD5053" >
<span style= "Color:white" >111</span>
A piece of text <br>
A piece of text
</div>

This time I explained the difference between the html<div>, block-level elements and inline elements. The next article will be reduced to how to modify the div size, margin and so on, I hope you support this site.