Hãy cùng tìm hiểu thẻ div trong html trong bài viết của webaffiliatevn.com
1. Mô tả thẻ div trong html
Thẻ div được gọi là thẻ Division. Thẻ Div được sử dụng trong HTML để phân chia nội dung trong trang web như (văn bản, hình ảnh, đầu trang, chân trang, thanh điều hướng, v.v.). Thẻ Div có cả thẻ mở (<) và thẻ đóng (>) và việc đóng thẻ là bắt buộc. Div là thẻ có thể sử dụng nhiều nhất trong phát triển web vì nó giúp chúng ta tách dữ liệu trong trang web ra và chúng ta có thể tạo một phần cụ thể cho dữ liệu hoặc chức năng cụ thể trong các trang web.
-
- Thẻ Div là thẻ cấp khối
- Nó là một thẻ vùng chứa chung
- Nó được sử dụng nhằm mục đích nhóm các thẻ khác nhau của HTML để các phần có thể được tạo và có thể áp dụng kiểu cho chúng.
Như chúng ta biết thẻ Div là thẻ cấp khối trong ví dụ này thẻ div chứa toàn bộ chiều rộng. Nó sẽ được hiển thị thẻ div mỗi lần trên một dòng mới, không phải trên cùng một dòng.
2. Ví dụ thẻ div trong html
<html>
<head>
<title>Ví dụ về thẻ div trong HTML</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: red;
background-color: lightblue;
margin: 2px;
font-size: 25px;
}
</style>
</head>
<body>
<div > Thẻ div </div>
<div > Thẻ div </div>
<div > Thẻ div </div>
<div > Thẻ div </div>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”ExKaJJg” default_tab=”html,result” user=”davidkhai”]See the Pen ExKaJJg by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
Như chúng ta biết thẻ div được sử dụng để nhóm các phần tử HTML lại với nhau và áp dụng CSS và bố cục web trên chúng. Hãy xem ví dụ dưới đây mà không cần sử dụng thẻ div. chúng ta cần áp dụng CSS cho mỗi thẻ (trong ví dụ sử dụng thẻ H1 H2 và hai đoạn văn p )
<html>
<head>
<title>Ví dụ về thẻ div trong HTML</title>
<style type=text/css>
p{
color: white;
background-color: #009900;
width: 400px;
}
h1
{
color: white;
background-color: #009900;
width: 400px;
}
h2
{
color: white;
background-color: #009900;
width: 400px;
}
</style>
</head>
<body>
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
</p>
<h2>Why do we use it?</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English
</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”wvGBZxY” default_tab=”html,result” user=”davidkhai”]See the Pen wvGBZxY by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
3. Tạo bố cục web bằng thẻ Div
Thẻ Div là thẻ chứa bên trong thẻ div, chúng ta có thể đặt nhiều hơn một phần tử HTML và có thể nhóm lại với nhau và có thể áp dụng CSS cho chúng.
Thẻ div có thể được sử dụng để tạo bố cục trang web trong ví dụ dưới đây cho thấy việc tạo bố cục web, chúng ta cũng có thể tạo bố cục web bằng thẻ table (bảng) nhưng thẻ bảng rất phức tạp để sửa đổi bố cục
Thẻ Div rất linh hoạt để tạo bố cục web và dễ dàng sửa đổi . Trong ví dụ dưới đây sẽ hiển thị nhóm phần tử HTML sử dụng thẻ div và tạo bố cục web theo khối.
Ví dụ: Sử dụng thẻ Div, chúng ta có thể che khoảng cách giữa thẻ tiêu đề và thẻ đoạn trong ví dụ này sẽ hiển thị bố cục web ba khối.
<html>
<head>
<title>Ví dụ về thẻ Div tạo bố cục cho web</title>
<style type=text/css>
.leftdiv
{
float: left;
}
.middlediv
{
float: left;
background-color: green
}
.rightdiv
{
float: left;
}
div{
padding : 1%;
color: white;
background-color: violet;
width: 30%;
border: solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<h2>Where does it come from?</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
</div>
<div class="middlediv">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<h2>Where does it come from?</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
</div>
<div class="rightdiv">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<h2>Where does it come from?</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
</div>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”poyvBxX” default_tab=”html,result” user=”davidkhai”]See the Pen poyvBxX by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
4. Sự khác biệt giữa thẻ Div và thẻ span
Thẻ div và span là hai thẻ phổ biến khi tạo các trang sử dụng HTML và thực hiện các chức năng khác nhau trên chúng
trong khi thẻ div là phần tử cấp khối và span là phần tử nội tuyến. Thẻ div tạo ngắt dòng và theo mặc định tạo sự phân chia giữa văn bản đứng sau thẻ khi bắt đầu và cho đến khi thẻ kết thúc bằng
. Thẻ div tạo các hộp hoặc vùng chứa riêng biệt cho tất cả các phần tử bên trong thẻ này như văn bản, hình ảnh, đoạn văn.
| Tính chất | Thẻ Div | Thẻ kéo dài |
|---|---|---|
| Elements Types (Các loại phần tử) | Block-Level (Cấp khối) | Inline (Nội tuyến) |
| Space/Width (Khoảng trắng / Chiều rộng) | Chiếm toàn bộ chiều rộng có sẵn | Chỉ chiếm chiều rộng của nội dung bên trong |
| Examples (Ví dụ) | Tiêu đề, Đoạn văn, biểu mẫu | Thuộc tính, hình ảnh |
| Use (Sử dụng) | Bố trí trang web | Vùng chưa của văn bản |
| Attributes (Thuộc tính) | Không bắt buộc, có thẻ dùng với css class để làm web Không bắt buộc, có thẻ dùng với css class để làm web sinh động |
Thẻ span không tạo ngắt dòng tương tự như thẻ div mà cho phép người dùng tách những thứ khỏi các phần tử khác xung quanh chúng trên một trang trong cùng một dòng.
Ví dụ dưới đây sẽ hiển thị sự khác biệt giữa thẻ span và thẻ div trong khi thẻ div chứa toàn bộ chiều rộng và thẻ span chỉ chứa chiều rộng bắt buộc và các phần còn lại trống cho các phần tử khác.
<html>
<head>
<title>Ví dụ về thẻ div trong HTML</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: red;
background-color: lightblue;
margin: 2px;
font-size: 25px;
}
span
{
color: black;
background-color: gray;
margin: 5px;
font-size: 25px;
}
</style>
</head>
<body>
<!-- Thẻ div -->
<div > Thẻ div </div>
<div > Thẻ div </div>
<div > Thẻ div </div>
<div > Thẻ div </div>
<!-- thẻ span -->
<span>Thẻ span</span>
<span>Thẻ span</span>
<span>Thẻ span</span>
<span>Thẻ span</span>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”xxVbeMR” default_tab=”html,result” user=”davidkhai”]See the Pen xxVbeMR by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
>>> Xem thêm:
