Последние учебники веб-разработки
×

HTML5 Руководство

HTML ГЛАВНАЯ HTML Введение HTML редакторы HTML базовый HTML элементы HTML Атрибуты HTML Заголовки HTML Пункты HTML Стили HTML форматирование HTML цитаты HTML Компьютерный код HTML Комментарии HTML Цвета HTML CSS HTML связи HTML Изображений HTML таблицы HTML Списки HTML Блок и строковые элементы HTML Классы HTML раскладка HTML отзывчивый HTML Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

HTML формы HTML Форма Элементы HTML Типы входных данных HTML Входные атрибуты

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

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, это не является обязательным, чтобы закрыть пустые элементы.

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

<meta charset="utf-8">

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

<meta charset="utf-8" />

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

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


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

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

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

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

Глядя плохо:

<div CLASS="menu">

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

<div class="menu">

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

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

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

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

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

<table class=table striped>

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

<table class="table striped">

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

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

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

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

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px ">

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

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

<link rel = "stylesheet" href = "styles.css">

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

<link rel="stylesheet" href="styles.css">

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

При использовании редактор 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 Комментарии

Короткие комментарии должны быть написаны на одной строке, с пробелом после <!-- and a space before --> :

<!-- This is a comment -->

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

<!--
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

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


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

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

<link rel="stylesheet" href="styles.css">

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

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) :

<script src="myscript.js">

Доступ к 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, и нет никаких причин, она не должна быть использована.