Chúng tôi làm gì? Liên hệ hỗ trợ qua Zalo Liên hệ fanpage Webaffiliatevn Tham gia group Facebook hỗ trợ

Webaffiliatevn
Grow your affiliate business

Thẻ hr trong HTML

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ế

700.000
599.000

Mô tả

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

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

 

         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. 

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

 

          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.

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

 

         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%”" />

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

 

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.

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

 

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>    

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

 

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> 

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

 

>>> Xem thêm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

CUỐN SÁCH GỐI ĐẦU GIƯỜNG CỦA MỌI AFFILIATE MARKETER
Tôi đã kiếm 1 triệu $ từ con số 0 trên Internet như thế nào?

Học cách làm thế nào kiếm $ từ số vốn 0 đồng với affiliate 

Tặng bạn cuốn Ebook miễn phí, nó là hành trình tạo ra thu nhập hàng trăm ngàn Dollar từ internet của chuyên gia hàng đầu trong ngành affiliate. 

Không, cảm ơn tôi không muốn kiếm $ từ Internet