Trong số rất nhiều yếu tố HTML mà bạn sẽ gặp phải trong cuộc hành trình của bạn đến với sự thành công đầu tiên, độ dài là thứ 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ẻ <span> không tạo ra một loại yếu tố trang cụ thể. Lúc đầu, điều này có thể khiến một yếu tố như <span> bị nhầm lẫn là gì?.
Hoá ra, rất nhiều. Các yếu tố span cho các nhà thiết kế và nhà phát triển quyền kiểm soát chặt chẽ về phong cách 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 xây dựng các trang web, bạn nên cảm thấy thoải mái với các thẻ <span> và mục đích của chúng.
Trong hướng dẫn này, hãy giới thiệu về yếu tố span trong HTML. Hãy cho bạn thấy chúng được viết ra như thế nào, chúng có ý nghĩa gì ( và chúng không có ý nghĩa gì ), và đưa ra một số ví dụ về khoảng thời gian hoạt động. Cuối cùng, làm rõ sự khác biệt giữa phạm vi và một yếu tố tương tự, sự phân chia. Chúng ta bắt đầu nào.
Dấu hiệu span trong HTML là gì?
Trong HTML, thẻ span là một yếu tố container dòng chung. Các thẻ span thường gói các phần 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 văn bản mà không tạo dòng nội dung mới.
Một thẻ span được viết với một dấu mở và dấu đóng, như vậy :.
Yếu tố span được gọi là generic bởi vì tên của chính thẻ không cho chúng ta biết bất cứ thứ gì về nội dung của yếu tố. Nói cách khác, span không có ý nghĩa gì với chúng ta. Trái ngược với một 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ó ( e. G. , <p > cho đoạn văn, <button > và <form > ).
Các thẻ span cũng là các yếu tố nội dòng, có nghĩa là các yếu tố ở lại trên dòng hiện tại và không tạo ra sự phá vỡ dòng. Một phân đoạn, một phần tử HTML chung khác, là cấp độ khối và tạo một dòng mới trên trang. Hãy khám phá sự khác biệt giữa khoảng thời gian và khoảng thời gian chia tay sau này.
Span làm gì trong HTML?
Bản thân nó, một thẻ <span> không ảnh hưởng đến cách mà trang hiển thị.
Xem thẻ Pen Span không có đặc điểm của Christina Perricone (@ Hubspot ) trên CodePen.
Tuy nhiên, các thẻ <span> rất mạnh mẽ vì chúng cho phép chúng ta gán bất kỳ thuộc tính HTML toàn cầu cho một phần văn bản hoặc nội dung dòng khác. Các thuộc tính phổ biến nhất bạn sẽ thấy được sử dụng với span là các bộ chọn id và lớp, được sử dụng để tạo kiểu cho các từ cụ thể. Xem ví dụ bên dưới cho một số ví dụ khác nhau.
Hãy xem văn bản viết kiểu chữ với span của Christina Perricone (@ Hubspot ) trên CodePen.
Nó cũng có thể áp dụng CSS vào các yếu tố HTML trong các thẻ <span> bằng cách sử dụng các thuộc tính phong cách ( còn được gọi là CSS dòng ). Bạn nên tránhlinelinedingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingdingding.
Span cũng có thể phù hợp với 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 một ngôn ngữ khác với tài liệu, wrap this text in a <span> tag and add the lang attribute the tag to indicate the temporary language change. Điều này giúp lập chỉ mục cho công cụ tìm kiếm và hướng dẫn các chương trình văn bản để phát âm các từ này theo cách khác.
Xem thẻ Pen Span với Lang của Christina Perricone (@ Hubspot ) trên CodePen.
Yếu tố span cũng rất tốt để nhắm mục tiêu vào một phần văn bản với hàm JavaScript. Trong ví dụ bên dưới, văn bản bên trong thẻ <span> được giấu đi. Mã JavaScript sẽ tiết lộ văn bản này khi bạn nhấp vào một nút.
Xem Pen Using Span with JavaScript của Christina Perricone (@ Hubspot ) trên CodePen.
Cuối cùng, chúng ta có thể sử dụng <span> để tô đậm và in nghiêng văn bản bằng CSS. Tuy nhiên, tốt nhất là bạn nên sử dụng thẻ <strong văn bản văn bản văn bản văn bản văn văn văn văn bản bị bị xo xo xo xo xo xo xo xoắn và thẻ và thẻ < em. Điều này là do <strong < < < < và < và < < và < và < và < và < em. Rõ ràng, các kỹ thuật này giống hệt nhau, xem bên dưới.
Xem Pen strong và em vs. span của Christina Perricone (@ Hubspot ) trên CodePen.
Bất cứ khi nào có thể, bạn luôn nên tìm hiểu liệu có sự thay thế về ngữ nghĩa hơn cho <span> trước khi sử dụng nó để dễ dàng tiếp cận hơn.
HTML Span với Division
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ụ những mục đích khác nhau. Span là một yếu tố dòng chung, trong khi div là một yếu tố cấp độ khối chung.
Để có lời giải thích sâu sắc 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ề khoảng cách và khoảng cách trong HTML. Tuy nhiên, tóm lại, đây là những khác biệt chính giữa các yếu tố phân đoạn và phân đoạn :.
- <div > thêm một đoạn nghỉ dòng sau thẻ đóng, trong khi <span > thì không.Đây là lý do tại sao các lằn lằn là khối trong khi các lằn lằn là dòng
- Một yếu tố <div > chiếm toàn bộ chiều rộng của hộp chứa của nó, trong khi <span > chỉ chiếm chiều rộng nội dung bên trong của nó. Độ rộng và chiều cao của yếu tố <div> có thể được thay đổi bằng CSS, nhưng bạn không thể thay đổi chiều rộng và chiều cao của yếu tố <span> bằng CSS
- Nói chung, các yếu tố <div> được sử dụng để tách các phần nội dung và các thẻ <span> được sử dụng để nhắm vào một phần văn bản trong một phần nội dung lớn hơn
Ví dụ bên dưới minh hoạ hai khoảng cách và hai khoảng cách để nhận thấy sự khác biệt về hình ảnh giữa các yếu tố này :.
Thấy Pen span và chia 1 của Christina Perricone (@ Hubspot ) trên CodePen.
Phong cách văn bản của bạn với các thẻ span
Như chúng ta đã thấy, bạn có thể làm nhiều điều với thẻ <span >, miễn là bạn áp dụng đúng cách. 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 ngày nay, những yếu tố chung này cho phép chúng ta tạo nội dung trang theo phong cách đến từng đoạn văn hoặc từng chữ.
Vì vậy,, liệu bạn có 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, hoặc chỉ cần nâng cao thẩm mỹ của trang web của bạn, giữ <span> trong thắt lưng công cụ, anh sẽ dùng nó khá nhiều.
