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 : span làm gì trong html

Trong số rất nhiều HTML các phần tử 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  Cách in đậm, in nghiêng và định dạng văn bản trong HTML - mã html cho phông chữ đậm

‘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 ký 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  Ngắt dòng trong HTML - Cách ngắt dòng bằng thẻ HTML
- thẻ html cho ngắt dòng

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ủ đề span làm gì trong html

Divs vs Spans

alt

  • Tác giả: Steve Griffith – Prof3ssorSt3v3
  • Ngày đăng: 2018-09-17
  • Đánh giá: 4 ⭐ ( 9072 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

CSS3: CSS cho &

  • Tác giả: v1study.com
  • Đánh giá: 4 ⭐ ( 3529 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở bài viết này chúng ta sẽ cùng tìm hiểu về 2 thẻ span và div trong HTML và xem chúng có lợi ích gì cho công việc viết CSS của chúng ta.

Span html là gì

  • Tác giả: vietvuevent.vn
  • Đánh giá: 3 ⭐ ( 3580 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ span là thẻ khá đặc biệt trong HTML, theo mặc định đoạn văn bản trong cặp thẻ span không bị thay đổi bất cứ điều gì – do vậy nó còn được gọi là thẻ trung tính, Sự thay đổi chỉ xảy đến khi bạn tác động đến thẻ span thông qua CSS

nhiều thú vị bất ngờ

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

HTML là gì? Div là gì? Span là gì? Những điều cơ bản mà 1 nhà lập trình wed đều phải học qua

  • Tác giả: isinhvien.com
  • Đánh giá: 5 ⭐ ( 3973 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.

Span html là gì cùng tìm hiểu span là gì html

  • Tác giả: topbinhduong.net
  • Đánh giá: 5 ⭐ ( 6996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ span là thẻ khá đặc biệt trong HTML, theo mặc định đoạn văn bản trong cặp thẻ span không bị thay đổi bất cứ điều gì – do vậy nó còn được gọi là thẻ trung

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

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 9259 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

By ads_php