Khi bạn đang viết HTML, bạn thường cần phải chèn các dấu ngắt dòng. Dấu ngắt dòng là điều cần thiết trong địa chỉ, bài thơ hoặc khi văn bản vượt quá chiều rộng trình duyệt có sẵn. Nếu bạn không chèn các ngắt dòng của riêng mình, thì văn bản sẽ được định dạng theo một cách kỳ lạ. Trong hướng dẫn này, tôi sẽ đến

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

Khi viết HTML, bạn thường cần chèn các dấu ngắt dòng. Dấu ngắt dòng là điều cần thiết trong địa chỉ, bài thơ hoặc khi văn bản vượt quá chiều rộng trình duyệt có sẵn. Nếu bạn không chèn các dấu ngắt dòng của riêng mình, thì văn bản sẽ được định dạng theo một cách kỳ lạ.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách chèn ngắt dòng trong mã HTML của bạn với một số ví dụ “có và không”, để bạn có thể bắt đầu sử dụng đúng cách và định dạng văn bản của mình tốt hơn.

Cú pháp ngắt dòng HTML cơ bản

Bạn có thể chèn dấu ngắt dòng trong HTML bằng thẻ & lt; br & gt; , tương đương với dấu xuống dòng trên bàn phím.

Hãy lưu ý rằng HTML sẽ bỏ qua bất kỳ ngắt dòng nào từ phím quay lại của bàn phím.

  & lt; br / & gt;
 

Nếu bạn đang thắc mắc tại sao lại có dấu gạch chéo trong thẻ & lt; br & gt; ở trên, thì dấu gạch chéo này rất quan trọng khi HTML4 vẫn được sử dụng rộng rãi. Với HTML5, bạn không cần phải đặt dấu gạch chéo vào nó nữa. Nhưng cả hai đều sẽ làm điều tương tự.

Nếu bạn đang sử dụng một trình định dạng mã như đẹp hơn, nó sẽ luôn chèn dấu gạch chéo khi bạn lưu hoặc dán ngay cả khi bạn không đặt nó vào đó.

Cách Chèn Dấu ngắt Dòng trong Địa chỉ

Ví dụ: ngắt dòng rất quan trọng khi bạn viết địa chỉ trên một lá thư để định dạng đúng.

Đây là ví dụ về địa chỉ không có ngắt dòng

Địa chỉ không có dấu ngắt dòng (thẻ & lt; br & gt; ) trông giống như sau:

  & lt; p & gt;
     Nhà Trắng, 1600 Đại lộ Pennsylvania, NW Washington, DC 20500, Hoa Kỳ.
& lt; / p & gt;
 

Tôi đã thêm một số mã CSS để căn giữa mọi thứ với Flexbox và làm cho văn bản lớn hơn một chút:

  body {
    hiển thị: flex;
    align-các mục: trung tâm;
    justify-content: trung tâm;
    chiều cao: 100vh;
    kích thước phông chữ: 3rem;
    chiều rộng tối đa: 1000px;
    margin: 0 auto;
}
 

Đây là giao diện của nó trong trình duyệt:
address-without-line-break

Đây là địa chỉ có dấu ngắt dòng

Và đây là cách chúng tôi có thể thêm dấu ngắt dòng để định dạng đúng địa chỉ của mình:

  & lt; p & gt;
    Nhà Trắng & lt; br / & gt;
    1600 Đại lộ Pennsylvania & lt; br / & gt;
    NW Washington, DC & lt; br / & gt;
    20500 & lt; br / & gt;
    Hoa Kỳ
& lt; / p & gt;
 

Nó trông giống như thế này trong trình duyệt:

Xem Thêm  SQL KHÔNG ĐẦY ĐỦ - không null trong sql

address-with-line-break

Cách thêm dấu ngắt dòng vào bài thơ

Các bài thơ thường được viết bằng những câu ngắt quãng ngắn để tạo thứ bậc trực quan và định dạng chúng đẹp mắt.

Vì vậy, nếu bạn muốn viết một bài thơ bằng mã HTML của mình, thẻ & lt; br & gt; giúp quá trình định dạng dễ dàng hơn cho bạn.

Một bài thơ không có ngắt dòng

  & lt; p & gt;
      Tôi đã vấp ngã rất nhiều khi quyết định học viết mã
      Tôi đã đi từ A đến Z với các nguồn lực
      Khi tôi quyết định làm những thứ của riêng mình
      Tôi phát hiện ra rằng tôi đã ở trong tình cũ trong suốt thời gian qua
      Vì vậy, tôi vẫn là một người mới trong lĩnh vực viết mã
      Nhưng sau đó tôi tìm thấy freeCodeCamp
      Tôi đã đặt tay trên nền tảng
      Tôi đã đi từ người mới thành ninja trong lĩnh vực viết mã
     Và bây giờ tôi là một người cắm trại cho cuộc sống
& lt; / p & gt;
 

Nó trông giống như thế này trong trình duyệt:

Poem-without-line-break

Bạn có thể thấy bài thơ không có thứ bậc trực quan, nó không được định dạng đúng cách và vì vậy nó không thể đọc được như một bài thơ.

Một bài thơ có ngắt dòng

 & lt; p & gt;
      Tôi đã gặp khó khăn rất nhiều khi quyết định học cách viết mã & lt; br / & gt;
      Tôi đã đi từ A đến Z với các tài nguyên & lt; br / & gt;
      Khi tôi quyết định làm những thứ của riêng mình & lt; br / & gt;
      Tôi phát hiện ra rằng tôi đã ở trong tình cũ trong khi & lt; br / & gt;
      Vì vậy, tôi vẫn là một người mới trong lĩnh vực viết mã & lt; br / & gt;
      Nhưng sau đó tôi tìm thấy freeCodeCamp & lt; br / & gt;
      Tôi đã chạm tay vào nền tảng & lt; br / & gt;
      Tôi đã đi từ người mới thành ninja trong việc viết mã & lt; br / & gt;
      Và bây giờ tôi là một người cắm trại cho cuộc sống & lt; br / & gt;
& lt; / p & gt;
 

Tôi cũng đã thay đổi kích thước phông chữ một chút trong CSS:

  body {
   hiển thị: flex;
   align-các mục: trung tâm;
   justify-content: trung tâm;
   chiều cao: 100vh;
   kích thước phông chữ: 2,5rem;
   chiều rộng tối đa: 1000px;
   margin: 0 auto;
}
 

Bây giờ nó trông giống như thế này trong trình duyệt:

Poem-with-line-break

Bạn có thể thấy rằng bài thơ hiện dễ đọc hơn và được định dạng đúng cách.

Xem Thêm  Cách sử dụng câu lệnh SELECT TOP trong MySQL - chọn top 1 mysql

Một số lời khuyên có giá trị: Không sử dụng thẻ & lt; br & gt; để buộc khoảng cách giữa các phần tử cấp khối ( p , < mã> h1 , h2 , h3 , div , v.v.). Thay vào đó, hãy sử dụng thuộc tính lề CSS.

Bạn có thể thắc mắc – vì thẻ & lt; br & gt; là một phần tử, nên có thể tạo kiểu cho nó không?

Chà, có thể. Nhưng thực tế không cần thiết phải tạo kiểu cho nó vì tất cả những gì nó làm là tạo ra một vài khoảng trắng.

Kết luận

Tôi hy vọng hướng dẫn này đã cung cấp cho bạn kiến ​​thức nền tảng mà bạn cần để sử dụng thẻ & lt; br & gt; để bạn có thể làm cho văn bản HTML của mình trông đẹp hơn.

Cảm ơn bạn đã đọc và tiếp tục viết mã.


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

HTML 07 – Xuống dòng trong HTML

alt

  • Tác giả: Vietpro Academy – Học viện Công nghệ Vietpro
  • Ngày đăng: 2016-12-16
  • Đánh giá: 4 ⭐ ( 1034 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: join group để được giải đáp thắc mắc và tham gia các lớp lập trình free các bạn nhé: http://bit.ly/2ItoWiV
    ————————————————————
    Trong HTML, bất cứ bố cục nào hay hiệu ứng gì, chúng ta đề phải sử dụng các thẻ HTML và các thuộc tính của nó. Cho dù là muốn in đậm, in nghiêng, hay thậm chí đơn giản chỉ là xuống dòng thì cũng đều phải sử dụng các thẻ hoặc cặp thẻ với chức năng đã được HTML định nghĩa sẵn.
    Xem chi tiết và download mã nguồn tại: https://vietpro.net.vn/html-08-the-xuong-dong-trong-html.html
    Click theo dõi(subscribe) những bài học hay tại đây nhé: https://www.youtube.com/channel/UCLjRjXUSy3g9iKRWTyw75Nw?sub_confirmation=1
    *****************
    Đến với Học viện Công nghệ Vietpro Academy bạn sẽ được trải nghiệm tất cả những gì mà các trung tâm dạy lập trình PHP khác không có, vì chúng tôi luôn là số 1 – phương châm của chún tôi là không đào tạo ra những học viên kém chất lượng.
    Khám phá ngay khóa lập trình web tại: http://hocthietkeweb.net.vn/khoa-hoc-lap-trinh-web-php-va-mysql.html

    VÌ SAO HỌC VIỆN CÔNG NGHỆ VIETPRO LUÔN LÀ SỐ 1
    Chất lượng giảng dạy khác biệt
    Đội ngũ giảng viên của học viện là các chuyên gia lập trình web nhiều năm kinh nghiệm. Các bài giảng học viện là do các giảng viên tự biên soạn, luôn dễ hiểu, sát với thực tế. Giáo trình là các video dạng bài giảng mà chỉ học viện mới có để kết hợp việc học lý thuyết và thực hành. Các bạn sẽ được học theo kiểu cầm tay chỉ việc cho tới khi thành thạo thì thôi.
    Học viện công nghệ Vietpro cam kết sẽ giới thiệu việc làm cho các bạn tại công ty thiết kế web trên địa bàn Hà Nội nên vấn đề việc làm sẽ không là mối bận tâm của các bạn sau khi kết thúc khóa học.

    Xem ngay khóa lập trình web tại: http://hocthietkeweb.net.vn/khoa-hoc-lap-trinh-web-php-va-mysql.html
    Comment số điện thoại để được tư vấn trực tiếp
    Chúc các bạn luôn thành công!

Thẻ


trong đoạn văn HTML

  • Tác giả: xuanthulab.net
  • Đánh giá: 5 ⭐ ( 9069 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ

    tạo ra một đoạn văn bản (paragraph), còn thẻ
    ngắt xuống dòng một đoạn text (chữ). Tìm hiểu về khoảng trắng (whitespace) trong mã HTML

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 ⭐ ( 1075 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

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

  • Tác giả: www.wikihow.vn
  • Đánh giá: 4 ⭐ ( 1178 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…

Cách dòng trong html

  • Tác giả: capdoihoanhao.vn
  • Đánh giá: 3 ⭐ ( 5549 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi cảm thấy như tôi đang hỏi một câu hỏi rất không hay) Có cách nào để làm cho HTML xử lý ngắt dòng đúng cách không? Hoặc tôi phải thay thế chúng bằng ?https://jsfiddle, net/zawyatzt/ Điều này là để hiển thị dòng mới và trả lại vận chuyển trong html, sau đó bạn không cần phải làm điều đó một cách rõ ràng

Thẻ ngắt xuống dòng br trong HTML

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 7690 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: br,thẻ br,the br,br trong html,thẻ br trong html,the br trong html,cách sử dụng thẻ br trong html,xuống dòng

Các thẻ cơ bản, phần tử và thuộc tính trong HTML

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 3014 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ cơ bản trong HTML là gì? Thẻ và phần tử trong HTML khác nhau như thế nào? Thuộc tính trong HTML là gì?

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