Có nhiều cách dễ dàng để chia nhỏ cấu trúc trang của bạn để tách các chủ đề hoặc ý tưởng mà không cần tạo các lớp hoặc id

Bạn có thể sử dụng ngắt dòng hoặc quy tắc ngang [i. e. , lines] để làm như vậy

Giả sử bạn muốn mã hóa một bài báo về các quán cà phê ngon nhất của New York theo quận và bạn muốn nó được cấu trúc như sau

Bài viết trên web về các quán cà phê ở New York

Hãy chú ý đến hai điều

• Các địa chỉ dưới mỗi tên quán cà phê

• Dòng phân cách danh sách Manhattan từ danh sách Brooklyn

Đây là những gì chúng ta sẽ đề cập trong chương này

ngắt dòng

Các đoạn văn là các phần tử cấp khối, nghĩa là chúng chiếm chiều rộng của phần tử chứa chúng theo mặc định. Họ cũng có khoảng cách trên và dưới họ. Nó không chỉ là một ngắt dòng đơn giản

Xem khoảng cách giữa "Dòng 1" và "Dòng 2" trong hình ảnh sau đây?

Khoảng cách dòng mặc định xuất hiện giữa các đoạn văn

Tuy nhiên, đôi khi bạn không muốn có thêm không gian đó. Bạn sẽ muốn có ít khoảng trống hơn giữa mỗi dòng

Ít khoảng cách hơn giữa hai dòng khác nhau

Điều này đúng đặc biệt đối với địa chỉ và bài thơ. Bạn không cần một đoạn hoàn toàn mới cho mỗi dòng trong một địa chỉ. Một ngắt dòng đơn giản và hẹp hơn sẽ làm

To create line breaks in HTML, use the
tag. There is no closing tag necessary.

Toby's Estate

    125 N 6th St
    

    Brooklyn, NY 11249

Trong đoạn mã trên, sẽ có một ngắt dòng giữa "125 N 6th St" và "Brooklyn, NY 11249" sẽ không có khoảng cách quá lớn xuất hiện giữa hai thành phần đoạn văn. Nó sẽ chỉ là một ngắt dòng tốt đẹp

Địa chỉ có dấu ngắt thành các dòng riêng biệt

This is what the address would look like as two separate

elements instead of one paragraph containing a line break:

Địa chỉ với các dòng dưới dạng đoạn văn riêng biệt. ngoại hình kỳ lạ

Đó là một lượng không gian kỳ lạ, phải không?

Don't add
tags everywhere just to create additional space on the page. Use them if a line break between two lines of text makes sense for your content [the lines of an address, for example, are always bunched closer together. Breaking them apart would make it harder for readers to understand]. Otherwise, if the extra space you want is purely visual, create it using CSS. Remember that HTML tags are for your content, not its appearance.

quy tắc ngang

Bạn có thể có các chủ đề nội dung khác nhau trong một trang có liên quan nhưng đáng để tách ra cho rõ ràng. Trong ví dụ trên, quán cà phê ở Manhattan được tách biệt với quán cà phê ở Brooklyn vì nó giúp nhóm các nội dung khác nhau trong bài viết

To create a line, or a "horizontal rule" in HTML, simply use an tag.

Manhattan
...

...
Brooklyn

Quy tắc ngang

Here's the full HTML code for the coffeeshop article [find those
and tags!]:

    
New York's best coffeeshops
    
New York has some great coffeeshops. Make sure not to miss the hot new addresses opening up left and right!
    
Manhattan

    
The Bean
    

        824 Broadway

        New York, NY 10003
    
    
There are multiple Bean locations in the city. It's a good place to get work done because they're open late.

    
Third Rail
    

        240 Sullivan St

        New York, NY 10012
    

  


    
Coffee and donuts! What more could you want?
    
    
Black Fox Coffee Co.
    

        70 Pine St

        New York, NY 10270
    
    
Black Fox has an incredible bean selection and nice snacks.

    
Stumptown
    

        18 W 29th St

        New York, NY 10001
    
    
Does this even need explaining?
    
    

    
Brooklyn
    
Toby's Estate
    

        125 N 6th St

        Brooklyn, NY 11249
    
    
Toby's has grown a lot from its initial location in Brooklyn. They now have three locations in NYC.

Thực tiễn

Đi đến bài tập CodePen này. Bạn sẽ thêm một phần mới cho vùng lân cận Queens bằng cách sử dụng thước kẻ ngang. Bạn sẽ thêm một quán cà phê ở Queens [thật hoặc ảo], đảm bảo tạo địa chỉ của quán bằng cách sử dụng dấu ngắt dòng

1. Thêm một thước ngang [