Convenciones de codificación HTML Bootstrap

Siguiente: Bootstrap estándares de codificación CSS

gramática

Con dos espacios en lugar de pestañas (pestaña) - Esta es la única manera de garantizar un enfoque coherente para mostrar en todos los ambientes.
elementos anidados deben tener una sangría una vez (es decir, dos espacios).
Para la definición de la propiedad, asegúrese de que todos utilizan comillas dobles, nunca use comillas simples.
No cierre automático (auto-cierre) de la cola elemento de añadir una barra - la especificación de HTML 5 establece claramente que esto es opcional.
No omita (etiqueta de cierre) etiqueta de cierre opcional (por ejemplo, </li> o </body> ).

Ejemplo:

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

DOCTYPE HTML5

Para cada una de la primera línea de páginas HTML añadir de un modo estándar (modo estándar) declaración, esto puede asegurarse de que tiene una pantalla consistente en cada navegador.

Ejemplo:

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

propiedad de idioma

De acuerdo con la especificación de HTML 5:

Es muy recomendable para especificar el atributo lang elemento raíz html, con el fin de establecer el idioma correcto para el documento. Esto ayudará a las herramientas de síntesis del habla se debe utilizar para determinar su pronunciación, herramientas de traducción le ayudarán a determinar su traducción debe cumplir con las reglas y así sucesivamente.

Más sobre lang atribuir el conocimiento de esta especificación comprensión de.

A continuación se muestran la tabla de códigos de idioma .

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

el modo de compatibilidad de IE

IE de la ayuda a través de determinadas <meta> etiqueta para determinar la versión actual de IE páginas de representación se debe utilizar. A menos que haya una fuerte necesidad especial, de lo contrario lo mejor es establecer el modo de borde, notificando de esta manera la IE utilizando los últimos modelos que soporta.

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

codificación de caracteres

Por declarar explícitamente la codificación de caracteres, el navegador se puede asegurar de forma rápida y fácilmente determinar el contenido de la página de representación. La ventaja de esto es evitar el uso de la marca de las entidades de caracteres (entidad de caracteres) en formato HTML, lo cual es consistente con toda la codificación del documento (generalmente utilizan codificación UTF-8).

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

La introducción de los archivos CSS y JavaScript

De acuerdo con la especificación de HTML 5, en el momento de la introducción de los archivos CSS y JavaScript en general, no es necesario especificar el type atributo como text/css y text/javascript son sus valores por defecto.

enlaces de especificaciones HTML5

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

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

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

Práctico es el rey

Trata de seguir los estándares HTML y la semántica, pero no a expensas de la practicidad para el precio. En cualquier momento es posible con la etiqueta mínimo y mantener un mínimo de complejidad.

atributo Orden

atributo HTML debe estar en el orden de prioridad en el orden que se indica a continuación, para garantizar la legibilidad del código.

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

clase se utiliza para identificar los componentes altamente reutilizables, y por lo tanto debe estar en la parte superior. id se utiliza para identificar los componentes específicos, se debe utilizar con precaución (como los marcadores dentro de la página), que quedó en segundo lugar.

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

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

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

Boolean (booleano) Tipo de atributo

atributo booleano no puede ser asignado en el momento de la declaración. No se requiere especificaciones XHTML para su asignación, pero la especificación de HTML 5.

Para obtener más información, consulte la section WhatWG EN booleana Atributos :

Boolean atribuir elemento si el valor es verdadero, si ningún valor es falso.

Si debe asignar un valor, consulte la especificación WhatWG:

Si existe el atributo, su valor debe ser la cadena vacía o [...] atribuyen nombre canónico, y no añadir espacios en blanco al principio y al final.

Simplemente, no se le asigna.

<input type="text" disabled>

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

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

Reducir el número de etiquetas

Al escribir código HTML para evitar elemento padre innecesaria. En muchos casos, esto requiere un proceso iterativo y la reconstrucción de lograr. Considere el siguiente caso:

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

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

JavaScript etiqueta generada

Etiquetas generados por JavaScript para que el contenido se vuelve difícil de encontrar, editar y reducir el rendimiento. Trate de evitar evitar.

Anterior: Bootstrap Tutorial v2