You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. Cùng với thẻ Br chúng ta có thể xuống hàng nhanh chóng trong HTML

Cùng với thẻ Br chúng ta có thể xuống hàng nhanh chóng trong HTML

Chúng ta sẽ cùng nhau giải quyết vấn đề về chuyện xuống dòng trong HTML.

Xem thêm bài viết

Xin chào các bạn! Ở bài trước các bạn đã giải đáp được thắc mắc của mình rồi. Bài viết này sẽ giải quyết luôn phần còn lại của việc làm sao xuống dòng trong HTML mà trình duyệt vẫn hiểu. Chúng ta sẽ nhờ vào thẻ Br. Thẻ này là một thẻ đặc biệt. Còn việc đặc biệt như thế nào thì chúng ta bắt đầu bài học sẽ biết thôi.

Chúng ta sẽ nhắc lại một chút về tình huống của bài viết trước có đề cập đến. Bạn có 3 đoạn văn được xuống dòng ngay ngắn, cẩn thận trong trang tài liệu HTML. Nhưng khi bạn mở chúng lên bằng HTML thì bạn lại không nhìn thấy 3 đoạn văn bản đâu. Bạn chỉ nhìn thấy một đoạn văn dài sòng sọc và chứa luôn cả 3 đoạn văn.

Chúng ta sẽ giải quyết vấn đề này bằng cách sử dụng thẻ <br>.

Thẻ <br> là gì?

Sẽ là một thiếu sót lớn nếu không nhắc đến thẻ <br> (Br). Thẻ này thường được gọi vui là thẻ chuyên viên cao cấp. Tức là thẻ “cấp cao”. Tượng trưng cho việc thẻ này có thể giúp cho trình duyệt hiểu được bạn đang muốn làm gì. Giống như những chuyển viên cao cấp hiểu ý ông chủ và truyền đạt tốt đến nhân viên. Tên khai sinh của thẻ này chính là Break. Vì vậy nickname của em nó là Br.

Đây là một loại thẻ cực kỳ đặc biệt. Nếu không có thẻ này bạn đừng hòng mà các trang tài liệu HTML khi được đọc bằng trình duyệt có thể xuống hàng cho bạn. Thẻ Br trong HTML lợi hại như thế đấy. Không có thẻ này thì không biết phải làm sao nữa.

Cú pháp thẻ Br

Chúng ta sẽ xem qua cú pháp của thẻ Br:

<br> hoặc <br/>

Thẻ Br là một thẻ Empty Tag. Thẻ này chỉ có thể mở và không có thẻ đóng. Đây là thẻ đầu tiên bạn sẽ học trong phần Body mà không có thẻ đóng. Thẻ này bạn có hai cách viết. Cách viết đầu tiên là bạn có thể viết mà không cần dấu slash. Cách thứ hai thì bạn thêm dấu slash vào. Mình khuyến khích bạn sử dụng cách thứ hai. Như vậy bạn không cần phải nhớ thẻ nào có cả hai thẻ mở đóng. Thẻ nào không có thẻ đóng. Đây là một thẻ rỗng. Thế nên bạn không cần bất kỳ một Content nào trong thẻ này.

Thẻ này chính là thẻ dễ dàng sử dụng nhất. Chúng ta cùng xem qua ví dụ nhé!

Ví dụ:

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
    </head>
    <body>
        <h1>Ẩm thực sáng tạo Sài Gòn 47 hẻm</h1>
        <p>Khám phá ẩm thực ở vùng đất được xem là hòn ngọc viễn Đông. Nơi đậm tính văn hoá xen lẫn hiện đại của Sài Gòn. <br/>
        
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường. <br/>
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá. <br/>
                    Muốn ăn món Thái, <br/>
                            Có ngay! <br/>
                    Muốn ăn món Hàn, <br/>
                            Hãy nhìn bên kia đường! <br/>
                    Muốn ăn thịt nướng, <br/>
                            Đi thêm vài bước nữa! <br/>
                    Muốn ăn món Nhật, <br/>
                            Ghé đối diện! <br/>
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn <br/>
                    Những buổi tối không ngủ <br/>
                        Ngắm nhìn đường phố nhộp nhịp <br/>
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. <br/>
                Sài Gòn là nơi của những ly cà phê đặc biệt. <br/>
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. <br/>
                Có một Sài Gòn rất khác... <br/>
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </p>
        
    </body>
</html>

Ở ví dụ này bạn sẽ chưa nhìn thấy hiệu quả gì khi chúng ở dạng code. Tuy nhiên kết quả của bạn sẽ được hiển thị ngay trên  trình duyệt. Bạn sẽ thấy trên trình duyệt. Hai đoạn văn này hoàn toàn tách biệt nhau.

Có phải là rất khác với khi không dùng thẻ Br không. Hãy cùng xem qua ví dụ này khi không có thẻ Br.

Ví dụ:

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
    </head>
    <body>
        <h1>Ẩm thực sáng tạo Sài Gòn 47 hẻm</h1>
        <p>Khám phá ẩm thực ở vùng đất được xem là hòn ngọc viễn Đông. Nơi đậm tính văn hoá xen lẫn hiện đại của Sài Gòn.
        
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái,
                            Có ngay!
                    Muốn ăn món Hàn,
                            Hãy nhìn bên kia đường!
                    Muốn ăn thịt nướng,
                            Đi thêm vài bước nữa!
                    Muốn ăn món Nhật,
                            Ghé đối diện!
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà.
                Sài Gòn là nơi của những ly cà phê đặc biệt.
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau.
                Có một Sài Gòn rất khác...
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </p>
        
    </body>
</html>

Kết quả khi không dùng thẻ Br.

Cảm giác thật tồi tệ phải không? Bạn đã thấy được sự lợi hại của thẻ Br. Bạn sẽ dùng thẻ Br nhiều lần lắm đó. Có rất nhiều thẻ sẽ cùng đi kèm với thẻ Br. Thẻ này sẽ rất công hiệu dành cho bạn. Bạn nên nhớ đến thẻ này nhiều hơn. Mật độ sử dụng thẻ này cùa bạn là khá thường xuyên.

Nhưng có vẻ với cách trình bày này vẫn chưa làm hài lòng bạn cho lắm. Vì đoạn thơ được trình bày khá là xấu và không theo ý muốn của bạn. Bạn muốn chỉnh lại cho giống với những gì mà bạn đã viết trong trang tài liệu HTML. Có cách ngay và luôn. Nhưng giải pháp sẽ nằm ở những bài viết giải quyết các đoạn thơ ca trong HTML.

Vậy là bạn đã học xong một thẻ có hiệu quả rất cao trong HTML. Thẻ này tuy đơn giản nhưng bạn cần phải nắm vững các kiến thức về thẻ này để áp dụng. Bài học thì đã xong rồi. Bây giờ là thời gian để bạn ôn lại bài vừa học.

Bài tập

Bạn hãy Copy đoạn văn bên dưới vào trang HTML của bạn sau đó tiến hành xuống dòng đoạn văn bản này. Làm sao để có thể khi mở trình duyệt lên bạn có thể thấy các đoạn văn đã được xuống dòng trong trình duyệt giống trình bày phía dưới.

Đoạn văn được trích trong một bài về iPhone 8 của MacRumors

2017 will mark the 10th anniversary of the iPhone and Apple has something major planned to celebrate the occasion. We've got several months to go until the launch of the iPhone 8, but because of Apple's ambitious plans for the device, there are already an abundance of rumors hinting at the impressive features coming in the 2017 iPhone.

The display itself is said to be flexible plastic OLED rather than an LCD, allowing Apple to introduce a thinner device that consumes less power and offers a better display with higher contrast ratio and more true to life colors.

Following Apple's standard naming scheme, with a numeric increase during even years to mark external design changes and an "S" increase during odd years to denote internal feature updates only, the 2017 iPhone would be called the "iPhone 7s."

Given the major changes Apple plans to introduce to the iPhone in 2017, it seems unlikely the device will receive an "S" name, so there's a good chance Apple may decide to skip directly to the next full number, naming the 2017 iPhone the iPhone 8.

Chúc bạn thành công!

 




Đặt câu hỏi cho bài viết này ?