HTML div tag

 The HTML div tag is an important basic element in the web page. Through the DIV tag, different blocks can be created in the web page. Each block can also add smaller blocks. Designers can also use the HTML div block. For web browsers, each set of HTML div tags is a block-level element, which basically takes up a whole line of space. Of course, designers can also adjust this part through the div attribute settings. Now The div attribute settings are all designed using CSS .

Basic syntax of HTML div tag block

<div id="Custom" class="Custom" style="Custom">Block content</div>

A set of standard HTML div blocks are composed of a beginning <div> tag and an end </div> tag. The part that is packed in between is the content of the block, which can be text, pictures, videos, frames... Wait for the content of the webpage, you can set id and class in the first <div> block or directly start a section of style design, that is, the style part.

HTML div tag application example 1. Design a div tag block with a border

<div style="border:2px orange solid;">This is an HTML div with an orange border</div>

Example output

This is an HTML div with an orange border

This example is quite simple. It is to declare a section of CSS style syntax using style in the <div> tag at the beginning. Border is the standard syntax used to design element borders. We designed an orange thick solid border, right? Is it very simple? For border design, please refer to: CSS border border .

HTML div tag application example 2: design a div tag block with background color

<div style="background-color:pink;">This is an HTML div with a pink background color</div>

Example output effect

This is an HTML div with a pink background color

Example 2 is also quite simple, just change the border of Example 1 to the background-color property used to design the background color of the element. This is a very common div background color design technique, usually 16-bit color code is used to adjust the color .

• Find more beautiful colors→ color code table .
• Background color property usage → CSS background-color background color

Continue to our next example.

HTML div tag application example three, two blocks together

<div style="border:2px orange solid;padding:15px;">
<div style="background-color:pink;">This is an HTML div with a pink background color</div>
</div>

Example output effect

This is an HTML div with a pink background color

Example 3 is equivalent to combining the results of Example 1 and Example 2. We put the pink HTML div tag group of Example 2 in the orange border div block of Example 1. In order to make the example more clear, we placed the The padding attribute is added to the large orange div block , so that the two div blocks do not stick together. You can see these two beautiful blocks from the output of the example.

In addition to the above three examples, there are actually many ways to apply HTML div tags. The first paragraph also mentions that they can be used for typesetting. Most applications will be designed with CSS syntax. This is also the future application of div blocks. Mainstream.