Cafedev chia sẻ về Mỗi phần tử HTML có một giá trị hiển thị mặc định, tùy thuộc vào loại phần tử đó.

Có hai kiểu hiển thị: khối(block) và nội tuyến(inline).

1. Hiện thị kiểu cấp khối

Một phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (kéo dài sang bên trái và bên phải hết mức có thể).

 <div>Hello Cafedev</div> 

Dưới đây là các yếu tố cấp khối trong HTML:


<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

2. Hiện thị kiểu nội tuyến

Một phần tử nội tuyến không bắt đầu trên một dòng mới và nó chỉ chiếm nhiều chiều rộng cần thiết.

 <span>Hello Cafedev</span> 

Dưới đây là các yếu tố nội tuyến trong HTML:


<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>

Lưu ý: Một phần tử nội tuyến không thể chứa phần tử cấp khối!

3. Phần tử <div>

Phần tử <div> thường được sử dụng làm vùng chứa cho các phần tử HTML khác.

Phần tử <div> không có thuộc tính bắt buộc, nhưng có style, classid

Khi được sử dụng cùng với CSS, phần tử <div> có thể được sử dụng để định kiểu các khối nội dung:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <div style="background-color:black;color:white;padding:20px;">
  <h2>Cafedev</h2>
  <p>Cafedev là kênh thông tin, sự kiện, hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu. .</p>
</div> 

Copy and chạy code

4. Phần tử <span>

Phần tử <span> là một bộ chứa nội tuyến được sử dụng để đánh dấu một phần của văn bản hoặc một phần của tài liệu.

Phần tử <span> không có thuộc tính bắt buộc, nhưng có style, classid phổ biến.

Khi được sử dụng cùng với CSS, phần tử <span> có thể được sử dụng để định kiểu các phần của văn bản:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<p>My father has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!