LeterZP
25 KiB
Содержание
- Введение
- Клиент-серверное взаимодействие. Протокол HTTP
- Разметка страниц. Язык HTML
- Стилизация страниц. Основы CSS
Введение
В основном все держится на 4 вещах:
- Hypertext Transfer Protocol (HTTP) - предназначен для передачи гипертекста между клиентом и сервером
- Hypertext Markup Language (HTML) - язык разметки гипертекста
- Cascade StyleSheets (CSS) - язык описания внешнего вида HTML-документов
- JavaScript - язык для написания динамических сценариев, выполняемых на стороне клиента
Клиент-серверное взаимодействие. Протокол HTTP
HTTP
Сам по себе HTTP - протокол прикладного уровня. В его основе лежит технология "клиент-сервер". Он может использоваться в качестве "транспорта" для других протоколов прикладного уровня. Основной объект манипуляций этого протокола - ресурс, на который указывает URI. Обмен сообщениями в этом протоколе идет по схеме "запрос-ответ". Сам по себе протокол не сохраняет состояние (stateless-протокол), поэтому для реализации сессий используется cookies.
Структура запроса HTTP
Первая строка запроса HTTP является стартовой, в ней содержится основное описание необходимого действия (команда). При ее составлении через пробел указывают три основные для протокола вещи: метод, URI и версию протокола HTTP (в формате HTTP/Версия).
За первой строкой следует следующий раздел - заголовки. Этот раздел содержит, как ни странно, заголовки.
Последним разделом запроса является тело (или сущность) сообщения. Чаще всего в запросе тело остается пустым. В теле сообщения может находится что угодно, что необходимо передать с помощью протокола на другую сторону. Вся информация о теле, необходимая другой стороне, должна быть указана в заголовках.
Структура ответа HTTP
Ответ мало чем отличается от запроса. Единственным отличием является стартовая строка. Эта строка составляется тем же образом, что и стартовая строка запроса, перечисляя через пробел основную информацию запроса: версию протокола HTTP (в формате HTTP/Версия), код состояния и пояснение кода состояния. По сути, в пояснении можно указать что угодно, но лучше придерживаться стандартных шаблонов сообщений.
Методы HTTP
Методов HTTP довольно много, поэтому перечислим только используемые чаще всего.
- OPTIONS - определение возможностей сервера
- GET - получение данных с ресурса (запрос содержимого ресурса)
- HEAD - аналог GET, но в ответе не передается (отсутствует) тело
- POST - передача данных ресурсу
- PUT - загрузка содержимого запроса на указанный URI
- DELETE - удаление данных с сервера
Коды состояния
Коды состояния в основном состоят из трёх цифр. Все коды состояния делятся на 5 классов, в соответствии с которыми ставится первая цифра кода.
- 1 - Informational - информационный
- 2 - Success - успешно
- 3 - Redirection - перенаправление
- 4 - Client error - ошибка клиента
- 5 - Server error - ошибка сервера
Заголовки HTTP
Заголовки используются для передачи определенных значений с помощью протокола. В некотором роде, можно думать о заголовках как о входящих переменных. Все они передаются в формате ключ:значение.
Заголовки делятся на 4 группы:
- General Headers - могут включаться в любое сообщение клиента и сервера
- Request Headers - используется только в запросах клиента
- Response Headers - используется только в запросах сервера
- Entity Headers - сопровождают любую сущность сообщения
Кеширование
Информация будет добавлена позже.
URI, URN и URL
URI (Uniform Resource Identifier) - уникальный идентификатор ресурса - символьная строка, позволяющая идентифицировать ресурс. Строится по форме <схема>:<идентификатор>. Идентификатор определяется в зависимости от схемы.
URL (Uniform Resource Locator) - URI, позволяющий определить местоположение ресурса. Может представлять из себя абсолютную ссылку (https://), относительную ссылку (../task.html) и тому подобное.
URN (Uniform Resource Name) - URI, содержащий единообразное имя ресурса (не указывает на его местонахождение). Строится по способу, подобному URI, но начинается с urn, и только после него идет уже сама схема с идентификатором.
REST
REST (Representation State Transformer) - передача состояния представления - подход к архитектуре сетевых протоколов, обеспечивающих доступ к информационным ресурсам. Он описывает взаимодействие между клиентом и сервером, а также между front-end и back-end частями.
Основные концепции REST:
- данные должны передаваться в виде небольшого числа стандартных форматов (к примеру, HTML, XML, JSON)
- сетевой протокол должен поддерживать кеширование, не должен зависеть от сетевого слоя, не должен сохранять информацию о состоянии между парами "запрос-ответ"
Существует подход, противоположный REST, который основан на вызове удаленных процедур (RPC - Remote Process Call).
Разметка страниц. Язык HTML
HTML
HyperText Markup Language (HTML) - стандартный декларативный язык разметки документов в интернете.
В основном, он интерпретируется браузером и отображается в виде документа. Изначально, он являлся частным случаем SGML (стандартного обобщенного языка разметки).
Этот язык был разработан Тимом Бернерсом-Ли в 1989-1991 годах.
Структура HTML-документа
В начале документа всегда находится строка с объявлением версии HTML. Хотя чаще всего для версии HTML5 это правило игнорируется, так как такой стандарт используется неявно.
По синтаксису он очень напоминает XML, и даже существует отдельная нотация XHTML, которая является частным случаем этого языка. В частности, документ также состоит в основном из элементов, начало и конец которых обозначаются тегами.
Теги однозначно определяют закрытие или открытие того или иного элемента. Это позволяет вкладывать теги друг в друга, при этом сохраняя строгую структуру. В то же время теги могут быть одинарными (или пустыми) - то есть только открываться, не закрываясь. Также теги могут содержать атрибуты - специальные переменные, указанные в открывающем теге.
Начало и конец документа обозначаются специальными тегами. Внутри этих тегов должны находится два других тега, которые определяют заголовок и тело документа соответственно. В заголовке чаще всего указывают, помимо самого заголовка, мета-информацию и различные необходимые для работы сайта файлы, к примеру файлы css или js.
HTML-формы
Основное предназначение форм - обмен данными между пользователем и сервером. Приятной особенностью таких форм является то, что они могут работать без JavaScript.
Сам HTML-документ может содержать любое число форм, но на сервер одновременно может быть отправлена только одна. При этом вложенные формы запрещены.
Границы формы в документе, как и границы любого другого элемента, задаются тегами. В атрибутах формы можно отдельно указать метод HTTP и ссылку, куда отправляется форма. При этом в конце формы обязательно должна находится отдельная кнопка для ее отправки.
HTML5
HTML5 - как следует из названия, пятая версия спецификации языка HTML. Стандарт такого языка был принят в 2014 году (в то время как HTML4 - в 1999 году).
Конечно, за это время в язык добавили много новых синтаксических особенностей. В первую очередь, изменения были внесены для более удобного управления мультимедийным содержимым страницы. Это включает в себя добавление таких тегов, как аудио и видео. Несмотря на то, что они сами по себе достаточно просты (в них присутствует всего три кнопки - старт, стоп и перемотка), они универсальны и работают на любом браузере.
Помимо этого были добавлены новые семантические теги - замена для стандартных и универсальных. В основном они редко где используются, но иногда могут помочь в решении проблем доступности (к примеру, для слепых) или для более точного пояснения к содержимому тега.
Также была переработана структура тела HTML. С этой версии он больше не базируется на SGML, но все еще имеет обратную совместимость с HTML4. И формат вводной строки документа тоже изменился.
В дополнение к этому, были также переработаны формы. С этой версии в ней стали доступны новые поля ввода, новые атрибуты и еще куча других изменений.
Браузер
Браузер - программа, отображающая HTML-документ в его отформатированном виде.
На самом деле, о браузере можно говорить с разных точек зрения: можно определять его главным образом через отображение документов, а можно смотреть на него как на runtime для JavaScript.
Очень важно не путать браузер с поисковиком. Браузер занимается самой отрисовкой документов и чтении динамических сценариев и стилей. В то время как поисковик просто с помощью умных алгоритмов ищет информацию в интернете по заданному запросу. Как главное доказательство их различия, в настройках браузера можно поставить любой другой поисковик.
DOM
Объектная модель документа (DOM) - это платформо-независимый интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-документа.
В DOM документ представляется в виде дерева узлов. Узлы связаны между собой отношением "родитель-потомок".
Основным стандартом в данном случае является W3C.
Чаще всего DOM используется для динамического изменения HTML-страницы и реализации на ней сложных сценариев поведения. Тем не менее, HTML без JavaScript статичен, а вся динамика возможна только при работе вместе с ним.
Стилизация страниц. Основы CSS
CSS
Cascade StyleSheets (CSS) - декларативная технология описания внешнего вида документа, написанного языком разметки.
В основном CSS используется для задания цветов, шрифтов и других аспектов представления документа. Его основная цель - разделение содержимого документа и его представления. Это, к примеру, позволяет представлять один и тот же документ в различных методах вывода.
Источники CSS
Файлы со стилями CSS берутся браузером из разных источников.
Самым главным образом берутся авторские стили - информация стилей, предоставленная автором страницы. Она состоит из inline-стилей (при котором стиль элемента указывается напрямую в его атрибуте), встроенных стилей (блоки CSS прямо внутри самого документа), а также внешних таблиц стилей (отдельный файл .css).
Вторыми рассматриваются пользовательские стили. Они представляют собой локальный файл CSS, указанный пользователем в настройках браузера, который заменяет или переопределяет авторские стили.
Последним является стандартный стиль браузера. Если браузер не смог найти никаких стилей для описания страницы, он использует стиль по умолчанию, который чаще всего выглядит довольно плохо.
Очень неприятная подводная мина для разработчиков кроется в том, что, хоть пользовательские стили и рассматриваются менее приоритетно, чем авторские, существует специальное правило "important", которое позволяет пользователям игнорировать это правило для определенных элементов и обрабатывать элементы пользовательских стилей приоритетнее авторских.
Структура CSS
CSS представляет собой сложную таблицу стилей. Вся эта таблица состоит из различных наборов правил.
Каждое правило состоит из набора селекторов и блока определения. В данном случае селектор - это те теги, для которых будет активно данное правило. Блок определения состоят из разделенных между собой точкой с запятой пар "ключ: значение". В ключе задается свойство, которое нужно изменить, а в значении - значение, на которое меняется свойство.
Приоритеты стилей
Очень сложной темой является приоритеты использования стилей в случае, если к одному элементу подходит сразу несколько стилей. Для CSS существует сложная формула, учитывающая все особенности сравниваемых стилей, по которой он дает итоговый результат того, что показывать. Поэтому, не зная точных характеристик сравниваемых стилей, сложно определить точный итоговый результат.
Но можно выделить основные критерии приоритетов, которые чаще всего совпадают с результатом формулы.
- Свойство задано при помощи !important.
- Стиль прописан напрямую в теге.
- Наличие идентификаторов (#id) в селекторе.
- Количество классов (:classes) и псевдоклассов (:pseudoclass) в селекторе.
- Количество имен тегов в селекторе.
Помимо вышеперечисленных приоритетов, также важен относительный порядок расположения свойства в файле: будет использоваться то свойство, что указанно ближе к концу файла.
LESS & Sass / SCSS
Помимо самого CSS, существуют также надстройки над ним - некоторые дополняющие языки стилей. Они позволяют повысить уровень абстракции CSS-кода и упростить структуру таблиц стилей.
По сравнению с "обычным" CSS, они позволяют использовать переменные (константы и примеси), вложенные правила, а также математические операторы, благодаря которым нет необходимости выносить вычисления за пределы файла CSS. Также у них есть более мощные возможности по импорту и наследованию стилей.
Несмотря на то, что браузеры могут не поддерживать такие надстройки, существуют специальный транслятор, который преобразует эти правила в "обычный" и, соответственно, читаемый для браузера CSS.
LESS
По своему синтаксису, LESS почти ничем не отличается от CSS, а просто добавляет некоторые новые функции.
Sass
Синтаксис у Sass принципиально отличается от CSS и больше похож на таковой у языка программирования Ruby.
SCSS
SCSS иногда называют диалектом Sass, только с синтаксисом, похожим на CSS. При этом этот язык наиболее популярен среди надстроек для CSS.