Hr vẫn được sử dụng trong html?

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Tiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm

Yếu tố Tìm hiểu cách thức hoạt động của phông chữ và kiểu chữ trên web trong HTML. Hướng dẫn dành cho người mới bắt đầu. Nó thường được hiển thị dưới dạng một đường ngang. khối hiển thị

nội dung

• 1 Ví dụ về mã
• 2 Dấu phân cách, không phải đường viền
• 3 Hỗ trợ trình duyệt giờ
• 4 Thuộc tính của giờ

Mã ví dụ

This is above line.

This is below the line.

Đây là dòng trên

---

Đây là dưới dòng

Một dải phân cách, không phải là một đường viền

Rất dễ sử dụng sai yếu tố

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1. Nếu bạn thấy mình đưa vào một mẫu trang, có lẽ bạn nên suy nghĩ lại về mọi thứ. Các phần cấu trúc của thiết kế trang của bạn phải được xác định bằng các thẻ tài liệu ngữ nghĩa thích hợp và bất kỳ dòng nào bạn có thể mong muốn phải được xác định bằng CSS. Phần tử

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1, tạo ra một thanh phân cách nhỏ, tốt nhất nên được coi là một phần tử đánh máy, vì một thứ gì đó có thể xuất hiện trong ngữ cảnh nội dung của bạn — không phải là một phần của thiết kế. Điều này có thể hữu ích khi bạn muốn chia một phần nội dung thành các phần mà không sử dụng các phần tử tiêu đề

SEO & Kỹ thuật số toàn diện đã được xây dựng bởi Koray Tuğberk GÜBÜR. SEO toàn diện là quá trình phát triển các dự án tiếp thị kỹ thuật số tích hợp với mọi khía cạnh bao gồm Viết mã, Xử lý ngôn ngữ tự nhiên, Khoa học dữ liệu, Tốc độ trang, Phân tích kỹ thuật số, Tiếp thị nội dung, SEO kỹ thuật và Xây dựng thương hiệu. Công cụ tìm kiếm ngữ nghĩa, có cấu trúc cải thiện khả năng phát hiện các thực thể trong thế giới thực, ngày nay. Có một trang web đơn giản là không đủ nữa. Để chứng tỏ rằng thương hiệu của bạn có thẩm quyền, đáng tin cậy và là chuyên gia trong lĩnh vực riêng của nó, bạn cần có các Dự án Tối ưu hóa Công cụ Tìm kiếm dựa trên thực thể. Trọng tâm chính của SEO & Kỹ thuật số toàn diện là cải thiện khả năng hiển thị hữu cơ và tiềm năng tăng trưởng của thương hiệu

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 thành phần. Các phần tử HTML cho trình duyệt biết cách hiển thị nội dung

---

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 phương tiện khác. CSS tiết kiệm rất nhiều công sức 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 phần tử HTML, v.v.

Trong khi chúng tôi đang viết, đôi khi chúng tôi cảm thấy cần phải chỉ ra sự thay đổi trong chủ đề mà không sử dụng tiêu đề phần mới. Mức độ thay đổi của chủ đề quan trọng hơn mức độ mà một đoạn văn mới cho biết, nhưng ít quan trọng hơn mức độ mà một đoạn văn bản mới ngụ ý

Một thực tế phổ biến trong tình huống này là sử dụng thước kẻ ngang

---

hoặc một hàng ba dấu hoa thị

Các nhà phát triển web nên triển khai tính năng kiểu chữ này như thế nào?

Có, hãy bắt đầu với

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 trong HTML

Nhưng thông tin về chi tiết triển khai của nó nằm rải rác trên web. Bài viết này nhằm mục đích tổng hợp mọi thứ quan trọng về

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1, phần tử HTML để biểu thị “sự ngắt quãng theo chủ đề” (WHATWG (2021))

1. Khi nào thì sử dụng hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; } 1

James (2017) cung cấp một hướng dẫn tuyệt vời về thời điểm sử dụng

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 (được gọi là “quy tắc ngang” tại đây)

“Việc chuyển từ một cảnh của câu chuyện sang cảnh tiếp theo hoặc giữa phần cuối của một bức thư và phần tái bút là những ví dụ điển hình về thời điểm có thể áp dụng quy tắc ngang. . nó mang ít ý nghĩa hơn so với sự tách biệt được tạo ra bởi một phần tử tiêu đề mới, nhưng lại quan trọng hơn một đoạn văn mới. ”

—Oliver James

2. đánh dấu HTML

Vì chúng ta đã quen với quy tắc nằm ngang để biểu thị sự thay đổi trong chủ đề, nên việc sử dụng

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

7 được tạo kiểu như một đường nằm ngang là rất hấp dẫn

Đừng. Nếu không, người dùng trình đọc màn hình không thể biết chủ đề đã thay đổi hay chưa

Sử dụng

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 và tạo kiểu cho nó theo ý muốn (xem Phần 3 bên dưới)

Mặt trái của đồng xu là. không sử dụng

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 để vẽ một đường ngang cho mục đích trang trí. Sử dụng hình ảnh SVG hoặc phần tử

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

7 được tạo kiểu như vậy

Một nhược điểm của

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 là nó không thể có các phần tử con. Nếu điều này là không mong muốn cho mục đích tạo kiểu, Soueidan (2021) đề xuất sử dụng

hr {
  border: none;
}

4 để đảm bảo khả năng tiếp cận (xem Phần 3. 6 cho một ứng dụng)

3. kiểu dáng CSS

3. 1 Đặt lại kiểu mặc định

Trình duyệt hiển thị

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 dưới dạng quy tắc ngang theo mặc định. W3Schools (2021a) cung cấp mã CSS mà hầu hết các trình duyệt sử dụng làm kiểu mặc định

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Coyier (2021) thảo luận chi tiết về kiểu mặc định này và cách loại bỏ nó

“Cách dễ dàng hơn để xóa nó là tắt tất cả các đường viền sau đó chỉ sử dụng

hr {
  border: none;
}

6 hoặc

hr {
  border: none;
}

7. Hoặc, tắt tất cả các đường viền, đặt chiều cao và sử dụng nền. ”

–Chris Coyier

Nói cách khác, chúng ta cần

hr {
  border: none;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

để đặt lại kiểu mặc định của

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1

3. 2 Quy tắc ngang

Xem Coyier (2011) và W3Schools (2021b) để biết một số ví dụ

3. 3 Ba dấu hoa thị

Thủ thuật để tạo kiểu cho

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 dưới dạng một hàng có ba dấu hoa thị được căn giữa là thuộc tính

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

0 của phần tử giả. Ry- (2015) cung cấp một mã ví dụ

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xem Cope (2011) để biết chi tiết các yếu tố giả

Đoạn mã trên sẽ hiển thị phần tử

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

1 ở dạng không có chiều cao và phần tử

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

2 sẽ bị chồng chéo với đoạn sau

Để điều chỉnh khoảng cách dọc, hãy sử dụng

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

3 và

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

4 cho phần tử

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1, không phải cho phần tử giả. Thuộc tính CSS

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

6 tạo khoảng cách cho đoạn trên nhưng nó giữ cho đoạn tiếp theo chồng lên nhau. Thuộc tính

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

3 cũng vậy khi được sử dụng một mình. Chúng tôi cần

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

4 để đẩy xuống đoạn bên dưới. Tôi chưa thấy ai chỉ ra điều này. Đoạn này dựa trên khám phá của riêng tôi

3. 4 Các ký hiệu khác

Tất nhiên, chúng ta có thể thay thế giá trị thuộc tính

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

0 của phần tử giả bằng các ký tự khác tùy ý. Xem Friedlander (2010) để biết một số cảm hứng lấy từ thiết kế sách

Một lựa chọn là quay ngược thời gian. Trong lịch sử, hàng ba dấu hoa thị thực ra là một phiên bản giả mạo của cái được gọi là Asterism (Wikipedia (2021)).

Dấu hoa thị trong ấn bản năm 1922 của Ulysses (nguồn. Wikimedia Commons)

Hoặc chúng ta có thể sử dụng hoa bách hợp (hoặc hoa trái tim), có từ thời Hy Lạp cổ đại (Ferlazzo (2013)).

Τvật trang trí theo kiểu chữ trong thành phố cổ Kamiros ở đảo Rhodes, Hy Lạp (nguồn. Wikimedia Commons)

Một cách khác để tạo cảm giác hiện đại hơn là sử dụng biểu tượng cảm xúc hoặc một số ký tự trông vui nhộn trong phông chữ bạn chọn. Chọn ký tự phù hợp với chủ đề của tài liệu. Ví dụ, đối với một bài viết thông thường về trà đạo, tôi sẽ sử dụng. 🍵 🍵 🍵 (chén trà không quai)

Tất nhiên, để các biểu tượng này được hiển thị chính xác trong trình duyệt của người dùng, bạn cần kiểm tra xem phông chữ được sử dụng trên trang web của bạn hoặc phông chữ hệ thống trên thiết bị của người dùng có hỗ trợ các ký tự này không

Để đảm bảo biểu tượng cảm xúc sẽ được hiển thị chính xác với tệp phông chữ hệ thống của người dùng, bạn có thể xem xét thêm khai báo CSS sau vào

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1

hr {
  border: none;
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

là một phần của ngăn xếp phông chữ hệ thống được GitHub sử dụng (Otto (2018)). Segoe UI Symbol là dự phòng cho Windows 7 & 8, vì Segoe UI Emoji đã được phát hành cùng với Windows 10 (Microsoft (2021)). Đối với ngăn xếp phông chữ hệ thống nói chung, hãy xem Kudamatsu (2020), một bài viết khác của tôi

3. 5 kết hợp

MDN (2021) đưa ra ví dụ sau, sử dụng ký hiệu phần (§) cùng với các quy tắc ngang

hr {
  border: none;
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

kết xuất

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 như sau

3. 6 hình ảnh SVG

Cuối cùng, bạn có thể tạo một hình ảnh SVG lạ mắt để sử dụng thay cho thước ngang. Một cách đơn giản để thực hiện việc này là đặt hình ảnh SVG làm giá trị thuộc tính

hr {
  border: none;
}

62 cho phần tử

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1. Nhưng điều này ngăn việc tạo kiểu cho hình ảnh SVG bằng CSS. Soueidan (2021) đề xuất sử dụng

hr {
  border: none;
}

4 với một SVG nội tuyến làm phần tử con của nó, điều này làm cho thứ gì đó khả thi như thế này

Wow, điều này thực sự tốt đẹp. Nó không hoàn toàn đi chệch khỏi mô hình phổ biến của việc sử dụng thước kẻ ngang hoặc một hàng ký hiệu căn giữa. Việc sử dụng hình bóng lặp lại mực đen được sử dụng trong in ấn. Nhưng chắc chắn là mới và bắt mắt

4. suy nghĩ cuối cùng

Trừ khi chúng tôi muốn tạo cảm giác sách in hoặc tạp chí cho trang web của bạn, tôi tin rằng các nhà thiết kế/nhà phát triển web nên nhắm đến điều gì đó mà chỉ các trang web mới có thể đạt được. Từ quan điểm này, tùy chọn hình ảnh SVG đáng để khám phá thêm. Với các SVG nội tuyến, bạn thậm chí có thể tạo hiệu ứng động cho một phần của hình ảnh

Một khả năng khác là việc sử dụng màu sắc, đắt tiền khi in nhưng lại siêu rẻ trên web. Trong dự án hiện tại của tôi, tôi sử dụng ba dấu hoa thị đơn giản là

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1 nhưng có màu phù hợp với màu của tiêu đề phần.
Bằng cách này, ý nghĩa thay đổi theo chủ đề của dấu hoa thị sẽ được củng cố do mối liên hệ trực quan của nó với tiêu đề phần.

---

Hãy cho tôi biết nếu bài viết này bỏ sót bất cứ điều gì liên quan đến việc sử dụng

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

1

Người giới thiệu

Đối phó, Sara (2011) “. trước /. sau”, Thủ thuật CSS, tháng 9. 6, 2011

Coyier, Chris. (2011) “Kiểu đơn giản cho quy tắc ngang”, Thủ thuật CSS, tháng 11. 22, 2011

Coyier, Chris. (2021) “Không phải quy tắc ngang điển hình của bạn”, Thủ thuật CSS, Tháng 4. 16, 2021

Ferlazzo, Lisa (2013) “Nghĩa địa chấm câu. the Hedera”, The Wordict, ngày 10 tháng 5 năm 2013 (qua Internet Archive)

Friedlander, Joel. (2010) “Thiết kế sách. 8 giải pháp cho thế tiến thoái lưỡng nan của văn bản”, Nhà thiết kế sách, tháng 6. 30, 2010

James, Oliver (2017) “Các phần tử HTML trống”, Internet khó, 2017

Kudamatsu, Masa (2020) “System Font Stack. lịch sử và lý do của nó”, Medium. com, tháng ba. 11, 2020

MDN (2021) “

---

: The Thematic Break (Horizontal Rule) element”, MDN Web Docs, Mar. 27. 2021 (last updated).

Microsoft (2021) “Họ phông chữ Segoe UI Emoji”, Microsoft Docs, tháng 3. 11, 2020

Otto, Mark (2018) “Chuyển phông chữ hệ thống sang GitHub. com”, đánh dấu. com, tháng hai. 7, 2018

Ry- (2015) “Một câu trả lời cho 'Thay thế

---

dòng với một glyph tùy chỉnh'", Stack Overflow, tháng 8. 21, 2015

Bạn có nên sử dụng thẻ hr trong HTML?

Thẻ nhân sự có đóng trong HTML không?

Tôi có thể sử dụng cái gì thay vì HR trong HTML?

Khi nào tôi nên sử dụng HR?