Hướng dẫn span html

Posted on by mtoplistChuyên mục:Top List

– Thẻ <span> là một trong những thẻ quan trọng và được sử dụng nhiều nhất trong HTML.

– Thẻ <span> được dùng để nhóm các phần tử nội tuyến lại với nhau, tiện cho việc định dạng CSS.

Nội dung chính

Show

  • Định nghĩa và sử dụng
  • Trình duyệt hỗ trợ
  • Thuộc tính

– Thông thường:

  • Các phần tử nội tuyến được nhóm bên trong phần tử <span> chủ yếu là văn bản.
  • Các văn bản chủ yếu được định dạng:
    • Kích cỡ chữ (font-size)
    • Màu chữ (color)
    • Màu nền
      (background-color)
    • Kiểu chữ (font-style)
    • Font chữ (font-family)
    • Gạch chân (text-decoration)
    • ….
<!DOCTYPE html>
<html>
<body>
    <p>Tài liệu hướng dẫn học <span style="font-size:30px;font-family:monospace;">lập trình web</span> từ cơ bản đến nâng cao.</p>
</body>
</html>

Xem ví dụ

  • Trang chủ
  • Tham khảo
  • Tag html
  • <span>

Định nghĩa và sử dụng

  • 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

Sự khác nhau giữa HTML và XHTML

HTML4.01XHTML1.0XHTML1.1Không có sự khác biệt

Ví dụ

Html viết:

<p>Đây là đoạn text có <span class=”red”>sử dụng</span> span.</p>

Hiển thị trình duyệt:

Đây là đoạn text có sử dụng span.

Trình duyệt hỗ trợ

<span> được hỗ trợ trong đa số các trình duyệt.

Thuộc tính

Cách sử dụng: <span thuoctinh=”giatri”></span>

Thuộc tính tổng quát
(xem thêm)

Thuộc tínhGiá trịVí dụMô tảclass
Tên class
class=”section”
Tên class
dir
rtl
ltr
dir=”rtl”
Xác định hướng văn bản cho các nội dung trong một thành phần.
id
Tên id
id=”layout”
Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML
lang
Mã ngôn ngữ
lang=”vi”
Xác định mã ngôn ngữ cho nội dung trong một thành phần.
style
Kiểu định dạng
style=”color: red”
Xác định một định dạng cho một thành phần.
tabindex
Số
tabindex=”5″
Xác định thứ tự tab của một thành phần.
title
Text
title=”Đây là title”
Xác định thêm thông tin cho thành phần.
xml:lang
Mã ngôn ngữ
lang=”vi”
Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.

Thuộc tính sự kiện

Không được hỗ trợ trong DTD Strict

Thuộc tínhGiá trịVí dụMô tảonclick
Code script
onclick=”code”
Script chạy khi click chuột.
ondblclick
Code script
ondblclick=”code”
Script chạy khi double click chuột.
onmousedown
Code script
onmousedown=”code”
Script chạy khi button chuột được nhấn.
onmousemove
Code script
onmousemove=”code”
Script chạy khi di chuyển con trỏ chuột.
onmouseout
Code script
onmouseout=”code”
Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.
onmouseover
Code script
onmouseover=”code”
Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần.
onmouseup
Code script
onmouseup=”code”
Script chạy khi button chuột được thả ra.
onkeydown
Code script
onkeydown=”code”
Script chạy khi nút trên bàn phím được nhấn.
onkeypress
Code script
onkeypress=”code”
Script chạy khi nút trên bàn phím được nhấn và thả ra.
onkeyup
Code script
onkeyup=”code”
Script chạy khi nút trên bàn phím được thả ra.

Thẻ span trong HTML có tính chất gần giống với thẻ DIV. Hai thẻ này đều dùng để gom nhóm các phần tử nội tuyến thành một nhóm. Nhưng <span> khác <div> ở điểm nào, nếu bạn đang thắc mắc hãy tiếp tục đọc bài dưới nhé!

Khi học về HTML căn bản mình không biết khi nào dùng <div> và khi nào dùng <span>. Sau một thời gian tìm hiểu mới biết rằng chúng có cách sử dụng không hề giống nhau.

  • Thẻ <div>: Đây là thẻ block có nghĩa là thuộc kiểu dạng khối. Nó cũng tương tự như các thẻ <h2>,<h2>,<p>…
  • Thẻ <span>: Đây là thẻ inline có nghĩa là thuộc kiểu dòng. Dùng để định dạng cho chữ hoặc một đoạn văn bản.

<span> có tính chất trung tính vì thế khi thêm vào sẽ không ảnh hưởng đến hiển thị của phần tử khác. Chỉ khi áp dụng CSS vào thì phần tử đó mới bị thay đổi.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<div class="entry">
<p>Đây là ví dụ về <span style="font-size:20px;font-family:arial;color:red">thẻ span</span></p>

</div>
</body>
</html>

Qua ví dụ trên bạn sẽ thấy thẻ <div>
có thể chứa được <span> còn <span> thì không thể chứa được <div>. Nó chỉ dùng để gom nhóm phần tử kiểu inline mà thôi.

Các phần tử inline (Không có sự ngắt dòng mới) như:

<b>, <a>, <strong>, <img>, <input>, <em>, <span> …

Kết luận: Hi vọng với bài viết này bạn đã hiểu được các sử dụng của thẻ <span> trong HTML rồi. Nếu cần sự hỗ trợ hãy comment bên dưới nhé!

Tìm hiểu thêm: Thẻ DIV trong HTML là gì

mtoplist