Sự sắp xếp chiều dọc của thẻ block trong HTML
Khi chúng ta sử dụng các thẻ block, trình duyệt sẽ hiển thị các thẻ theo chiều dọc, mỗi thẻ sẽ chiếm vùng không gian nằm ngang từ trên xuống theo thứ tự như chúng ta đã sắp xếp trong trang HTML/XHTML mà ta đã tạo ra, thẻ nào được viết trước sẽ nằm trên, các thẻ được viết sau sẽ nằm bên dưới.
Để dễ hình dung hơn. Chúng ta cùng nhau xem ví dụ sau đây để hiểu được trình duyệt hiển thị các thẻ theo chiều ngang như thế nào:
HTML viết
Để dễ hình dung hơn. Chúng ta cùng nhau xem ví dụ sau đây để hiểu được trình duyệt hiển thị các thẻ theo chiều ngang như thế nào:
<html>
<h1>Tiêu đề 01</h1>
<ul>
<li><a href="http://vietbg.com/search/label/HTML">Link 01</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 02</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 03</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 04</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 05</a></li>
</ul>
<div>Nội dung chính</div>
<div>Nội dung phụ</div>
<div>Tên công ty<br />
Địa chỉ<br />
</div>
</html>
<h1>Tiêu đề 01</h1>
<ul>
<li><a href="http://vietbg.com/search/label/HTML">Link 01</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 02</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 03</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 04</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 05</a></li>
</ul>
<div>Nội dung chính</div>
<div>Nội dung phụ</div>
<div>Tên công ty<br />
Địa chỉ<br />
</div>
</html>
Hiển thị trình duyệt:
Phân tích vị trí của các thẻ:
Sự sắp xếp chiều ngang của thẻ inline trong HTML
Khi chúng ta sử dụng các thẻ inline trong HTML, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code trước xuất hiện trước, thẻ nào code sau xuất hiện sau.
Cũng như trên, chúng ta cùng nhau đi xem một ví dụ cụ thể nhé!
Cũng như trên, chúng ta cùng nhau đi xem một ví dụ cụ thể nhé!
HTML viết
<a href="#">Thẻ a</a>
<span>thẻ span</span>
<em>thẻ em</em>
<strong>thẻ strong</strong>
<span>thẻ span</span>
<em>thẻ em</em>
<strong>thẻ strong</strong>
Tới đây chắc các bạn phần nào đó đã hiểu được nhiệm vụ của HTML/XHTML dùng để làm gì rồi đúng không ạ? Đối với các thẻ block thì trình duyệt sẽ tự đọng hiển tị nó theo chiều dọc, còn đối với các thẻ inline trình duyệt sẽ hiển thị nó theo chiều ngang của màn hình.
Nhiệm vụ của trình duyệt (Firefox, Internet Explorer, Safari, Opera, Chrome,...) là đọc văn bản HTML và hiển thị chúng như chúng ta thấy, tuy nhiên các trình duyệt không hiển thị các thẻ HTML (các tag), nhưng lại sử dụng các thẻ để giải thích nội dung cho trang web.
Không có nhận xét nào:
Đăng nhận xét