Thẻ span trong HTML

Hãy cùng webaffiliatevn.com tìm tòi 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ử & bài viết 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 dùng tính chất 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) & 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ở (<) & thẻ đóng (>) & 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ỳ biến đổ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 & span là thẻ nội tuyến .

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

<span class = ""> Một số văn bản ............. </span> 

2. Một số chẳng hạn thẻ span trong html

          2.1 Sử dụng thẻ span thay thế  các thẻ <bvàgt;, <ivàgt;, < uvàgt;, <fontvàgt;

Trong chẳng hạn dưới đây, giả sử tất cả chúng ta mong 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, chính vì vậy tất cả chúng ta cần sử dụng nhiều thẻ HTML như <bvàgt;, <ivàgt;, < uvàgt;, <fontvàgt; cho mọi lúc trong mọi dòng & chúng tôi mong muốn thực hiện biến đổi cần phải sửa đổi mọi thẻ.

Chẳng hạn:


<!DOCTYPE htmlvàgt; 
<htmlvàgt; 
<headvàgt; 
    <titlevàgt;Chẳng hạn về thẻ span</titlevàgt; 
</headvàgt; 
<bodyvàgt; 
    <h2vàgt;Xin chào các bạn !!!</h2vàgt; 
  
<!-- Dòng đầu tiên  -->    
<font color="blue" size="5"> 
    <bvàgt; 
       <uvàgt; 
           <ivàgt;Webaffiliatevnvàlt;/ivàgt; 
       </uvàgt; 
    </bvàgt; 
</fontvàgt; 
  
    </brvàgt; 
  
<!-- Dòng thứ hai  -->    
<font color="blue" size="5"> 
    <bvàgt; 
       <uvàgt; 
           <ivàgt;Webaffiliatevnvàlt;/ivàgt; 
       </uvàgt; 
    </bvàgt; 
</fontvàgt; 
  
    </brvàgt; 
  
<!-- Dòng thứ ba  -->    
<font color="blue" size="5"> 
    <bvàgt; 
       <uvàgt; 
           <ivàgt;Webaffiliatevnvàlt;/ivàgt; 
       </uvàgt; 
    </bvàgt; 
</fontvàgt; 
      
  
</bodyvàgt; 
</htmlvàgt;  

See the Pen YzqqyZv by DavidKhai (@davidkhai) on CodePen.dark

Xem Thêm  a string orderingIdentifier

 

Nhưng bằng cách dùng thẻ , tất cả chúng ta có thể giảm các dòng gift code & các tính chất HTML .

Chẳng hạn dưới đây sẽ hiển thị đầu ra giống như chẳng hạn trên với việc sử dụng thẻ bằng cách vận dụng CSS trong thẻ span.

Chẳng hạn:


<!DOCTYPE htmlvàgt; 
<htmlvàgt; 
<headvàgt; 
    <titlevàgt;Chẳng hạn về thẻ span</titlevàgt; 
  <!-- style for span tag  -->    
     
    <h2vàgt;Xin chào các bạn !!!</h2vàgt; 
    <span>Webaffiliatevnvàlt;/span></brvàgt; 
    <span>Webaffiliatevnvàlt;/span></brvàgt; 
    <span>Webaffiliatevnvàlt;/span></brvàgt;
  
</bodyvàgt; 
</htmlvàgt;   

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ư yêu cầu & để lại không gian cho phần tử khác, hãy xem nó trong chẳng hạn bên dưới, toàn bộ bốn phần tử span sẽ hiển thị trong cùng một dòng vì mỗi thẻ chỉ chiếm không gian thiết yếu & phần sót lại là không gian trống cho các phần tử khác.

Chẳng hạn:


<!DOCTYPE htmlvàgt; 
<htmlvàgt; 
   <headvàgt; 
      <titlevàgt;Chẳng hạn về thẻ span trong HTML</titlevàgt; 
   </headvàgt; 
   <bodyvàgt; 
      <h2vàgt;Xin chào các bạn !!!</h2vàgt; 
       <!-- span tags with inline style/css  -->    
      <span style="background-color:red;"> 
       HTML</span> 
      <span style="background-color: blue;"> 
      -CSS-</span> 
      <span style="background-color: yellow;"> 
      Articlevàlt;/span> 
      <span style="background-color: green;"> Javascript
      Jqueryvàlt;/span> 
   </bodyvàgt; 
</htmlvàgt;  

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 chẳng hạn 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.

Xem Thêm  Top 13 kết quả tìm kiếm lạc việt mới nhất 2022

chẳng hạn:


<!DOCTYPE htmlvàgt; 
<htmlvàgt; 
   <headvàgt; 
      <titlevàgt;Chẳng hạn về thẻ span trong HTML</titlevàgt; 
   </headvàgt; 
   <bodyvàgt; 
      <h2vàgt;Xin chào các bạnvàlt;/h2vàgt; 
  
      <!-- Đoạn bên trong vận dụng thẻ span với style-->    
     <pvàgt;
       <span style="background-color:green">Webaffiliatevàlt;/span>, chúng tôi phân phối dịch vụ kiến trúc <span style="background-color:red">website bán hàng dưới cách thức quảng cáo linkvàlt;/span> có thể lấy dữ liệu sản phẩm từ bất kể trang web nào bạn thích, có gắn <span style="color:blue;">deeplink affilliate </span> để trợ giúp các <span style= 
         "background-color:yellow;">Publishervàlt;/span> làm tiếp thị liên kết đơn giản hơn, chuyên nghiệp, vững bền hơn mà không cần quá nhiều thời gian, công sức, ngân sách! 

     </pvàgt;
   </bodyvàgt; 
</htmlvàgt; 

See the Pen qBZZOxo by DavidKhai (@davidkhai) on CodePen.dark

 

          2.3 Thao tác với javascript với thẻ span:

Trong chẳng hạn dưới đây, chúng tôi thêm thẻ span vào bên trong đoạn văn với id = ”dùng thử”, chúng tôi có thể biến đổi văn bản của nó bằng cách vận dụng javascript trong chẳng hạn này Trang web sẽ được biến đổi thành “Webaffiliatevn” sau thời điểm bấm vào nút.

Chẳng hạn:


<!DOCTYPE htmlvàgt; 
<htmlvàgt; 
   <bodyvàgt; 
      <h2vàgt;Xin chào các ban !!!</h2vàgt; 
      <pvàgt; <span id="demo" 
         style="background-color:violet;">Trang webvàlt;/span> 
        là một trang thông tin với mục đích là để giới thiệu, update những thông tin về các công ty, sản phẩm, hoạt động cũng như tin tức, chia sẻ phương pháp,… để tiến triển tên thương hiệuvàlt;/pvàgt; 
  
    <!-- Tạo nút button bằng javascript  -->    
    <button  type="button" onclick= 
         "document.getElementById('dùng thử').innerHTML = 
                'Webaffiliate!!!'">Biến đổivàlt;/buttonvàgt; 
   </bodyvàgt; 
</htmlvàgt;  

See the Pen ExKKVLw by DavidKhai (@davidkhai) on CodePen.dark

3. Sự độc đáo giữa thẻ Div & thẻ span trong html

Thẻ div & thẻ span là hai thẻ thông dụng khi tạo các trang sử dụng HTML & thực hiện các tính năng khác nhau trên chúng trong khi thẻ div là phần tử cấp khối & span là phần tử nội tuyến Thẻ div tạo ngắt dòng & theo mặc định tạo sự phân tách giữa văn bản xếp sau thẻ khi khởi đầu & cho đến khi thẻ chấm dứt bằng . Thẻ div tạo các hộp hoặc vùng chứa tách biệt cho toàn bộ các phần tử bên trong thẻ này như văn bản, hình ảnh, đoạn văn.

Xem Thêm  source

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 thể chiều rộng có sẵn
Chỉ chiếm chiều rộng bắt buộc

Chẳng hạn
Tiêu đề, Đoạn văn, biểu mẫu
Tính chất, hình ảnh

Sử dụng
Sắp đặt website
Vùng chứa cho một số văn bản

Tính chất
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 cũng giống 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 chung 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 biến đổi, giữ nguyên toàn bộ các phần tử khác chung quanh chúng.
Chẳng hạn dưới đây sẽ hiển thị sự độc đáo giữa thẻ span & thẻ div trong khi thẻ div chứa toàn thể chiều rộng & thẻ span chỉ chứa chiều rộng bắt buộc & các phần sót lại Free cho phần tử khác.

  <htmlvàgt; 
   <headvàgt; 
      <titlevàgt;Chẳng hạn so sánh thẻ div với thẻ span</titlevàgt; 
      </headvàgt; 
   <bodyvàgt; 
<!-- Một số thẻ div -->      
  
      <div > Thẻ div   </divvàgt; 
      <div > Thẻ div   </divvàgt; 
      <div > Thẻ div   </divvàgt; 
      <div > Thẻ div   </divvàgt; 
        
<!-- Một số thẻ span -->      
      <span>Thẻ-span</span> 
      <span>Thẻ-span</span> 
      <span>Thẻ-tagvàlt;/span> 
      <span>Thẻ-tagvàlt;/span> 
   </bodyvàgt; 
</htmlvàgt; 

See the Pen poyyjOE by DavidKhai (@davidkhai) on CodePen.dark

>>> Tham khảo thêm:

 

Viết một bình luận