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 HTMLNhư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
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;
}
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ậyMộ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 địnhhr {
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
6 hoặchr { 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. ”hr { border: none; }
–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;
}
13. 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ôi3. 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áchMộ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]].
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]].
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;
}
1hr {
border: none;
}
6Và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;
}
7Và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ư sau3. 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àyWow, đ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;
}
1Ngườ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