Thẻ div trong HTML

Hãy cùng khám phá thẻ div trong html trong nội dung của webaffiliatevn.com      

1. Miêu tả thẻ div trong html

Thẻ div được gọi là thẻ Division. Thẻ Div được sử dụng trong HTML để phân tách bài viết trong website 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ở (<) & thẻ đóng (>) & việc đóng thẻ là bắt buộc. Div là thẻ có thể sử dụng nhiều nhất trong tiến triển website vì nó giúp tất cả chúng ta tách dữ liệu trong website ra & tất cả chúng ta có thể tạo một phần rõ ràng và cụ thể cho dữ liệu hoặc tính năng rõ ràng và cụ thể trong các website.

    • Thẻ Div là thẻ cấp khối
    • Nó là một thẻ vùng chứa chung
    • Nó được sử dụng có mục đích nhóm các thẻ khác nhau của HTML để các phần có thể được tạo & có thể ứng dụng kiểu cho chúng.

Như tất cả chúng ta biết thẻ Div là thẻ cấp khối trong chẳng hạn này thẻ div chứa toàn thể 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. Chẳng hạn thẻ div trong html

<htmlvàgt; 
   <headvàgt; 
      <titlevàgt;Chẳng hạn về thẻ div trong HTML</titlevàgt; 
<style type=text/cssvàgt; 
  
p{ 
  background-color:gray; 
  margin: 10px; 
} 
  
div 
{ 
  color: red; 
  background-color: lightblue; 
  margin: 2px; 
  font-size: 25px; 
} 
</stylevàgt; 
   
</headvàgt; 
  
 <bodyvàgt; 
   <div > Thẻ div   </div> 
   <div > Thẻ div   </div> 
   <div > Thẻ div  </div> 
   <div > Thẻ div   </div> 
   
   </bodyvàgt; 
</htmlvàgt; 

See the Pen ExKaJJg by DavidKhai (@davidkhai) on CodePen.dark

Xem Thêm  -attributes-and-apis:the-iframe-element-4"">iframe element must

Như tất cả chúng ta biết thẻ div được sử dụng để nhóm các phần tử HTML lại với nhau & ứng dụng CSS & bố cục website trên chúng. Hãy xem chẳng hạn dưới đây mà không cần sử dụng thẻ div. tất cả chúng ta cần ứng dụng CSS cho mỗi thẻ (trong chẳng hạn sử dụng thẻ H1 H2 & hai đoạn văn p )

<htmlvàgt; 
   <headvàgt; 
      <titlevàgt;Chẳng hạn về thẻ div trong HTML</titlevàgt; 
      <style type=text/cssvàgt; 
         p{ 
         color: white; 
         background-color: #009900; 
         width: 400px; 
         } 
         h1 
         { 
         color: white; 
         background-color: #009900; 
         width: 400px; 
         } 
         h2 
         { 
         color: white; 
         background-color: #009900; 
         width: 400px; 
         } 
      </stylevàgt; 
   </headvàgt; 
   <bodyvàgt; 
      <h1vàgt;What is Lorem Ipsum?</h1vàgt; 
      <pvàgt;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 
      </pvàgt; 
      <h2vàgt;Why do we use it?</h2vàgt; 
      <pvàgt;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
      </pvàgt; 
   </bodyvàgt; 
</htmlvàgt; 

See the Pen wvGBZxY by DavidKhai (@davidkhai) on CodePen.dark

3. Tạo bố cục website bằng thẻ Div

Thẻ Div là thẻ chứa bên trong thẻ div, tất cả chúng ta có thể đặt nhiều hơn một phần tử HTML & có thể nhóm lại với nhau & có thể ứng dụng CSS cho chúng.
Thẻ div có thể được sử dụng để tạo bố cục website trong chẳng hạn dưới đây cho thấy việc tạo bố cục website, tất cả chúng ta cũng có thể tạo bố cục website bằng thẻ table (bảng) nhưng thẻ bảng rất cầu kỳ để sửa đổi bố cục
Thẻ Div rất linh động để tạo bố cục website & đơn giản sửa đổi . Trong chẳng hạn dưới đây sẽ hiển thị nhóm phần tử HTML sử dụng thẻ div & tạo bố cục website theo khối.

Xem Thêm  three origins coopOrigin

Chẳng hạn: Sử dụng thẻ Div, tất cả chúng ta có thể che khoảng cách giữa thẻ tiêu đề & thẻ đoạn trong chẳng hạn này sẽ hiển thị bố cục website ba khối.

<htmlvàgt; 
   <headvàgt; 
      <titlevàgt;Chẳng hạn về thẻ Div tạo bố cục cho websitevàlt;/titlevàgt; 
      <style type=text/cssvàgt; 
         .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; 
         } 
      </stylevàgt; 
   </headvàgt; 
   <bodyvàgt; 
      <div class="leftdiv"> 
         <h1vàgt;What is Lorem Ipsum?</h1vàgt; 
         <pvàgt;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.
      </pvàgt; 
         <h2vàgt;Where does it come from?</h2vàgt; 
         <pvàgt;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.
      </pvàgt; 
      </div> 
      <div class="middlediv"> 
         <h1vàgt;What is Lorem Ipsum?</h1vàgt; 
         <pvàgt;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.
      </pvàgt; 
         <h2vàgt;Where does it come from?</h2vàgt; 
         <pvàgt;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.
      </pvàgt; 
      </div> 
      <div class="rightdiv"> 
         <h1vàgt;What is Lorem Ipsum?</h1vàgt; 
         <pvàgt;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.
      </pvàgt; 
         <h2vàgt;Where does it come from?</h2vàgt; 
         <pvàgt;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.
      </pvàgt; 
      </div> 
   </bodyvàgt; 
</htmlvàgt; 

See the Pen poyvBxX by DavidKhai (@davidkhai) on CodePen.dark

Xem Thêm  m12

     4. Sự độc đáo giữa thẻ Div & thẻ span

Thẻ div & span là hai thẻ thông dụng khi tạo các trang sử dụng HTML & thực hiện các tính năng khác nhau trên chúng
trong khi thẻ div là phần tử cấp khối & span là phần tử nội tuyến. Thẻ div tạo ngắt dòng & theo mặc định tạo sự phân tách giữa văn bản xếp sau thẻ khi khởi đầu & cho đến khi thẻ chấm dứt bằng

Viết một bình luận