Tìm hiểu chức năng của phần tử span trong HTML và cách sử dụng t để định dạng nội dung của bạn cho phù hợp với từng từ.

Bạn đang xem : html span là gì

Trong số rất nhiều HTML mà bạn sẽ gặp trong hành trình đạt đến mức thành thạo giao diện người dùng, span là phần tử bạn sẽ thấy rất thường xuyên. Tuy nhiên, không giống như các phần tử khác, thẻ & lt; span & gt; không tự tạo một loại phần tử trang cụ thể. Lúc đầu, điều này có thể gây nhầm lẫn – một phần tử như & lt; span & gt; thực sự được sử dụng để làm gì?

Hóa ra, rất nhiều. Các phần tử khoảng cách cung cấp cho các nhà thiết kế và nhà phát triển quyền kiểm soát chặt chẽ về kiểu dáng và định dạng của các trang web và nội dung của họ. Nếu bạn muốn biết cách các trang web được xây dựng, bạn nên hiểu rõ về các thẻ & lt; span & gt; và mục đích của chúng.

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cho bạn phần tử span trong HTML. Chúng tôi sẽ cho bạn biết chúng được viết như thế nào, ý nghĩa của chúng để làm gì (và không phải như thế nào) và đưa ra một số ví dụ về các nhịp trong thực tế. Cuối cùng, chúng tôi sẽ làm rõ sự khác biệt giữa span và một phần tử tương tự, div. Hãy bắt đầu.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Thẻ ‘span’ trong HTML là gì?

Trong HTML, thẻ span là một phần tử vùng chứa nội tuyến chung. Thẻ Span thường bao bọc các phần văn bản cho mục đích tạo kiểu hoặc để thêm thuộc tính vào một phần văn bản mà không cần tạo dòng nội dung mới.

Thẻ span được viết bằng thẻ mở và thẻ đóng, như sau:

  
& lt; span & gt; Nội dung ở đây & lt; / span & gt;

Phần tử span được gọi là “chung chung” vì bản thân tên của thẻ không cho chúng ta biết bất kỳ điều gì về nội dung của phần tử. Nói cách khác, “khoảng thời gian” không có ý nghĩa gì đối với chúng tôi. Đối lập với phần tử HTML chung chung là phần tử HTML ngữ nghĩa , một phần tử có tên mô tả mục đích của nó (ví dụ: & lt; p & gt; cho đoạn văn, & lt; nút & gt; & lt; biểu mẫu & gt; ).

Thẻ Span cũng là phần tử “nội dòng”, có nghĩa là phần tử nằm trên dòng hiện tại và không tạo ra ngắt dòng. Một div, phần tử HTML chung khác, là cấp khối và tạo một dòng mới trên trang. Chúng ta sẽ khám phá sự khác biệt giữa span và div ở phần sau.

Xem Thêm  PHP - Phiên - một phiên trong php là gì

‘span’ làm gì trong HTML?

Về bản chất, thẻ & lt; span & gt; không ảnh hưởng đến cách trang hiển thị.

Xem Bút ký Span Tag No Attributes của Christina Perricone ( @hubspot ) trên CodePen .

Tuy nhiên, thẻ & lt; span & gt; rất mạnh vì chúng cho phép chúng tôi gán bất kỳ thuộc tính HTML toàn cầu nào cho một phần văn bản hoặc nội dung trang nội tuyến khác. Các thuộc tính phổ biến nhất mà bạn sẽ thấy được sử dụng với span là bộ chọn id class , được sử dụng để áp dụng kiểu cho các từ cụ thể. Xem ví dụ bên dưới để biết một số ví dụ khác nhau.

Xem Bút ký Styling Text With Span của Christina Perricone ( @hubspot ) trên CodePen .

Cũng có thể áp dụng CSS cho các phần tử HTML trong thẻ & lt; span & gt; bằng cách sử dụng style (còn được gọi là “CSS nội tuyến”). Nên tránh sử dụng CSS nội tuyến vì nó khiến việc thay đổi kiểu trên toàn trang trở nên khó khăn hơn.

Khoảng cách cũng có thể chứa các thuộc tính khác. Ví dụ: nếu bạn có một đoạn văn bản bằng ngôn ngữ khác với tài liệu, hãy bọc đoạn văn bản này trong thẻ & lt; span & gt; và thêm thuộc tính lang vào thẻ chỉ ra sự thay đổi ngôn ngữ tạm thời. Điều này giúp công cụ tìm kiếm lập chỉ mục và hướng dẫn các chương trình chuyển văn bản thành giọng nói phát âm những từ này theo cách khác nhau.

Xem Bút ký Span Tag With Lang của Christina Perricone ( @hubspot ) trên CodePen .

Phần tử span cũng rất tốt để nhắm mục tiêu một phần văn bản có các hàm JavaScript. Trong ví dụ bên dưới, văn bản bên trong thẻ & lt; span & gt; bị ẩn. Mã JavaScript hiển thị văn bản này khi bạn nhấp vào một nút.

Xem Bút Sử dụng Span With JavaScript của Christina Perricone ( @hubspot ) trên CodePen .

Cuối cùng, chúng tôi có thể sử dụng & lt; span & gt; để in đậm và in nghiêng văn bản bằng CSS. Tuy nhiên, cách tốt hơn là sử dụng thẻ & lt; strong & gt; để in đậm văn bản và thẻ & lt; em & gt; (nhấn mạnh) để in nghiêng văn bản. Điều này là do & lt; strong & gt; & lt; em & gt; là các phần tử HTML ngữ nghĩa (trong khi & lt; span & gt; ) thì không, điều này làm cho mã dễ tiếp cận hơn với trình đọc màn hình. Rõ ràng, các kỹ thuật này giống hệt nhau – xem bên dưới.

Xem Thêm  '@RestControllerAdvice example in Spring Boot - responseentity trong spring

Xem Pen strong and em vs. span của Christina Perricone ( @hubspot ) trên CodePen .

Bất cứ khi nào có thể, bạn phải luôn xem có giải pháp thay thế ngữ nghĩa nào cho & lt; span & gt; hay không trước khi sử dụng nó cho khả năng tiếp cận tốt hơn .

Khoảng cách HTML so với Khoảng cách

Giống như span, div là một phần tử HTML chung mà bạn sẽ thấy trên tất cả các trang web. Nhưng, hai yếu tố này phục vụ các mục đích khác nhau. Span là một phần tử nội dòng chung, trong khi div là một phần tử cấp khối chung.

Để được giải thích sâu hơn về ý nghĩa của điều này trong thực tế, hãy xem giải thích đầy đủ của chúng tôi về span so với div trong HTML . Tuy nhiên, tóm lại, đây là sự khác biệt chính giữa phần tử span và div:

  • & lt; div & gt; thêm dấu ngắt dòng sau thẻ đóng của nó, trong khi & lt; span & gt; thì không. Đây là lý do tại sao các div là “khối” trong khi các nhịp là nội tuyến.
  • Phần tử & lt; div & gt; chiếm toàn bộ chiều rộng của vùng chứa, trong khi & lt; span & gt; chỉ chiếm chiều rộng của nội dung. Chiều rộng và chiều cao của phần tử & lt; div & gt; có thể được thay đổi trong CSS, nhưng bạn không thể thay đổi chiều rộng và chiều cao của phần tử & lt; span & gt; bằng CSS. < / li>
  • Nói chung, các phần tử & lt; div & gt; được sử dụng để tách các phần nội dung và thẻ & lt; span & gt; được sử dụng để nhắm mục tiêu một phần văn bản trong một phần lớn hơn của nội dung.

Ví dụ bên dưới minh họa hai div và hai nhịp – lưu ý sự khác biệt trực quan giữa các phần tử này:

Xem Pen span vs div 1 của Christina Perricone ( @hubspot ) trên CodePen .

Tạo kiểu cho văn bản của bạn bằng các thẻ khoảng cách

Như chúng ta đã thấy, bạn có thể làm được nhiều điều với thẻ & lt; span & gt; , miễn là bạn áp dụng chúng một cách chính xác. Nếu không có thẻ span và div, Internet sẽ trông khá khác (và khá nhạt nhẽo) so với cách nó hoạt động ngày nay, những yếu tố chung chung này cho phép chúng ta định dạng nội dung trang xuống từng đoạn hoặc từ riêng lẻ.

Vì vậy, cho dù bạn muốn thu hút sự chú ý vào một dòng văn bản, thêm nội dung động bằng JavaScript hay chỉ nâng cao tính thẩm mỹ cho trang web của bạn, hãy giữ & lt; span & gt; trong vành đai công cụ của bạn – bạn sẽ sử dụng nó một chút.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề html span là gì

Divs vs Spans

alt

  • Tác giả: Steve Griffith – Prof3ssorSt3v3
  • Ngày đăng: 2018-09-17
  • Đánh giá: 4 ⭐ ( 8418 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video explains the semantic and visual difference between divs and spans in HTML.

    Code GIST: https://gist.github.com/prof3ssorSt3v3/4e25c75c6e2ff53202a54806e6bccc2e

Vobmapping.vn – Hệ thống liên kết cụm từ tiếng Anh

  • Tác giả: vobmapping.vn
  • Đánh giá: 4 ⭐ ( 6127 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhận định Span Html Là Gì – Thẻ Span Trong Html là ý tưởng trong nội dung hiện tại của blog Tiên Kiếm. Đọc bài viết để biết đầy đủ nhé.

Thẻ Span Trong Html

  • Tác giả: gocnhintangphat.com
  • Đánh giá: 5 ⭐ ( 3722 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để xây dựng trang web, bạn nên biết về HTML – công nghệ cơ bản được sử dụng để xác định cấu trúc của một trang web, điều này đặc biệt quan trọng, HTML được sử dụng để chỉ định xem nội dung web của bạn có được nhận dạng là một đoạn văn, danh sách, tiêu đề, liên kết, hình ảnh, trình phát đa phương tiện, biểu mẫu hay một trong nhiều phần tử có sẵn khác hay thậm chí là một phần tử mới mà bạn xác định hay không

Thẻ span trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 2014 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ span trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Học web chuẩn

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 3289 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tag span được sử dụng để nhóm các inline trong văn bản HTML, ta có thể dùng span kèm với css để định dạng một phần nội dung trong văn bản HTML – Học web chuẩn

Tìm hiểu thẻ SPAN trong HTML

  • Tác giả: quachquynh.com
  • Đánh giá: 4 ⭐ ( 5017 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách sử dụng thẻ span trong HTML

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 1722 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng thẻ span trong HTML để nhóm các phần tử nội tuyến và định dạng văn bản cho chúng

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Thiệt hại do virus máy tính gây ra tại Việt Nam khoảng 24.400 tỉ đồng - nhóm hacker việt nam

By ads_php