Добавлена лекция 2 по веб-программированию
This commit is contained in:
LeterZP
@@ -7,8 +7,25 @@
|
||||
- [Методы HTTP](#Методы%20HTTP)
|
||||
- [Коды состояния](#Коды%20состояния)
|
||||
- [Заголовки HTTP](#Заголовки%20HTTP)
|
||||
- [Кеширование](#Кеширование)
|
||||
- [URI, URN и URL](#URI,%20URN%20и%20URL)
|
||||
- [REST](#REST)
|
||||
- [Разметка страниц. Язык HTML](#Разметка%20страниц.%20Язык%20HTML)
|
||||
- [HTML](#HTML)
|
||||
- [Структура HTML-документа](#Структура%20HTML-документа)
|
||||
- [HTML-формы](#HTML-формы)
|
||||
- [HTML5](#HTML5)
|
||||
- [Браузер](#Браузер)
|
||||
- [DOM](#DOM)
|
||||
- [Стилизация страниц. Основы CSS](#Стилизация%20страниц.%20Основы%20CSS)
|
||||
- [CSS](#CSS)
|
||||
- [Источники CSS](#Источники%20CSS)
|
||||
- [Структура CSS](#Структура%20CSS)
|
||||
- [Приоритеты стилей](#Приоритеты%20стилей)
|
||||
- [LESS & Sass / SCSS](#LESS%20&%20Sass%20/%20SCSS)
|
||||
- [LESS](#LESS)
|
||||
- [Sass](#Sass)
|
||||
- [SCSS](#SCSS)
|
||||
## Введение
|
||||
|
||||
В основном все держится на 4 вещах:
|
||||
@@ -57,6 +74,9 @@
|
||||
- Request Headers - используется только в запросах клиента
|
||||
- Response Headers - используется только в запросах сервера
|
||||
- Entity Headers - сопровождают любую сущность сообщения
|
||||
#### Кеширование
|
||||
|
||||
*Информация будет добавлена позже*.
|
||||
### URI, URN и URL
|
||||
|
||||
> **URI (Uniform Resource Identifier)** - уникальный идентификатор ресурса - символьная строка, позволяющая идентифицировать ресурс. Строится по форме <схема>:<идентификатор>. Идентификатор определяется в зависимости от схемы.
|
||||
@@ -72,4 +92,108 @@
|
||||
- данные должны передаваться в виде небольшого числа стандартных форматов (к примеру, HTML, XML, JSON)
|
||||
- сетевой протокол должен поддерживать кеширование, не должен зависеть от сетевого слоя, не должен сохранять информацию о состоянии между парами "запрос-ответ"
|
||||
|
||||
Существует подход, противоположный REST, который основан на вызове удаленных процедур (RPC - Remote Process Call).
|
||||
Существует подход, противоположный REST, который основан на вызове удаленных процедур (RPC - Remote Process Call).
|
||||
## Разметка страниц. Язык HTML
|
||||
|
||||
### HTML
|
||||
|
||||
>**HyperText Markup Language** (HTML) - стандартный декларативный язык разметки документов в интернете.
|
||||
|
||||
В основном, он интерпретируется [браузером](#Браузер) и отображается в виде документа. Изначально, он являлся частным случаем SGML (стандартного обобщенного языка разметки).
|
||||
|
||||
Этот язык был разработан [Тимом Бернерсом-Ли](https://ru.wikipedia.org/wiki/Бернерс-Ли,_Тим?ysclid=mu8uowzcj46005688) в 1989-1991 годах.
|
||||
#### Структура HTML-документа
|
||||
|
||||
В начале документа всегда находится строка с объявлением версии HTML. Хотя чаще всего для версии [HTML5](#HTML5) это правило игнорируется, так как такой стандарт используется неявно.
|
||||
|
||||
По синтаксису он очень напоминает [XML](https://ru.wikipedia.org/wiki/XML?ysclid=mu8urdj3jm497572817), и даже существует отдельная нотация [XHTML](https://ru.wikipedia.org/wiki/XHTML?ysclid=mu8urty7p0976864513), которая является частным случаем этого языка. В частности, документ также состоит в основном из элементов, начало и конец которых обозначаются тегами.
|
||||
|
||||
Теги однозначно определяют закрытие или открытие того или иного элемента. Это позволяет вкладывать теги друг в друга, при этом сохраняя строгую структуру. В то же время теги могут быть одинарными (или пустыми) - то есть только открываться, не закрываясь. Также теги могут содержать атрибуты - специальные переменные, указанные в открывающем теге.
|
||||
|
||||
Начало и конец документа обозначаются специальными тегами. Внутри этих тегов должны находится два других тега, которые определяют заголовок и тело документа соответственно.
|
||||
В заголовке чаще всего указывают, помимо самого заголовка, мета-информацию и различные необходимые для работы сайта файлы, к примеру файлы [css](#Стилизация%20страниц.%20Основы%20CSS) или js.
|
||||
#### HTML-формы
|
||||
|
||||
Основное предназначение форм - обмен данными между пользователем и сервером. Приятной особенностью таких форм является то, что они могут работать без JavaScript.
|
||||
|
||||
Сам HTML-документ может содержать любое число форм, но на сервер одновременно может быть отправлена только одна. При этом вложенные формы запрещены.
|
||||
|
||||
Границы формы в документе, как и границы любого другого элемента, задаются тегами. В атрибутах формы можно отдельно указать [метод HTTP](#Методы%20HTTP) и ссылку, куда отправляется форма. При этом в конце формы обязательно должна находится отдельная кнопка для ее отправки.
|
||||
#### HTML5
|
||||
|
||||
HTML5 - как следует из названия, пятая версия спецификации языка HTML. Стандарт такого языка был принят в 2014 году (в то время как HTML4 - в 1999 году).
|
||||
|
||||
Конечно, за это время в язык добавили много новых синтаксических особенностей. В первую очередь, изменения были внесены для более удобного управления мультимедийным содержимым страницы. Это включает в себя добавление таких тегов, как аудио и видео. Несмотря на то, что они сами по себе достаточно просты (в них присутствует всего три кнопки - старт, стоп и перемотка), они универсальны и работают на любом [браузере](#Браузер).
|
||||
|
||||
Помимо этого были добавлены новые семантические теги - замена для стандартных и универсальных. В основном они редко где используются, но иногда могут помочь в решении проблем доступности (к примеру, для слепых) или для более точного пояснения к содержимому тега.
|
||||
|
||||
Также была переработана структура тела HTML. С этой версии он больше не базируется на SGML, но все еще имеет обратную совместимость с HTML4. И формат вводной строки документа тоже изменился.
|
||||
|
||||
В дополнение к этому, были также переработаны формы. С этой версии в ней стали доступны новые поля ввода, новые атрибуты и еще куча других изменений.
|
||||
### Браузер
|
||||
|
||||
>**Браузер** - программа, отображающая HTML-документ в его отформатированном виде.
|
||||
|
||||
На самом деле, о браузере можно говорить с разных точек зрения: можно определять его главным образом через отображение документов, а можно смотреть на него как на runtime для JavaScript.
|
||||
|
||||
Очень важно не путать браузер с поисковиком. Браузер занимается самой отрисовкой документов и чтении динамических сценариев и стилей. В то время как поисковик просто с помощью умных алгоритмов ищет информацию в интернете по заданному запросу. Как главное доказательство их различия, в настройках браузера можно поставить любой другой поисковик.
|
||||
### DOM
|
||||
|
||||
>**Объектная модель документа** (DOM) - это платформо-независимый интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-документа.
|
||||
|
||||
В DOM документ представляется в виде дерева узлов. Узлы связаны между собой отношением "родитель-потомок".
|
||||
|
||||
Основным стандартом в данном случае является [W3C](https://www.w3.org/).
|
||||
|
||||
Чаще всего DOM используется для динамического изменения HTML-страницы и реализации на ней сложных сценариев поведения. Тем не менее, HTML без JavaScript статичен, а вся динамика возможна только при работе вместе с ним.
|
||||
## Стилизация страниц. Основы CSS
|
||||
|
||||
### CSS
|
||||
|
||||
>**Cascade StyleSheets** (CSS) - декларативная технология описания внешнего вида документа, написанного языком разметки.
|
||||
|
||||
В основном CSS используется для задания цветов, шрифтов и других аспектов представления документа. Его основная цель - разделение содержимого документа и его представления. Это, к примеру, позволяет представлять один и тот же документ в различных методах вывода.
|
||||
#### Источники CSS
|
||||
|
||||
Файлы со стилями CSS берутся браузером из разных источников.
|
||||
|
||||
Самым главным образом берутся авторские стили - информация стилей, предоставленная автором страницы. Она состоит из inline-стилей (при котором стиль элемента указывается напрямую в его атрибуте), встроенных стилей (блоки CSS прямо внутри самого документа), а также внешних таблиц стилей (отдельный файл .css).
|
||||
|
||||
Вторыми рассматриваются пользовательские стили. Они представляют собой локальный файл CSS, указанный пользователем в настройках браузера, который заменяет или переопределяет авторские стили.
|
||||
|
||||
Последним является стандартный стиль браузера. Если браузер не смог найти никаких стилей для описания страницы, он использует стиль по умолчанию, который чаще всего выглядит довольно плохо.
|
||||
|
||||
Очень неприятная подводная мина для разработчиков кроется в том, что, хоть пользовательские стили и рассматриваются менее приоритетно, чем авторские, существует специальное правило "important", которое позволяет пользователям игнорировать это правило для определенных элементов и обрабатывать элементы пользовательских стилей приоритетнее авторских.
|
||||
#### Структура CSS
|
||||
|
||||
CSS представляет собой сложную таблицу стилей. Вся эта таблица состоит из различных наборов правил.
|
||||
|
||||
Каждое правило состоит из набора селекторов и блока определения. В данном случае селектор - это те теги, для которых будет активно данное правило. Блок определения состоят из разделенных между собой точкой с запятой пар "ключ: значение". В ключе задается свойство, которое нужно изменить, а в значении - значение, на которое меняется свойство.
|
||||
#### Приоритеты стилей
|
||||
|
||||
Очень сложной темой является приоритеты использования стилей в случае, если к одному элементу подходит сразу несколько стилей. Для CSS существует сложная формула, учитывающая все особенности сравниваемых стилей, по которой он дает итоговый результат того, что показывать. Поэтому, не зная точных характеристик сравниваемых стилей, сложно определить точный итоговый результат.
|
||||
|
||||
Но можно выделить основные критерии приоритетов, которые чаще всего совпадают с результатом формулы.
|
||||
1. Свойство задано при помощи !important.
|
||||
2. Стиль прописан напрямую в теге.
|
||||
3. Наличие идентификаторов (#id) в селекторе.
|
||||
4. Количество классов (:classes) и псевдоклассов (:pseudoclass) в селекторе.
|
||||
5. Количество имен тегов в селекторе.
|
||||
|
||||
Помимо вышеперечисленных приоритетов, также важен относительный порядок расположения свойства в файле: будет использоваться то свойство, что указанно ближе к концу файла.
|
||||
### LESS & Sass / SCSS
|
||||
|
||||
Помимо самого CSS, существуют также надстройки над ним - некоторые дополняющие языки стилей. Они позволяют повысить уровень абстракции CSS-кода и упростить структуру таблиц стилей.
|
||||
|
||||
По сравнению с "обычным" CSS, они позволяют использовать переменные (константы и примеси), вложенные правила, а также математические операторы, благодаря которым нет необходимости выносить вычисления за пределы файла CSS. Также у них есть более мощные возможности по импорту и наследованию стилей.
|
||||
|
||||
Несмотря на то, что браузеры могут не поддерживать такие надстройки, существуют специальный транслятор, который преобразует эти правила в "обычный" и, соответственно, читаемый для браузера CSS.
|
||||
#### LESS
|
||||
|
||||
По своему синтаксису, LESS почти ничем не отличается от CSS, а просто добавляет некоторые новые функции.
|
||||
#### Sass
|
||||
|
||||
Синтаксис у Sass принципиально отличается от CSS и больше похож на таковой у языка программирования Ruby.
|
||||
#### SCSS
|
||||
|
||||
SCSS иногда называют диалектом Sass, только с синтаксисом, похожим на CSS. При этом этот язык наиболее популярен среди надстроек для CSS.
|
||||
Reference in New Issue
Block a user