search

Làm thế nào để bạn phân chia khu vực trong html?

Ngày đăng: 17/01/2023
Trả lời: 0
Lượt xem: 65

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp chia trang HTML thành hai phần theo chiều dọc, tất cả chúng ta đều biết rằng chúng ta có thể chia trang html thành hai phần theo chiều dọc cũng như hai phần theo chiều ngang

Show

Giả sử bạn muốn chia trang thành ba phần. Bạn có thể làm điều này bằng cách thêm ba thẻ div trống

<div>div>
<div>div>
<div>div>

Bước 2. Thêm tên lớp vào thẻ div

Bước tiếp theo là thêm tên lớp vào các thẻ div và đặt cho chúng một tên duy nhất. Thuộc tính tên lớp phân tách các thẻ div khác và khi bạn áp dụng kiểu CSS cho một trong các phần, nó sẽ không ảnh hưởng đến các phần đó

Ở đây tôi đặt tên cho chúng là một, hai và ba, nhưng bạn có thể tự do gọi bất cứ điều gì bạn muốn

<div class="one">div>
<div class="two">div>
<div class="three">div>

Bước 3. thêm nội dung

Tại thời điểm này, bạn đã sẵn sàng. Trang được chia thành ba phần và bạn có thể thêm bất kỳ nội dung nào như văn bản, hình ảnh, v.v. , bên trong các thẻ div. Ở đây, tôi đã thêm một văn bản đơn giản để cung cấp cho bạn một ý tưởng

<div class="one">
  <h1>This is section oneh1>
div>
<div class="two">
  <h1>This is section twoh1>
div>
<div class="three">
  <h1>This is section threeh1>
div>

mã ví dụ

Đây là mã ví dụ về cách bạn có thể chia trang bằng thẻ div. Các thuộc tính lề, div và h1 chỉ được bao gồm cho mục đích trình diễn

<style>
  body {
    margin: 0;
  }

  div {
    padding: 65px;
  }

  h1 {
    text-align: center;
  }

  .one {
    background-color: red;
  }

  .two {
    background-color: yellow;
  }

  .three {
    background-color: green;
  }
style>

<div class="one">
  <h1>This is section oneh1>
div>
<div class="two">
  <h1>This is section twoh1>
div>
<div class="three">
  <h1>This is section threeh1>
div>

đầu ra ví dụ

Và đây là cách nó sẽ xuất hiện trên trình duyệt

Làm thế nào để bạn phân chia khu vực trong html?

Thông báo quan trọng

Chúng tôi khuyên bạn nên sử dụng thẻ section để chia trang. Thẻ phần cải thiện khả năng đọc của mã HTML vì việc thêm quá nhiều thẻ div có thể khiến mã khó đọc

Ngoài ra, bạn đang giúp cải thiện khả năng truy cập của trang web để người khuyết tật có thể sử dụng trang web của bạn. Và cuối cùng, bạn cũng đang giúp các công cụ tìm kiếm hiểu nội dung trang web của bạn

Nếu bạn muốn làm mới kiến ​​thức của mình về thẻ div và tìm hiểu xem nó có thể làm gì khác, hãy xem bài viết này về chức năng của “div” trong HTML

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(

) and closing (
) tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.

  • Thẻ Div là thẻ cấp Khối
  • Đây là thẻ vùng chứa chung
  • Nó được sử dụng để nhóm các thẻ HTML khác nhau để có thể tạo các phần 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

ví dụ 1.  

html




<html>

   <head>

      <titlehtml0_______19_______>

<html4 html5html6html7html8

 

html9

>0____12_______1

>0____12_______3

>4

 

>5

>6

>0____12_______8

>0____13_______0

>0____13_______2

>0_______13_______4

>4

   6_______11_______4>

   9

   6_______15_______>

 

   9_______10_______<5>

   10_______>5 head0>5_______12_______

   10_______>5 head0>5_______12_______

   10_______>5 head0>5_______12_______

   10_______>5 head0>5_______12_______

   9

      6_______10_______5>

   6_______11_______>

đầu ra

 

Làm thế nào để bạn phân chia khu vực trong html?
 

Như chúng ta biết thẻ div được sử dụng để nhóm các thành phần 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ụ bên dưới mà không cần sử dụng thẻ div. chúng ta cần áp dụng CSS cho từng thẻ (trong ví dụ sử dụng thẻ H1 H2 và hai thẻ p)

ví dụ 2.  

html




<html>

   <head>

      <titlehtml0_______19_______>

      <html4 html5html6_______11_______7html8

title9html9

title9>8

title9   0

title9html06

title9>4

title9html10

title9>6

title9>8

title9   0

title9html06

title9>4

title9html22

title9>6

title9>8

title9   0

title9html06

title9>4

         6_______11_______4>

      6_______15_______>

   <<5>

      <html10html48html10>

      <html53html54

html55html56

html55html58

html55html60

html55html62

html55html64

         6_______11_______53>

      <html22html48html22>

      <html53html78

      html80

      html82

      html84

      html86

         6_______11_______53>

      6_______10_______5>

   6_______11_______>

đầu ra

 

Làm thế nào để bạn phân chia khu vực trong html?
 

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 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 các ví dụ dưới đây cho thấy việc tạo bố cục trang web chúng ta cũng có thể tạo bố cục trang web bằng thẻ 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 trong việc tạo bố cục trang web . trong ví dụ dưới đây sẽ hiển thị nhóm phần tử HTML bằng cách sử dụng thẻ div và tạo bố cục web theo khối.  

Thí dụ.  

html




<html>

   <head>

      <titlehtml0_______19_______>

      <html4 html5html6_______11_______7html8

title9>19

title9>6

title9>23

title9>4

title9>27

title9>6

title9>23

title9>33

title9>4

title9>37

title9>6

title9>23

title9>4

title9>45

title9>47

title9>8

title9   0

title9>53

title9>55

title9>4

         6_______11_______4>

      6_______15_______>

   <<5>

      <>5 >73

title9<html10html48_______11_______10>

title9<html53html54

title9html56

title9html58

title9html60

title9html62

title9html64

         6_______11_______53>

title9<html22html48html22>

title9<html53html78

title9   09

title9html82

title9html84

title9html86

         6_______11_______53>

         6_______12_______5>

      <>5    27

title9<html10html48_______11_______10>

title9<html53html54

title9html56

title9html58

title9html60

title9html62

title9html64

title9   6html53>

title9<html22html48html22>

title9<html53html78

title9   09

title9html82

title9html84

title9html86

title9   6html53>

         6_______12_______5>

      <>5    81

title9<html10html48_______11_______10>

title9<html53html54

title9html56

title9html58

title9html60

title9html62

title9html64

title9   6html53>

title9<html22html48html22>

title9<html53html54

title9html56

title9html58

title9html60

title9html62

title9<25

title9   6html53>

         6_______12_______5>

      6_______10_______5>

   6_______11_______>

Sử dụng thẻ Div, chúng tôi có thể che khoảng cách giữa thẻ tiêu đề và thẻ đoạn văn trong ví dụ này sẽ hiển thị bố cục web ba khối.  

đầu ra.  

Làm thế nào để bạn phân chia khu vực trong html?
 

chúng ta có thể sử dụng CSS trong bất kỳ bộ phận nào bằng các phương pháp sau.  

1. Sử dụng lớp. chúng ta có thể sử dụng Lớp trên div cụ thể đó trong CSS nội bộ hoặc CSS bên ngoài

  • In case of internal CSS: we need to define Class in the section of HTML within