Ngôn ngữ HTML - Thẻ HTML div
Bài trước
Bài sau

Ý nghĩa của thẻ <div>


Thẻ <div> là gì? Đây là cái thẻ mà nó là chữ viết tắt của division (nghĩa là khu trong tiếng Việt theo từ điển kỹ thuật chung) được sử dụng để tạo ra một khu vực kiểu block nào đó trên một website, hay bạn có thể hiểu là gom nhóm tập hợp các phần tử trên website vào một khu vực với thẻ <div>.

1) Thẻ <div> thường được dùng để nhóm các phần tử lại với nhau thành một khối để tiện cho việc định dạng tập thể.

Ví dụ:

<div style="border:1px solid pink;padding:20px;font-size:20px">  
<p>Đoạn văn thứ nhất.</p>  
<p>Đoạn văn thứ hai</p>
<p>Đoạn văn thứ n </p>
</div>

Xem ví dụ

2) Thẻ <div> cũng thường được dùng để làm thùng chứa bao quanh các phần tử và tạo một đường viền trang trí cho những phần tử bên trong nó.

<div style="border:10px solid crimson;background-color:#f1f1f1;padding:20px;">
    <h1>Tài liệu hướng dẫn học lập trình web:</h1>
    <ul>
        <li>Tài liệu học HTML</li>
        <li>Tài liệu học CSS</li>
        <li>Tài liệu học JavaScript</li>
    </ul>
</div>

Xem ví dụ

3) Thẻ <div> còn được sử dụng kết hợp với CSS để thiết kế bố cục (Layout) cho trang web.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body{
            margin:0px;
        }
        #container{
            width:800px;
            border:1px solid gray;
            margin-left:auto;
            margin-right:auto;
        }
        #container > div:nth-child(1){
            background-color:#73ad21;
            color:white;
            font-size:25px;
            text-align:center;
            padding:20px;
        }
        #container > div:nth-child(2){
            margin:15px;
        }
        #container > div:nth-child(3){
            background-color:#ddd;
            font-size:18px;
            text-align:center;
            padding:15px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <div>Hiệp Sĩ It</div>
            <div>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</div>
        </div>
        <div>
            <h2>Layout là gì?</h2>
            <p>Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành
            phần chính trên một trang web.</p>
            <p>Một trang web thường gồm các thành phần chính như:</p>
            <ul>
                <li>Header: Giới thiệu logo, một vài khẩu hiệu của trang web</li>
                <li>Footer: Thông tin bản quyền của trang web</li>
                <li>Menu: Thanh chức năng</li>
                <li>Nội dung</li>
                <li>....</li>
            </ul>
        </div>
        <div>&copy;2017 hiepsiit All Rights Reserved</div>
    </div>
</body>
</html>

Xem ví dụ

Sự khác nhau giữa thẻ div và thẻ span trong HTML

Thẻ div Thẻ span
HTML div là một phần tử khối (block). HTML span là một phần tử một dòng (inline)
HTML div được sử dụng để nhóm các phần tử có liên quan lại thành một khối. HTML span được sử dụng để nhóm các văn bản, hình ảnh … thành nhóm nhỏ.

Ví dụ về HTML div – Login Form

Trong ví dụ này, chúng ta sử dụng thẻ div để tạo một box và có một form login bên trong box đó.

<html>
<head>

</head>
<style type="text/css">
.loginform{  
    padding:10px;  
    border:1px solid pink;  
    border-radius:10px;  
    float:right;  
    margin-top:10px;  
}  
.formheading{  
    background-color:red;  
    color:white;  
    padding:4px;  
    text-align:center;  
}  
.sub{  
background-color:blue;  
padding: 7px 40px 7px 40px;  
color:white;  
font-weight:bold;  
margin-left:70px;  
border-radius:5px;  
}  
</style>
<body>
<div class="loginform">
  <h3 class="formheading">Please Login</h3>
  <form action="LoginServlet" method="post">
    <table>
      <tr>
        <td>Email:</td>
        <td><input type="email" name="email"/></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" name="password"/></td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center"><input class="sub" type="submit" value="login"/></td>
      </tr>
    </table>
  </form>
</div> 

</body>
</html>

Xem ví dụ

Trình duyệt hỗ trợ

Thẻ Chrome IE Firefox Opera Safari
<div> Yes Yes Yes Yes Yes

Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×