Thẻ hr trong HTML

547 lượt xem

KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?

Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!

>>>> Tham khảo khóa học đã giúp mình tại:

Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế

599.000
Buy now
unica.vn

Description

Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix

Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40

Còn bây giờ thì vào bài viết thôi!

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:

Đánh giá post

Các kênh thông tin của chúng tôi

Disclaimer: Thông tin trong bài viết không phải là lời khuyên đầu tư từ Coin98 Insights. Hoạt động đầu tư tiền mã hóa chưa được pháp luật một số nước công nhận và bảo vệ. Các loại tiền số luôn tiềm ẩn nhiều rủi ro tài chính.

You cannot copy content of this page

Bạn muốn đọc tin riêng tư, hay hơn?
Đăng ký danh sách email của chúng tôi, chúng tôi sẽ gởi thêm tin theo xu hướng mới!
Cập nhật kiến thức và thông tin mới nhất về Affiliate & Tip kiếm tiền online hiệu quả .

PS: Cam kết bảo mật thông tin, không spam

Đăng ký bản tin

Không, cảm ơn, tôi không muốn đọc thêm tin
Contact Me on Zalo