Hướng dẫn html standards - tiêu chuẩn html

Tiểu sử

Tài liệu này xác định định dạng và quy tắc kiểu cho HTML và CSS. Nó nhằm mục đích cải thiện sự hợp tác, chất lượng mã và cho phép hỗ trợ cơ sở hạ tầng. Nó áp dụng cho các tệp RAW, làm việc sử dụng HTML và CSS, bao gồm các tệp GSS. Các công cụ được miễn phí để che giấu, thu nhỏ và biên dịch miễn là chất lượng mã chung được duy trì.

Chung

Quy tắc phong cách chung

Giao thức

Sử dụng HTTPS cho các tài nguyên nhúng nếu có thể.

Luôn luôn sử dụng HTTPS (

3) cho hình ảnh và các tệp phương tiện khác, bảng kiểu và tập lệnh, trừ khi các tệp tương ứng không có sẵn trên HTTPS.

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

Quy tắc định dạng chung

Vết lõm

Thụt lề bởi 2 không gian tại một thời điểm.

Don Tiết sử dụng tab hoặc trộn các tab và không gian để thụt vào.

  
Fantastic
  
Great

.example {
  color: blue;
}

viết hoa

Chỉ sử dụng chữ thường.

Tất cả mã phải là chữ thường: Điều này áp dụng cho tên thành phần HTML, thuộc tính, giá trị thuộc tính (trừ khi

4), bộ chọn CSS, thuộc tính và giá trị thuộc tính (ngoại trừ chuỗi).

Home

/* Not recommended */
color: #E5E5E5;

/* Recommended */
color: #e5e5e5;

Dấu cách

Hủy bỏ không gian trắng.

Không gian trắng theo dõi là không cần thiết và có thể làm phức tạp các khác nhau.

0

1

Quy tắc tổng hợp chung

Mã hóa

Sử dụng UTF-8 (không BOM).

Hãy chắc chắn rằng trình soạn thảo của bạn sử dụng UTF-8 làm mã hóa ký tự, không có dấu lệnh byte.

Chỉ định mã hóa trong các mẫu HTML và tài liệu thông qua

5. Không chỉ định mã hóa các bảng kiểu như các giả định UTF-8 này.

(Thông tin thêm về mã hóa và khi nào và làm thế nào để chỉ định chúng có thể được tìm thấy trong việc xử lý các mã hóa ký tự trong HTML và CSS.)

Giải thích mã khi cần thiết, nếu có thể.

Sử dụng nhận xét để giải thích mã: Nó bao gồm những gì, mục đích của nó phục vụ, tại sao giải pháp tương ứng được sử dụng hoặc ưa thích?

.

Mục hành động

Đánh dấu Todos và các mục hành động với

6.

Đánh dấu Todos bằng cách sử dụng từ khóa

6, không phải các định dạng phổ biến khác như

8.

Nối một liên hệ (tên người dùng hoặc danh sách gửi thư) trong ngoặc đơn như với định dạng

9.

Phụ lục các mục hành động sau một đại tràng như trong

/* Not recommended */
color: #E5E5E5;

0.

2

3

HTML

Quy tắc phong cách HTML

loại tài liệu

Sử dụng HTML5.

HTML5 (cú pháp HTML) được ưa thích cho tất cả các tài liệu HTML:

/* Not recommended */
color: #E5E5E5;

1.

.

Mặc dù tốt với HTML, không đóng các phần tử void, tức là viết

/* Not recommended */
color: #E5E5E5;

4, không phải

/* Not recommended */
color: #E5E5E5;

5.

HTML Hiệu lực

Sử dụng HTML hợp lệ nếu có thể.

Sử dụng mã HTML hợp lệ trừ khi điều đó là không thể do các mục tiêu hiệu suất không thể đạt được liên quan đến kích thước tệp.

Sử dụng các công cụ như trình xác nhận HTML W3C để kiểm tra.

Sử dụng HTML hợp lệ là một thuộc tính chất lượng cơ bản có thể đo lường được góp phần học về các yêu cầu và ràng buộc kỹ thuật, và điều đó đảm bảo việc sử dụng HTML thích hợp.

4

5

Ngữ nghĩa

Sử dụng HTML theo mục đích của nó.

Sử dụng các yếu tố (đôi khi được gọi là không chính xác thẻ thẻ) cho những gì chúng đã được tạo ra. Ví dụ, sử dụng các yếu tố tiêu đề cho các tiêu đề, các yếu tố

/* Not recommended */
color: #E5E5E5;

6 cho các đoạn văn, các yếu tố

/* Not recommended */
color: #E5E5E5;

7 cho neo, v.v.

Sử dụng HTML theo mục đích của nó rất quan trọng đối với khả năng tiếp cận, tái sử dụng và lý do hiệu quả mã.

6

7

Dự phòng đa phương tiện

Cung cấp nội dung thay thế cho đa phương tiện.

Đối với đa phương tiện, chẳng hạn như hình ảnh, video, các đối tượng hoạt hình thông qua

/* Not recommended */
color: #E5E5E5;

8, đảm bảo cung cấp quyền truy cập thay thế. Đối với hình ảnh có nghĩa là sử dụng văn bản thay thế có ý nghĩa (

/* Not recommended */
color: #E5E5E5;

9) và cho bảng điểm và chú thích video và âm thanh, nếu có.

Cung cấp nội dung thay thế rất quan trọng vì lý do khả năng truy cập: Người dùng mù có ít tín hiệu để nói hình ảnh là gì mà không có

/* Recommended */
color: #e5e5e5;

0 và người dùng khác có thể không có cách nào hiểu được nội dung video hoặc âm thanh nào về nội dung.

.

8

9

Tách các mối quan tâm

Cấu trúc riêng biệt từ trình bày từ hành vi.

Giữ chặt cấu trúc (đánh dấu), trình bày (kiểu dáng) và hành vi (kịch bản) và cố gắng giữ sự tương tác giữa ba đến mức tối thiểu tuyệt đối.

Đó là, đảm bảo các tài liệu và mẫu chỉ chứa HTML và HTML chỉ phục vụ mục đích cấu trúc. Di chuyển mọi thứ trình bày thành các bảng phong cách, và mọi thứ hành vi thành các kịch bản.

Ngoài ra, giữ cho khu vực liên lạc càng nhỏ càng tốt bằng cách liên kết càng ít các trang và kịch bản phong cách càng tốt từ các tài liệu và mẫu.

Tách cấu trúc với trình bày từ hành vi là quan trọng vì lý do bảo trì. Luôn luôn tốn kém hơn khi thay đổi các tài liệu và mẫu HTML hơn là cập nhật các bảng và tập lệnh kiểu.

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

0

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

1

Tài liệu tham khảo thực thể

Không sử dụng tài liệu tham khảo thực thể.

Không cần sử dụng các tham chiếu thực thể như

/* Recommended */
color: #e5e5e5;

3,

/* Recommended */
color: #e5e5e5;

4 hoặc

/* Recommended */
color: #e5e5e5;

5, giả sử cùng một mã hóa (UTF-8) được sử dụng cho các tệp và biên tập viên cũng như giữa các nhóm.

Các ngoại lệ duy nhất áp dụng cho các ký tự có ý nghĩa đặc biệt trong HTML (như

/* Recommended */
color: #e5e5e5;

6 và

/* Recommended */
color: #e5e5e5;

7) cũng như các ký tự điều khiển hoặc vô hình của Hồi (như không gian không ngắt).

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

2

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

3

Thẻ tùy chọn

Bỏ qua thẻ tùy chọn (tùy chọn).

Đối với mục đích tối ưu hóa và khả năng quét kích thước tệp, hãy xem xét bỏ qua các thẻ tùy chọn. Thông số kỹ thuật HTML5 xác định những thẻ nào có thể được bỏ qua.

.

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

4

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

5

/* Recommended */
color: #e5e5e5;

8 thuộc tính

Bỏ qua các thuộc tính

/* Recommended */
color: #e5e5e5;

8 cho các bảng và kịch bản phong cách.

Không sử dụng các thuộc tính

/* Recommended */
color: #e5e5e5;

8 cho các bảng kiểu (trừ khi không sử dụng CSS) và tập lệnh (trừ khi không sử dụng JavaScript).

Chỉ định các thuộc tính

/* Recommended */
color: #e5e5e5;

8 trong các bối cảnh này là không cần thiết vì HTML5 ngụ ý

02 và

03 làm mặc định. Điều này có thể được thực hiện một cách an toàn ngay cả đối với các trình duyệt cũ.

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

6

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

7

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

8

/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';

9

04 Thuộc tính

Tránh các thuộc tính

04 không cần thiết.

Thích các thuộc tính

06 cho các thuộc tính kiểu dáng và

07 cho kịch bản.

Khi các thuộc tính

04 được yêu cầu nghiêm ngặt, luôn luôn bao gồm một dấu gạch nối trong giá trị để đảm bảo nó không khớp với cú pháp định danh JavaScript, ví dụ: Sử dụng

09 thay vì chỉ

10 hoặc

11.

Khi một phần tử có thuộc tính

04, các trình duyệt sẽ cung cấp nó như một thuộc tính được đặt tên trên nguyên mẫu toàn cầu

13, có thể gây ra hành vi bất ngờ. Mặc dù

04 Các giá trị thuộc tính có chứa dấu gạch nối vẫn có sẵn dưới dạng tên thuộc tính, chúng không thể được tham chiếu dưới dạng các biến JavaScript toàn cầu.

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

0

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

1

Quy tắc định dạng HTML

Định dạng chung

Sử dụng một dòng mới cho mọi khối, danh sách hoặc phần tử bảng và thụt vào mọi yếu tố con như vậy.

Không phụ thuộc vào kiểu dáng của một phần tử (vì CSS cho phép các phần tử đảm nhận vai trò khác nhau trên mỗi thuộc tính

15), đặt mỗi khối, danh sách hoặc phần tử bảng trên một dòng mới.

Ngoài ra, thụt vào chúng nếu chúng là các phần tử con của một khối, danh sách hoặc phần tử bảng.

.

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

2

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

3

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

4

HTML-Wrapping

Phá vỡ các dòng dài (tùy chọn).

Mặc dù không có khuyến nghị giới hạn cột cho HTML, bạn có thể xem xét gói dài nếu nó cải thiện đáng kể khả năng đọc.

Khi bao bọc dòng, mỗi dòng tiếp tục phải được thụt vào ít nhất 4 khoảng trống từ dòng ban đầu để phân biệt các thuộc tính được bọc với các phần tử con.

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

5

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

6

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

7

Dấu ngoặc kép HTML

Khi trích dẫn các giá trị thuộc tính, sử dụng dấu ngoặc kép.

Sử dụng Double (

17) thay vì dấu ngoặc đơn (

18) xung quanh các giá trị thuộc tính.

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

8

/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

9

CSS

Quy tắc phong cách CSS

Hiệu lực của CSS

Sử dụng CSS hợp lệ nếu có thể.

Trừ khi xử lý các lỗi xác thực CSS hoặc yêu cầu cú pháp độc quyền, hãy sử dụng mã CSS hợp lệ.

Sử dụng các công cụ như trình xác nhận W3C CSS để kiểm tra.

Sử dụng CSS hợp lệ là một thuộc tính chất lượng cơ bản có thể đo lường được cho phép phát hiện mã CSS có thể không có bất kỳ hiệu ứng nào và có thể được xóa và điều đó đảm bảo việc sử dụng CSS thích hợp.

Đặt tên lớp

Sử dụng tên lớp có ý nghĩa hoặc chung chung.

Thay vì các tên trình bày hoặc mật mã, luôn luôn sử dụng tên lớp phản ánh mục đích của yếu tố trong câu hỏi hoặc là chung chung.

Các tên cụ thể và phản ánh mục đích của yếu tố nên được ưu tiên vì đây là điều dễ hiểu nhất và ít có khả năng thay đổi nhất.

Tên chung chỉ đơn giản là một dự phòng cho các yếu tố không có đặc biệt hoặc không có nghĩa khác với anh chị em của họ. Họ thường là cần thiết như những người trợ giúp của người Viking.

Sử dụng tên chức năng hoặc chung làm giảm xác suất thay đổi tài liệu hoặc mẫu không cần thiết.

  
Fantastic
  
Great

0

  
Fantastic
  
Great

1

Phong cách tên lớp

Sử dụng tên lớp càng ngắn càng tốt nhưng miễn là cần thiết.

Cố gắng truyền đạt những gì một lớp học trong khi ngắn gọn nhất có thể.

Sử dụng tên lớp theo cách này đóng góp vào mức độ chấp nhận được và hiệu quả mã.

  
Fantastic
  
Great

2

  
Fantastic
  
Great

3

DELIMITERS TÊN LỚP

Các từ riêng biệt trong tên lớp bởi một dấu gạch nối.

Không liên kết các từ và chữ viết tắt trong các bộ chọn bởi bất kỳ ký tự nào (bao gồm cả không có gì cả) ngoài dấu gạch nối, để cải thiện sự hiểu biết và khả năng quét.

  
Fantastic
  
Great

4

  
Fantastic
  
Great

5

Tiền tố

Bộ chọn tiền tố với tiền tố cụ thể của ứng dụng (tùy chọn).

Trong các dự án lớn cũng như cho mã được nhúng trong các dự án khác hoặc trên các trang web bên ngoài sử dụng tiền tố (làm không gian tên) cho tên lớp. Sử dụng các định danh ngắn, duy nhất theo sau là một dấu gạch ngang.

Sử dụng các không gian tên giúp ngăn chặn xung đột đặt tên và có thể giúp bảo trì dễ dàng hơn, ví dụ như trong các hoạt động tìm kiếm và thay thế.

  
Fantastic
  
Great

6

Loại bộ chọn

Tránh các tên lớp đủ điều kiện với bộ chọn loại.

Trừ khi cần thiết (ví dụ với các lớp trợ giúp), không sử dụng tên thành phần kết hợp với các lớp.

Tránh các bộ chọn tổ tiên không cần thiết là hữu ích vì lý do hiệu suất.

  
Fantastic
  
Great

7

  
Fantastic
  
Great

8

Bộ chọn ID

Tránh các bộ chọn ID.

Các thuộc tính ID dự kiến ​​sẽ là duy nhất trên toàn bộ trang, rất khó đảm bảo khi một trang chứa nhiều thành phần được làm việc bởi nhiều kỹ sư khác nhau. Bộ chọn lớp nên được ưu tiên trong tất cả các tình huống.

  
Fantastic
  
Great

9

.example {
  color: blue;
}

0

Tính tài sản tốc ký

Sử dụng các thuộc tính tốc ký nếu có thể.

CSS cung cấp nhiều thuộc tính tốc ký (như

19) nên được sử dụng bất cứ khi nào có thể, ngay cả trong trường hợp chỉ có một giá trị được thiết lập rõ ràng.

Sử dụng các thuộc tính tốc ký rất hữu ích cho hiệu quả và khả năng hiểu của mã.

.example {
  color: blue;
}

1

.example {
  color: blue;
}

2

0 và các đơn vị

Bỏ qua đặc tả đơn vị sau các giá trị của 0 0, trừ khi được yêu cầu.

Không sử dụng các đơn vị sau các giá trị

20 trừ khi chúng được yêu cầu.

.example {
  color: blue;
}

3

Hàng đầu 0s

Luôn bao gồm các giá trị hàng đầu trong các giá trị.

Đặt

20s trước giá trị hoặc độ dài từ -1 đến 1.

.example {
  color: blue;
}

4

Ký hiệu thập lục phân

Sử dụng 3 ký hiệu thập lục phân ký tự nếu có thể.

Đối với các giá trị màu cho phép nó, 3 ký hiệu thập lục phân ký tự ngắn hơn và cô đọng hơn.

.example {
  color: blue;
}

5

.example {
  color: blue;
}

6

Tuyên bố quan trọng

Tránh sử dụng khai báo

22.

Những tuyên bố này phá vỡ dòng thác tự nhiên của CSS và gây khó khăn cho việc lý luận và soạn thảo phong cách. Thay vào đó, sử dụng tính cụ thể của bộ chọn để ghi đè các thuộc tính.

.example {
  color: blue;
}

7

.example {
  color: blue;
}

8

Hack

Tránh phát hiện tác nhân người dùng cũng như CSS, hack hack, trước tiên là một cách tiếp cận khác.

Nó rất hấp dẫn để giải quyết sự khác biệt về kiểu dáng đối với phát hiện tác nhân người dùng hoặc bộ lọc CSS đặc biệt, cách giải quyết và hack. Cả hai cách tiếp cận nên được xem xét là phương sách cuối cùng để đạt được và duy trì một cơ sở mã hiệu quả và có thể quản lý. Nói một cách khác, cho phát hiện và hack một đường chuyền miễn phí sẽ làm tổn thương các dự án trong thời gian dài vì các dự án có xu hướng có cách ít kháng cự nhất. Đó là, cho phép và giúp dễ dàng sử dụng phát hiện và hack có nghĩa là sử dụng phát hiện và hack thường xuyên hơn và thường xuyên hơn là quá thường xuyên.

Quy tắc định dạng CSS

Lệnh khai báo

Bảng chữ cái khai báo (tùy chọn).

Sắp xếp các tuyên bố nhất quán trong một dự án. Trong trường hợp không có công cụ để tự động hóa và thực thi một thứ tự sắp xếp nhất quán, hãy xem xét việc đưa ra các tuyên bố theo thứ tự bảng chữ cái để đạt được mã nhất quán theo cách dễ học, nhớ và duy trì thủ công.

Bỏ qua các tiền tố dành riêng cho nhà cung cấp cho mục đích sắp xếp. Tuy nhiên, nhiều tiền tố dành riêng cho nhà cung cấp cho một thuộc tính CSS nhất định nên được sắp xếp (ví dụ: tiền tố -moz xuất hiện trước -webkit).

.example {
  color: blue;
}

9

Chặn nội dung thụt

Thụt lên tất cả nội dung khối.

Thắng tất cả nội dung khối, đó là các quy tắc trong các quy tắc cũng như khai báo, vì vậy để phản ánh hệ thống phân cấp và cải thiện sự hiểu biết.

Home

0

Tuyên bố dừng lại

Sử dụng dấu chấm phẩy sau mỗi tuyên bố.

Kết thúc mọi tuyên bố với một dấu chấm phẩy cho lý do nhất quán và mở rộng.

Home

1

Home

2

Tên tài sản dừng lại

Sử dụng một không gian sau một tên tài sản của Đại tá.

Luôn luôn sử dụng một khoảng trống giữa thuộc tính và giá trị (nhưng không có khoảng trống giữa thuộc tính và đại tràng) vì lý do nhất quán.

Home

3

Home

4

Tuyên bố phân tách khối

Sử dụng một khoảng trống giữa bộ chọn cuối cùng và khối khai báo.

Luôn luôn sử dụng một khoảng trống giữa bộ chọn cuối cùng và nẹp mở bắt đầu khối khai báo.

Nẹp mở phải nằm trên cùng một dòng với bộ chọn cuối cùng trong một quy tắc nhất định.

Home

5

Home

6

Bộ chọn và phân tách khai báo

Các bộ chọn riêng biệt và khai báo bằng các dòng mới.

Luôn bắt đầu một dòng mới cho mỗi bộ chọn và khai báo.

Home

7

Home

8

Tách quy tắc

Các quy tắc riêng biệt bởi các dòng mới.

Luôn đặt một dòng trống (hai lần ngắt dòng) giữa các quy tắc.

Home

9

Dấu ngoặc kép CSS

Sử dụng dấu ngoặc đơn (

18) thay vì gấp đôi (

17) cho các bộ chọn thuộc tính và giá trị thuộc tính.

Không sử dụng dấu ngoặc kép trong các giá trị URI (

25).

Ngoại lệ: Nếu bạn cần sử dụng quy tắc

26, hãy sử dụng dấu ngoặc kép của dấu ngoặc kép.

0

1

Quy tắc Meta CSS

Phần nhóm theo một phần bình luận (tùy chọn).

Nếu có thể, các phần theo kiểu nhóm với nhau bằng cách sử dụng bình luận. Các phần riêng biệt với các dòng mới.

2

Chia tay từ

Được nhất quán.

Nếu bạn chỉnh sửa mã, hãy dành vài phút để xem mã xung quanh bạn và xác định phong cách của nó. Nếu họ sử dụng không gian xung quanh tất cả các toán tử số học của họ, bạn cũng nên như vậy. Nếu bình luận của họ có những hộp băm nhỏ xung quanh họ, hãy làm cho ý kiến ​​của bạn có một số hộp băm nhỏ xung quanh chúng.

Quan điểm của việc có hướng dẫn theo phong cách là có một từ vựng chung về mã hóa để mọi người có thể tập trung vào những gì bạn nói thay vì cách bạn nói. Chúng tôi trình bày các quy tắc phong cách toàn cầu ở đây để mọi người biết từ vựng, nhưng phong cách địa phương cũng rất quan trọng. Nếu mã bạn thêm vào một tệp trông khác biệt đáng kể so với mã hiện có xung quanh nó, nó sẽ đưa người đọc ra khỏi nhịp điệu của họ khi họ đi đọc nó. Tránh điều này.