Thẻ span trong HTML – Web affiliate

Hãy cùng webaffiliatevn.com tìm hiểu về thẻ span trong html.

1. Giới thiệu về thẻ span trong html

Phần tử html

span 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 lớp hoặc id), đây là cách tốt hơn để sử dụng nó khi bạn 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 và span là thẻ khối nội tuyến. Thẻ span là thẻ nối, nghĩa là thẻ có cả thẻ mở (<) và thẻ đóng (>) và bắt buộc phải có thẻ đóng.

Các 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 tạo ra bất kỳ thay đổi trực quan nào.

Thẻ

• span rất giống với thẻ div, ngoại trừ div là thẻ cấp khối và span là thẻ nội tuyến .

Thẻ span được viết như sau:

2. Một số ví dụ về thẻ span trong html

2.1 Sử dụng thẻ span thay vì <b>, <i>, < u>,

Trong ví dụ sau, giả sử chúng ta muốn viết webaffilate ba lần trong ba dòng với chữ đậm, nghiêng, gạch chân, màu xanh lục và font-family=segoe ui nhạt, vì vậy chúng ta cần sử dụng nhiều thẻ html như ; , , , ; Với mỗi lần trên mỗi dòng muốn thực hiện thay đổi ta cần sửa từng nhãn.

Ví dụ:

Xem bài viết của davidkhai (@davidkhai) yzqqyzv trên codepen.dark

Nhưng bằng cách sử dụng , chúng ta có thể giảm số dòng mã và thuộc tính html.

Ví dụ dưới đây sẽ hiển thị kết quả giống như ví dụ trên bằng cách áp dụng css trong thẻ span.

Ví dụ:

Hãy xem bài viết của davidkhai (@davidkhai) rneeozj trên codepen.dark

Chúng ta biết rằng span là một thẻ nội tuyến, nó chiếm khoảng trống cần thiết và tạo khoảng trống cho các phần tử khác, xem ví dụ bên dưới, cả bốn phần tử span sẽ được hiển thị trên cùng một dòng, bởi vì mỗi thẻ chỉ chiếm khoảng trống cần thiết, phần còn lại là không gian trống cho các phần tử khác.

Ví dụ:

Xem bài viết của davidkhai (@davidkhai) vyggnev trên codepen.dark

2.2 Thẻ span có thể được sử dụng để đặt màu nền/màu của một phần văn bản:

Trong ví dụ bên dưới, trong đoạn văn, thẻ span được áp dụng ba lần, với các kiểu khác nhau.

Ví dụ:

Hãy xem bút qbzzoxo của davidkhai (@davidkhai) trên codepen.dark

2.3 Sử dụng span để vận hành javascript:

Trong ví dụ bên dưới, chúng tôi đã thêm thẻ span bên trong đoạn có id=”demo” và 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, trang web sẽ thay đổi thành “webaffiliatevn” sau khi nhấp vào nút.

Ví dụ:

Hãy xem bút của davidkhai (@davidkhai) exkkvlw trên 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ổ biến khi tạo trang sử dụng html và thực hiện các chức năng khác nhau trên đó, trong khi thẻ div là phần tử cấp khối và span là phần tử div nội tuyến tạo đường phân cách, theo mặc định tạo sự phân chia giữa văn bản theo sau thẻ ở đầu cho đến khi thẻ kết thúc. Thẻ div tạo một hộp hoặc vùng chứa duy nhất cho tất cả các phần tử (chẳng hạn như văn bản, hình ảnh, đoạn văn) bên trong thẻ đó.

Thẻ

span không tạo ngắt dòng như thẻ div nhưng cho phép người dùng tách biệt mọi thứ với các thành phần xung quanh khác trên trang trên cùng một dòng. Tránh ngắt dòng để nguyên văn bản đã chọn và tất cả các yếu tố khác xung quanh chúng. Ví dụ sau sẽ cho thấy sự khác biệt giữa thẻ span và thẻ div, thẻ div chứa đầy đủ chiều rộng còn thẻ span chỉ chứa chiều rộng bắt buộc, các phần tử khác có thể sử dụng tùy ý.

Hãy xem bút poyyjoe của davidkhai (@davidkhai) trên codepen.dark

>>>Xem thêm:

• thẻ giờ trong html
• thẻ p trong html
• tôi gắn thẻ trong html