konvensyen am


Konvensyen Am

Tag

  • Tag penutup sendiri, tidak perlu ditutup (contohnya: img input br hr dsb.); 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 单词字母小写，多个单词组成时，采用中划线-
    • Teg penutup pilihan, yang perlu ditutup (contohnya: </li> atau </body> );
  • Cuba kurangkan bilangan tag sebanyak mungkin; hendaklah dinamakan dalam huruf kecil, Apabila terdiri daripada berbilang perkataan, gunakan sengkang -     untuk memisahkannya
Gunakan id unik sebagai cangkuk Javascript dan elakkan membuat kelas tanpa maklumat gaya
🎜
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
🎜🎜

Attribute Order

Atribut HTML hendaklah dipaparkan dalam susunan tertentu untuk memastikan kebolehbacaan.

  • id

  • kelas

  • nama

  • data-xxx

  • src, untuk, taip, href

  • aria-xxx, peranan

  • <a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

    Tanda petikan
Gunakan petikan berganda secara seragam untuk definisi atribut. 

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

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

Bersarang

a tidak membenarkan bersarang div Kekangan ini ialah kekangan bersarang semantik Kekangan yang berbeza termasuk kekangan bersarang yang ketat, seperti a tidak membenarkan bersarang. .

Kekangan sarang yang ketat tidak dibenarkan dalam semua penyemak imbas; bagi kekangan sarang semantik, kebanyakan penyemak imbas akan mengendalikan toleransi kesalahan, dan pepohon dokumen yang dihasilkan mungkin berbeza antara satu sama lain.

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、selectedKekangan Bersarang Semantik

    <li> digunakan untuk <ul> atau <ol> Seterusnya;

    <dd>, <dt> digunakan untuk <dl> Seterusnya

    🎜< kod ><thead>, <tbody>, <tfoot>, <tr>, < ;td> Digunakan di bawah <table>; 🎜🎜🎜Kekangan bersarang yang ketat🎜
      🎜elemen Tahap sebaris, yang hanya boleh mengandungi teks atau elemen Tahap sebaris yang lain 🎜🎜<a> tidak boleh menyusun elemen interaktif <a>, <butang> >, < kod><pilih>, dsb.; 🎜🎜<p> tidak boleh menempatkan elemen peringkat blok <div>, < h1>~<h6>, <p>, <ul>/<ol>/<li>,< code>< ;dl>/<dt>/<dd>, <form>, dsb. 🎜🎜🎜Atribut Boolean🎜🎜Dalam spesifikasi HTML5, atribut seperti disabled, checked dan selected tidak perlu menetapkan nilai. 🎜
      <input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>
      🎜🎜🎜 🎜