Tìm hiểu Thẻ DIV trong HTML, đó là một loại thẻ dùng để nhóm các phần tử HTML giống nhau lại với nhau và kết hợp với CSS để phân chia bố cục website, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ DIV trong HTML

Thẻ <div> trong HTML là gì?

Thẻ <div> trong HTML là một loại thẻ dùng để nhóm các phần tử HTML giống nhau lại với nhau và kết hợp với CSS để phân chia bố cục website theo nhiều dạng khác nhau, thẻ <div> cũng được được kết hợp với CSS và JavaScript để tạo ra nhiều hình dạng khác nhau và tạo ra nhiều sự kiện khác nhau.

Áp dụng thực tế Thẻ <div> trong HTML

Css Bố cục cho thẻ <div>

<!DOCTYPE html>
<html>
<head>
<title>CSS Bố cục cho thẻ <div></title>
<style>
#header{width:100%;float:left;height:auto;min-height:30px;bacground:red;color:#fff;margin-bottom:10px}
#khungchinh1{width:100%;float:left;height:auto;margin-bottom:10px}
#ktrai{width:49%;float:left;height:100px;background:green;color:#fff}
#kphai{width:49%;float:right;height:100px;background:green;color:#fff}
#footer{width:100%;height:auto;min-height:30px;background:black;color:#fff}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="khungchinh1">
 <div id="ktrai">Khung Trái</div>
 <div id="kphai">Khung Phải</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

Chạy Thử >>

CSS Nhóm các phần tử giống nhau trong thẻ <div>

<!DOCTYPE html>
<html>
<head>
<title>CSS Nhóm các phần tử giống nhau trong thẻ <div></title>
<style>
#header{width:100%;float:left;height:auto;min-height:30px;bacground:red;color:#fff;margin-bottom:10px}
#khungchinh1{width:100%;float:left;height:auto;margin-bottom:10px}
#ktrai{width:80%;float:left;height:auto;min-height:200px;background:green;color:#fff}
.spham{width:24%;float:left;margin-right:1.3%;height:auto;background:#fff}
.spham1{float:right;margin-right:0px}
.hspham{width:100%;float:left;height:auto;margin-bottom:5px}
.hspham img{width:100%;float:left;height:auto}
.tenspham{width:100%;float:left;height:auto;}
.tenspham h3{color:#000;font-size:15px;font-weight:bold}
#kphai{width:20%;float:right;height:200px;background:red;color:#fff}
#footer{width:100%;height:auto;min-height:30px;background:black;color:#fff}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="khungchinh1">
 <div id="ktrai">
   <div class="spham">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
   <div class="spham">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
   <div class="spham">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
   <div class="spham spham1">
      <div class="hspham"><img src="https://webmoi.vn/thumb/526x274/1/upload/tinblog/the-div-trong-html.jpg" alt="sản phẩm" title="sản phẩm"></div>
      <div class="tenspham"><h3>Tên sản phẩm</h3></div>
   </div>
 </div>
 <div id="kphai">Khung Phải</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

Chạy Thử >>

CSS Hình dạng cho thẻ <div>

<!DOCTYPE html>
<html>
<head>
<title>CSS Hình dạng cho thẻ <div></title>
<style>
#hinhtron{width:70px;height:70px;border-radius:50%;margin-right:10px;background:red;float:left;line-height:70px;text-align:center}
#bocanh{width:70px;height:70px;border-radius:4px;background:green;float:left;line-height:70px;text-align:center}
</style>
</head>
<body>
 <div id="hinhtron">Hình tròn</div>
 <div id="bocanh">Bo Cạnh</div>
</body>
</html>

Chạy Thử >>

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ <div> trong HTML.

5/5 - (1 Đánh giá)
0 Bình luận

Ngọc Thanh

Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác

Chia sẻ nội dung đánh giá của bạn về Thẻ DIV trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn