programming html

Nhân sự có đúng trong HTML không?

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;
}

9 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;
}

9, phần tử HTML để biểu thị “thời gian nghỉ 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;
}

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;
}

9 [đượ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 {
  border: none;
}

3 được tạo kiểu như một đường kẻ 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;
}

9 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;
}

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

hr {
  border: none;
}

3 đượ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;
}

9 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

Theo 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;
}

9 dưới dạng quy tắc ngang. 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;
}

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;
}

9 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;
}

9, 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. Tài sản

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 tôi 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;
}

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

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 báo 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 {
  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

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;
}

9 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 {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

52 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;
}

9. 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 điều 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 thứ 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;
}

9 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;
}

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

Đó là HR hay HR trong HTML?

Định nghĩa và cách sử dụng . g. chuyển chủ đề]. Phần tử thường được hiển thị dưới dạng quy tắc ngang được sử dụng để phân tách nội dung [hoặc xác định thay đổi] trong trang HTML. tag defines a thematic break in an HTML page [e.g. a shift of topic]. The element is most often displayed as a horizontal rule that is used to separate content [or define a change] in an HTML page.

HR có phải là thẻ HTML hợp lệ không?

Phần tử HTML . ví dụ: thay đổi cảnh trong một câu chuyện hoặc thay đổi chủ đề trong một phần.

Làm cách nào để sử dụng giờ trong HTML?

Thẻ HTML . Thẻ là một thẻ trống và nó không yêu cầu thẻ kết thúc. Được sử dụng để xác định sự liên kết của quy tắc ngang. used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. The tag is an empty tag, and it does not require an end tag. Used to specify the alignment of the horizontal rule.

Nhân sự có được hỗ trợ trong HTML5 không?

HTML Thuộc tính thẻ trong HTML 4 . Nó thiết lập sự liên kết của quy tắc ngang. Để chỉ định chiều rộng của quy tắc. Nó chỉ định chiều cao của đường ngang. not supported in HTML5. It sets the alignment of the horizontal rule. To specify the width of the rule. It specifies the height of the horizontal line.

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; } 9

2. đánh dấu HTML

3. kiểu dáng CSS

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

3. 2 Quy tắc ngang

3. 3 Ba dấu hoa thị

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

3. 5 kết hợp

3. 6 hình ảnh SVG

4. suy nghĩ cuối cùng

Người giới thiệu

Đó là HR hay HR trong HTML?

HR có phải là thẻ HTML hợp lệ không?

Làm cách nào để sử dụng giờ trong HTML?

Nhân sự có được hỗ trợ trong HTML5 không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

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; }`
9