Hướng dẫn Span Tag trong HTML. Ở đây chúng tôi thảo luận về các thuộc tính của thẻ span cùng với các ví dụ khác nhau và cách triển khai mã của nó.

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

Thẻ Span trong HTML

Giới thiệu về Thẻ Span trong HTML

Thẻ Span trong HTML được coi là một phần tử nội tuyến. Nó tương tự như thẻ div, nhưng thẻ div được sử dụng cố ý cho các phần tử cấp khối, trong khi khoảng cách được sử dụng cho các phần tử nội tuyến. Nó chủ yếu được sử dụng bất cứ khi nào người dùng muốn nhóm các phần tử nội tuyến vào cấu trúc mã của họ. Thẻ Span trong HTML được sử dụng để tạo kiểu cho các nội dung cụ thể bằng cách sử dụng lớp phần tử hoặc thuộc tính id. Không thể tự thay đổi hình ảnh bằng cách sử dụng thẻ span trong tài liệu HTML. Nó hoạt động như một thẻ nội tuyến trong tài liệu HTML. Sử dụng các thẻ span trong mã của bạn sẽ giúp giảm các thuộc tính mã và HTML.

Cú pháp với Ví dụ

Cú pháp để xác định thẻ span như sau:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Cú pháp:

  & lt; span class = "" & gt; Nội dung & lt; / span & gt;  
  • Như được hiển thị ở trên, văn bản cú pháp nằm trong phần mở & lt; span & gt; và thẻ đóng & lt; / span & gt; được coi là thuộc tính span.
  • Điều này chủ yếu được sử dụng để nhóm các phần tử nội tuyến. Nó giúp tối giản hóa mã của chúng tôi trong một tài liệu HTML.
  • Nó hoạt động tương tự như thẻ div, nhưng khác biệt chính là div được hoạt động như một phần tử cấp khối, trong khi thẻ span hoạt động như một thẻ nội tuyến trong HTML.
  • Thẻ span không thể tự cung cấp thay đổi hình ảnh.
  • Nó hoạt động trên thẻ như & lt; i & gt ;, & lt; b & gt ;, & lt; u & gt ;, & lt; color & gt ;, & lt; font family & gt ;, & lt; background-color & gt; và nhiều hơn nữa.
  • Thẻ này không thể tạo ngắt dòng, nhưng nó tạo cơ hội cho người dùng làm cho mọi thứ tách biệt với các phần tử khác. Vì vậy, bạn chỉ có thể thực hiện thay đổi với văn bản đã chọn thay vì thực hiện thay đổi với toàn bộ mã.
  • Nó chỉ chiếm tối đa chiều rộng cần thiết, thay vì chiếm toàn bộ chiều rộng có sẵn trong vùng chứa. Ví dụ tốt nhất về thẻ span là thuộc tính và hình ảnh. Nó sử dụng các vùng chứa cho một số văn bản thể hiện việc sử dụng các thẻ span.
  • Nó không yêu cầu một số thuộc tính cụ thể trong mã hóa; với sự trợ giúp của một số lớp và CSS phổ biến, chúng tôi có thể xác định thẻ span.
  • Chúng tôi có thể đánh dấu một số văn bản cụ thể, áp dụng màu nền cho văn bản và thêm hình nền vào văn bản bằng cách sử dụng thẻ span của HTML.
  • Cũng có thể thay đổi phông chữ của văn bản bằng cách sử dụng thẻ span. Nó sẽ giúp chịu trách nhiệm thay đổi kích thước phông chữ, màu sắc, màu nền, kiểu phông chữ, v.v.
Xem Thêm  Phân tích cú pháp JQuery JSON - phân tích cú pháp json với jquery

Ví dụ:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
Thẻ & lt; title & gt; Span trong HTML & lt; / title & gt;
& lt; phong cách & gt;
.thử nghiệm {
màu sắc: xanh lam;
cỡ chữ: 200%;
chức vụ: thân nhân;
đầu trang: 5px;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; p & gt; & lt; span class = "demo" & gt; О & lt; / span & gt; Kiêu ngạo khiến chúng ta trở nên giả tạo và Sự khiêm tốn khiến chúng ta trở nên thật. & lt; / p & gt;
& lt; p & gt; Sự thật về cuộc sống & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

  • Thẻ Span không có bất kỳ thuộc tính cụ thể nào; giống như các thẻ khác, nó cũng hỗ trợ các thuộc tính toàn cục và thuộc tính sự kiện.

Thuộc tính của Thẻ Span trong HTML

Dưới đây là một số thuộc tính để áp dụng kiểu với & lt; span & gt ;. Đó là những điều sau:

  • Kiểu phông chữ CSS: Nó được sử dụng để áp dụng kiểu cho văn bản nhất định. Văn bản phải bình thường, in nghiêng, viết tắt, kế thừa, v.v.
  • Họ phông chữ CSS: Nó được sử dụng để áp dụng các loại phông chữ khác nhau từ một danh sách nhất định cho văn bản cụ thể.
  • Kích thước phông chữ CSS: Sẽ rất hữu ích nếu bạn đặt kích thước phông chữ thành văn bản .
  • CSS font-weight: Thuộc tính này dùng để đặt phông chữ đậm hoặc đậm.
  • Chuyển đổi văn bản CSS: Nó sẽ viết hoa văn bản.
  • Trang trí văn bản CSS: Thuộc tính này được sử dụng để trang trí văn bản ở dạng đường trang trí văn bản, màu trang trí văn bản, v.v.
  • Màu CSS: Thuộc tính này của thẻ span được sử dụng để tô màu nội dung văn bản và trang trí văn bản .
  • Màu nền CSS: Đây là một thuộc tính hữu ích để đặt màu nền cho phần tử.
  • CSS text-shadow: Thuộc tính này cho phép người dùng thêm bóng vào văn bản.
  • CSS text-align-last: Nó sẽ giúp căn chỉnh văn bản.
  • Khoảng cách giữa các từ trong CSS: Thuộc tính này trong thẻ span được sử dụng để quản lý khoảng cách giữa các từ.
  • CSS white-space : Thuộc tính này giúp chúng tôi xử lý các khoảng trắng bên trong phần tử được chỉ định.
  • Chiều cao dòng CSS: Nó cung cấp chiều cao của dòng trong mã HTML.
  • Ngắt từ trong CSS: Thuộc tính này giúp chúng tôi xác định vị trí dòng thực sự sẽ bị ngắt.
  • CSS text -flow: Đây là thuộc tính hữu ích nhất của thẻ span, giúp chúng tôi xác định các nội dung bị tràn không được hiển thị để báo hiệu cho người dùng.

Ví dụ về Thẻ Span trong HTML

Dưới đây là ví dụ về thẻ span trong html:

Xem Thêm  25+ Mẫu thanh toán bằng thẻ tín dụng miễn phí HTML & CSS - mẫu biểu mẫu thanh toán html

Ví dụ # 1

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Thẻ Span HTML & lt; / title & gt;
& lt; / head & gt;
& lt; phong cách & gt;
.imgdemo {
padding-left: 25px;
background: url (./ Content / data / 2.jpg) không lặp lại trên cùng bên trái;
display: inline-block;
chiều cao: 150px;
chiều rộng: 150px;
}
& lt; / style & gt;
& lt; body & gt;
& lt;! - thẻ span có kiểu nội tuyến / css - & gt;
& lt; h2 & gt; Kéo dài thẻ với màu văn bản & lt; / h2 & gt;
& lt; span style = "color: brown;" & gt;
Hãy làm những điều khiến tâm hồn bạn vui vẻ & lt; / span & gt;
& lt; br & gt;
& lt; h2 & gt; Mở rộng thẻ với màu nền & lt; / h2 & gt;
& lt; span style = "background-color: lightblue;" & gt;
Mọi người đều có vẻ đẹp tự nhiên. Hãy thử nhìn vào bức tranh của bạn khi bạn còn là một em bé. Mắt, lông mày, môi, cơ thể của bạn. Khi bạn đang cười, đang khóc, đang nhìn chằm chằm, v.v. Điều đó, bạn đã hiểu. & Lt; / span & gt;
& lt; br & gt;
& lt; h2 & gt; Mở rộng thẻ có hình nền & lt; / h2 & gt;
& lt; br & gt;
& lt; span class = "imgdemo" style = "color: azure; font-size: 16px; font-display: block;" & gt;
Hình ảnh làm nền & lt; / span & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Ví dụ # 2

Mã:

  & lt;! - Ví dụ 2 - & gt;
& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Thẻ Span HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h2 & gt; Thẻ kéo dài Ví dụ & lt; / h2 & gt;
& lt; p & gt; Tốt, Tốt hơn, Tốt nhất Đừng bao giờ để nó nghỉ ngơi.
& lt; span style = "color: crimson;" & gt; "Cho đến khi điều tốt của bạn tốt hơn và điều tốt hơn của bạn là tốt nhất" & lt; / span & gt; & lt; / p & gt;
& lt; p & gt; Mỗi ngày bạn có quyền lựa chọn - & lt; span style = "font-family: cursive; font-weight: 200; font- size: 18px;" & gt;
LƯU TRỮ CÙNG HOẶC THAY ĐỔI & lt; / span & gt;
& lt; / p & gt;
& lt; p & gt; Bất cứ khi nào bạn nhìn thấy một người thành công, bạn chỉ nhìn thấy những vinh quang của công chúng, chứ không bao giờ thấy những hy sinh riêng tư để đạt được họ. "& lt; span style =" background-color: aqua; màu: darkblue; "& gt;
"Cơ hội không xảy ra, bạn tạo ra chúng" & lt; / span & gt; & lt; / p & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Ví dụ # 3

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; phong cách & gt;
.spandemo {
background: url (./ Content / data / 3.jpg) không lặp lại trên cùng bên trái;
display: inline-block;
padding-top: 20px;
chiều rộng: 1800px;
chiều cao: 500px;
}
& lt; / style & gt;
& lt; body & gt;
& lt; h2 & gt; Thẻ kéo dài cho hình ảnh & lt; / h2 & gt; & lt; br & gt;
& lt; span class = "spandemo" style = "color: aliceblue; font-weight: bold;" & gt;
& lt; p & gt; Thiên nhiên luôn mặc & lt; br & gt; Màu của TINH THẦN. & lt; / p & gt; & lt; br & gt;
Thiên đường dưới chân chúng ta & lt; br & gt; cũng như trên đầu chúng ta & lt; br & gt;
& lt; p & gt; Sâu trong rễ của chúng, & lt; br & gt; tất cả hoa Giữ ánh sáng & lt; / p & gt;
& lt; p & gt; Linh hồn tôi chèo lái tôi & lt; br & gt; vào sự im lặng của thiên nhiên & lt; / p & gt;
& lt; / span & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  Cách tạo Tiêu đề, Hướng dẫn 7 bước (2020) - làm thế nào để tạo tiêu đề

Kết luận

Từ tất cả thông tin ở trên, chúng tôi biết rằng & lt; span & gt; trong HTML được sử dụng để tạo kiểu cho các phần tử nội tuyến. Người ta có thể nhóm thuộc tính tạo kiểu này và chỉ định chúng nội tuyến. Thẻ Span chủ yếu được sử dụng để sắp xếp các phần cấu trúc và các phần bố cục phù hợp trên trang web của chúng tôi với sự trợ giúp của CSS nội tuyến.

Các bài báo được đề xuất

Đây là hướng dẫn về Span Tag trong HTML. Ở đây chúng ta thảo luận về khái niệm cơ bản, các thuộc tính của thẻ span, và các ví dụ khác nhau và cách triển khai mã của nó. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


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

How to program in HTML #8 – Fonts, More Formatting and Span and Div Tags

alt

  • Tác giả: knowledgeHighway
  • Ngày đăng: 2012-11-20
  • Đánh giá: 4 ⭐ ( 6922 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Apologies for sounding a little dead, I was veerrrryyy tired when I recorded this.
    In this episode we learn more about formatting text and what the span and div tags are.

Sự khác biệt giữa các thẻ

là gì?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9983 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sự khác biệt chính là thẻ là một yếu tố nội tuyến , trong khi
    thẻ…

Thẻ span trong HTML

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 2744 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ span sử dụng để nhóm các phần tử nội tuyến của trang lại thành một nhóm. Thể span sẽ không ảnh hưởng bất cứ điều gì đến việc hiển thị các phần tử đó.

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

  • Tác giả: vobmapping.vn
  • Đánh giá: 5 ⭐ ( 3081 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ả: ghouse.com.vn
  • Đánh giá: 3 ⭐ ( 6707 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: thẻ span trong html là một thẻ được sử dụng rất nhiều, nhằm giúp cho văn bản trong html được đẹp hơn, hãy tìm hiểu cách sử dụng thẻ span trong html

Tìm hiểu Span Html Là Gì – Thẻ Span Trong Html

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

CÁCH SỬ DỤNG THẺ SPAN LÀ GÌ, CÁCH SỬ DỤNG THẺ SPAN TRONG HTML

  • Tác giả: hit.edu.vn
  • Đánh giá: 3 ⭐ ( 2943 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: là gì?

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