Hướng dẫn dành cho người mới bắt đầu này sẽ hướng dẫn bạn cách tạo các đường ngang trong HTML đúng cách. Tải xuống mã souce ví dụ miễn phí bao gồm.

Bạn đang xem : ngắt dòng ngang html

Chào mừng bạn đến với hướng dẫn dành cho người mới bắt đầu về cách tạo dòng ngang trong HTML và CSS. Vì vậy, bạn có một số nội dung mà bạn muốn chia nhỏ bằng cách vẽ một đoạn thẳng. Chà, không có mồ hôi.

Có 2 cách dễ dàng để tạo các đường ngang trong HTML:

  1. Sử dụng phần tử & lt; hr & gt; quy tắc ngang.
  2. Thêm đường viền dưới cùng bằng CSS. Ví dụ: & lt; div style = "border-bottom: 5px solid black" & gt; TEXT & lt; / div & gt;

Hãy lưu ý rằng phần tử & lt; hr & gt; mang ý nghĩa ngữ nghĩa là “ngắt theo chủ đề”, trong khi border hoàn toàn là mỹ phẩm.

Nhưng điều đó có nghĩa là gì? Khi nào chúng ta nên sử dụng từng cái? Hãy cùng chúng tôi xem qua một số ví dụ – Đọc tiếp để tìm hiểu!

ⓘ Tôi đã bao gồm một tệp zip với tất cả mã nguồn mẫu ở đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào.

TRANG TRÌNH BÀY NHANH

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã nguồn mẫu như đã hứa.

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem

Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

TẢI XUỐNG MÃ VÍ DỤ

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành mã nguồn theo giấy phép của MIT, vì vậy hãy thoải mái xây dựng hoặc sử dụng nó trong dự án của riêng bạn.

QUY TẮC NGANG & lt; HR & gt; THẺ HTML

Ngày xửa ngày xưa trong thời kỳ đen tối của Internet, chúng ta có & lt; hr & gt; Thẻ HTML. Tất cả những gì nó làm là vẽ một đường thẳng ngang trên màn hình và thế là xong. Nhưng ngày nay, điều đó & lt; hr & gt; thẻ thực sự có nghĩa là “ngắt theo chủ đề”, chỉ là cái quái gì vậy? Hãy xem qua tất cả những điều đó trong phần này.

THÚ VỊ CHỦ ĐỀ LÀ GÌ !?

Chuyên đề – Tính từ. Liên quan đến hoặc dựa trên các chủ đề hoặc một chủ đề:

Từ điển Cambridge

Theo thuật ngữ của giáo dân, cá nhân tôi sẽ mô tả “ngắt theo chủ đề” là một thứ tương tự như “ngắt phần” hoặc “ngắt chương”. Vì vậy, có, thẻ & lt; hr & gt; không được sử dụng cho mục đích thẩm mỹ “Tôi muốn vẽ một đường ở đây”, nhưng để chỉ định “có các dấu ngắt đoạn ở giữa các nội dung ở đây ”.

Xem Thêm  PHP: Thực thi các câu lệnh - php thực thi câu lệnh sql

VÍ DỤ THAM KHẢO VỀ CHỦ ĐỀ

Nói đủ rồi, chúng ta hãy xem qua một ví dụ đơn giản về & lt; hr & gt; để minh họa rõ hơn:

1a-hr-example.html

  & lt; h1 & gt; MY STORY & lt; / h1 & gt;

& lt; h2 & gt; CHƯƠNG 1 & lt; / h2 & gt;
& lt; p & gt;
  Một bàn đạp bi thảm tràn ra phía sau hydro.
& lt; / p & gt;
& lt; giờ & gt;

& lt; h2 & gt; CHƯƠNG 2 & lt; / h2 & gt;
& lt; p & gt;
  Bạc thường ngày lên tiếng.
& lt; / p & gt;
& lt; hr & gt;  

Như bạn có thể thấy, thẻ & lt; hr & gt; không chỉ được sử dụng để vẽ một đường ngang mà nó thực sự phục vụ một mục đích – Để xác định ngắt giữa các chương.

VÍ DỤ KHÁC

1b-hr-example.html

 & lt; h1 & gt; GLOSSARY & lt; / h1 & gt;

& lt; h2 & gt; PHÂN LOẠI & lt; / h2 & gt;
& lt; ul & gt;
  & lt; li & gt; Doge: 4 chân 1 đuôi. & lt; / li & gt;
  & lt; li & gt; Pupper: Một doge smol. & lt; / li & gt;
  & lt; li & gt; Good Boi: Một vị tướng giỏi. & lt; / li & gt;
& lt; / ul & gt;
& lt; giờ & gt;

& lt; h2 & gt; HÀNH ĐỘNG ÂM THANH & lt; / h2 & gt;
& lt; ul & gt;
  & lt; li & gt; Bark: How doges nói. & lt; / li & gt;
  & lt; li & gt; Bork: Swag boi nói. & lt; / li & gt;
  & lt; li & gt; Blep: Lè lưỡi. & lt; / li & gt;
  & lt; li & gt; Mlem: Lưỡi chạm vào mũi. & lt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;  

Nghĩ rằng bạn nên bắt kịp xu hướng ngay bây giờ. Thẻ & lt; hr & gt; được sử dụng để biểu thị dấu ngắt giữa các chương, mục, danh mục, lớp, cấp bậc, cấp độ – Bạn đặt tên cho nó.

BIÊN GIỚI CSS

Cho đến nay tốt như vậy? Bây giờ bạn nên biết rằng & lt; hr & gt; thẻ có mục đích thực tế và để tránh sử dụng nó như mỹ phẩm. Để vẽ các đường không có ý nghĩa thực tế – Thay vào đó, chúng ta nên sử dụng các đường viền CSS.

VÍ DỤ VỀ BIÊN GIỚI

2a-simple-border.html

  & lt; h1 & gt; MY STORY & lt; / h1 & gt;

& lt; section style = "border-bottom: 1px solid # 000" & gt;
  & lt; h2 & gt; CHƯƠNG 1 & lt; / h2 & gt;
  & lt; p & gt;
    Thương mại phàn nàn.
  & lt; / p & gt;
& lt; / phần & gt;

& lt; section style = "border-bottom: 1px solid # 000" & gt;
  & lt; h2 & gt; CHƯƠNG 2 & lt; / h2 & gt;
  & lt; p & gt;
    Hướng dẫn soạn bên ngoài trại choáng ngợp.
  & lt; / p & gt;
& lt; / section & gt;  

Thêm đường viền bằng CSS thực sự rất dễ dàng, tất cả những gì bạn cần thực hiện chỉ là một dòng của border-bottom: THICKNESS STYLE COLOR . Ngoài ra, hãy lưu ý cách chúng tôi đang sử dụng & lt; section & gt; chứ không phải & lt; hr & gt; ở trên – Về mặt ngữ nghĩa, chúng tôi đã “khoanh vùng” các chương bằng cách sử dụng & lt; phần & gt; , các đường ngang đơn giản trở thành mỹ phẩm.

Xem Thêm  Chỉ thị - GeeksforGeeks - các chỉ thị trong anglejs là gì

KHI NÀO KHÔNG NÊN SỬ DỤNG & lt; HR & gt;

Trong khi chúng ta vẫn đang ở đó, hãy cùng xem qua một ví dụ cuối cùng về thời điểm không hợp lý khi sử dụng thẻ & lt; hr & gt; .

2b-no-hr.html

  & lt;! - HEADER - & gt;
& lt; tiêu đề & gt;
  TRANG WEB CỦA TÔI
& lt; / tiêu đề & gt;

& lt;! - NỘI DUNG CHÍNH - & gt;
& lt; div style = "border-top: 1px solid # 000; border-bottom: 1px solid # 000" & gt;
  Chào mừng thế giới!
& lt; / div & gt;

& lt;! - CHÂN - & gt;
& lt; footer & gt;
  Bản quyền trang web của tôi
& lt; / footer & gt;  

Ở đây, chúng tôi có bố cục trang web “3 phần” rất đơn giản – Đầu trang, nội dung và chân trang. Vậy tại sao chèn & lt; hr & gt; sau tiêu đề và nội dung chính lại không hợp lý? Bởi vì chúng tôi đã xác định các vùng có & lt; header & gt; , & lt; div & gt; & lt; footer & gt; . Việc sử dụng & lt; hr & gt; sẽ không mang bất kỳ ý nghĩa nào và chúng tôi chỉ muốn các đường ngang như một hiệu ứng thẩm mỹ.

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn.

CÓ THỰC SỰ LÀ VẤN ĐỀ !?

Chà, câu chuyện có thật là… Trong những năm tháng lừa dối trong sự nghiệp phát triển web của mình, cá nhân tôi đã không quan tâm đến cũng như không sử dụng thẻ & lt; hr & gt; nhiều kể từ khi HTML5 ra đời. Có rất nhiều thẻ ngữ nghĩa và cấu trúc trong HTML 5 – & lt; header & gt; & lt; footer & gt; & lt; phần & gt; & lt; div & gt; & lt; p & gt; .

Tôi thấy mình sử dụng các thẻ cấu trúc đó nhiều hơn, cùng với CSS border . Loại thẻ & lt; hr & gt; đã trở thành một con voi trắng vô dụng. Có vấn đề gì không? Không hẳn vậy. Nhưng nếu bạn muốn có một trang chính xác về mặt ngữ nghĩa cho mục đích tối ưu hóa công cụ tìm kiếm (SEO) – Vậy thì có, hãy xác định tất cả các “ranh giới ngữ cảnh” một cách cẩn thận.

LIÊN KẾT & amp; TÀI LIỆU THAM KHẢO

BẢNG CHEAT HÌNH ẢNH

HẾT

Cảm ơn bạn đã đọc và chúng ta đã đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn, và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề ngắt dòng ngang html

HTML – Sử dụng thẻ Div bố cục đơn giản

  • Tác giả: Thanh Duong Huu
  • Ngày đăng: 2020-05-12
  • Đánh giá: 4 ⭐ ( 3808 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng thẻ div bố cục lưới đơn giản
Xem Thêm  Thuộc tính hiển thị kiểu DOM HTML - khối hiển thị kiểu getelementbyid tài liệu

Thẻ Lệnh Xuống Dòng Trong Html, Thẻ Ngắt Xuống Dòng Br Trong Html

  • Tác giả: duongmonkyhiep.vn
  • Đánh giá: 3 ⭐ ( 7292 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các đoạn văn trong HTMLThẻ đoạn văn Hiển thị HTMLĐừng quên thẻ đóngThẻ xuống dòng Sự cố của các bài thơThẻ Các đoạn văn trong HTMLCác tài liệu của HTML được chia ra thành nhiều đoạn nhỏ, Thẻ đoạn văn Trong HTML thẻ xác định một đoạn văn bản

Làm cách nào để thêm ngắt dòng vào văn bản HTML?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3382 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Vấn đề xuất phát từ thực tế là ngắt dòng ( \n\r?) Không giống với
    thẻ…

Thẻ Lệnh Xuống Dòng Trong Html

  • Tác giả: mdtq.vn
  • Đánh giá: 5 ⭐ ( 4094 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết hướng dẫn cách chèn khoảng trắng và ngắt dòng trong HTML, Vì dù bạn có gõ dấu cách bao nhiêu lần, HTML cũng sẽ hiển thị 1 dấu cách nên để chèn nhiều hơn một khoảng trống, bạn sẽ cần dùng tới thẻ HTML

Cách để Chèn khoảng trống trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 6500 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Chèn khoảng trống trong HTML. Đây là bài viết hướng dẫn cách chèn khoảng trống và ngắt dòng vào văn bản HTML. Vì việc ấn phím cách nhiều lần cũng chỉ hiển thị một khoảng trống trong HTML, nên bạn cần sử dụng thẻ HTML để chèn nhiều…

[Tự học HTML] Tìm hiểu về Tiêu đề(Heading), Văn bản(Paragraphs) trong HTML

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 9097 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay cafedev chia sẻ cho ace chi tiết về Heading vs Paragraphs trong HTML là như thế nào?, Sau đây chúng ta sẽ tìm hiểu về Heading trước.

Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 8671 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, in đậm trong HTML, in nghiêng trong HTML, gạch chân trong HTML, gạch ngang trong HTML, chỉ số trên trong HTML, chỉ số dưới trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php