Hãy cùng webaffiliatevn.com tìm hiểu thẻ span trong html nhé.
1. Giới thiệu về thẻ span trong html
Phần tử span HTML là một vùng chứa nội tuyến chung cho các phần tử và nội dung nội tuyến. Nó được sử dụng để nhóm các phần tử cho mục đích tạo kiểu (bằng cách sử dụng thuộc tính class hoặc id), Một cách tốt hơn để sử dụng nó khi không có bất kỳ phần tử ngữ nghĩa nào khác. Thẻ span rất giống với thẻ div , nhưng div là thẻ cấp khối (block) và span là thẻ nội tuyến (inline-block) . Thẻ span là thẻ được ghép nối có nghĩa là nó có cả thẻ mở (<) và thẻ đóng (>) và bắt buộc phải đóng thẻ.
- Thẻ span được sử dụng để nhóm các phần tử nội tuyến.
- Bản thân thẻ span không thực hiện bất kỳ thay đổi trực quan nào.
- Thẻ span rất giống với thẻ div , nhưng div là thẻ cấp khối và span là thẻ nội tuyến .
Thẻ span được viết như sau:
<span class = ""> Một số văn bản ............. </span>
2. Một số ví dụ thẻ span trong html
2.1 Sử dụng thẻ span thay thế các thẻ <b>, <i>, < u>, <font>
Trong ví dụ dưới đây, giả sử chúng ta muốn viết Webaffilate ba lần trong ba dòng với chữ in đậm, nghiêng, gạch chân, màu xanh lục với font-family =segoe ui light, vì vậy chúng ta cần sử dụng nhiều thẻ HTML như <b>, <i>, < u>, <font> cho mọi lúc trong mọi dòng và chúng tôi muốn thực hiện thay đổi cần phải sửa đổi mọi thẻ.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ span</title>
</head>
<body>
<h2>Xin chào các bạn !!!</h2>
<!-- Dòng thứ nhất -->
<font color="blue" size="5">
<b>
<u>
<i>Webaffiliatevn</i>
</u>
</b>
</font>
</br>
<!-- Dòng thứ hai -->
<font color="blue" size="5">
<b>
<u>
<i>Webaffiliatevn</i>
</u>
</b>
</font>
</br>
<!-- Dòng thứ ba -->
<font color="blue" size="5">
<b>
<u>
<i>Webaffiliatevn</i>
</u>
</b>
</font>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”YzqqyZv” default_tab=”html,result” user=”davidkhai”]See the Pen YzqqyZv by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
Nhưng bằng cách sử dụng thẻ , chúng ta có thể giảm các dòng mã code và các thuộc tính HTML .
Ví dụ dưới đây sẽ hiển thị đầu ra giống như ví dụ trên với việc sử dụng thẻ bằng cách áp dụng CSS trong thẻ span.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ span</title>
<!-- style for span tag -->
<h2>Xin chào các bạn !!!</h2>
<span>Webaffiliatevn</span></br>
<span>Webaffiliatevn</span></br>
<span>Webaffiliatevn</span></br>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNeeOzj” default_tab=”html,result” user=”davidkhai”]See the Pen rNeeOzj by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
Như chúng ta biết span là một thẻ nội tuyến, nó chiếm dung lượng nhiều như yêu cầu và để lại không gian cho phần tử khác, hãy xem nó trong ví dụ bên dưới, tất cả bốn phần tử span sẽ hiển thị trong cùng một dòng vì mỗi thẻ chỉ chiếm không gian cần thiết và phần còn lại là không gian trống cho các phần tử khác.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ span trong HTML</title>
</head>
<body>
<h2>Xin chào các bạn !!!</h2>
<!-- span tags with inline style/css -->
<span style="background-color:red;">
HTML</span>
<span style="background-color: blue;">
-CSS-</span>
<span style="background-color: yellow;">
Article</span>
<span style="background-color: green;"> Javascript
Jquery</span>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”vYGGNeV” default_tab=”html,result” user=”davidkhai”]See the Pen vYGGNeV by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
2.2 Thẻ span có thể được sử dụng để đặt màu / màu nền cho một phần của văn bản:
Trong ví dụ bên dưới bên trong đoạn văn, áp dụng thẻ span ba lần với kiểu khác nhau.
ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ span trong HTML</title>
</head>
<body>
<h2>Xin chào các bạn</h2>
<!-- Đoạn bên trong áp dụng thẻ span với style-->
<p>
<span style="background-color:green">Webaffiliate</span>, chúng tôi cung cấp dịch vụ thiết kế <span style="background-color:red">web bán hàng dưới hình thức tiếp thị liên kết</span> có thể lấy dữ liệu sản phẩm từ bất kì website nào bạn thích, có gắn <span style="color:blue;">deeplink affilliate </span> để hỗ trợ các <span style=
"background-color:yellow;">Publisher</span> làm affiliate dễ dàng hơn, chuyên nghiệp, bền vững hơn mà không cần quá nhiều thời gian, công sức, chi phí!
</p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”qBZZOxo” default_tab=”html,result” user=”davidkhai”]See the Pen qBZZOxo by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
2.3 Thao tác với javascript với thẻ span:
Trong ví dụ dưới đây, chúng tôi thêm thẻ span vào bên trong đoạn văn với id = ”demo”, chúng tôi có thể thay đổi văn bản của nó bằng cách áp dụng javascript trong ví dụ này Website sẽ được thay đổi thành “Webaffiliatevn” sau khi nhấp vào nút.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>Xin chào các ban !!!</h2>
<p> <span id="demo"
style="background-color:violet;">Website</span>
là một trang thông tin với mục đích là để giới thiệu, cập nhật những thông tin về các doanh nghiệp, sản phẩm, hoạt động cũng như tin tức, chia sẻ bí quyết,… để phát triển thương hiệu</p>
<!-- Tạo nút button bằng javascript -->
<button type="button" onclick=
"document.getElementById('demo').innerHTML =
'Webaffiliate!!!'">Thay đổi</button>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”ExKKVLw” default_tab=”html,result” user=”davidkhai”]See the Pen ExKKVLw by DavidKhai (@davidkhai) on CodePen.[/codepen_embed]
3. Sự khác biệt giữa thẻ Div và thẻ span trong html
Thẻ div và thẻ span là hai thẻ phổ biến khi tạo các trang sử dụng HTML và thực hiện các chức năng khác nhau trên chúng trong khi thẻ div là phần tử cấp khối và span là phần tử nội tuyến Thẻ div tạo ngắt dòng và theo mặc định tạo sự phân chia giữa văn bản đứng sau thẻ khi bắt đầu và cho đến khi thẻ kết thúc bằng . Thẻ div tạo các hộp hoặc vùng chứa riêng biệt cho tất cả các phần tử bên trong thẻ này như văn bản, hình ảnh, đoạn văn.
| TÍNH CHẤT | THẺ DIV | THẺ SPAN |
|---|---|---|
| Các loại phần tử | Cấp khối | Nội tuyến |
| Khoảng trắng / Chiều rộng | Chứa toàn bộ chiều rộng có sẵn | Chỉ chiếm chiều rộng bắt buộc |
| Ví dụ | Tiêu đề, Đoạn văn, biểu mẫu | Thuộc tính, hình ảnh |
| Sử dụng | Bố trí trang web | Vùng chứa cho một số văn bản |
| Thuộc tính | Không bắt buộc, dùng với css class | Không bắt buộc, dùng với css class |
Thẻ span không tạo ngắt dòng tương tự như thẻ div mà cho phép người dùng tách những thứ khỏi các phần tử khác xung quanh chúng trên một trang trong cùng một dòng. Tránh ngắt dòng giúp văn bản đã chọn thay đổi, giữ nguyên tất cả các phần tử khác xung quanh chúng.
Ví dụ dưới đây sẽ hiển thị sự khác biệt giữa thẻ span và thẻ div trong khi thẻ div chứa toàn bộ chiều rộng và thẻ span chỉ chứa chiều rộng bắt buộc và các phần còn lại miễn phí cho phần tử khác.
<html>
<head>
<title>Ví dụ so sánh thẻ div với thẻ span</title>
</head>
<body>
<!-- Một số thẻ div -->
<div > Thẻ div </div>
<div > Thẻ div </div>
<div > Thẻ div </div>
<div > Thẻ div </div>
<!-- Một số thẻ span -->
<span>Thẻ-span</span>
<span>Thẻ-span</span>
<span>Thẻ-tag</span>
<span>Thẻ-tag</span>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”poyyjOE” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/poyyjOE’>poyyjOE</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
>>> Xem thêm:
