HTML và CSS là 2 công nghệ lập trình web không quá khó để học sử dụng. Tuy nhiên để nắm giữ được thì cũng trầy trật.
Nhất là khi HTML và CSS có rất nhiều thuộc tính, phần tử, chúng có thể tương tác với nhau theo nhiều cách này hay cách khác.
Đặc biệt là HTML, CSS không báo lỗi, khiến chúng ta dễ mắc sai lầm. Hôm nay mình sẽ chỉ ra 6 SAI LẦM PHỔ BIẾN khi viết HTML và CSS.
Sai lầm phổ biến khi viết HTML, CSS
Sai lầm #1. Sử dụng thuộc tính placholder thay vì label
Thông thường các lập trình viên web sử dụng thuộc tính placholder thay vì sử dụng phần tử label.
Nhưng những người dùng sử dụng trình đọc màn hình sẽ không thể điền vào các trường này vì trình đọc màn hình không thể đọc văn bản từ thuộc tính palceholder.
<input type="email" placeholder="Enter your email">
Vì vậy, mình khuyên bạn nên sử dụng phần label cho tên trường và thuộc tính placeholder để cho ví dụ về thông tin mà người dùng cần điền.
<label>
<span>Enter your email</span>
<input type="email" placeholder="e.g. example@gmail.com">
</label>
Sai lầm #2: Đánh dấu đồ họa bằng cách sử dụng img
Mình thường thấy các bạn frontend nhầm lẫn định dạng đồ họa (svg, vector) với dạng hình ảnh nội dung thông thường.
Ví dụ: Họ đánh dấu các biểu tượng mạng xã hội bằng cách sử dụng phần tử img, như thế này:
<a href="https://twitter.com" class="social">
<img class="social__icon" src="twitter.svg" alt>
<span class="social__name">Twitter</span>
</a>
Nhưng một biểu tượng mạng xã hội là định dạng svg. Nếu chúng ta xóa biểu tượng, chúng ta sẽ không làm mất ý nghĩa của phần tử, để được như vậy chúng ta có thể sử dụng thuộc tính background-img cho nó.
<a href="https://twitter.com" class="social">
<span class="social__name">Twitter</span>
</a>
.social::before {
background-image: url("twitter.svg");
}
Sai lầm #3: Sử dụng thuộc tính resize
Khi bạn vô hiệu hóa thay đổi kích thước một văn bản bằng cách sử dụng thuộc tính resize, bạn sẽ làm giảm khả năng truy cập.
Vì khi thay đổi các vấn đề liên quan đến kích thước, nó sẽ ảnh hưởng đến các phần tử xung quanh
-> Trình duyệt phải đánh giá, sắp xếp lại rất nhiều
-> giảm hiệu suất.
Do đó, Không nên để người dùng nhập dữ liệu một cách thoải mái.
textarea {
width: 100%;
height: 200px;
resize: none;
}
Thay vào đó, bạn có thể sử dụng các thuộc tính min-width, max-width, min-height và max-height để giới hạn kích thước của phần tử và người dùng có thể tự điền vào các trường.
textarea {
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 400px;
}
Sai lầm #4: Sử dụng thuộc tính display: block và position: absolute (fixed) cùng nhau
Mình thường thấy bạn làm phần frontend sử dụng các thuộc tính display và position như thế này:
.button::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
}
Nhưng trình duyệt thiết lập giá trị block theo mặc định.
Do đó, bạn không cần thêm giá trị này cho các phần tử được định vị tuyệt đối (position: absolute) hoặc cố định (position: fixed).
Vì vậy, đoạn code sau đây tạo ra kết quả tương tự như trước đây.
.button::before {
content: "";
position: absolute;
top: 0;
left: 0;
}
Sai lầm #5: Thiết lập giá trị none cho thuộc tính outline
Mình không thể sử dụng một trang web bằng bàn phím của mình. Mình không thể đi đến một liên kết. Mình không thể đăng ký...
Điều này xảy ra bởi vì các bạn lập trình viên đã vô hiệu hóa focus các phần tử khi họ thêm giá trị none cho thuộc tính outline.
.button:focus {
outline: none;
}
/* or */
.button:focus {
outline: 0;
}
Do đó, nếu bạn cần tắt outline mặc định thì đừng quên tạo trạng thái outline thay thế.
.button:focus {
outline: none;
box-shadow: 0 0 3px 0 blue;
}
Sai lầm #6: Sử dụng phần tử trống
Thông thường các lập trình viên sử dụng các phần tử HTML trống để tạo kiểu cho các thành phần.
Ví dụ: Đánh dấu phần tử hamburger bằng cách sử dụng các phần tử div hoặc span trống trong HTML.
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
Và trong CSS thường sẽ viết thuộc tính cho chúng:
.hamburger {
width: 60px;
height: 45px;
position: relative;
}
.hamburger span {
width: 100%;
height: 9px;
background-color: #d3531a;
border-radius: 9px;
position: absolute;
left: 0;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
top: 18px;
}
.hamburger span:nth-child(3) {
top: 36px;
}
Điều này là không cần thiết.
Bạn hoàn toàn có thể sử dụng các phần tử giả (pesudo element) là ::before và ::after và để đạt được kết quả tương tự.
<button class="hamburger">
<span class="hamburger__text">
<span class="visually-hidden">Open menu</span>
</span>
</button>
Trong CSS:
.hamburger {
width: 60px;
height: 45px;
position: relative;
}
.hamburger::before,
.hamburger::after,
.hamburger__text::before {
content: "";
width: 100%;
height: 9px;
background-color: #d3531a;
border-radius: 9px;
position: absolute;
left: 0;
}
.hamburger::before {
top: 0;
}
.hamburger::after {
top: 18px;
}
.hamburger__text::before {
top: 36px;
}
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px !important;
height: 1px !important;
overflow: hidden;
}
Tìm hiểu những sai lầm phổ biến khi viết HTML, CSS này giúp bạn thực sự nắm giữ 2 công nghệ phổ biến này.
HTML và CSS là 2 công nghệ phổ biến nhất trên thế giới, chúng là thành phần không thể thiếu của một trang web.
-
Dĩ nhiên là bạn hoàn toàn có thể Tự học lập trình Java hoặc PHP online để tham gia lĩnh vực lập trình Web.
Và tựu chung lại, nếu như bạn muốn chinh phục mảng lập trình Web thì chắc chắc bạn cần phải nắm giữ 2 công nghệ này.
Chắc hẳn bạn cũng thấy rằng học HTML, CSS thì cũng khá dễ. Nhưng luôn gặp lỗi mỗi khó hiểu mỗi khi bắt tay vào làm đúng không?
Nếu đúng thì hãy ghi nhớ những sai lầm phổ biến khi viết HTML, CSS này để cải thiện khả năng của mình hơn.
via Stas Melnikov
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #icthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python