Skip to content

D
developer-guide
Commit 163d3f30 authored by Тест Карнаухов's avatar Тест Карнаухов
Browse files
Options

fix(html): fix html incorrect code insertion

parent 043a3cb1
Show whitespace changes
Inline Side-by-side
Showing with 22 additions and 35 deletions
1-standarts/1.1.1-html.md
View file @ 163d3f30
...@@ -27,12 +27,11 @@ ...@@ -27,12 +27,11 @@
Старайтесь соблюдать стандарты HTML и семантику, но не за счет практичности. Используйте меньшее количество разметки с наименьшим числом тонкостей, когда это возможно. Старайтесь соблюдать стандарты HTML и семантику, но не за счет практичности. Используйте меньшее количество разметки с наименьшим числом тонкостей, когда это возможно.
### <a name="html-syntax">Синтаксис</a> ### <a name="html-syntax">Синтаксис</a>
- Для вложенных элементов отступы должны быть только табами. В любом редакторе можно задать индивидуальный размер. Оптимальный размер - 4.<br> - Для вложенных элементов отступы должны быть только табами. В любом редакторе можно задать индивидуальный размер. Оптимальный размер - 4.<br>
В этом примере `∙∙` - два пробела, а `――――` - один отступ с табуляцией. В этом примере `∙∙` - два пробела, а `――――` - один отступ с табуляцией.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<div class="block"> <div class="block">
...@@ -46,6 +45,7 @@ ...@@ -46,6 +45,7 @@
``` ```
- Блочные элементы должны иметь перенос на новую строку, один строчный элемент можно оставлять на месте. Если строчных элементов больше одного или контента достаточно много, то следует переносить. - Блочные элементы должны иметь перенос на новую строку, один строчный элемент можно оставлять на месте. Если строчных элементов больше одного или контента достаточно много, то следует переносить.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<div class="block"><div class="block__element">ZK</div></div> <div class="block"><div class="block__element">ZK</div></div>
...@@ -57,8 +57,8 @@ ...@@ -57,8 +57,8 @@
``` ```
- Группа однотипных блоков должна иметь два переноса. - Группа однотипных блоков должна иметь два переноса.
```html
```html
<!-- Плохо --> <!-- Плохо -->
<div class="project"> <div class="project">
<div class="project__name">Lorem</div> <div class="project__name">Lorem</div>
...@@ -82,6 +82,7 @@ ...@@ -82,6 +82,7 @@
``` ```
- Блочные элементы не должны находиться в строчных. - Блочные элементы не должны находиться в строчных.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<span> <span>
...@@ -95,6 +96,7 @@ ...@@ -95,6 +96,7 @@
``` ```
- После закрывающихся тегов не должно быть лишних пробелов и/или табов. Для автоудаления можно настроить свой редактор кода. Для Sublime Text можно посмотреть в репе [sputnik](https://github.com/ZK/sputnik/wiki/Софт). - После закрывающихся тегов не должно быть лишних пробелов и/или табов. Для автоудаления можно настроить свой редактор кода. Для Sublime Text можно посмотреть в репе [sputnik](https://github.com/ZK/sputnik/wiki/Софт).
```html ```html
<!-- Плохо --> <!-- Плохо -->
<div class="block">∙ <div class="block">∙
...@@ -108,6 +110,7 @@ ...@@ -108,6 +110,7 @@
``` ```
- Названия тегов, атрибутов и значений свойств (кроме текстовых данных) должны быть в нижнем регистре. - Названия тегов, атрибутов и значений свойств (кроме текстовых данных) должны быть в нижнем регистре.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<INPUT TYPE="TEXT" VALUE="ZK"> <INPUT TYPE="TEXT" VALUE="ZK">
...@@ -117,6 +120,7 @@ ...@@ -117,6 +120,7 @@
``` ```
- Всегда используйте двойные кавычки `""` для значений атрибутов. - Всегда используйте двойные кавычки `""` для значений атрибутов.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<div class=block> <div class=block>
...@@ -134,6 +138,7 @@ ...@@ -134,6 +138,7 @@
``` ```
- Не добавляйте слэш `/` в конец одиночного тега — в HTML5 он необязателен. - Не добавляйте слэш `/` в конец одиночного тега — в HTML5 он необязателен.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<input type="text" value="ZK"/> <input type="text" value="ZK"/>
...@@ -143,6 +148,7 @@ ...@@ -143,6 +148,7 @@
``` ```
- Не пропускайте необязательные закрывающие теги (например, `</li>`, `</p>` или `</body>`). - Не пропускайте необязательные закрывающие теги (например, `</li>`, `</p>` или `</body>`).
```html ```html
<!-- Плохо --> <!-- Плохо -->
<body> <body>
...@@ -165,11 +171,10 @@ ...@@ -165,11 +171,10 @@
</body> </body>
``` ```
### <a name="html-doctype">HTML5 doctype</a> ### <a name="html-doctype">HTML5 doctype</a>
Укажите в начале каждой вашей HTML-страницы этот тип документа. Это заставит браузер работать в режиме соответствия стандартам, что обеспечит единообразное отображение ваших страниц в разных браузерах. Укажите в начале каждой вашей HTML-страницы этот тип документа. Это заставит браузер работать в режиме соответствия стандартам, что обеспечит единообразное отображение ваших страниц в разных браузерах.
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
...@@ -182,8 +187,6 @@ ...@@ -182,8 +187,6 @@
</html> </html>
``` ```
### <a name="html-lang">Атрибут языка</a> ### <a name="html-lang">Атрибут языка</a>
Из спецификации HTML5: Из спецификации HTML5:
...@@ -199,8 +202,6 @@ ...@@ -199,8 +202,6 @@
Список кодов различных языков на [Sitepoint](http://reference.sitepoint.com/html/lang-codes). Список кодов различных языков на [Sitepoint](http://reference.sitepoint.com/html/lang-codes).
### <a name="html-ie-compatibility-mode">Режим совместимости Internet Explorer</a> ### <a name="html-ie-compatibility-mode">Режим совместимости Internet Explorer</a>
IE поддерживает использование специального `<meta>`-тега, который указывает в режиме совместимости с какой версией IE следует отрендерить страницу. Если обстоятельства не требуют какой-то специальной версии IE, то самым правильным будет заставить браузер использовать режим самой последней версии (**edge mode**). IE поддерживает использование специального `<meta>`-тега, который указывает в режиме совместимости с какой версией IE следует отрендерить страницу. Если обстоятельства не требуют какой-то специальной версии IE, то самым правильным будет заставить браузер использовать режим самой последней версии (**edge mode**).
...@@ -213,8 +214,6 @@ IE поддерживает использование специального ...@@ -213,8 +214,6 @@ IE поддерживает использование специального
Для получения дополнительной информации можно ознакомиться с обсуждением на [Stack Overflow](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e). Для получения дополнительной информации можно ознакомиться с обсуждением на [Stack Overflow](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e).
### <a name="html-encoding">Кодировка символов</a> ### <a name="html-encoding">Кодировка символов</a>
Явно объявив кодировку символов, вы быстро и легко обеспечите правильное отображение вашего контента. При этом, вы сможете избежать использования [символьных сущностей](http://www.w3schools.com/html/html_entities.asp) в вашем HTML-коде, при условии, что их кодировка совпадает с кодировкой документа (как правило, utf-8). Явно объявив кодировку символов, вы быстро и легко обеспечите правильное отображение вашего контента. При этом, вы сможете избежать использования [символьных сущностей](http://www.w3schools.com/html/html_entities.asp) в вашем HTML-коде, при условии, что их кодировка совпадает с кодировкой документа (как правило, utf-8).
...@@ -225,8 +224,6 @@ IE поддерживает использование специального ...@@ -225,8 +224,6 @@ IE поддерживает использование специального
</head> </head>
``` ```
### <a name="html-style-script">Подключение CSS и JavaScript</a> ### <a name="html-style-script">Подключение CSS и JavaScript</a>
Все стили и скрипты должны быть только в отдельных файлах. Встроенных и внедрённых в тег стилей (в атрибуте style) не должно быть. Все стили и скрипты должны быть только в отдельных файлах. Встроенных и внедрённых в тег стилей (в атрибуте style) не должно быть.
...@@ -256,8 +253,6 @@ IE поддерживает использование специального ...@@ -256,8 +253,6 @@ IE поддерживает использование специального
* [Использование тега `style`](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element) * [Использование тега `style`](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element)
* [Использование тега `script`](http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element) * [Использование тега `script`](http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element)
### <a name="html-absolute-and-relative-paths">Абсолютные и относительные пути к ресурсам</a> ### <a name="html-absolute-and-relative-paths">Абсолютные и относительные пути к ресурсам</a>
По умолчанию пути до ресурсов должны быть относительного текущего расположения страницы для просмотра на GitHub Pages. По умолчанию пути до ресурсов должны быть относительного текущего расположения страницы для просмотра на GitHub Pages.
...@@ -268,8 +263,6 @@ IE поддерживает использование специального ...@@ -268,8 +263,6 @@ IE поддерживает использование специального
Подробнее можно почитать на [htmlbook.ru](http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki). Подробнее можно почитать на [htmlbook.ru](http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki).
### <a name="html-file-name">Название файлов</a> ### <a name="html-file-name">Название файлов</a>
Называйте файлы страниц по-английски без ошибок, не используйте кириллицу, транслит и комбинацию транслита и английского. Называйте файлы страниц по-английски без ошибок, не используйте кириллицу, транслит и комбинацию транслита и английского.
...@@ -292,14 +285,10 @@ about.html ...@@ -292,14 +285,10 @@ about.html
contacts.html contacts.html
``` ```
### <a name="html-identificators">Идентификаторы</a> ### <a name="html-identificators">Идентификаторы</a>
Идентификатор - это атрибут с уникальным названием элемента, которое в документе должно быть единственным. Не допускайте элементов с одинаковыми идентификаторами. Идентификатор - это атрибут с уникальным названием элемента, которое в документе должно быть единственным. Не допускайте элементов с одинаковыми идентификаторами.
### <a name="html-attribute-order">Порядок атрибутов</a> ### <a name="html-attribute-order">Порядок атрибутов</a>
Для удобства чтения HTML-атрибуты должны быть указаны именно в этом порядке: Для удобства чтения HTML-атрибуты должны быть указаны именно в этом порядке:
...@@ -311,6 +300,7 @@ contacts.html ...@@ -311,6 +300,7 @@ contacts.html
- `aria-*`, `role` - `aria-*`, `role`
Классы создаются для многократно используемых компонентов верстки, поэтому они идут первыми. Идентификаторы более специфичны и должны использоваться умеренно (например, для закладок на странице), поэтому они следуют вторыми. Классы создаются для многократно используемых компонентов верстки, поэтому они идут первыми. Идентификаторы более специфичны и должны использоваться умеренно (например, для закладок на странице), поэтому они следуют вторыми.
```html ```html
<a class="link" id="toggle" data-modal="toggle" href="javascript:void(0);">Меню</a> <a class="link" id="toggle" data-modal="toggle" href="javascript:void(0);">Меню</a>
...@@ -319,8 +309,6 @@ contacts.html ...@@ -319,8 +309,6 @@ contacts.html
<img class="logo" src="images/logo.png" alt="ZK"> <img class="logo" src="images/logo.png" alt="ZK">
``` ```
### <a name="html-boolean-attributes">Логические атрибуты</a> ### <a name="html-boolean-attributes">Логические атрибуты</a>
Логические атрибуты одни из тех, которые не требуют объявленного значения. XHTML требует от вас задать значение, но в HTML5 нет такого требования. Логические атрибуты одни из тех, которые не требуют объявленного значения. XHTML требует от вас задать значение, но в HTML5 нет такого требования.
...@@ -359,8 +347,6 @@ contacts.html ...@@ -359,8 +347,6 @@ contacts.html
</select> </select>
``` ```
### <a name="html-form">Формы, элементы и атрибуты элементов форм</a> ### <a name="html-form">Формы, элементы и атрибуты элементов форм</a>
- Формы логично должны быть в теге `form`. - Формы логично должны быть в теге `form`.
...@@ -370,6 +356,7 @@ contacts.html ...@@ -370,6 +356,7 @@ contacts.html
- Форма должна иметь атрибуты: - Форма должна иметь атрибуты:
- `action` - для указания адреса отправки данных. - `action` - для указания адреса отправки данных.
- `method` - метод передачи данных, обычно в значении указывается `post`. - `method` - метод передачи данных, обычно в значении указывается `post`.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<form> <form>
...@@ -385,6 +372,7 @@ contacts.html ...@@ -385,6 +372,7 @@ contacts.html
``` ```
- Кнопки подтверждения формы логично должны быть кнопками с атрибутом `type="submit"`, а не ссылками, строчными или блочными элементами. - Кнопки подтверждения формы логично должны быть кнопками с атрибутом `type="submit"`, а не ссылками, строчными или блочными элементами.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<form action="send.php" method="post"> <form action="send.php" method="post">
...@@ -404,16 +392,16 @@ contacts.html ...@@ -404,16 +392,16 @@ contacts.html
- Элементы формы должны иметь атрибуты: - Элементы формы должны иметь атрибуты:
- `name` и `value` - для ключа и значения. - `name` и `value` - для ключа и значения.
- `for` и `id` - для связи надписи и элемента, при клике на надпись элемент будет фокусироваться. - `for` и `id` - для связи надписи и элемента, при клике на надпись элемент будет фокусироваться.
```html ```html
<label for="skype">Skype</label> <label for="skype">Skype</label>
<input id="skype" name="skype" value="zolotoykod.ru"> <input id="skype" name="skype" value="zolotoykod.ru">
``` ```
### <a name="html-links-and-protocol">Ссылки и протоколы</a> ### <a name="html-links-and-protocol">Ссылки и протоколы</a>
- Для ссылок без адреса вместо `#` вставлять `javascript:void(0);`, чтобы страницу не скроллило вверх. - Для ссылок без адреса вместо `#` вставлять `javascript:void(0);`, чтобы страницу не скроллило вверх.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<a href="#">Портфолио ZK</a> <a href="#">Портфолио ZK</a>
...@@ -425,6 +413,7 @@ contacts.html ...@@ -425,6 +413,7 @@ contacts.html
- Если элемент, похожий на ссылку, не является ею и событие клика обрабатывается в JavaScript, то стоит заменить тег `a` на `span` или `div` и убрать атрибуты `href` и `target`, для фокусировки можно задать атрибут `tabindex`. - Если элемент, похожий на ссылку, не является ею и событие клика обрабатывается в JavaScript, то стоит заменить тег `a` на `span` или `div` и убрать атрибуты `href` и `target`, для фокусировки можно задать атрибут `tabindex`.
- Для внешних ссылок нужно добавлять атрибуты `target="_blank"` для открытия в новой вкладке и `rel="nofollow"` для запрета отслеживания. - Для внешних ссылок нужно добавлять атрибуты `target="_blank"` для открытия в новой вкладке и `rel="nofollow"` для запрета отслеживания.
``` ```
<!-- Плохо --> <!-- Плохо -->
Мы пользуемся поисковой системой <a href="http://yandex.ru/">Яндекс</a>. Мы пользуемся поисковой системой <a href="http://yandex.ru/">Яндекс</a>.
...@@ -444,8 +433,6 @@ contacts.html ...@@ -444,8 +433,6 @@ contacts.html
<a href="skype:zolotoykod.ru?chat">Напишите нам в Skype</a> <a href="skype:zolotoykod.ru?chat">Напишите нам в Skype</a>
``` ```
### <a name="html-reducing-markup">Сокращение разметки</a> ### <a name="html-reducing-markup">Сокращение разметки</a>
Всякий раз, когда это возможно, избегайте лишних родительских элементов. Во многих случаях это требует повторения и рефакторинга, но позволяет создать меньшее количество разметки. Посмотрите на следующий пример: Всякий раз, когда это возможно, избегайте лишних родительских элементов. Во многих случаях это требует повторения и рефакторинга, но позволяет создать меньшее количество разметки. Посмотрите на следующий пример:
...@@ -460,8 +447,6 @@ contacts.html ...@@ -460,8 +447,6 @@ contacts.html
<img class="avatar" src="avatars/zolotoykod.png" alt="ZK"> <img class="avatar" src="avatars/zolotoykod.png" alt="ZK">
``` ```
### <a name="html-images">Изображения</a> ### <a name="html-images">Изображения</a>
При размещении изображений следует учитывать то, чем они являются: При размещении изображений следует учитывать то, чем они являются:
...@@ -483,6 +468,7 @@ contacts.html ...@@ -483,6 +468,7 @@ contacts.html
Такие изображения должны быть отдельными файлами и находиться в папке `images/temp/`. Такие изображения должны быть отдельными файлами и находиться в папке `images/temp/`.
- В тегах `img` обязательно должен быть атрибут `alt`. Если изображение не меняет свой размер (не *резиновое*), то нужно его указать в атрибутах `width` и `height`. - В тегах `img` обязательно должен быть атрибут `alt`. Если изображение не меняет свой размер (не *резиновое*), то нужно его указать в атрибутах `width` и `height`.
```html ```html
<!-- Плохо --> <!-- Плохо -->
<img src="images/zolotoykod.png"> <img src="images/zolotoykod.png">
...@@ -493,8 +479,6 @@ contacts.html ...@@ -493,8 +479,6 @@ contacts.html
<img src="images/zolotoykod.png" alt="ZK" width="128" height="64"> <img src="images/zolotoykod.png" alt="ZK" width="128" height="64">
``` ```
### <a name="html-javascript">Взаимодействие HTML и JavaScript</a> ### <a name="html-javascript">Взаимодействие HTML и JavaScript</a>
- Создание разметки с помощью JavaScript делает её менее производительной, сложной для поиска и редактирования. По возможности избегайте этого. - Создание разметки с помощью JavaScript делает её менее производительной, сложной для поиска и редактирования. По возможности избегайте этого.
...@@ -505,9 +489,9 @@ contacts.html ...@@ -505,9 +489,9 @@ contacts.html
- Если в форме элемент удаляется (скрывается), он должен удаляться и из [DOM](http://ru.wikipedia.org/wiki/Document_Object_Model). - Если в форме элемент удаляется (скрывается), он должен удаляться и из [DOM](http://ru.wikipedia.org/wiki/Document_Object_Model).
### <a name="html-comments">Комментирование кода</a> ### <a name="html-comments">Комментирование кода</a>
По мере необходимости можно писать комментарии для пометки назначения какого-либо куска кода или причины выбора того или иного решения, которое может быть неочевидными, пометки для заказчика, если код при определённых условиях должен быть изменён. Комментировать всё не нужно. По мере необходимости можно писать комментарии для пометки назначения какого-либо куска кода или причины выбора того или иного решения, которое может быть неочевидными, пометки для заказчика, если код при определённых условиях должен быть изменён. Комментировать всё не нужно.
Для русскоязычных проектов комментарии пишутся на русском языке, для иностранных - на английском. Для русскоязычных проектов комментарии пишутся на русском языке, для иностранных - на английском.
[Далее: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.1.2-pug.md)
\ No newline at end of file
1-standarts/1.1.2-pug.md
View file @ 163d3f30
...@@ -231,3 +231,6 @@ mixin tools(list) ...@@ -231,3 +231,6 @@ mixin tools(list)
</li> </li>
</ul> </ul>
``` ```
[Пред.: HTML](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.1.2-html.md)
[Далее: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.2.1-css.md)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment