HTML - Các thẻ và thuộc tính bị lỗi thời
Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ khám phá một khía cạnh thú vị của HTML: các thẻ và thuộc tính bị lỗi thời (deprecated). Như một người giáo viên máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. Hãy lấy một tách cà phê (hoặc thức uống yêu thích của bạn), và cùng chúng tôi khám phá thế giới của các yếu tố HTML đã không còn được ưa chuộng.
什么是过时标签？
Trước khi chúng ta đi vào chi tiết, hãy hiểu từ "bị lỗi thời" trong ngữ cảnh của HTML. Hãy nghĩ về nó như cách mà web nói, "Cảm ơn bạn đã phục vụ, nhưng đã đến lúc nghỉ hưu." Các thẻ bị lỗi thời là các yếu tố HTML từng được sử dụng phổ biến但现在 không khuyến khích hoặc không còn được hỗ trợ trong các phiên bản HTML mới hơn.
Vậy tại sao lại thế này? Đúng vậy, khi web phát triển, chúng ta tìm ra những cách tốt hơn, hiệu quả hơn để cấu trúc và định dạng nội dung của mình. Điều này giống như việc nâng cấp từ điện thoại� gập lên điện thoại thông minh - có lẽ điện thoại cũ vẫn hoạt động, nhưng điện thoại mới có nhiều chức năng hơn!
HTML Deprecated Tags
Hãy cùng nhìn vào một số thẻ bị lỗi thời phổ biến nhất. Tôi sẽ cho các bạn thấy cách chúng được sử dụng và những gì chúng ta sử dụng thay thế hiện nay.
Thẻ <center>
Ngày xưa, nếu bạn muốn căn giữa văn bản, bạn sẽ sử dụng thẻ <center>. Nó trông giống như thế này:
<center>This text is centered</center>Nhưng hiện nay, chúng ta đạt được cùng kết quả bằng CSS:
<p style="text-align: center;">This text is centered</p>Hoặc tốt hơn nữa, trong một tệp CSS riêng:
.center-text {
text-align: center;
}<p class="center-text">This text is centered</p>Thẻ <font>
Bạn có nhớ khi chúng ta thay đổi phong cách chữ trực tiếp trong HTML không? Thẻ <font> từng là lựa chọn hàng đầu của chúng ta:
<font face="Arial" color="blue" size="3">This is blue Arial text</font>Hiện nay, chúng ta sử dụng CSS cho tất cả các nhu cầu định dạng của mình:
<p style="font-family: Arial; color: blue; font-size: 16px;">This is blue Arial text</p>Thẻ <big> và <small>
Những thẻ này được sử dụng để thay đổi kích thước văn bản:
<big>This text is bigger</big>
<small>This text is smaller</small>Trong HTML hiện đại và CSS:
<span style="font-size: 1.2em;">This text is bigger</span>
<span style="font-size: 0.8em;">This text is smaller</span>HTML Deprecated Attributes
Không chỉ các thẻ mà các thuộc tính cũng có thể bị lỗi thời! Hãy nhìn vào một số ví dụ.
Thuộc tính align
Chúng ta từng căn chỉnh hình ảnh như thế này:
<img src="cat.jpg" align="right" alt="A cute cat">Hiện nay, chúng ta sử dụng CSS:
<img src="cat.jpg" style="float: right;" alt="A cute cat">Thuộc tính bgcolor
Bạn có nhớ khi chúng ta đặt màu nền như thế này không?
<body bgcolor="lightblue">
Welcome to my website!
</body>Ngày nay, tất cả đều về CSS:
<body style="background-color: lightblue;">
Welcome to my website!
</body>Tại sao chúng ta nên tránh các thẻ và thuộc tính bị lỗi thời?
- Hỗ trợ của trình duyệt: Các trình duyệt mới hơn có thể không hỗ trợ các thẻ và thuộc tính cũ.
- Phân cách quan tâm: Tốt hơn nên giữ cấu trúc (HTML) tách biệt khỏi phong cách (CSS).
- Khả năng truy cập: Nhiều yếu tố bị lỗi thời không thân thiện với máy quét màn hình.
- Dễ bảo trì: Sử dụng các tiêu chuẩn hiện tại giúp mã của bạn dễ dàng hơn để cập nhật và bảo trì.
Một chuyến đi nhớ lại: Trang web HTML bị lỗi thời
Hãy cùng đi một chuyến đi怀旧 và tạo một trang web sử dụng các thẻ và thuộc tính bị lỗi thời. Sau đó, chúng ta sẽ xem cách hiện đại hóa nó.
Cách cũ
<html>
<head>
<title>My Cool 90s Website</title>
</head>
<body bgcolor="cyan">
<center>
<font face="Comic Sans MS" size="6" color="purple">
Welcome to My Awesome Website!
</font>
</center>
<hr width="50%" color="red">
<p><b>Here are my favorite things:</b></p>
<ul>
<li><font color="green">Playing video games</font></li>
<li><font color="blue">Eating pizza</font></li>
<li><font color="red">Watching movies</font></li>
</ul>
<p align="right"><i>Thanks for visiting!</i></p>
</body>
</html>Cách hiện đại
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cool Modern Website</title>
<style>
body {
background-color: cyan;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
color: purple;
}
hr {
width: 50%;
background-color: red;
height: 2px;
border: none;
}
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
.right-align { text-align: right; }
</style>
</head>
<body>
<h1>Welcome to My Awesome Website!</h1>
<hr>
<p><strong>Here are my favorite things:</strong></p>
<ul>
<li class="green">Playing video games</li>
<li class="blue">Eating pizza</li>
<li class="red">Watching movies</li>
</ul>
<p class="right-align"><em>Thanks for visiting!</em></p>
</body>
</html>Kết luận
Và thế là chúng ta đã đi qua một hành trình, từ những ngày đầu của HTML đến thế giới web hiện đại mà chúng ta biết ngày nay. Hãy nhớ, trong khi việc回顾 những thẻ và thuộc tính cũ rất thú vị, nhưng rất quan trọng để chúng ta cập nhật với các tiêu chuẩn hiện tại.
Khi kết thúc, đây là bảng tóm tắt các thẻ và thuộc tính bị lỗi thời mà chúng ta đã thảo luận:
| Thẻ/Thuộc tính bị lỗi thời | Thay thế hiện đại |
|---|---|
<center> |
text-align: center; (CSS) |
<font> |
CSS properties (font-family, color, font-size) |
<big>, <small>
|
font-size (CSS) |
align attribute |
CSS positioning (text-align, float) |
bgcolor attribute |
background-color (CSS) |
Hãy nhớ, học HTML giống như học một ngôn ngữ mới. Nó đòi hỏi thời gian, sự luyện tập và sự kiên nhẫn. Đừng sợ thử nghiệm và mắc lỗi - đó là cách chúng ta học! Hãy tiếp tục lập trình, tiếp tục sáng tạo, và quan trọng nhất, hãy vui vẻ với nó!
Credits: Image by storyset