기본 원칙
기본 원칙
구조, 스타일, 동작의 분리
문서와 템플릿에는 HTML 구조만 포함하고, 스타일은 스타일 시트에, 동작은 스크립트에 배치되도록 하세요. HTML 结构，样式都放到样式表里，行为都放到脚本里。
缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。
文件编码
使用不带 BOM 的 UTF-8 编码。
- 在 HTML中指定编码
<meta charset="utf-8">； - 无需使用
@charset指定样式表的编码，它默认为UTF-8（参考 @charset）；
一律使用小写字母
<!-- Recommended --><img src="google.png" alt="Google"><!-- Not recommended --><A HREF="/">Home</A>
/* Recommended */color: #e5e5e5;/* Not recommended */color: #E5E5E5;
省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。
其它协议（ftp 等）的 URL 不省略。
<!-- Recommended --><script src="//www.w3cschool.cn/statics/js/autotrack.js"></script><!-- Not recommended --><script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
/* Recommended */.example { background: url(//www.google.com/images/example);
}/* Not recommended */.example { background: url(http://www.google.com/images/example);
}统一注释
通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。
HTML 注释
模块注释
<!-- 文章列表列表模块 --><div class="article-list">...</div>
区块注释
<!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Ashu(Aaaaaashu@gmail.com) -->
CSS 注释
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
/* ==========================================================================
组件块
============================================================================ *//* 子组件块
============================================================================ */.selector { padding: 15px; margin-bottom: 15px;
}/* 子组件块
============================================================================ */.selector-secondary { display: block; /* 注释*/}.selector-three { display: span;
}JavaScript 注释
- 单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
- 多行注释
避免使用 /*...*/
- 공백 두 개의 들여쓰기를 통일합니다(간단히 들여쓰기를 통일할 수 있습니다).
Tab이나Tab을 사용하지 마세요. 그리고 공간이 뒤섞여 있다. - 파일 인코딩
BOM없이 UTF-8 인코딩을 사용하세요. HTML
<meta charset="utf-8">에서 인코딩을 지정하세요. - 지정하기 위해
@charset를 사용할 필요가 없습니다. 스타일 시트 인코딩의 경우 기본값은 UTF-8입니다(@charset);/**
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明，比较长
* 那就换行了.
* @param {number=} p3 参数3的说明（可选）
* @return {Object} 返回值描述
*/function foo(p1, p2, p3) { var p3 = p3 || 10; return {
p1: p1,
p2: p2,
p3: p3
};
}/** * @fileoverview Description of file, its uses and information * about its dependencies. * @author user@meizu.com (Firstname Lastname) * Copyright 2015 Meizu Inc. All Rights Reserved. */외부 링크 리소스 URL의 프로토콜 부분 생략🎜🎜URL에서
http / https< 생략 외부 링크 리소스(사진 및 기타 미디어 리소스) /code> 프로토콜의 URL을 상대 주소로 만들고 혼합 콘텐츠 문제 및 파일 크기 섹션 수 감소. 🎜🎜다른 프로토콜(ftp 등)의 URL은 생략되지 않습니다. 🎜rrreeerrreee🎜통합 주석🎜🎜편집기를 구성하면 만장일치로 인식되는 주석 모드를 출력할 수 있는 단축키를 제공할 수 있습니다. 🎜HTML 주석
🎜🎜🎜모듈 주석🎜rrreee🎜🎜🎜주석 차단🎜rrreee🎜🎜CSS 주석
🎜구성 요소 블록, 하위 구성 요소 블록 및 선언 블록 사이에 빈 줄을 사용합니다. , 세 개의 빈 줄은 하위 구성 요소 블록을 구분합니다. 🎜rrreeeJavaScript 주석
🎜🎜한 줄 주석🎜🎜🎜은 한 줄을 차지해야 합니다. // 뒤에는 공백이 오고 들여쓰기는 다음 줄의 주석 처리된 코드와 일치합니다. 🎜🎜🎜여러 줄 주석🎜🎜🎜 /*...*/ 과 같은 여러 줄 주석을 사용하지 마세요. 주석 내용이 여러 줄인 경우 한 줄 주석을 여러 개 사용하세요. 🎜🎜🎜함수/메서드 주석🎜🎜함수/메서드 주석에는 함수 설명이 포함되어야 하며 매개변수 및 반환 값이 있는 경우 주석 식별자를 사용해야 합니다. ;🎜🎜매개변수 및 반환 값 주석에는 유형 정보와 설명이 포함되어야 합니다.🎜🎜함수가 내부 함수이고 외부에서 액세스할 수 없는 경우 @inner 플래그를 사용할 수 있습니다.🎜🎜rrreee🎜🎜파일 주석🎜🎜🎜 파일 주석은 이 코드에 익숙한 독자에게 이 파일에 무엇이 포함되어 있는지 알려주는 데 사용됩니다. 파일의 일반 내용, 작성자, 종속성 및 호환성 정보가 제공되어야 합니다. 다음과 같습니다:🎜rrreee코드 확인
- W3C HTML 유효성 검사기를 사용하여 HTML 코드의 유효성을 확인하세요.
- CSS 코드의 유효성을 확인하려면 W3C CSS 유효성 검사기를 사용하세요.
코드 확인이 최종 목표는 아닙니다. 실제로 목적은 이러한 검증 과정을 여러 번 거친 후 개발자가 어떤 종류의 구문이나 작성 방법이 비표준이며 권장되지 않는지 깊이 이해할 수 있도록 하는 것입니다. 아직은 잘 알 수 있어요.
