Thẻ HTML cho phép bạn áp dụng các kiểu cho một phần của trang web hoặc một đoạn văn. Nó thường được sử dụng để cách điệu văn bản trong một đoạn văn, chẳng hạn như bằng cách thay đổi màu sắc của một từ. Theo mặc định, thẻ không có kiểu.
Khi lập trình bằng HTML, bạn có thể quyết định muốn tạo kiểu cụ thể trên trang web của mình. Ví dụ:bạn có thể muốn nhấn mạnh một từ nhất định trong một câu hoặc một liên kết cụ thể trong danh sách các liên kết.
Đó là nơi mà HTML có thẻ. là một vùng chứa nội tuyến chung cho phép bạn phân loại nội dung trên một tài liệu web. thường được sử dụng cho các mục đích tạo kiểu — đặc biệt là để tạo kiểu cho văn bản.
Hướng dẫn này sẽ thảo luận với các ví dụ về cách sử dụng HTML để tạo kiểu cho các phần tử trên một trang web. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia sử dụng HTML thẻ.
Thẻ HTML
Thẻ HTML thao tác một phần của trang web. Nó thường được sử dụng bên trong phần tử
để áp dụng các kiểu cho một phần cụ thể của đoạn văn. Ví dụ:bạn có thể sử dụng để thay đổi màu của từ trong đoạn văn.
Tự nó, thẻ không có kết xuất hoặc giá trị mặc định. Điều này có nghĩa là nếu bạn sử dụng thẻ mà không có bất kỳ thuộc tính nào, nó sẽ không ảnh hưởng đến cách trang web của bạn được hiển thị.
thẻ thường được sử dụng với CSS để áp dụng một phong cách nhất định cho một phần tử cụ thể hoặc các phần tử trên trang web. giúp bạn dễ dàng áp dụng một kiểu nhất định cho nhiều phần tử trên một trang web cùng một lúc.
HTML Khoảng cách thẻ có cả phần tử mở () và đóng (). Chúng ta có thể sử dụng cú pháp sau để sử dụng thẻ :
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
HTML thẻ không có thuộc tính dành riêng cho thẻ. Ví dụ:thẻ
Bạn có thể coi thẻ tương tự như
Trong phần sau, chúng ta sẽ xem xét một số ví dụ minh họa cách thẻ hoạt động trong HTML.
Hãy xem qua một số ví dụ về mã sử dụng để tạo kiểu cho các phần tử nội dòng trong HTML. Ví dụ đầu tiên của chúng tôi sẽ sử dụng gắn thẻ trong một đoạn văn; ví dụ thứ hai của chúng tôi sẽ sử dụng nó trong một danh sách.
Giả sử chúng ta đang thiết kế một trang web cho một tiệm bánh ở địa phương — Pringle and Sons Bakery. Trang web này sẽ phác thảo lịch sử của tiệm bánh. Chủ tiệm bánh, ông Pringle, yêu cầu chúng tôi nhấn mạnh một số sự kiện chính bằng dòng chữ màu đỏ.
Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
Mã của chúng tôi trả về:
Trong ví dụ của chúng tôi, chúng tôi đã nhấn mạnh các thuật ngữ “bánh nướng ngon” và “hàng nghìn”. Ông Pringle nói với chúng tôi rằng những điều khoản này rất quan trọng, vì vậy chúng tôi đã chỉ đạo chương trình hiển thị chúng bằng màu đỏ.
Chúng tôi đã xác định một chuỗi văn bản nằm trong
Trong tệp CSS của chúng tôi, chúng tôi đã chỉ định rằng màu của bất kỳ phần tử nào được gán cho lớp redText phải là màu đỏ. Điều này cho phép chúng tôi thay đổi màu của văn bản thành màu đỏ khi chúng tôi sử dụng thẻ.
thẻ rất hữu ích trong trường hợp này vì chúng tôi chỉ muốn nhấn mạnh các từ cụ thể trong văn bản của mình. Chúng tôi có thể đã áp dụng kiểu văn bản màu đỏ cho
Giả sử Pringle and Sons Bakery yêu cầu chúng tôi thêm một danh sách vào trang web của họ với các liên kết đến các trang truyền thông xã hội của họ.
Bakery lưu ý rằng các liên kết đến các trang Twitter và Facebook của họ đặc biệt quan trọng vì nhóm hoạt động tích cực nhất trên các nền tảng đó. Vì vậy, họ muốn chúng tôi đánh dấu các liên kết đó bằng văn bản màu xanh lam nhạt.
Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
Mã của chúng tôi trả về:
Trong mã HTML của mình, chúng tôi đã tạo một danh sách không có thứ tự bằng cách sử dụng
Các mục danh sách cho Twitter và Facebook được bao gồm trong các thẻ Khoảng cách HTML ( và ). Thẻ span mở cho mỗi mục danh sách chỉ định một thuộc tính lớp. Giá trị của thuộc tính class là "blue".
Chúng tôi đã xác định một kiểu gọi là .blue thay đổi màu nền của bất kỳ phần tử nào mà nó được áp dụng thành màu xanh lam nhạt. Điều này khiến màu nền của tất cả các liên kết có lớp CSS .blue trong mã HTML của chúng tôi chuyển thành màu xanh lam nhạt.
Màu nền được liên kết với liên kết Instagram của chúng tôi không thay đổi vì chúng tôi không đính kèm văn bản cho liên kết đó trong các thẻ.
HTML thẻ là một vùng chứa chung được sử dụng để áp dụng kiểu cho các phần tử cụ thể trên trang HTML. Theo mặc định, thẻ không làm gì cả, nhưng nó có thể được sử dụng kết hợp với CSS để áp dụng kiểu cho các phần tử.
Như một thách thức, hãy xác định thẻ để làm cho một từ trong câu xuất hiện bằng tất cả các chữ cái viết hoa. Bạn sẽ cần sử dụng quy tắc CSS để chuyển văn bản thành chữ hoa bằng thẻ .
Hướng dẫn này đã thảo luận, với các ví dụ, cách sử dụng HTML < span> trong mã của bạn. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng như một nhà phát triển web chuyên nghiệp!
Để được hướng dẫn và hỗ trợ về cách học HTML, hãy đọc toàn bộ hướng dẫn Cách học HTML của chúng tôi. HTML Cú pháp
<span></span>
có “chiều cao” và “chiều rộng” là các thuộc tính dành riêng cho thẻ. không có loại thuộc tính nào trong số này vì nó dựa vào CSS để tạo kiểu. thẻ hỗ trợ tất cả các thuộc tính HTML toàn cầu.
Ví dụ HTML về thẻ
HTML trong một đoạn văn
index.html
<p>Pringle and Sons Bakery is a staple of the Oakbridge, Indiana community. The Bakery, founded by James Pringle in 1975, serves <span class="redText">delicious baked goods</span> and coffee to the Oakbridge area. It has served <span class="redText">thousands</span> of customers since its foundation.</p>
styles.css
.redText {
color: red;
}
HTML trong danh sách
index.html
<ul>
<li><span class="blue"><a href="twitter.com">Twitter</a></span></li>
<li><span class="blue"><a href="facebook.com">Facebook</a></span></li>
<li><a href="instagram.com">Instagram</a></li>
</ul>
styles.css
.blue {
background: lightblue;
} 
nhãn. Danh sách này có ba mục, mỗi mục được chứa trong Kết luận