총회


Universal Convention

tag

  • 자동 폐쇄 태그, 필요 없음 닫으려면(예: img input br hr 등) img input br hr 等 );
  • 可选的闭合标签(closing tag),需闭合 ( 例如:</li> 或 </body> );
  • 尽量减少标签数量;
<img src="//img.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
<input type="text" name="title">
<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">

Class 与 ID

  • class 应以功能或内容命名,不以表现形式命名;
  • class 与 id 单词字母小写,多个单词组成时,采用中划线-#🎜🎜 # 닫아야 하는 선택적 닫는 태그(예: </li> 또는 </body>)
  • 시도해 보세요. 태그 수를 줄이려면
class 및 id 단어 문자가 아닌 함수 또는 내용을 따라 이름을 지정해야 하며, 여러 단어를 구성할 경우 대시를 사용합니다. - #🎜 🎜#
고유한 ID를 Javascript 후크로 사용하고 스타일 정보 없이 클래스를 생성하지 마세요.
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
#🎜 🎜##🎜🎜#

속성 순서

HTML 속성은 가독성을 보장하기 위해 특정 순서로 표시되어야 합니다.

  • id

  • class

  • 이름

  • data-xxx

  • src, 유형, href

    #🎜🎜 #
  • 제목, 대체

  • aria-xxx, 역할

  • <a id="..." class="..." data-modal="toggle" href="###"></a>
    
    <input class="form-control" type="text">
    
    <img src="..." alt="...">
따옴표

속성 정의에는 큰따옴표를 균일하게 사용하세요.

<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

nested

a 중첩 div는 허용되지 않습니다이 제약 조건은 의미론적 중첩 제약 조건이며, 다른 제약 조건에는 엄격한 중첩이 포함됩니다. 제약 조건 설정: a는 a 중첩을 허용하지 않습니다.

a 不允许嵌套 div这种约束属于语义嵌套约束,与之区别的约束还有严格嵌套约束,比如a 不允许嵌套 a

严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能相互不太一样。

语义嵌套约束

  • <li> 用于 <ul> 或 <ol> 下;
  • <dd><dt> 用于 <dl> 下;
  • <thead><tbody><tfoot><tr><td> 用于 <table> 下;

严格嵌套约束

  • inline-Level 元素,仅可以包含文本或其它 inline-Level 元素;
  • <a>里不可以嵌套交互式元素<a><button><select>等;
  • <p>里不可以嵌套块级元素<div><h1>~<h6><p><ul>/<ol>/<li><dl>/<dt>/<dd><form>等。

布尔值属性

HTML5 规范中 disabledcheckedselected엄격한 중첩 제약 조건은 모든 브라우저에서 허용되지 않습니다. 의미적 중첩 제약 조건의 경우 대부분의 브라우저가 내결함성을 처리하며 생성된 문서 트리가 서로 다를 수 있습니다.

의미론적 중첩 제약조건