konvensi coding Bootstrap HTML

Berikutnya: Bootstrap standar CSS coding

tatabahasa

Dengan dua ruang bukan tab (tab) - ini adalah satu-satunya cara untuk memastikan pendekatan yang konsisten untuk menunjukkan di semua lingkungan.
elemen bersarang harus menjorok sekali (yaitu dua ruang).
Untuk definisi properti, pastikan bahwa semua menggunakan tanda kutip ganda, tidak pernah menggunakan tanda kutip tunggal.
Jangan menutup diri (self-closing) elemen ekor menambahkan slash - spesifikasi HTML5 jelas menyatakan bahwa ini adalah opsional.
Tidak menghilangkan tag akhir (closing tag) opsional (misalnya, </li> atau </body> ).

contoh:

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

HTML5 doctype

Untuk masing-masing baris pertama dari halaman HTML Tambah modus standar (modus standar) pernyataan, ini dapat memastikan bahwa Anda memiliki tampilan yang konsisten di setiap browser.

contoh:

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

properti bahasa

Menurut spesifikasi HTML5:

Hal ini sangat dianjurkan untuk menentukan lang atribut elemen root html, sehingga untuk mengatur bahasa yang benar untuk dokumen. Ini akan membantu untuk alat sintesis pidato harus digunakan untuk menentukan pengucapan mereka, alat terjemahan akan membantu menentukan terjemahannya harus mematuhi aturan dan sebagainya.

Lebih dari lang atribut pengetahuan dari ini spesifikasi pemahaman.

Berikut adalah tabel kode bahasa .

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

Modus kompatibilitas IE

dukungan IE melalui spesifik <meta> tag untuk menentukan versi IE halaman render harus digunakan. Kecuali ada kebutuhan khusus yang kuat, jika tidak maka yang terbaik adalah untuk mengatur modus tepi, sehingga memberitahukan IE menggunakan model-model terbaru mendukung.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Pengkodean karakter

Dengan secara eksplisit menyatakan pengkodean karakter, browser dapat diamankan dengan cepat dan mudah menentukan halaman konten rendering. Keuntungan dari ini adalah untuk menghindari penggunaan tanda entitas karakter (karakter entity) di HTML, yang konsisten dengan seluruh encoding dokumen (umumnya menggunakan UTF-8 encoding).

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

Pengenalan CSS dan file JavaScript

Menurut spesifikasi HTML5, pada saat pengenalan CSS dan JavaScript file umumnya tidak perlu menentukan type atribut sebagai text/css dan text/javascript adalah nilai-nilai default.

spek link HTML5

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

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

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

Praktis adalah raja

Cobalah untuk mengikuti standar HTML dan semantik, tetapi tidak dengan mengorbankan kepraktisan untuk harga. Setiap kali mungkin dengan label minimal dan mempertahankan minimum kompleksitas.

atribut Pesanan

atribut HTML harus dalam urutan prioritas dalam urutan yang diberikan di bawah ini, untuk memastikan pembacaan kode.

class
id , name
data-*
src , for , type , href
title , alt
aria-* , role

kelas digunakan untuk mengidentifikasi komponen yang sangat dapat digunakan kembali, dan karena itu harus di bagian atas. id digunakan untuk mengidentifikasi komponen tertentu, harus digunakan dengan hati-hati (seperti bookmark dalam halaman), itu berada di posisi kedua.

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

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

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

Boolean (boolean) jenis atribut

Atribut Boolean tidak dapat ditetapkan pada saat deklarasi. spesifikasi XHTML untuk tugas, tetapi spesifikasi HTML5 tidak diperlukan.

Untuk informasi lebih lanjut, silakan lihat WHATWG sectionTop ON Boolean Atribut :

Boolean atribut elemen jika nilai benar, jika tidak ada nilai adalah palsu.

Jika Anda harus menetapkan nilai, silahkan lihat spesifikasi WHATWG:

Jika atribut ada, nilainya harus string kosong atau [...] atribut nama kanonik, dan tidak menambahkan spasi pada awal dan akhir.

Cukup, itu tidak ditetapkan.

<input type="text" disabled>

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

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

Mengurangi jumlah label

Saat menulis kode HTML untuk menghindari elemen induk yang tidak perlu. Dalam banyak kasus, ini membutuhkan berulang dan rekonstruksi untuk mencapai. Mempertimbangkan kasus berikut:

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

JavaScript dihasilkan label

Tags dihasilkan oleh JavaScript sehingga konten menjadi sulit untuk menemukan, mengedit, dan mengurangi kinerja. Cobalah untuk menghindari untuk menghindari.

Sebelumnya: Bootstrap Tutorial v2