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à 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:
Một số văn bản .............
2. Một số ví dụ thẻ span trong html
2.1 Sử dụng thẻ span thay thế các thẻ , , ,
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ư , , , 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ụ:
Ví dụ về thẻ span Xin chào các bạn !!!
Webaffiliatevn
Webaffiliatevn
Webaffiliatevn
See the Pen YzqqyZv by DavidKhai ( @ davidkhai ) on CodePen. dark
Nhưng bằng cách sử dụng thẻ, tất cả chúng ta hoàn toàn có thể giảm những dòng mã code và những 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 vận dụng CSS trong thẻ span .
Ví dụ:
Ví dụ về thẻ span Xin chào các bạn !!!
Webaffiliatevn
Webaffiliatevn
Webaffiliatevn
See the Pen rNeeOzj by DavidKhai ( @ davidkhai ) on CodePen. dark
Như tất cả chúng ta biết span là một thẻ nội tuyến, nó chiếm dung tích nhiều như nhu yếu và để lại khoảng trống cho thành phần khác, hãy xem nó trong ví dụ bên dưới, tổng thể bốn thành phần span sẽ hiển thị trong cùng một dòng vì mỗi thẻ chỉ chiếm khoảng trống thiết yếu và phần còn lại là khoảng trống trống cho những thành phần khác .
Ví dụ:
Ví dụ về thẻ span trong HTML Xin chào các bạn !!!
HTML -CSS- Article Javascript Jquery
See the Pen vYGGNeV by DavidKhai ( @ davidkhai ) on CodePen. dark
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, vận dụng thẻ span ba lần với kiểu khác nhau .
ví dụ:
Ví dụ về thẻ span trong HTML Xin chào các bạn
Webaffiliate, chúng tôi cung cấp dịch vụ thiết kế web bán hàng dưới hình thức tiếp thị liên kết 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 deeplink affilliate để hỗ trợ các Publisher 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í!
See the Pen qBZZOxo by DavidKhai ( @ davidkhai ) on CodePen. dark
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 hoàn toàn có thể biến hóa văn bản của nó bằng cách vận dụng javascript trong ví dụ này Website sẽ được đổi khác thành “ Webaffiliatevn ” sau khi nhấp vào nút .
Ví dụ:
Xin chào các ban !!!
Website 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
See the Pen ExKKVLw by DavidKhai ( @ davidkhai ) on CodePen. dark
3. Sự khác biệt giữa thẻ Div và thẻ span trong html
Thẻ div và thẻ span là hai thẻ phổ cập khi tạo những trang sử dụng HTML và thực thi những tính năng khác nhau trên chúng trong khi thẻ div là thành phần cấp khối và span là thành phần nội tuyến Thẻ div tạo ngắt dòng và theo mặc định tạo sự phân loại giữa văn bản đứng sau thẻ khi mở màn và cho đến khi thẻ kết thúc bằng. Thẻ div tạo những hộp hoặc vùng chứa riêng không liên quan gì đến nhau cho tổng thể những thành phần 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.
Ví dụ so sánh thẻ div với thẻ span Thẻ div
Thẻ div
Thẻ div
Thẻ div
Thẻ-span Thẻ-span Thẻ-tag Thẻ-tag
See the Pen poyyjOE by DavidKhai ( @ davidkhai ) on CodePen. dark
>> > Xem thêm :
Đánh giá post
