convenções de codificação HTML Bootstrap

Seguinte: Bootstrap padrões CSS codificação

gramática

Com dois espaços em vez de separadores (separador) - Esta é a única maneira de garantir uma abordagem coerente para mostrar em todos os ambientes.
elementos aninhados deve ser recuado uma vez (ou seja, dois espaços).
Para a definição de propriedade, certifique-se de que todos usar aspas duplas, nunca use aspas simples.
Não (auto-fechamento) elemento cauda de fecho automático adicionar uma barra - a especificação HTML5 afirmou claramente que isto é opcional.
Não omita (tag de fechamento) tag end opcional (por exemplo, </li> ou </body> ).

exemplo:

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

Para cada uma das primeira linha de páginas HTML Adicionar um modo padrão (modo padrão) declaração, isso pode garantir que você tenha uma exibição consistente em cada browser.

exemplo:

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

propriedade de idioma

De acordo com a especificação HTML5:

É altamente recomendável para especificar o atributo lang elemento raiz html, de modo a definir o idioma correto para o documento. Isso vai ajudar a ferramentas de síntese de fala deve ser usado para determinar a sua pronúncia, ferramentas de tradução vai ajudar a determinar a sua tradução devem respeitar as regras e assim por diante.

Mais informações sobre lang atributo conhecimento a partir desta especificação compreensão da.

Aqui estão tabela de código de linguagem .

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

modo de compatibilidade IE

IE apoio através específica <meta> tag para determinar a versão atual de páginas de renderização do IE deve ser usado. A menos que haja uma forte necessidades especiais, caso contrário é melhor para definir o modo de borda, notificando, assim, o IE usando os mais recentes modelos que ele suporta.

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

Codificação de caracteres

Ao declarar explicitamente a codificação de caracteres, o navegador pode ser assegurada de forma rápida e facilmente determinar prestação conteúdo da página. A vantagem desta é evitar o uso de marca de entidades de caracteres (entidade de caractere) em HTML, o que é consistente com toda a codificação do documento (geralmente usam codificação UTF-8).

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

A introdução de arquivos CSS e JavaScript

De acordo com a especificação HTML5, no momento da introdução de arquivos CSS e JavaScript geralmente não precisa especificar o type atributo como text/css e text/javascript são os seus valores padrão.

ligações especificação HTML5

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

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

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

Prático é rei

Tente seguir padrões HTML e semântica, mas não à custa de praticidade para o preço. Qualquer tempo possível com etiqueta mínimo e manter um mínimo de complexidade.

atributo Order

atributo HTML deve estar em ordem de prioridade na ordem dada abaixo, para garantir a legibilidade do código.

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

classe é usada para identificar componentes altamente reutilizáveis, e devem, portanto, estar no topo. ID é utilizado para identificar componentes específicos, deve ser usado com precaução (tais como marcadores dentro da página), que ficou em segundo lugar.

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

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

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

Boolean (booleano) atributo de tipo

atributo booleano não pode ser atribuída no momento da declaração. Especificações XHTML para a sua atribuição, mas a especificação HTML5 não é necessária.

Para mais informações, por favor consulte o WhatWG sessão ON booleana Atributos :

Boolean atributo do elemento se o valor for verdadeiro, se nenhum valor é falso.

Se for necessário atribuir um valor, consulte a especificação WhatWG:

Se existe o atributo, seu valor deve ser uma cadeia vazia ou [...] atribuir nome canônico, e não adicionar espaços em branco no início e no final.

Simplesmente, não é atribuído.

<input type="text" disabled>

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

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

Reduzir o número de rótulos

Ao escrever código HTML para evitar elemento pai desnecessário. Em muitos casos, isto requer uma iterativo e reconstrução de alcançar. Considere o seguinte caso:

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

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

etiqueta gerada JavaScript

Etiquetas gerado pelo JavaScript para que o conteúdo se torna difícil encontrar, editar e reduzir o desempenho. Tente evitar a evitar.

Anterior: Bootstrap Tutorial v2