머리말
프론트엔드 엔지니어로서 우리는 매일 HTML, CSS, JavaScript를 작성해야 할 수도 있습니다. 모든 사람이 작성하는 코드에는 자신만의 스타일이 있고 코딩 습관과 지침이 있습니다. 다음은 나의 습관과 규칙을 여러분과 공유하겠습니다.
html
우선 문서를 표준화해야 하므로 문서를 표준화하려면 을 추가해야 합니다. 에 대한 해당 지침이 있습니다.
인코딩은 균일하게 utf-8, 이어야 하며
페이지에서 CSS 스타일이나 js를 인용할 때는 추가할 필요가 없습니다. 유형 선언. 예:
<link rel="stylesheet" href="..."> <style>...</style> <script src="..."></script> <script></script>
파일을 두 프로토콜 모두에서 사용할 수 없는 경우를 제외하고 이미지, 스타일, 스크립트 및 기타 미디어 파일의 URL에서 프로토콜 부분(http:, https:)을 생략하세요. 이 체계를 프로토콜 상대 URL, 상대 프로토콜 URL이라고 합니다. 장점은 HTTPS를 사용하여 페이지에 액세스하든 HTTP를 사용하든 브라우저는 일부 바이트를 절약하면서 동일한 프로토콜을 사용하여 페이지의 리소스를 요청한다는 것입니다. 브라우저가 상대 URL을 발견하면 현재 웹 페이지 프로토콜에 따라 // 앞에 동일한 프로토콜을 자동으로 추가합니다. 현재 웹 페이지가 http를 통해 액세스되면 모든 상대 참조는 // http://가 됩니다. https도 마찬가지입니다. 로컬로 보면 프로토콜이 file://이 됩니다. 이 사용법은 거의 모든 브라우저에서 지원됩니다. IE7/8에서는 작은 문제만 있습니다. 즉, 상대 URL( 또는 @import에 관계없이)을 통해 참조되는 CSS 파일이 두 번 다운로드됩니다. 따라서 성능에 약간의 영향을 미칩니다.
<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
background: url("https://www.google.com/images/example");
}
/* Recommended */
.example {
background: url("//www.google.com/images/example");
}태그, 속성, 속성 이름은 모두 소문자이며, 속성 값은 ""(큰따옴표)로 묶여 있습니다. 각 이중 태그는 해당 종료 태그와 함께 추가되어야 합니다(단일 태그는 그렇지 않습니다). 이 표준을 따르고 원래 HTML 표준을 계속 사용합니다. 즉, "/>"로 끝날 필요가 없습니다. 알림: IE에서의 많은 페이지 변형은 닫히지 않은 태그 또는 중첩된 오류와 관련되어 있습니다.
태그는 순서대로 합리적으로 중첩되어야 합니다. 예를 들어
<p><b></p></b> 需修改为： <p><b></b></p>
를 포함할 수 있지만
⾥에는 다음과 같은 블록을 포함할 수 없습니다.
| , | 태그 안에만 존재할 수 있습니다. td> 예를 들어, 다음 상황은 잘못되었습니다. <table>
<input type="hidden">
<tr>
<td></td>
<p></p>
</tr>
</table>
<ul>
<li></li>
<div></div>
</ul>
需改为：
<table>
<tr>
<td><input type="hidden"> </td>
<p></p>
</tr>
</table>
<ul>
<li><div></div></li>
</ul>로그인 후 복사
|
|---|