// //]]>
Loading...

Các lỗi thường gặp khi viết mã HTML và CSS


Dưới đây là các lỗi thường gặp khi viết mã HTML & CSS mà bạn cần chú ý để có thể validate HTML và CSS.
HTML - Sai DOCTYPE
DOCTYPE sẽ nói cho trình duyệt loại mã HTML mà trang web sử dụng, ở HTML 4.01 có 3 loại DOCTYPE chính:
  • HTML 4.01 Strict
  • HTML 4.01 Transitional
  • HTML 4.01 Frameset
Bạn có thể tìm hiểu thêm về DOCTYPE trên w3schools

HTML - Sử dụng id giống nhau
Trên một trang web, class có thể dùng nhiều lần nhưng bạn chỉ được dùng id cho 1 element riêng. Điều này đặc biệt quan trọng khi áp dụng javascript, ajax.

Sử dụng sai:

Code:<div id="idabc">Information</div> <div id="idabc">Other information</div>

Sử dụng đúng:

Code:<div id="infomation">Information</div> <div id="otherinfo">Other information</div>

HTML - Đóng thẻ không đúng thứ tự

Việc đóng thẻ đúng thứ tự là rất quan trọng, ví dụ thẻ div chỉ được đóng sau khi tất cả các thẻ trong nó đóng

Sử dụng sai:

Code:<div><strong>Information</div></strong>

Sử dụng đúng:

Code:<div><strong>Information</strong></div>

HTML - Viết hoa các tags

Bạn sẽ không validate được mã HTML của mình nếu viết như sau

Code:<DIV></DIV>

HTML - Sử dụng style ngay trên thẻ (inline style)

Sử dụng style ngay trong thẻ HTML bao giờ cũng nhanh hơn việc đưa chúng vào file CSS riêng, nhưng việc đó làm cho bạn rất vất vả khi thay đổi các thẻ giống nhau và khó gỡ lỗi

Code:<a href="link.html" style="color: #000; text-decoration: none;">link name</a>

HTML - Sử dụng các kí tự đặc biệt
Hãy chắc chắn rằng bạn sử dụng ký tự đặc biệt đúng cách trong mã HTML vì không phải lúc nào trình duyệt cũng có thể hiểu và xử lý chúng

Sử dụng sai:

Code:<p> ©, & Stuff</p>

Sử dụng đúng:

Code:<p>&copy;, &amp; Stuff</p>

HTML - Sử dụng header là ảnh

Khi trong thiết kế có những font không có trong hệ thống, thì bạn cũng không nên dùng như sau:

Code:<img src="Header.jpg" alt="Header title" />

Cách sử dụng đúng phải là kết hợp với CSS:

Code:<h1 class="header">Header Title</h1>

Và style cho header:

Code:h1.Header{ /* Mã CSS để ẩn text và hiện background */ }

HTML - Không có thuộc tính alt

Tại sao phải thêm alt vào trong thẻ img khi không hề có khác biệt? Alt sẽ giúp người đọc xem được thông tin về ảnh khi họ không tải được ảnh đó, nó còn giúp các bộ máy tìm kiếm hiểu bức ảnh hơn (SEO)

Sử dụng sai:

Code:<img src="image.jpg" />

Sử dụng đúng:

Code:<img src="image.jpg" alt="image alt tag" />

CSS - Không sử dụng cách viết tắt
Code:border-top:1px solid #00f; border-right:1px solid #00f; border-bottom:1px solid #00f; border-left:1px solid #00f;

Khi cả 4 border như nhau, tại sao bạn không dùng:

Code:border:1px solid #00f;

CSS - Sử dụng đơn vị cho giá trị bằng 0

Bạn không cần phải điền đơn vị cho các giá trị bằng 0 vì 0px, 0pt, 0em đều bằng nhau.

Code:/* Thay vì */ padding:0px 0px 5px 0px; /* Bạn nên dùng */ padding:0 0 5px 0;

CSS - Sử dụng mã màu

Bạn có thể khai báo dùng màu 'white', 'black', 'red'... nhưng tốt nhất hãy cho trình duyệt biết chính xác màu hiển thị bằng cách sử dụng mã màu. Và với các mã màu lặp lại như #ffffff, #000000 bạn cũng có thể viết tắt thành #fff hoặc #000

Code:color: #000; color: #e6a; /* Tương đương với màu #ee66aa */

CSS - Sử dụng sai Position

Khi bạn mới bắt đầu học CSS thì position khá khó hiểu. Bạn có thể sử dụng: static, relative, absolute và fixed. Giá trị mặc định của position là static. Bạn có thể xem cách sử dụng chi tiết tại w3school

Tham khảo ntuts
Đang tải...
DMCA.com Protection Status

Đánh giá bài viết:

logo mystown

Thông báo: Sửa lỗi xem ảnh trên MysTown

| Tường lửa : Bật

Đang trực tuyến:

Tin hot >> Hướng dẫn cài đặt và sử dụng Freenet để truy cập vào DarkNet

Bấm like để ủng hộ MysTown :

1.3M

Mystown author image
| | | | | | | |

NHÓM TÁC GIẢ MYSTOWN

"Bí mật là những gì chúng ta trao cho người khác nhờ giữ hộ"

Mọi thứ đều chứa đựng điều bí ẩn, thậm chí cả bóng tối và sự câm lặng, tôi học được rằng cho dù tôi ở trạng thái nào, tôi cũng có thể yên bình.

- Chúng tôi không đi ngược lại quy luật của tự nhiên
- Chúng tôi không làm trái lẽ sống của xã hội
- Chúng tôi không tiếp tay cho cái sai
- Chúng tôi cung cấp những SỰ THẬT bị che giấu
Loading...

Bài đăng cùng chuyên mục

Bình luận

MysTown Beta Version II | Copyright 2015 - 2017 | Game Bài | Trở về đầu trang