Home > Web Front-end > HTML Tutorial > How to use div tags

How to use div tags

清浅
Release: 2021-04-20 11:01:22
Original
21588 people have browsed it

How to use div tags: 1. The div tag can get the style by setting class or id; 2. The div tag can also get the style directly through the inline method.

How to use div tags

The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.

Use of div tags: div tags can obtain styles by setting class or id, or directly obtain styles through inline methods

tags can divide the document into Separate, distinct parts. It can be used as a strict organizational tool and does not use any formatting associated with it. Next, in the article, I will introduce how to use div, which has certain reference value. I hope it will be helpful to everyone.

div meaning:

div tag is called Separation tags can define partitions or sections in a document, with the purpose of dividing the document into independent and different parts. It can set the position of text, images, tables and other elements

div is an element used to provide structure and background for block-level content within an HTML document. Everything between the start and end tags of the div is used to form this block, and the properties of the contained elements will be controlled by the attributes of the div tag, or by using a style sheet.

Usage of div:

is a block-level element, which means that its content will automatically occupy one line. Additional style properties can be obtained through the class or id of the div, but there is no need to add a selector to each div.

You can apply class or id attributes to the same

element, but generally only one of them is applied. The main difference between the two is that class is used for class elements (can be understood as a certain type of elements), while id is used to identify individual and unique elements.

[Recommended course: HTML course]

Example: Usage without adding selector to div

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
 <div style="color:pink">
  <h1>div的用法</h1></div>
</body>
</html>
Copy after login

Rendering :

How to use div tags

Example: Add a class selector to div

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.demo{
width:450px;
height: 300px;
background: pink;
text-align: center;
line-height: 300px;
font-size: 20px;
}
</style>
</head>
<body>
 <div>div的用法</div>
</body>
</html>
Copy after login

Rendering:

How to use div tags

Summary: The above is the entire content of this article. I hope it will be helpful to everyone learning div

The above is the detailed content of How to use div tags. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template