convenzioni di codifica HTML Bootstrap

Successivo: Bootstrap standard di codifica CSS

grammatica

Con due spazi invece di schede (tab) - Questo è l'unico modo per garantire un approccio coerente per mostrare in tutti gli ambienti.
Elementi nidificati dovrebbero essere rientrati una volta (cioè due spazi).
Per la definizione della proprietà, assicurarsi che tutti usare le virgolette, non usare mai apici.
Non a chiusura automatica (self-closing) elemento di coda aggiungere una barra - la specifica HTML5 chiaramente affermato che questo è opzionale.
Non omettere (tag di chiusura) tag di chiusura opzionale (per esempio, </li> o </body> ).

esempio:

<!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

Per ciascuna della prima linea di pagine HTML aggiungere una modalità standard (modalità standard) dichiarazione, questo può assicurarsi di avere una visualizzazione coerente in ogni browser.

esempio:

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

immobili lingua

In base alla specifica HTML5:

Si raccomanda vivamente di specificare il lang elemento radice html, in modo da impostare la lingua corretta per il documento. Ciò contribuirà a strumenti di sintesi vocale dovrebbe essere usato per determinare la loro pronuncia, gli strumenti di traduzione aiuteranno a determinare la sua traduzione deve rispettare le regole e così via.

Altro su lang attribuire conoscenze da questa specifica comprensione.

Ecco la tabella dei codici di lingua .

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

modalità di compatibilità di IE

Supporto IE attraverso specifiche <meta> tag per determinare la versione corrente di IE pagine di rendering dovrebbe essere usato. A meno che non vi è una forte necessità particolari, altrimenti è meglio impostare la modalità di bordo, notificando così l'IE utilizzando gli ultimi modelli supportati.

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

Codifica dei caratteri

Con dichiarare in modo esplicito la codifica dei caratteri, il browser può essere fissato rapidamente e facilmente determinare pagina il rendering del contenuto. Il vantaggio di questo è quello di evitare l'uso del marchio entità carattere (entità carattere) in HTML, che è coerente con l'intero codifica del documento (in genere utilizzano codifica UTF-8).

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

L'introduzione di file CSS e JavaScript

In base alla specifica HTML5, al momento dell'introduzione di file CSS e JavaScript in genere non è necessario specificare il type attributo come text/css e text/javascript sono i loro valori di default.

HTML5 link spec

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

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

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

Pratico è re

Provate a seguire gli standard HTML e la semantica, ma non a scapito della praticità per il prezzo. Qualsiasi tempo possibile con etichetta minima e mantenere un minimo di complessità.

attributo order

attributo HTML dovrebbe essere in ordine di priorità nell'ordine indicato di seguito, al fine di garantire la leggibilità del codice.

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

classe viene utilizzata per identificare i componenti altamente riutilizzabili, e dovrebbe pertanto essere al top. ID viene utilizzato per identificare i componenti specifici, deve essere usato con cautela (come ad esempio i segnalibri all'interno della pagina), è venuto al secondo posto.

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

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

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

Booleana (boolean) attributo type

attributo booleano non può essere assegnato al momento della dichiarazione. specifiche XHTML per la sua assegnazione, ma la specifica HTML5 non è richiesto.

Per ulteriori informazioni, si prega di fare riferimento alla WHATWG section ON booleano attributi :

Booleano attributo elemento se il valore è vero, se nessun valore è falso.

Se si deve assegnare un valore, fare riferimento specifiche WHATWG:

Se esiste l'attributo, il suo valore deve essere la stringa vuota o [...] attributo nome canonico, e non aggiungere spazi bianchi all'inizio e alla fine.

Semplicemente, non viene assegnato.

<input type="text" disabled>

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

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

Ridurre il numero di etichette

Quando si scrive il codice HTML per evitare inutili elemento padre. In molti casi, questo richiede una iterativo e ricostruzione di raggiungere. Si consideri il seguente caso:

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

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

JavaScript etichetta generata

Tag generati da JavaScript in modo che il contenuto diventa difficile da trovare, modificare e ridurre le prestazioni. Cercate di evitare di evitare.

Precedente: Bootstrap Tutorial v2