Phần tử <span> HTML là một thùng chứa nội tuyến chung cho nội dung phrasing, vốn không đại diện cho bất cứ điều gì. Nó có thể được sử dụng để nhóm các yếu tố cho mục đích tạo kiểu (sử dụng các thuộc tính class hoặc id) hoặc vì chúng chia sẻ các giá trị thuộc tính, chẳng hạn như lang. Nó chỉ nên được sử dụng khi không có yếu tố ngữ nghĩa nào khác là phù hợp. <span> rất giống với một phần tử <div>, nhưng <div> là phần tử cấp khối trong khi <span> là một phần tử nội tuyến.<span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or
id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div>
element, but <div> is a block-level element whereas a <span> is an inline element.
Nội dung chính Show
- Thuộc tính
- Sự chỉ rõ
- Tính tương thích của trình duyệt web
- Thẻ ‘span trong HTML là gì?
- ‘Span Span làm gì trong HTML?
- HTML Span so với Div
- Kiểu văn bản của bạn với thẻ nhịp
- Khoảng thời gian được sử dụng cho HTML là gì?
- Span và ví dụ là gì?
- Div và Span là gì?
Tóm Tắt
Thử nó
Thuộc tính
Yếu tố này chỉ bao gồm các thuộc tính toàn cầu.
Thí dụ
ví dụ 1
HTML
<p><span>Some text</span></p>
Kết quả
Ví dụ 2
HTML
<
li>
<
span>
<
a href
=
"
portfolio.html"
target
=
"
_blank"
>
See my portfolio</
a>
</
span>
</
li>
Kết quả
li span
{
background
:
gold;
}
Kết quả
Ví dụ 2
CSSThông số kỹ thuật
# the-span-element
Sự chỉ rõ
Tiêu chuẩn HTML # phần tử-span
Tính tương thích của trình duyệt web
- Bảng BCD chỉ tải trong trình duyệt
Trong số nhiều yếu tố HTML mà bạn sẽ gặp trên hành trình làm chủ trước, Span là một yếu tố mà bạn sẽ thấy rất thường xuyên. Nhưng, không giống như các yếu tố khác, thẻ không tự tạo ra 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 – những gì mà một yếu tố như thực sự được sử dụng cho? tag doesn’t create a specific type of page element on its own. At first, this might be confusing —
what’s an element like actually used for?
Hóa ra, rất nhiều. Các yếu tố Span cung cấp cho các nhà thiết kế và nhà phát triển kiểm soát chặt chẽ việc tạo kiểu và định dạng các trang web và nội dung của họ. Nếu bạn muốn biết cách xây dựng các trang web, bạn nên thoải mái với các thẻ và mục đích của chúng. tags and their purpose.
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ẽ chỉ cho bạn cách họ viết, những gì họ có ý nghĩa (và những gì họ không phải là), và đưa ra một số ví dụ về các nhịp trong hành động. Cuối cùng, chúng tôi sẽ làm rõ sự khác biệt giữa nhịp và một yếu tố tương tự, Div. Bắt đầu nào.
Thẻ ‘span trong HTML là gì?
Trong HTML, thẻ Span là một phần tử container nội tuyến chung. Thẻ Span thường bao bọc các phần của văn bản cho mục đích tạo kiểu hoặc để thêm các thuộc tính vào một phần của văn bản mà không tạo ra một dòng nội dung mới.
Một thẻ nhịp được viết bằng một lỗ mở và thẻ đóng, như vậy:
<span>Content goes here</span>
Phần tử Span được gọi là Generic Generic vì tên của thẻ không cho chúng ta biết bất cứ điều gì về nội dung của phần tử. Nói cách khác, thì Span Span không có ý nghĩa gì với chúng tôi. Đối diện với phần tử HTML chung là một 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ụ: cho đoạn, và).
for paragraph, , and ).
Các thẻ SPAN cũng là các phần tử của nội tuyến, có nghĩa là phần tử nằm trên dòng hiện tại và không tạo ra một 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 tôi sẽ khám phá sự khác biệt giữa Span và Div hơn sau này.
‘Span Span làm gì trong HTML?
Theo cách riêng của nó, một thẻ không ảnh hưởng đến cách trang hiển thị. tag does not affect how the page renders.
Xem thẻ nhịp bút không có thuộc tính của Christina Perricone (@HubSpot) trên Codepen.
Tuy nhiên, các thẻ rất mạnh mẽ 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 của 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 nhịp là ID và lớp chọn lọc, được sử dụng để áp dụng kiểu dáng cho các từ cụ thể. Xem ví dụ dưới đây cho một số ví dụ khác nhau. tags are powerful because they let us assign any global HTML attribute to a section of text or other inline page content. The most common attributes you’ll see used
with span are the selectors id and class, used to apply styling to specific words. See the example below for some various examples.
Xem văn bản tạo kiểu bút với Span của Christina Perricone (@HubSpot) trên Codepen.
Nó cũng có thể áp dụng CSS cho các phần tử HTML trong các thẻ bằng cách sử dụng các thuộc tính kiểu (còn được gọi là CSS CSS CSS). Nên tránh CSS nội tuyến, vì nó làm cho việc thực hiện các thay đổi kiểu toàn trang hơn. tags using the style attributes
(also known as “inline CSS”). Inline CSS should be avoided, as it makes it more difficult to make page-wide style changes.
Span có thể chứa các thuộc tính khác, quá. Ví dụ: nếu bạn có một đoạn văn bản bằng một ngôn ngữ khác với tài liệu, hãy quấn văn bản này vào một thẻ và thêm thuộc tính Lang thẻ để chỉ ra sự thay đổi ngôn ngữ tạm thời. Điều này giúp lập chỉ mục công cụ tìm kiếm và hướng dẫn các chương trình văn bản thành giọng nói để phát âm các từ này khác nhau. tag and add the lang attribute the tag to indicate the temporary language change. This helps search engine indexing and instructs text-to-speech programs to pronounce these
words differently.
Xem thẻ nhịp bút với 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 của văn bản với các hàm JavaScript. Trong ví dụ dưới đây, văn bản bên trong thẻ được ẩn. Mã JavaScript tiết lộ văn bản này khi bạn nhấp vào nút. tag is hidden. The JavaScript code reveals this text when you click a button.
Xem bút sử dụng nhịp với JavaScript của Christina Perricone (@HubSpot) trên Codepen.
Cuối cùng, chúng ta có thể sử dụng để in đậm và in nghiêng văn bản với CSS. Tuy nhiên, nó là một thực tế tốt hơn để sử dụng thẻ cho văn bản in đậm và thẻ (nhấn mạnh) để in nghiêng văn bản. Điều này là do và là các phần tử HTML ngữ nghĩa (trong khi đó) không, điều này làm cho mã của bạn dễ tiếp cận hơn với trình đọc màn hình. Một cách rõ ràng, các kỹ thuật này giống hệt nhau – xem bên dưới. to bold and italicize text with CSS. However, it’s a better practice to use the tag for bolding text and the
(emphasis) tag for italicizing text. This is because and are semantic HTML elements (whereas ) is not, which makes your code more accessible to screen readers. Visibly, these techniques are identical — see below.
Xem cây bút mạnh mẽ và em so với span của Christina Perricone (@hubspot) trên Codepen.
Bất cứ khi nào có thể, bạn phải luôn luôn xem nếu có một sự thay thế ngữ nghĩa hơn cho trước khi sử dụng nó để có khả năng tiếp cận tốt hơn. before using it for better
accessibility.
HTML Span so với Div
Giống như Span, Div là một thành phần HTML chung mà bạn sẽ thấy 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 tuyến chung, trong khi Div là một phần tử cấp khối chung.
Để biết giải thích sâu hơn về ý nghĩa của điều này trong thực tế, hãy xem lời giải thích đầy đủ của chúng tôi về nhịp so với Div trong HTML. Nhưng, tóm lại, đây là sự khác biệt chính giữa các yếu tố SPAN và DIV:
- Thêm một đường ngắt sau khi thẻ đóng của nó, trong khi không. Đây là lý do tại sao các div là các khối của người Viking trong khi các nhịp được nội tuyến. adds a line break after its closing tag, while does not. This is why divs are “blocks” while spans are inline.
- Một phần tử chiếm toàn bộ chiều rộng của container của nó, trong khi chỉ chiếm chiều rộng của nội dung bên trong của nó. Chiều rộng và chiều cao của một phần tử 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 một phần tử với CSS.
only takes up the width of its inner content. The width and height of a element with CSS.- Nói chung, các phần tử được sử dụng để tách các khối nội dung và các thẻ được sử dụng để nhắm mục tiêu một đoạn văn bản trong một khối nội dung lớn hơn. tags are used to target a piece of text within a larger chunk of content.
elements are used to separate chunks of content, andtags are used to target a piece of text within a larger chunk of content.
Ví dụ dưới đây minh họa hai DIV và hai nhịp – chú ý đến sự khác biệt thị giác giữa các yếu tố sau:
Xem khoảng thời gian bút vs Div 1 của Christina Perricone (@HubSpot) trên Codepen.
Kiểu văn bản của bạn với thẻ nhịp
Như chúng tôi đã thấy, có rất nhiều thứ bạn có thể làm với các thẻ, miễn là bạn áp dụng chúng một cách chính xác. Không có thẻ Span và Div, internet sẽ trông khá khác biệt (và khá nhạt nhẽo) so với như ngày nay, các yếu tố chung này cho phép chúng tôi nội dung trang kiểu theo đoạn hoặc từ riêng lẻ. tags, as long as you’re applying them correctly. Without span and div tags, the internet would look pretty different (and pretty bland) compared to how it does today, these generic elements let us style page content down to the individual paragraph or word.
Vì vậy, cho dù bạn muốn thu hút sự chú ý đến một dòng văn bản, hãy thêm nội dung động với JavaScript hay chỉ tăng cấp tính thẩm mỹ của trang web của bạn, hãy giữ trong vành đai công cụ của bạn – bạn sẽ sử dụng nó khá nhiều. in your tool belt — you’ll use it quite a bit.
Khoảng thời gian được sử dụng cho HTML là gì?
Phần tử HTML là một thùng chứa nội tuyến chung cho nội dung phrasing, vốn không đại diện cho bất cứ điều gì.Nó có thể được sử dụng để nhóm các yếu tố cho mục đích tạo kiểu (sử dụng thuộc tính lớp hoặc ID) hoặc vì chúng chia sẻ các giá trị thuộc tính, chẳng hạn như Lang.
a generic inline container for phrasing content
, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang .
Span và ví dụ là gì?
1: Khoảng cách từ cuối ngón tay cái đến cuối ngón tay nhỏ của bàn tay lây lan: một đơn vị tiếng Anh có chiều dài bằng chín inch (22,9 cm): Như là.A: Một không gian hạn chế (tính đến thời điểm) đặc biệt: trọn đời của một cá nhân.
the distance from the end of the thumb to the end of the little finger of a spread hand
also : an English unit of length equal to nine inches (22.9 centimeters) 2 : an extent, stretch, reach, or spread between two limits: such as. a : a limited space (as of time) especially : an individual’s lifetime.
Div và Span là gì?
SPAN và DIV đều là các yếu tố HTML chung chung nhóm các phần liên quan của một trang web.Tuy nhiên, họ phục vụ các chức năng khác nhau.Một phần tử div được sử dụng cho tổ chức cấp khối và kiểu dáng của các phần tử trang, trong khi một phần tử nhịp được sử dụng cho tổ chức nội tuyến và kiểu dáng.
generic HTML elements that group together related parts of a web page
. However, they serve different functions. A div element is used for block-level organization and styling of page elements, whereas a span element is used for inline organization and styling.
element can be changed in CSS, but you cannot change the width and height of aelement with CSS.
element takes up the full width of its container, whileonly takes up the width of its inner content. The width and height of a
- Nói chung, các phần tử được sử dụng để tách các khối nội dung và các thẻ được sử dụng để nhắm mục tiêu một đoạn văn bản trong một khối nội dung lớn hơn. tags are used to target a piece of text within a larger chunk of content.
