Hướng dẫn how do you add a line divider in html? - làm thế nào để bạn thêm một bộ chia dòng trong html?

Cách để - chia

Tìm hiểu làm thế nào để tạo các dải phân cách khác nhau với CSS.

Tình trạng đứt nét

Say mê

Chất rắn

Tròn

Hãy tự mình thử »

Bước 1) Thêm HTML:

Thí dụ

Bước 2) Thêm CSS:

Thí dụ

/* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}

Bước 2) Thêm CSS:
hr.dotted {
  border-top: 3px dotted #bbb;
}

/ * Đường viền đứt nét */hr.dashed {& nbsp; Border-Top: 3px Dashed #BBB;}
hr.solid {
  border-top: 3px solid #bbb;
}

/ * Đường viền chấm */hr.doted {& nbsp; Biên giới hàng đầu: 3px chấm #BBB; }
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}

Hãy tự mình thử »

Thí dụ

Sử dụng thẻ để xác định các thay đổi theo chủ đề trong nội dung:

Các ngôn ngữ chính của web

HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang web. HTML mô tả cấu trúc của một trang web và bao gồm một loạt các yếu tố. Các phần tử HTML cho trình duyệt biết cách hiển thị nội dung.

Hãy tự mình thử »

CSS là ngôn ngữ mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc, bởi vì nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.

Hãy tự mình thử »

CSS là ngôn ngữ mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc, bởi vì nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc.

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Thẻ <hr> xác định một lỗi theo chủ đề trong trang HTML (ví dụ: sự thay đổi của chủ đề).

Phần tử <hr> thường được hiển thị như một quy tắc ngang được sử dụng để tách nội dung (hoặc xác định thay đổi) trong trang HTML.

Đúng

Thuộc tính toàn cầu

Thẻ <hr> cũng hỗ trợ các thuộc tính toàn cầu trong HTML.

Thuộc tính sự kiện

Thẻ <hr> cũng hỗ trợ các thuộc tính sự kiện trong HTML.

Thí dụ

Sử dụng thẻ để xác định các thay đổi theo chủ đề trong nội dung:

Hãy tự mình thử »

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Thí dụ

Sử dụng thẻ để xác định các thay đổi theo chủ đề trong nội dung:

Hãy tự mình thử »

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Thí dụ

Sử dụng thẻ để xác định các thay đổi theo chủ đề trong nội dung:

Hãy tự mình thử »

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Thí dụ

Sử dụng thẻ để xác định các thay đổi theo chủ đề trong nội dung:

Hãy tự mình thử »

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Hãy tự mình thử »

Thêm ví dụ "hãy thử nó" dưới đây.

Định nghĩa và cách sử dụng

Thẻ <hr> xác định một lỗi theo chủ đề trong trang HTML (ví dụ: sự thay đổi của chủ đề).

Thí dụ

Sử dụng thẻ để xác định các thay đổi theo chủ đề trong nội dung:
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

JavaScript là ngôn ngữ lập trình của HTML và Web. JavaScript có thể thay đổi nội dung HTML và giá trị thuộc tính. JavaScript có thể thay đổi CSS. JavaScript có thể ẩn và hiển thị các yếu tố HTML, và nhiều hơn nữa.

Ảnh từ Unplash

Thẻ HTML <hr> được sử dụng để tạo một đường ngang với mục đích chia các phần của trang.

Ví dụ dưới đây đã sử dụng thẻ <hr> để tách hai phần tử đoạn:

<p>Hello world! It's a beautiful day to learn HTML</p>
<hr/>
<p>Now let's learn about JavaScript querySelector() methods</p>

Tại đây, đầu ra HTML trên trình duyệt Chrome:

Các trình duyệt web có xu hướng tạo kiểu thẻ <hr> khác một chút mặc dù nó luôn tạo ra một đường ngang bằng cách sử dụng thuộc tính

hr {
  border: 0;
  border-top: 2px solid brown;
}

2.

Nếu bạn muốn tùy chỉnh giao diện của thẻ <hr> của mình, bạn cần bình thường hóa kiểu đầu tiên bằng cách viết quy tắc

hr {
  border: 0;
  border-top: 2px solid brown;
}

4 cho thẻ <hr>.

Ví dụ, thuộc tính kiểu sau sẽ tạo ra một đường viền hai pixel màu nâu:

hr {
  border: 0;
  border-top: 2px solid brown;
}

Biên giới chỉ được áp dụng cho phía trên bằng cách sử dụng thuộc tính

hr {
  border: 0;
  border-top: 2px solid brown;
}

6 vì sử dụng thuộc tính

hr {
  border: 0;
  border-top: 2px solid brown;
}

2 sẽ áp dụng quy tắc

hr {
  border: 0;
  border-top: 2px solid brown;
}

8 cả ở phía trên và phía dưới. Bạn sẽ có một đường viền bốn pixel thay vì hai pixel.

Ở đây, cách nó trông như thế nào trên trình duyệt Chrome:

Bạn có thể sử dụng bất kỳ thuộc tính

hr {
  border: 0;
  border-top: 2px solid brown;
}

9 hợp lệ nào để tạo kiểu thẻ <hr> của bạn.

Ví dụ: bạn có thể tạo một đường ngang

hr {
  border: 0;
  border-top: 2px dashed brown;
}

1 bằng cách sử dụng các CSS sau:

hr {
  border: 0;
  border-top: 2px dashed brown;
}

Bạn có thể áp dụng các kiểu khác nhau cho thẻ <hr> bằng cách nhắm mục tiêu các lớp khác nhau trong quy tắc CSS của bạn:

hr.dashed {
  border: 0;
  border-top: 2px dashed brown;
}

hr.dotted {
  border: 0;
  border-top: 2px dotted brown;
}

hr.rounded {
  border: 0;
  border-top: 2px solid brown;
  border-radius: 5px;
}

Và đó là cách mà bạn tạo một bộ chia ngang bằng cách sử dụng HTML và CSS 😉