Мой Справочник | HTML | Основная разметка


<!DOCTYPE html>

<html>

    <head>

    ...Техническая часть страницы...

    </head>

    <body>

    ...Видимый контент страницы...

    </body>

</html>


<!--Комментарии в html-коде-->

DOCTYPE для HTML 4.01


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Основные теги разметки
Теги	Описание	Атрибуты	Описание
<!DOCTYPE html>	Строка декларации версии HTML5
<html>	Является контейнером для html - документов, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>	lang="ru" title="Страница"	-язык текста (русский) на сайте; -всплывающее окно у курсора при загрузке;
<head>	Этот раздел предназначен для заголовка страницы и технической информации, подключения внешних файлов	Не используются	В следующем разделе. Вот он
<body>	Отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т. д.	class="class-name" и ещё...	Для тега body можно задавать различные классы для различных страниц

Stileguide от MDO(Bootstrap) - стиль форматирования

Порядок атрибутов в html-разметке:

class
id, name
src, href, for, type
title, alt

<input class="btn" id="submit-id" type="submit">
<a class="main-link" href="http://ya.ru" title="Yandex">

Порядок свойств CSS:

Позиционирование
- position:
- top:
- right:
- bottom:
- left:
- z-index:
Отображение
- display:
- float:
- height:
- width:
ТипоSVG
- font:
- line-height:
- color:
- text-align:
Декорирование
- background:
- border:
- opacity:
- и другие

Вендерные префиксы


			.main-content {

			    -webkit-box-shadow: 0 1px 2px rgba(50, 50, 50, 0.15);

			       -moz-box-shadow: 0 1px 2px rgba(50, 50, 50, 0.15);

			        -ms-box-shadow: 0 1px 2px rgba(50, 50, 50, 0.15);

			         -o-box-shadow: 0 1px 2px rgba(50, 50, 50, 0.15);

			            box-shadow: 0 1px 2px rgba(50, 50, 50, 0.15);

-webkit- Chrome, Safari, Yandex
-moz- Mozilla Firefox
-ms- Internet Explorer 8
-o- Opera

Последним всегда указывается свойство БЕЗ префиксов

Типовые названия классов (строго с буквы!)
Название	Описание
Основные разделы
main-header	Гл. хэдер
main-footer	Гл. футер
main-content	Гл. контент
main-menu	Гл. меню
main-navigation	Гл. навигация
sidebar	Боковое меню
logo	Логотип
features	Фичи, преимущества
gallery	Галерея
promo	Рекламные фразы
reviews	Отзывы
breadcrumbs	Хлебные крошки
custom	Особый
catalog	Каталог
contacs	Контакты
copyright	Копирайт
social	Соц. сети
slider	Слайдер
active	Активное состояние
user-block	Блок пользователя
Сетка
layout-	Префикс для классов сетки
container	Контейнер
column	Колонка
layout-positioner	Контейнер-центровщик
wrapper	Обёртка
clearfix	Распорка
Контент-боксы
title	Заголовок
description	Описание
annotation	Аннотация
price	Цена
item	Часть, пункт
btn	Кнопка

При присвоении классав html-коде, класс должен отвечать на вопрос не как это выгдядит, а "Что это? (функционал)"
css-код: "Как это выглядит?"

Критерии хорошей вёрстки:

Валидность кода без грубых ошибок;
Нет лишних элементов;
Все <script> подключены перед </body>;
У тегов <img> прописан атрибут alt и указан размер;
Названия полей форм привязаны к полям через <label>;
Для стилизации не использованы #id;
Нет вложенности селекторов больше двух;
Отсутствует транслитерация в названии классов (shapka, korzina и т.д.);
Использовать единый стиль при написании кода;
Кроссбраузерность (сайт отображается одинаково во всех новых браузерах, более-менее выглядит в IE8);
Функционал сайта остаётся рабочим, а контент читаемым, если отключились скрипты (для элементов сайта, работающих на скриптах);

Этапы вёрстки (метод прогрессивного джипега):

HTML-разметка;
Подготовка графики (импорт из Фотошопа);
Сетки (блоки по сеткам);
Стилизация элементов;
Оформление контента (текст);
Оптимизация;

Обновление страницы в браузере:

F5

Перезаргузка страницы (без кеширования) в браузере:

Ctrl + F5 (Google Chrome и IE)
Ctrl + R (Safari, Google Chrome)
Ctrl + Shift + R (Mozilla Firefox)

2 подхода к вёрстке сайтов:

Graceful Degradation (Великая деградация). Вёрстка под самые современные браузеры
Progressive Enhacement (Прогрессивное улучшение). Вёрстка под новые, но с поддрежкой старых, сайт будет более-менее читабилен в старых браузерах, а в новых выглядит красиво со всеми поддерживаемыми дизайнерскими изысками. Предпочтилельный метод