Diễn đàn rao vặt 24h miễn phí

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

Thảo luận trong 'Dịch Vụ Máy Tính' bắt đầu bởi myth96vt, 22 Tháng bảy 2016.

  1. myth96vt New Member

    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ã code HTML và CSS mà bạn nên chú ý để có thể thiet ke web chuyen nghiep
    HTML.1 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:
    1. HTML 4.01 strict
    2. HTML 4.01 Transitional
    3. HTML 4.01 Frameset
    Bạn có thể tìm hiểu thêm về DOCTYPE ở w3school nhé
    HTML.2 Sử dụng id giống nhau
    Trên một trang web, class thì có thể dùng nhiều lần nhưng bạn chỉ được dùng id cho một elem riêng. Điều này dặc biệt quan trọng khi áp dụng javascript, ajax.
    ví dụ sai:
    <div id="a">Information</div>
    <div id="a">Menu</div>
    ví dụ đúng
    <div id="a">Information</div>
    <div id="b">Menu</div>
    HTML.3 Đóng thẻ không đúng thứ tự
    Việc đóng thể đúng thử tự là rất quán trọng, ví dụ thẻ div chỉ được đóng sau khi tất cả các thẻ trong nó đóng
    Sử dụng sai:
    <div><strong>myth</div></strong>
    sử dụng đúng:
    <div><strong>myth</strong></div>
    HTML.4 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
    <Div></div>
    HTML.5 Sử dụng style ngay trên thẻ
    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 bận rất vất vả khi thay đổi các thẻ giống nhau và khó gỡ lỗi
    HTML.6: Sử dụng 'onclick'
    Trước khi có jQuery, moootools hay các javascript framework khác thì đây là việc phổ biến. Nếu trình duyệt không hỗ trợ javascript thì người dùng sẽ không biết được chuyện gì sẽ xảy ra khi clik
    Sử dụng sai:
    <a href="#" onclick="popup();">Click Here</a>
    Sử dụng đúng:
    <a href="popup.html" rel="external">Click Here</a>
    Và mã javascript (sử dụng với jQuery)
    $('a[rel="external"]').click( function() {
    popUp($(this).attr('href'));
    return false;
    });
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,width=520,height=420');");
    }
    HTML.7: 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:
    <p> ©, & Stuff</p>
    Sử dụng đúng:
    <p>&copy;, &amp; Stuff</p>
    HTML.8: 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:
    <img src="Header.jpg" alt="Header title" />
    Cách sử dụng đúng phải là kết hợp với CSS:
    <h1 class="header">Header Title</h1>
    Và style cho header:
    h1.Header{
    /*
    Mã CSS để ẩn text và hiện background
    */}
    HTML.9: 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_dich vu seo web(Dịch vụ SEO - OMS DIGITAL))
    Sử dụng sai:
    <img src="image.jpg" />
    Sử dụng đúng:
    <img src="image.jpg" alt="image alt tag" />
    CSS #1: Không sử dụng cách viết tắt
    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:
    border:1px solid #00f;
    CSS #2: 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.
    /* Thay vì */
    padding:0px 0px 5px 0px;
    /* Bạn nên dùng */
    padding:0 0 5px 0;
    CSS #3: 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
    color: #000;
    color: #e6a; /* Tương đương với màu #ee66aa */
    CSS #4: 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
    [IMG]
    Ngoài ra bạn có thể tìm hiểu thêm dịch vụ thiết kế website chuyên nghiệp uy tín

Chia sẻ trang này

Partner: liên hệ

Phiên bản iwin mới nhất - cach tri mun dau den - cach tri mun trung ca - thẩm mỹ viện - danh bạ thẩm mỹ viện - triệt lông vĩnh viễn - cach tri mun boc - giam can hieu qua - cham soc da mat - tap chi cong nghe - tai avatar - hướng dẫn nấu các mon ngon moi ngay Việt Nam - - tai iwin - tai game ban ca - game avatar - game iwin