Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.
Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.
Hướng dẫn này sẽ cho bạn biết sự khác biệt giữa các phần tử cấp nội tuyến và cấp khối trong HTML và cách chúng ảnh hưởng đến vị trí của một phần nội dung trên trang.
Khi sắp xếp các phần tử trong trang HTML , điều quan trọng là phải hiểu cách các phần tử này chiếm dung lượng trên trang web. Một số yếu tố nhất định có thể chiếm nhiều không gian trên trang web hơn nội dung chúng chứa. Hiểu hành vi của các loại phần tử khác nhau sẽ giúp bạn dự đoán cách chúng ảnh hưởng đến vị trí của các phần tử khác trên trang.
Nói chung, có hai loại phần tử khác nhau— phần tử cấp nội tuyến và phần tử cấp khối — các giá trị mặc định về khoảng cách này hoạt động khác nhau. Dưới đây, ta sẽ mô tả cách cài đặt mặc định của các phần tử này xác định vị trí của chúng trên trang web và so với vị trí của các phần tử lân cận.
Phần tử cấp nội tuyến
Phần tử nội tuyến là phần tử có chiều rộng ngang được xác định bởi chiều rộng của nội dung mà chúng chứa. Phần tử <strong> và phần tử <em> mà ta đã đề cập trong hướng dẫn cuối cùng đều là ví dụ về phần tử nội tuyến.
Ta có thể sử dụng Trình kiểm tra nhà phát triển web của Firefox để kiểm tra kích thước của các phần tử HTML trên trang web. (Nếu bạn đang sử dụng Chrome, bạn có thể sử dụng công cụ Developer Kiểm tra phần tử thay thế nhưng hướng dẫn này sẽ cung cấp hướng dẫn cho công cụ Web Developer của Firefox.)
Quay lại index.html mà bạn đã tải trong trình duyệt của bạn . Nếu bạn cần reload nó và không nhớ cách thực hiện, hãy tham khảo hướng dẫn Tải file HTML trong Trình duyệt của bạn từ hướng dẫn cuối cùng.
Sau đó, chuyển đến mục menu Công cụ ở thanh menu trên cùng và chọn “Nhà phát triển / Người kiểm tra web”. Chọn mục menu này sẽ mở ra giao diện Người kiểm tra cho phép bạn kiểm tra HTML và CSS của một trang web. Tiếp theo, di con trỏ qua văn bản Văn bản My strong text , sẽ đánh dấu văn bản bằng màu xanh lam nhạt.Phần đánh dấu này hiển thị toàn bộ không gian bị chiếm bởi phần tử mà con trỏ của bạn đang di chuột qua. Như bạn có thể mong đợi, không gian bị chiếm dụng của phần tử chỉ đủ lớn để chứa nội dung văn bản của nó:
Không giống như các phần tử cấp khối, mà ta sẽ đề cập trong phần tiếp theo, các phần tử nội tuyến không chiếm dòng không gian ngang của riêng chúng. Do đó, các phần tử nội dòng sẽ nằm cạnh nhau trên một trang web nếu bạn không chỉ định dấu ngắt với phần tử HTML bổ sung, chẳng hạn như phần tử <br> ngắt dòng. Định cỡ mặc định này thường thuận tiện, vì bạn có thể cần đánh dấu các từ đơn lẻ trong một đoạn văn bằng phần tử nội dòng chẳng hạn như <strong> hoặc <em> mà không đẩy văn bản tiếp theo sang dòng tiếp theo.
Thử thêm thẻ <br> vào giữa hai dòng mã của bạn trong index.html . (Bạn cần quay lại file của bạn trong editor .) Lưu ý phần tử <br> chỉ yêu cầu thẻ mở và không bao quanh bất kỳ văn bản nào:
<strong>My strong text</strong> <br> <em>My emphasized text</em> Lưu và reload tài liệu trong trình duyệt của bạn để kiểm tra kết quả của bạn. Bạn sẽ nhận được thông tin như thế này:
Văn bản mạnh mẽ của tôi
Văn bản nhấn mạnh của tôi
Hai cụm từ của bạn bây giờ phải nằm trên các dòng riêng biệt vì chúng hiện được phân tách bằng phần tử ngắt dòng <br> .
Nếu bạn sử dụng Trình kiểm tra nhà phát triển web của Firefox để kiểm tra kích thước của các phần tử, bạn có thể xác nhận chiều rộng của mỗi phần tử văn bản vẫn được xác định bởi chiều rộng của nội dung văn bản:
Phần tử cấp khối
Các phần tử cấp khối hoạt động khác với các phần tử cấp nội tuyến ở chỗ chúng chiếm toàn bộ không gian ngang trên một trang web. Điều này nghĩa là chúng tự động bắt đầu trên một dòng mới và chúng cũng tự động đẩy các phần tử tiếp theo lên một dòng mới.
Ví dụ: các phần tử tiêu đề HTML ( <h1> đến <h6> ) là các phần tử cấp khối tự động đặt nội dung của chúng vào một dòng mới và đẩy bất kỳ nội dung nào theo sau vào một dòng mới. Mỗi phần tử trong số sáu phần tử tiêu đề này đại diện cho một kích thước tiêu đề khác nhau.
Hãy nghiên cứu cách thức hoạt động của điều này trong thực tế. Ở cuối index.html của bạn, hãy thử paste vào đoạn mã được đánh dấu:
<strong>My strong text</strong> <br> <em>My emphasized text</em> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> Lưu file của bạn và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:
Bây giờ ta hãy kiểm tra các phần tử tiêu đề cấp khối để nghiên cứu xem chúng khác với các phần tử văn bản cấp nội tuyến ở trên như thế nào. Mở Trình kiểm tra nhà phát triển web của Firefox và di chuột qua từng phần tử để kiểm tra không gian bị chiếm dụng của chúng như được biểu thị bằng phần đánh dấu màu xanh lam. Bạn có thể xác nhận không gian ngang chiếm dụng của mỗi phần tử cấp nội tuyến được xác định bởi nội dung văn bản của nó, trong khi không gian ngang chiếm dụng của từng phần tử cấp khối trải dài trên toàn bộ trang web:
Các phần tử cấp khối sẽ luôn đẩy các phần tử cấp nội tuyến xuống dòng tiếp theo, ngay cả khi bạn viết các phần tử HTML đó trên cùng một dòng của trang HTML . Để tự xác nhận điều này, hãy thử viết một phần tử cấp khối và một phần tử cấp nội tuyến trên cùng một dòng của index.html của bạn. Xóa nội dung hiện có khỏi file của bạn và thêm đoạn mã sau:
<strong>My strong text</strong><h1>My heading</h1><em>My emphasized text</a> Bạn có đoán được mã HTML này sẽ hiển thị như thế nào trong trình duyệt không? Lưu file của bạn và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:
Lưu ý phần tử tiêu đề <h1> đã bắt đầu trên một dòng mới và đẩy phần tử văn bản tiếp theo sang một dòng mới mặc dù các phần tử được viết trên cùng một dòng trong trang HTML .
Đến đây bạn sẽ hiểu cách các phần tử cấp nội tuyến và cấp khối được định vị và cách chúng ảnh hưởng đến vị trí của các phần tử lân cận. Việc ghi nhớ các hành vi riêng biệt của chúng có thể hữu ích khi sắp xếp các phần tử HTML trong tương lai.
Ta sẽ tiếp tục tìm hiểu về các phần tử nội tuyến và khối mới trong các hướng dẫn phía trước.
Các tin liên quan
Cách thêm một Favicon vào trang web của bạn bằng HTML2020-08-26
Tạo phần trên cùng của trang chủ của bạn bằng HTML
2020-08-26
Cách sử dụng các thuộc tính HTML
2020-08-26
Cách thêm siêu liên kết trong HTML
2020-08-26
Cách sửa đổi màu của các phần tử HTML
2020-08-26
Cách lồng các phần tử HTML
2020-08-26
Cách sử dụng các phần tử cấp nội tuyến và cấp khối trong HTML
2020-08-26
Cách viết HTML nhanh chóng bằng Emmet
2019-07-02
Sử dụng vue-template-loader với Vue.js để biên dịch các mẫu HTML
2018-01-18
Nhận và thiết lập thẻ meta HTML trong Angular
2017-11-27
