총회
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>
) - 시도해 보세요. 태그 수를 줄이려면
고유한 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 规范中 disabled
、checked
、selected
엄격한 중첩 제약 조건은 모든 브라우저에서 허용되지 않습니다. 의미적 중첩 제약 조건의 경우 대부분의 브라우저가 내결함성을 처리하며 생성된 문서 트리가 서로 다를 수 있습니다.
<li>
은 <ul>
또는 <ol>
;
<dd>
, <dt>
아래 사용
; #🎜🎜##🎜🎜#, , ;, , 는