Phân loại thẻ HTML và cách chuyển đổi khối

Ngọc Phương

20/10/2024 . 300k lượt xem

Sau khi nắm được các thẻ cơ bản HTML, thì các bạn cần phân loại thẻ HTML để có thể sử dụng thẻ HTML phù hợp hơn cho từng trường hợp. Nào cùng tìm hiểu qua bài viết dưới đây nhé!

<h2>I. Phân loại thẻ HTML</h2> <p>Thẻ HTML được chia làm 3 khối cơ bản</p> <h3>1. None</h3> <p>Khối này không hiển thị nội dung bên trong. </p> <p>Ví dụ: <html>, <head>, <title>, <meta>, <link>, <script>, <style> ..</p> <h3>2. Block level</h3> <p>Khối này hiển thị nội dung bên trong và chiều ngang tràn hết trình duyệt.</p> <p>Ví dụ: <body>, <h1>, <p>, <ul>, <form>, <table> ...</p> <h3>3. Inline</h3> <p>Khối này hiển thị nội dung bên trong và chiều ngang tùy thuộc độ dài của các đối tượng bên trong của khối đó. Và nó sẽ nằm trên một dòng.</p> <p>Ví dụ: <span>, <img>, <a>, <b>, <i>, <u> ...</p> <p style="text-align:center"><img alt="phan loai the html" src="/ckfinder/userfiles/images/lap-trinh-web/phan-loai-html.webp" style="height:90px; width:600px" /></p> <p>Các thẻ HTML trong cặp thẻ <strong><body> </body> </strong>thường là kiểu <strong>block</strong> và <strong>inline</strong>.</p> <h2>II. Cách chuyển đổi khối</h2> <h3>1. Chuyển block sang inline</h3> <p>Dùng css với thuộc tính float: left,right.</p> <p>Dùng css với thuộc tính display: inline.</p> <h3>2. Chuyển inline sang block</h3> <p>Dùng css với thuộc tính display: block.</p> <h2>III. Ví dụ chuyển đổi khối</h2> <p>Khi chưa chuyển khối</p> <pre> <code><div>Thẻ Block level</div> <br> <span>Thẻ Inline</span> <style type="text/css"> div{ border: 1px solid #000; margin: 5px; font-size: 30px; padding: 5px; } span{ border: 1px solid red; margin: 5px; font-size: 30px; padding: 5px; } </style></code></pre> <p>Khi đã chuyển khối block sang inline: cụ thể là thêm thuộc tính display: inline vào css của thẻ div.</p> <pre> <code><div>Thẻ Block level</div> <br> <span>Thẻ Inline</span> <style type="text/css"> div{ border: 1px solid #000; margin: 5px; font-size: 30px; padding: 5px; display:inline; } span{ border: 1px solid red; margin: 5px; font-size: 30px; padding: 5px; } </style></code></pre>

Ngọc Phương

Web Developer

Cảm ơn các bạn đã ghé thăm blog của tôi. Tôi tên là Phương và tôi đã có hơn 10 năm kinh nghiệm trong lĩnh vực phát triển website. Tôi tự tin khẳng định mình là chuyên gia trong việc tạo ra những trang web ấn tượng và hiệu quả. Bạn nào có nhu cầu thiết kế website có thể liên hệ cho tôi qua zalo 0935040740.

Đóng góp ý kiến

Địa chỉ email của bạn sẽ không được công khai. Các trường bắt buộc được đánh dấu *

Your Name

Your Email

Your Website