부트스트랩 HTML 코딩 사양


Syntax

  • 탭 대신 공백 두 개를 사용하세요. 이것이 모든 환경에서 일관된 표시를 보장하는 유일한 방법입니다.

  • 중첩된 요소는 한 번 들여쓰기해야 합니다(예: 공백 2개).

  • 속성 정의에는 큰따옴표를 사용하고 작은따옴표는 사용하지 마세요.

  • 자체 닫는 요소의 끝에 후행 슬래시를 추가하지 마세요. HTML5 사양에서는 이것이 선택 사항이라고 분명히 명시하고 있습니다.

  • 선택적인 닫는 태그(예: </li> 또는 </body>)를 생략하지 마세요. </li> 或 </body>）。

实例：

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="../style/images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 doctype

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

实例：

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

语言属性

根据 HTML5 规范：

强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

更多关于 lang 属性的知识可以从 此规范 中了解。

这里列出了语言代码表。

<html lang="zh-CN">
  <!-- ... -->
</html>

IE 兼容模式

IE 支持通过特定的 <meta>예:

<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<img src="../style/images/company-logo.png" alt="회사">
< ;h1 class="hello-world">Hello, world!</h1>
</body>
</html>
🎜HTML5 doctype🎜🎜 각 HTML 페이지에 추가 모든 브라우저에서 일관된 표시를 보장하기 위해 첫 번째 줄에 표준 모드 선언이 있습니다. 🎜🎜예: 🎜🎜🎜<!DOCTYPE html>
<html>
<head>
</head>
</html>🎜🎜🎜 언어 속성 🎜🎜HTML5 사양에 따르면: 🎜🎜문서의 올바른 언어를 설정하려면 html 루트 요소에 lang 속성을 지정하는 것이 좋습니다. 이는 음성 합성 도구가 사용해야 하는 발음을 결정하고 번역 도구가 번역할 때 따라야 하는 규칙을 결정하는 데 도움이 됩니다. 🎜🎜이 사양에서 lang 속성에 대한 추가 정보를 배울 수 있습니다. 🎜🎜언어 코드 표는 여기에 나열되어 있습니다. 🎜🎜🎜<html lang="zh-CN">
<!-- ... -->
</html>🎜🎜🎜IE 호환 모드🎜🎜IE 지원 현재 페이지를 그리는 데 사용해야 하는 IE 버전을 결정하려면 특정 <meta> 태그를 사용하세요. 특별히 필요한 경우가 아니라면 🎜edge 모드🎜로 설정하여 IE가 지원하는 최신 모드를 채택하도록 알리는 것이 가장 좋습니다. 🎜🎜🎜<meta http-equiv="X-UA-Compatible" content="IE=Edge">🎜🎜

문자 인코딩

문자 인코딩을 명시적으로 선언하면 브라우저가 페이지 콘텐츠가 렌더링되는 방식을 빠르고 쉽게 결정할 수 있습니다. 이것의 장점은 HTML에서 문자 엔터티를 사용하지 않아도 되므로 모든 것이 문서 인코딩(보통 UTF-8 인코딩)과 일치한다는 것입니다.

<head>
<meta charset="UTF-8">
</head>

CSS 및 JavaScript 파일 소개

HTML5 사양에 따르면 일반적으로 CSS를 도입할 필요는 없습니다. 및 JavaScript 파일 text/css 및 text/javascript가 각각 기본값이므로 type 속성을 ​​지정합니다. type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

HTML5 spec links

  • Using link

  • Using style

  • Using script

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

实用为王

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

    HTML5 사양 링크

    • 링크 사용

  • 스타일 사용

  • 스크립트 사용




    <!-- 외부 CSS -->
    <link rel="stylesheet" href="code-guide.css">
<!-- 문서 내 CSS -->🎜<style> ;🎜 /* ... */🎜</style>🎜🎜<!-- JavaScript -->🎜<script src="code-guide.js"></script>🎜🎜🎜 실용성이 왕입니다🎜🎜HTML 표준과 의미를 따르되 실용성을 희생하지 마세요. 항상 최소한의 태그를 사용하고 복잡성을 최소화하도록 노력하세요. 🎜🎜속성 순서🎜🎜HTML 속성은 코드의 가독성을 보장하기 위해 아래 순서로 정렬되어야 합니다. 🎜
  • 🎜클래스🎜🎜
  • 🎜id, 이름🎜🎜
  • 🎜data-*🎜🎜
  • 🎜src, for, type, href🎜🎜
  • 🎜제목, alt🎜🎜
  • 🎜aria-*, 역할< /code>🎜🎜🎜🎜class는 재사용 가능성이 높은 구성 요소를 식별하는 데 사용되므로 먼저 나열해야 합니다. ID는 특정 구성 요소를 식별하는 데 사용되며 주의해서 사용해야 합니다(예: 페이지 내의 책갈피). 따라서 두 번째로 사용됩니다. 🎜🎜🎜<a class="..." id="..." data-modal="toggle" href="#">🎜 예시 링크🎜</a>🎜🎜<입력 클래스= "form-control" type="text">🎜🎜<img src="..." alt="...">🎜🎜

    부울 속성

    부울 속성은 값을 할당하지 않고 선언할 수 있습니다. XHTML 사양에서는 값을 할당해야 하지만 HTML5 사양에서는 그렇지 않습니다.

    자세한 내용은 부울 속성에 대한 WhatWG 섹션을 참조하세요.

    요소의 부울 속성에 값이 있으면 true이고, 값이 없으면 false입니다.

    값을 할당해야 하는 경우WhatWG 사양을 참조하세요.

    속성이 존재하는 경우 해당 값은 빈 문자열이거나 [...] 속성의 정식 이름이어야 하며, 그렇지 않습니다. 시작과 끝에 공백 문자를 추가합니다.

    간단히 말하면 값을 할당할 필요가 없습니다.

    <input type="text" 비활성화됨>

    <input type="checkbox" value="1" 선택됨>

    <select>
    <옵션 값="1" 선택됨>1< /option>
    </select>

    태그 수 줄이기

    HTML 코드를 작성할 때 중복되는 상위 요소를 피하세요. 이를 달성하려면 반복과 리팩토링이 필요한 경우가 많습니다. 다음 사례를 참조하세요.

    <!-- 별로 좋지 않음 -->
    <span class="avatar">
    <img src="...">
    </span> ;

    <!-- 더 좋음 -->
    <img class="avatar" src="...">

    JavaScript 생성 태그

    JavaScript 생성 태그로 콘텐츠를 쉽게 만들기 편집하고 성능을 저하시킵니다. 가능하면 피하세요.