convenzioni di codifica HTML Bootstrap
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.