VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML Tuts

HTML là gì? Các thẻ HTML Định dạng trong HTML Tiêu đề trong HTML Đoạn văn trong HTML Liên kết trong HTML Ảnh trong HTML Table trong HTML Danh sách trong HTML Danh sách có thứ tự Danh sách không có thứ tự Danh sách mô tả Form trong HTML Thuộc tính Style Comment trong HTML Bảng màu trong HTML Thuộc tính chung trong HTML

Các thẻ HTML

Thẻ HTML Marquee Thẻ HTML Textarea HTML DOCTYPE Thẻ HTML Title Thẻ HTML meta Thẻ HTML Div Thẻ HTML Pre Thẻ HTML Code Thẻ HTML Label Thẻ HTML Input Thẻ HTML Button Thẻ HTML HR Thẻ HTML BR Thẻ HTML Script Thẻ HTML NoScript Thẻ HTML b Thẻ HTML Quotes

Bài học HTML

Text Link trong HTML Image Link trong HTML Email Link trong HTML Frame trong HTML Iframe trong HTML Block trong HTML Thiết lập màu nền (background) trong HTML Màu trong HTML Font trong HTML Thẻ embed - Đa phương tiện trong HTML Tạo chữ chạy (Marquee) trong HTML Style Sheet trong HTML Sử dụng Javascript trong HTML Layout trong HTML Tổng hợp thuộc tính trong HTML Sự kiện (Event) trong HTML Các Font tham khảo trong HTML Mã hóa ASCII trong HTML Bảng ASCII trong HTML Các thực thể HTML Mã hóa URL trong HTML Mã hóa các ngôn ngữ chuẩn ISO trong HTML Mã hóa ký tự trong HTML

Câu hỏi phỏng vấn

Phỏng vấn HTML
1 / 3
❮ ❯

Thẻ Div trong HTML


HTML là gì?
Định dạng HTML

Nội dung chính

  • Thẻ Div trong HTML
  • Sự khác nhau giữa thẻ div và thẻ span trong HTML
  • Ví dụ về HTML div - Login Form
  • Trình duyệt hỗ trợ

Thẻ Div trong HTML

Thẻ Thẻ HTML <div> hay thẻ div trong html được sử dụng để nhóm nhiều phần tử HTML lại với nhau..

Chúng ta biết rằng mỗi thẻ trong HTML đều có mục đích cụ thể chẳng hạn như thẻ p được sử dụng để chỉ định một đoạn văn bản, các thẻ <h1> đến <h6> được sử dụng để chỉ định tiêu đề. Nhưng thẻ <div> chỉ như một khối chứa nhiều thẻ khác bên trong và phân chia tài liệu HTML thành các phần khác nhau. Vì thế thẻ div cũng được sử dụng để trình bày bố cục cho trang web.

Thẻ div thường được các nhà phát triển web sử dụng để nhóm các phần tử HTML với nhau và áp dụng các kiểu CSS cho nhiều phần tử cùng một lúc. Ví dụ: Nếu bạn gộp một tập hợp các phần tử đoạn văn vào một phần tử div để bạn có thể tận dụng các kiểu CSS và áp dụng kiểu chữ cho tất cả các đoạn văn cùng một lúc thay vì viết mã cho cùng một kiểu cho mỗi phần tử đoạn văn đó.

<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>  

Kết quả:

Đoạn văn thứ nhất.

Đoạn văn thứ hai

Đoạn văn thứ n


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

Thẻ divThẻ 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 đó. Dưới đây là code css và html và download code ví dụ.

CSS code:

.loginform {
  padding: 10px;
  border: 1px solid pink;
  border-radius: 10px;
  float: left;
  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;
} 

HTML code:

<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> 

Kết quả:

vi du div login form

Download Source Code

Download Now!

Trình duyệt hỗ trợ

Thẻchrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<div>YesYesYesYesYes

HTML là gì?
Định dạng HTML

Recent Updates

Liên kết css với htmlMã hóa ký tự trong HTMLMã hóa các ngôn ngữ chuẩn ISO trong HTMLMã hóa URL trong HTMLCác thực thể HTMLBảng ASCII trong HTMLMã hóa ASCII trong HTMLCác Font tham khảo trong HTMLSự kiện (Event) trong HTMLTổng hợp thuộc tính trong HTMLLayout trong HTMLSử dụng Javascript trong HTMLSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml