Знакомство с HTML, CSS, JavaScript

Введение

Начнём знакомство с jQuery с повторения (или изучения) основ правильного употребления связки HTML и CSS с небольшой примесью JavaScript.

HTML — о нём стоит помнить две вещи – семантический и правильный.

Семантическая вёрстка

Семантическая вёрстка HTML-документа подразумевает использование тегов по прямому назначению, т.е. если вам нужен заголовок — то вот тег <h1> и собратья, необходимо табличное представление данных — используйте тег <table> и только его.

Иногда, избавляясь от табличной верстки, доходят до абсурда, и тег <table> становится изгоем, и его перестают использовать даже для табличного представления данных. Не стоит повторять эту ошибку.

Забегая чуть-чуть вперёд, стоит упомянуть теги из спецификации HTML5: <article>, <aside>, <header>, <footer>, <menu>, <section> и т.д. — используйте их, не бойтесь.

Старайтесь избегать избыточных элементов на странице, большинство HTML-страниц грешат лишними блочными элементами:

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

Ещё одним обязательным пунктом для создания «правильного» HTML является использование названий классов и идентификаторов, которые однозначно говорят нам о содержимом элемента, а не о каких-либо нюансах оформления. Приведу пример:

Плохо
red, green и т.д.	в какой-то момент захотите дизайн через CSS поменять – и элемент с классом «red» станет синим; или возитесь, бегаете по всем страницам и меняйте red на blue, чтоб потом ещё раз начать по новой
wide, small и т.д.	сегодня широкий, а завтра?
h90w490	наверное, это элемент с высотой 90px и шириной 490px; или я ошибаюсь? а в смартфоне тот же класс влезает в экран?
b_1, ax_9	ничего не говорящие названия, которые завтра вылетят из памяти
color1, color2, ...	иногда встречается для «скинованных» сайтов, но создаются такие классы во имя лени
element1...20	такое тоже встречается и ничем хорошим не пахнет

И примеры правильного именования:

Хорошо
logo, content	логотип, основной контент
menu, submenu	меню и подменю
even, odd	чётный и нечётный элементы списка (хотя для подобных задач проще использовать CSS-операторы :nth-child(even) и :nth-child(odd), опять же из-за возможного в будущем сдвига элементов)
navigation	постраничная навигация
copyright	информация о лицензировании

Есть ещё один момент – это форматирование HTML- и CSS-кода. Я не буду заострять на нём внимание, но весь код в книге будет отформатирован отступами, и, возможно, это даст свои плоды в ваших творениях.

Валидный HTML

Зелёный маркер W3C validator'а – это правильно, и к этому надо стремиться, так что не забывайте закрывать теги да прописывать обязательные параметры. Приведу пример HTML-кода, в котором согласно спецификации HTML 5 допущено шесть ошибок, найдите их:

CSS-правила и селекторы

Теперь приступим к CSS, и начнём, пожалуй, с расшифровки аббревиатуры CSS. Это Cascading Style Sheets, дословно «каскадная таблица стилей», но:

— Почему же она называется каскадной? — представьте себе каскад водопада, вот вы стоите на одной из ступенек каскада с чернильницей в руках, и выливаете её содержимое в воду — вся вода ниже по каскаду будет окрашиваться в цвет чернил. Применив эту аналогию на HTML — создавая правило для элемента, вы автоматически применяете его на все дочерние элементы (конечно, не все правила так работают, но исключения обсудим позже) — то есть, происходит «наследование стилей от элементов-родителей».

— Зачем мне всё это? — работая с jQuery, вы должны «на отлично» читать правила CSS, а также уметь составлять CSS-селекторы для поиска необходимых элементов на странице. Практически все задачи, которые вы будете решать с помощью jQuery, начинаются с поиска необходимого элемента на странице, так что знание CSS-селекторов обязательно.

Но давайте обо всём по порядку, возьмём следующий простенький пример вполне семантического HTML

Это пример простого и правильного HTML с небольшим добавлением CSS. Давайте разберём селекторы в приведённом CSS-коде (я умышленно не выносил CSS в отдельный файл, ибо так наглядней):

body — данные правила будут применены к тегу <body> и всем его потомкам, запомните: настройки шрифтов распространяются вниз «по каскаду»
h1, h2, h3 — мы выбираем теги <h1>, <h2>, <h3>, и устанавливаем цвет шрифта для данных тегов и их потомков
#content — выбираем элемент с «id="content"», настройки отступов не распространяются на потомков, они будут изменяться только для данного элемента
.box — выбираем элемент с «class="box"», настройки отступов не распространяются на потомков, они будут изменяться только для данного элемента

Теперь подробнее и с усложнёнными примерами:

Селектор
h1	ищем элементы по имени тега
#container	ищем элемент по идентификатору «id=container» (идентификатор уникален, значит, на странице он должен быть только один)
div#container	ищем `<div>` c идентификатором «container», но предыдущий селектор работает быстрее, а этот важнее
.news	выбираем элементы по имени класса «class="news"»
div.news	все элементы `<div>` c классом «news» (так работает быстрее в IE8, т.к. в нём не реализован метод `getElementsByClassName()`)
#wrap .post	ищем все элементы с классом «post» внутри элемента с «id="wrap"»
.cls1.cls2	выбираем элементы с двумя классами «class="cls1 cls2"»
h1,h2,.posts	перечисление селекторов, выберем всё перечисленное
.post > h2	выбираем элементы `<h2>`, которые являются непосредственными потомками элемента с классом «post»
a + span	будут выбраны все элементы `<span>` следующие сразу за элементом `<a>`
a[href^=http]	будут выбраны все элементы `<a>` у которых атрибут «href» начинается с «http» (предположительно, все внешние ссылки)

Возвращаясь к нашей аналогии с водопадом, представьте, что умников с чернильницей больше чем один и цвета разные, мы же в результате получим смешение цветов. Но это в жизни, а в CSS работают правила приоритетов:

расчёт происходит по четырём весовым позициям [0:0:0:0]
стили заданные в атрибуте «style=""» имеют наибольший приоритет и получают единицу по первой позиции — [1:0:0:0]
за каждый идентификатор элемента (#id) — [0:1:0:0]
за каждый класс (.class), либо псевдо-класс (:pseudo) — [0:0:1:0]
за каждый тег (<a>, <div>) — [0:0:0:1]
при этом [1:0:0:0] > [0:x:y:z] > [0:0:x:y] > [0:0:0:x]
при равенстве счета — снова тапки у того, кто объявлен последним

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

Разделяй и властвуй

Тут стоит запомнить несколько простых правил:

выносим JavaScript во внешние файлы
никогда не пишем inline обработчиков событий «onclick="some()"»
выносим CSS во внешние файлы
никогда не пишем inline стилей «style="color:red"»
и ещё разок для закрепления – никогда не пишем inline!

Теперь приведу код, за который следует что-нибудь ломать (это пример плохого кода, уточняю для тех, кто не понимает намёков):

Неясно, почему же это плохо? Похоже, вам просто не приходилось менять дизайн для уже готового сайта :) Проясню суть проблемы: вам ставят задачу – «надо поменять цвет шрифта для всех страниц сайта», коих может быть три десятка. Это могут быть не только HTML-файлы, а страницы какого-то шаблонизатора, разбросанные по двум десяткам папок (и это ещё не самый плохой вариант). И тут появляется он — красный абзац. Вероятность услышать «слова поддержки» в адрес автора сего кода будет стремиться к единице. Насчет inline-обработчиков событий ситуация похожа. Вот представьте себе — пишете вы JavaScript-код, всё отлично, всё получается, пока вы не пытаетесь кликнуть по красному абзацу. Он оказывается вам не подвластен, и живёт своей собственной жизнью, игнорируя все ваши усилия. Вы смотрите код, и опять кто-то услышит эти слова...

При применении четырёх правил «красного абзаца» у вас должен будет получиться чистый и предсказуемый HTML код:

Стили можно будет легко повесить на <div> с идентификатором, как, собственно, и обработчик событий для нашего параграфа.