standardy kodowania HTML Bootstrap

Dalej: Bootstrap standardów kodowania CSS

gramatyka

Z dwoma spacjami zamiast kart (karta) - Jest to jedyny sposób, aby zapewnić spójne podejście, aby pokazać we wszystkich środowiskach.
zagnieżdżone elementy powinny być wcięte raz (czyli dwa miejsca).
Dla definicji nieruchomości, upewnij się, że wszyscy używać cudzysłowów, nigdy nie używać apostrofów.
Nie samozamykająca (self-zamykanie) elementem ogon dodać ukośnik - specyfikacja HTML5 jednoznacznie stwierdził, że jest to opcjonalne.
Nie pominąć opcjonalną (zamykający znacznik) Znacznik końca (na przykład, </li> i </body> ).

Przykład:

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

Dla każdej z pierwszej linii strony HTML Dodać tryb standardowy (tryb standardowy) oświadczenie, może to zapewnić, że masz spójnego wyświetlacz w każdej przeglądarce.

Przykład:

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

Obiekt Język

Według specyfikacji HTML5:

Zaleca się, aby określić atrybut lang html element główny, tak aby ustawić odpowiedni język dla dokumentu. Pomoże to mowy narzędzi syntezy powinny być stosowane w celu określenia ich wymowę, narzędzia tłumaczeniowe pomogą ustalić jego tłumaczenia powinny być zgodne z zasadami i tak dalej.

Więcej informacji na temat lang przypisywać wiedzę z niniejszej specyfikacji zrozumienia.

Oto tabela kod języka .

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

tryb zgodności IE

IE wsparcie poprzez konkretnego <meta> należy stosować tag określenia aktualnej wersji stron świadczących IE. O ile istnieje silna specjalne potrzeby, w przeciwnym razie to najlepiej ustawić tryb krawędzi, tym samym powiadamiając IE wykorzystaniem najnowszych modeli wspiera.

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

Kodowanie znaków

By jawnie zadeklarować kodowanie znaków, przeglądarka może być szybko i łatwo określić zabezpieczona strona Zawartość rendering. Zaletą jest to, aby uniknąć stosowania podmiotów postaci znaku (podmiot znaków) w formacie HTML, który jest zgodny z całego kodowania dokumentów (zazwyczaj używają kodowania UTF-8).

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

Wprowadzenie CSS i plików JavaScript

Według specyfikacji HTML5, w momencie wprowadzenia CSS i plików JavaScript na ogół nie trzeba określić type atrybutu jako text/css i text/javascript są ich wartości domyślne.

HTML5 linki Spec

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

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

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

Praktyczne jest królem

Staraj się postępować zgodnie ze standardami HTML i semantyki, lecz nie kosztem praktyczności w cenie. Za każdym razem możliwe przy minimalnym etykiety i utrzymanie minimalnej złożoności.

Atrybut Order

atrybut HTML powinny być w kolejności, w kolejności podanej poniżej, w celu zapewnienia czytelności kodu.

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

Klasa jest używany do identyfikowania wysoce wielokrotnego składników i powinny być w związku z góry. ID służy do identyfikacji określonych składników, należy stosować ostrożnie (takie jak zakładki w obrębie strony), to znalazła się na drugim miejscu.

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

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

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

Wartość logiczna (Boolean) atrybut type

atrybut Boolean nie mogą być przypisane w momencie zgłoszenia. Specyfikacja XHTML dla jego przydziału, ale specyfikacja HTML5 nie jest wymagane.

Aby uzyskać więcej informacji, zapoznaj się z WHATWG section NA Boolean Atrybuty :

Boolean elementu atrybutu, jeśli ma wartość true, jeśli wartość nie jest fałszywy.

Jeśli trzeba przypisać wartość można znaleźć specyfikację WHATWG:

Jeśli atrybut nie istnieje, jej wartość musi być pusty ciąg znaków lub [...] przypisują nazwę kanoniczną, a nie dodawać spacje na początku i na końcu.

Po prostu, że nie jest przypisany.

<input type="text" disabled>

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

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

Zmniejszyć liczbę etykiet

Podczas pisania kodu HTML, aby uniknąć niepotrzebnego elementu nadrzędnego. W wielu przypadkach wymaga to iteracyjny i rekonstrukcja osiągnąć. Rozważmy następujący przypadek:

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

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

JavaScript generowane etykiety

Tagi generowane przez JavaScript tak, że treść staje się trudne do znalezienia, edytowanie i zmniejszyć wydajność. Staraj się unikać, aby uniknąć.

Poprzedni: Bootstrap v2 Tutorial