Thẻ hr trong HTML

Hãy cùng webaffiliatevn.com tìm hiểu thẻThẻ hr trong HTML nhé

1. Giới thiệu về thẻ hr trong html

Thẻ <hr> trong HTML là viết tắt của quy tắc ngang và được sử dụng để chèn quy tắc ngang hoặc ngắt theo chủ đề trong trang HTML để chia hoặc tách các phần tài liệu. Thẻ <hr> là một thẻ trống và nó không yêu cầu thẻ kết thúc.

Một số điểm quan trọng cần nhớ khi sử dụng thẻ này:

• Trình duyệt bắt đầu quy tắc ngang từ một dòng mới và bất kỳ văn bản nào sau thẻ này cũng được hiển thị trên một dòng mới.
• Trình duyệt sẽ chèn một số khoảng trắng trước và sau thẻ này.

Thẻ <HR> không có bất kỳ thuộc tính nào sẽ chèn một dấu phân tách.

2. Thuộc tính thẻ Thẻ hr trong HTML

Bảng dưới đây mô tả các thuộc tính thẻ <hr>:

THUỘC TÍNH	GIÁ TRỊ	SỰ MIÊU TẢ
Align (Căn chỉnh)	left (trái) center (giữa) right (phải)	Được sử dụng để chỉ định căn chỉnh của quy tắc ngang.
noshade	noshade	Được sử dụng để chỉ định thanh mà không có hiệu ứng đổ bóng.
size (kích thước)	pixel	Được sử dụng để chỉ định chiều cao của quy tắc ngang.
width (chiều rộng)	pixel	Được sử dụng để chỉ định chiều rộng của quy tắc ngang.

Bạn có thể thay đổi chiều dài, chiều rộng, kích thước, màu sắc và căn chỉnh của quy tắc ngang bằng cách sử dụng các thuộc tính khác nhau. Hãy thủ  chúng ngay bây giờ.

          2.1 Thuộc tính width:

Thuộc tính này xác định độ dài của quy tắc. Một giá trị là bắt buộc cho thuộc tính này. Giá trị này có thể được biểu thị bằng số pixel hoặc tỷ lệ phần trăm, xác định chiều dài dựa trên chiều rộng của cửa sổ trình duyệt.

<HR width = ”50 ″> trình bày quy tắc có chiều dài 50 pixel.

<HR width = ”70%”> chỉ định rằng chiều dài của quy tắc phải bằng 70% chiều rộng của trang

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRZZOKd” default_tab=”html,result” user=”davidkhai”]See the Pen
GRZZOKd
by DavidKhai (
@davidkhai
) on
CodePen
.[/codepen_embed]

 

         2.2 Thuộc tính size:

KÍCH THƯỚC xác định độ dày của quy tắc ngang. Bạn có thể thay đổi độ dày bằng cách chỉ định số lượng pixel với giá trị.

 <hr size="”1" /> dày 1 pixel. <hr size="”8" /> dày 8 pixel <hr size="”30" /> dày 30 pixel. 

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”WNwwXem” default_tab=”html,result” user=”davidkhai”]See the Pen
WNwwXem
by DavidKhai (
@davidkhai
) on
CodePen
.[/codepen_embed]

 

          2.3 Thuộc tính align:

Bạn có thể căn chỉnh các quy tắc theo chiều ngang bằng cách sử dụng một trong ba giá trị cho thuộc tính ALIGN, “CENTER”, “LEFT” hoặc “RIGHT”. Giá trị mặc định cho thuộc tính này là “CENTER”. Điều này có nghĩa là nếu bạn bỏ qua việc sử dụng thuộc tính này, quy tắc ngang sẽ luôn được căn giữa.

<hr align="”center”" width="”50%”" /> Căn giữa; không cần phải chỉ định điều này một cách rõ ràng vì đây là mặc định.

<hr align="”left”" width="”50%”" /> Căn bên trái.

<hr align="”right”" width="”50%”" /> Căn bên phải.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”ExKKbxg” default_tab=”html,result” user=”davidkhai”]See the Pen
ExKKbxg
by DavidKhai (
@davidkhai
) on
CodePen
.[/codepen_embed]

 

         2.4 Thuộc tính noshade:

Bạn có thể nhận thấy rằng các quy tắc ngang được tô bóng, chúng có hiệu ứng 3D. Nếu bạn không muốn điều này, hãy sử dụng thuộc tính NOSHADE. NOSHADE không có giá trị nào.

<hr noshade="noshade" size="”5" width="”50%”" />

<hr noshade="noshade" size="”15" width="”50%”" />

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”OJNNOJB” default_tab=”html,result” user=”davidkhai”]See the Pen
OJNNOJB
by DavidKhai (
@davidkhai
) on
CodePen
.[/codepen_embed]

 

Việc hiển thị các quy tắc sử dụng NOSHADE khác với Internet Explorer và Netscape Communicator. Người giao tiếp có xu hướng đặt các cạnh tròn vào quy tắc nếu độ dày của chúng lớn hơn 5 pixel.

        2.5 Thuộc tính color:

Đây là lần đầu tiên bạn gặp bất kỳ thuộc tính màu nào trong hướng dẫn này. Vì vậy, tôi sẽ giữ nó nhỏ và đơn giản để lại chi tiết cho sau này.
Thuộc tính COLOR của hr không được Netscape Communicator nhận dạng (Communicator hiển thị các quy tắc không bóng mờ chỉ bằng màu xám mờ). Thuộc tính có ký hiệu màu thập lục phân hoặc tên của màu.

<hr noshade="noshade" size="”4" /> Quy tắc màu xanh lam, độ dày 4 pixel

<hr noshade="noshade" size="”10" width="”" /> Quy tắc màu đỏ, độ dày 10 pixel.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”zYqqPxB” default_tab=”html,result” user=”davidkhai”]See the Pen
zYqqPxB
by DavidKhai (
@davidkhai
) on
CodePen
.[/codepen_embed]

 

Cũng lưu ý cách tôi đã kết hợp các thuộc tính khác nhau bên trong một thẻ để có được kết quả tôi muốn.

     3. Cú pháp

 <hr> .... 

     4. Các ví dụ minh họa thẻ <hr> trong HTML

Ví dụ 1:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Ví dụ về thẻ hr trong HTML</title> 
    </head> 
    <body> 
        <p>Có một thanh ngang bên dưới đoạn văn này.</p> 
        <hr> 
        <p>Có một thanh ngang bên dưới đoạn văn này.</p> 
    </body> 
</html>    

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”jOqqGQJ” default_tab=”html,result” user=”davidkhai”]See the Pen
jOqqGQJ
by DavidKhai (
@davidkhai
) on
CodePen
.[/codepen_embed]

 

Ví dụ 2:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Ví dụ về các thuộc tính của thẻ hr</title> 
    </head> 
    <body> 
        <p>Đường ngang bình thường.</p> 
        <hr> 
           
        <p>Đường ngang có chiều cao 30 pixel </p> 
        <hr size="30"> 
           
        <p>Đường ngang có chiều cao 30 pixel và noshade</p> 
        <hr size="30" noshade> 
    </body> 
</html> 

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxxGmZ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/oNxxGmZ’>oNxxGmZ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

>>> Xem thêm:

• Thẻ i trong HTML
• Thẻ p trong HTML
• Thẻ img trong HTML