правила кодирования Bootstrap HTML

Далее: Bootstrap стандартов кодирования CSS

грамматика

С двумя пробелами вместо вкладок (TAB) - Это единственный способ обеспечить последовательный подход, чтобы показать во всех средах.
Вложенные элементы должны быть отступом один раз (т.е. два пробела).
Для определения собственности, убедитесь, что все двойные кавычки, никогда не использовать одиночные кавычки.
Не самозакрывания (самозакрывающиеся) элемент хвоста добавьте косую черту - спецификация HTML5 четко указано , что это не является обязательным.
Не опускать необязательный конечный тег (закрывающий тег) (например, </li> или </body> ).

Пример:

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

Для каждой из первой строки HTML-страниц Добавить стандартный режим (стандартный режим) оператор, это может гарантировать, что у вас есть последовательное отображение в каждом браузере.

Пример:

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

Язык недвижимости

В соответствии со спецификацией HTML5:

Настоятельно рекомендуется, чтобы указать атрибут Ланг HTML корневой элемент, таким образом, чтобы установить правильный язык для документа. Это поможет инструментов синтеза речи должны быть использованы для определения их произношение, средства перевода поможет определить его перевод должен соблюдать правила и так далее.

Более подробно о lang атрибутов знания из этой спецификации понимания.

Вот таблица кода языка .

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

Режим совместимости с IE

Поддержка IE с помощью конкретных <meta> следует использовать тег для определения текущей версии рендеринга страниц IE. Если нет сильные особые потребности, в противном случае лучше установить режим края, тем самым уведомляя IE с использованием новейших моделей , которые он поддерживает.

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

Кодировка символов

Явно объявить кодировку, браузер может быть обеспечено быстро и легко определить рендеринг содержимого страницы. Преимуществом этого является то, чтобы избежать использования символьных сущностей знака (символ сущности) в HTML, который согласуется со всей кодировки документа (как правило, используется кодировка UTF-8).

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

Внедрение CSS и JavaScript файлов

В соответствии со спецификацией HTML5, в момент введения CSS и JavaScript файлов обычно не требуется указывать type атрибута как text/css и text/javascript являются их значения по умолчанию.

спецификации ссылки HTML5

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

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

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

Практическая король

Попробуйте следовать стандартам HTML и семантики, но не за счет практичности по цене. Каждый раз, когда это возможно с минимальным ярлыке и поддерживать как минимум сложности.

Порядок атрибутов

HTML атрибут должен быть в порядке очередности в указанном ниже порядке, чтобы обеспечить читаемость кода.

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

Класс используется для идентификации высоко повторно используемых компонентов, и поэтому они должны быть на самом верху. идентификатор используется для идентификации конкретных компонентов, следует использовать с осторожностью (например, закладки внутри страницы), он занял второе место.

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

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

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

Boolean (логический) атрибут типа

Логическое атрибут не может быть назначено на момент декларации. спецификации XHTML для его присвоения, но спецификация HTML5 не требуется.

Для получения дополнительной информации, пожалуйста , обратитесь к WHATWG sectionTop булевых атрибутов :

Логический атрибут элемента, если значение истинно, если значение не является ложным.

Если необходимо присвоить значение, пожалуйста , обратитесь WhatWG спецификации:

Если атрибут существует, то его значение должно быть пустой строкой или [...] каноническое имя атрибута, и не добавляйте пробелы в начале и в конце.

Проще говоря, это не назначается.

<input type="text" disabled>

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

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

Уменьшить количество этикеток

При написании HTML-кода, чтобы избежать ненужного родительского элемента. Во многих случаях это требует итеративный и реконструкции для достижения. Рассмотрим следующий случай:

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

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

JavaScript генерируется этикетка

Теги генерируется JavaScript, так что содержание становится трудно найти, редактировать и привести к снижению производительности. Старайтесь избегать, чтобы избежать.

Предыдущий: Bootstrap v2 Учебник