HTML(5) Руководство по стилю и кодирование конвенции

❮ Предыдущая Следующая Глава ❯

HTML Кодирование Условные обозначения

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

В период с 2000 по 2010 год, многие веб-разработчики преобразованы из HTML в XHTML.

С XHTML, разработчики были вынуждены писать силу и "well-formed" код.

HTML5 является немного более небрежным, когда дело доходит до кода проверки.

С HTML5, вы должны создать свой собственный Best Practice, Руководство по стилю и кодированию конвенции.

Be Smart и Future Proof

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

В будущем таких программы, как читатели XML, могут читать ваш HTML.

Используя хорошо сформированный "close to XHTML" синтаксис, может быть умными.

Всегда держать свой стиль умный, аккуратный, чистый и хорошо сформирован.

Использование правильного типа документа

Всегда объявляйте тип документа в качестве первой строки в документе:

<!DOCTYPE html>

Если вы хотите консистенции с более низкими метками случае, вы можете использовать:

<!DOCTYPE html>

Используйте нижний регистр имен элементов

HTML5 позволяет микшировать прописные и строчные буквы в именах элементов.

Мы рекомендуем использовать прописные имена элементов:

Смешивание прописные и строчные имена плохо
Разработчики привыкли использовать имена в нижнем регистре (as in XHTML)
Строчный очиститель взгляда
Строчные легче написать

Плохо:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Очень плохо:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Хорошо:

<SECTION>
<p>This is a paragraph.</p>
</SECTION>

Закрыть все элементы HTML

В HTML5, вы не должны закрывать все элементы (for example the <p> element) .

Мы рекомендуем закрыть все HTML-элементы:

Глядя плохо:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Хорошо выглядеть:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Закрыть Пустой HTML Elements

В HTML5, это не является обязательным, чтобы закрыть пустые элементы.

Это допускается:

Это также позволило:

Слэш (/) требуется в XHTML и XML.

Если вы ожидаете программного обеспечения XML доступ к вашей странице, это может быть хорошей идеей, чтобы сохранить его.

Использование нижнего регистра имен атрибутов

HTML5 позволяет микшировать прописные и строчные буквы в именах атрибутов.

Мы рекомендуем использовать строчные имена атрибутов:

Смешивание прописные и строчные имена плохо
Разработчики привыкли использовать имена в нижнем регистре (as in XHTML)
Строчный очиститель взгляда
Строчные легче написать

Глядя плохо:

Хорошо выглядеть:

Цитата Значения атрибутов

HTML5 позволяет значения атрибутов без кавычек.

Мы рекомендуем процитировать значения атрибутов:

Вы должны использовать кавычки, если значение содержит пробелы
Смешение стилей никогда не хорошо
Цитируемые значения легче читать

Это не будет работать, так как значение содержит пробелы:

Это будет работать:

Атрибуты изображения

Всегда используйте alt атрибут с изображениями. Это важно, когда изображение не может быть просмотрено.

Всегда определить размер изображения. Это уменьшает мерцание, потому что браузер может резервировать пространство для изображений, прежде чем они будут загружены.

Пробелы и знаки равенства

Пробелы вокруг знаков равенства является законным:

Но пространство меньше, легче читать, и группы лиц лучше вместе:

Избегайте линии длинного кода

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

Старайтесь избегать строк кода длиной более 80 символов.

Пустые строки и отступы

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

Для удобства чтения, добавить пустые строки для разделения больших или логических блоков кода.

Для удобства чтения, добавить 2 пространства отступа. Не используйте TAB.

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

Ненужные:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>

<p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
</p>

</body>

Лучше:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Таблица Пример:

<table>
<tr>
    <th>Name</th>
    <th>Description</th>
</tr>
<tr>
    <td>A</td>
    <td>Description of A</td>
</tr>
<tr>
    <td>B</td>
    <td>Description of B</td>
</tr>
</table>

Пример списка:

<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>

Опуская <html> и <body> ?

В стандарте HTML5, то <html> тега и <body> тег может быть опущен.

Следующий код будет проверять, как HTML5:

пример

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Попробуй сам "

Мы не рекомендуем опуская <html> и <body> теги.

<html> элемент является корневым документом. Это рекомендуемое место для определения языка страницы:

<!DOCTYPE html>
<html lang="en-US">

Декларирование языка важно для приложений доступности (screen readers) и поисковых систем.

Опуская <html> или <body> может привести к сбою DOM и программного обеспечения XML.

Опуская <body> может привести к ошибкам в старых браузерах (IE9) .

Опуская <head> ?

В стандарте HTML5, то <head> тег также может быть опущен.

По умолчанию браузеры будут добавлять все элементы до <body> , чтобы по умолчанию <head> элемент.

Вы можете уменьшить сложность HTML, путем исключения <head> тег:

пример

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Попробуй сам "

Опуская теги незнаком веб-разработчиков. Необходимо время, чтобы быть установлена в качестве ориентира.

Meta Data

<title> элемент необходим в HTML5. Сделать заголовок как можно более содержательным:

<title>HTML5 Syntax and Coding Style</title>

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

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>

HTML Комментарии

Короткие комментарии должны быть написаны на одной строке, с пробелом после  :

Длинные комментарии, охватывающее множество линий, должны быть написаны с  На отдельных строках:

Длинные комментарии легче наблюдать, если они отступ 2 места.

Таблицы стилей

Используйте простой синтаксис для связывания таблиц стилей (the type attribute is not necessary) :

Короткие правила могут быть записаны сжаты, на одной линии, как это:

p.into {font-family: Verdana; font-size: 16em;}

Длинные правила должны быть написаны на несколько строк:

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

Поместите отверстие кронштейна на одной и той же линии, что и селектор.
Используйте один пробел перед открывающей скобкой.
Используйте 2 пространство отступа.
Используйте двоеточие плюс один пробел между свойством и его значением.
Используйте пробел после каждой запятой или точки с запятой.
Используйте точку с запятой после каждой пары свойство-значение, в том числе и последний.
использовать кавычки значений, только если значение содержит пробелы.
Установите закрывающую скобку на новой линии, без ведущих пробелов.
Избегайте линии более 80 символов.

Добавление пробела после запятой или точки с запятой, является общим правилом во всех видах письма.

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (the type attribute is not necessary) :

Доступ к HTML-элементов с помощью JavaScript

Следствием использования "untidy" стилей HTML, может привести к ошибкам JavaScript.

Эти два JavaScript заявления будут давать различные результаты:

пример

var obj = getElementById("Demo")

var obj = getElementById("demo")

Попробуй сам "

Если возможно, используйте те же соглашение об именах (as JavaScript) в HTML.

Посетите Руководство Стиль JavaScript .

Используйте нижний регистр имен файлов

Большинство веб - серверов (Apache, Unix) чувствительны к регистру об именах файлов:

london.jpg не может быть доступен как London.jpg.

Другие веб - сервера (Microsoft, IIS) не чувствительны к регистру:

london.jpg может быть доступен как London.jpg или london.jpg.

Если вы используете сочетание верхнего и нижнего регистра, вы должны быть очень последовательным.

Если при переходе от случая нечувствительного, к чувствительному серверу случае, даже небольшие ошибки будут нарушать вашу сеть.

Чтобы избежать этих проблем, всегда использовать более низкие имена файлов случая (if possible) это (if possible) .

Расширения файлов

HTML - файлы должны иметь расширение .html (or .htm ) .

CSS файлы должны иметь расширение .css.

JavaScript - файлы должны иметь расширение .js.

Различия между .htm и .html

Там нет никакой разницы между .htm и .html расширениями. Оба будут рассматриваться как HTML с помощью любого веб-браузера или веб-сервера.

Различия являются культурными:

.htm "smells" ранних систем DOS , где система ограниченных расширений для 3 -х символов.

.html "smells" операционных систем Unix , которые не имеют этого ограничения.

Технические отличия

Если URL не указывает имя файла (like http://www.w3ii.com/css/) , (like http://www.w3ii.com/css/) , сервер возвращает имя файла по умолчанию. Общие имена файлов по умолчанию являются index.html, index.htm, default.html и default.htm.

Если ваш сервер настроен только с "index.html" , как по умолчанию имя файла, файл должен называться "index.html" , а не "index.htm." .

Однако серверы могут быть настроены более одного файла по умолчанию, и как правило, вы можете создать столько по умолчанию имена файлов по мере необходимости.

Во всяком случае, полное расширение для HTML-файлов .html, и нет никаких причин, она не должна быть использована.

❮ Предыдущая Следующая Глава ❯