Step 3 (S-44723)

From Stepik Wiki
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14820/step/3

Step 3 (S-44723) 1.png

[00:00 - 00:16] в чем принципиальное отличие от xml разметки в том что есть семантика а что такое семантика это значит что есть четкое описание как каждый так должен отображаться то с у каждого тэга есть какое то значение


[00:16 - 00:31] xml теги просто используется для задания структура документа никакого значения у них нет у каждого человека есть свое значение и а описание того как браузер должен реагировать на это так


[00:31 - 00:46] давайте рассмотрим какие существуют ли вообще так много мы рассмотрим основные которые часто встречаются а 1 с чего следует начать это таки верхнего уровня это структурное таки собственно говоря так что м л


Step 3 (S-44723) 2.png

[00:46 - 01:03] это обертка весь документ должен находиться а внутри тэга что маяк а вот только что мы иногда указывается атрибут language язык


[01:03 - 01:20] это позволяет браузеру сопоставить язык документа а с языком на котором там допустим


[01:20 - 01:36] предпочитает пользователя предложить например перевод внутри а могут находиться 2 м информация которая идет с документом заголовок документа


[01:36 - 01:53] не виден в принципе в браузере то есть он невидимый тег body наоборот содержат а основное тело страницы внутри тэга базе содержатся то что видит пользователь


[01:53 - 02:09] какие теги могут быть внутри а также в 1 очередь это title title задает заголовок окна браузера это тот заголовок который увидеть когда окно перетаскивать по экрану когда оно светит


[02:09 - 02:24] а в систем трей если вы используете linux windows и там уже давно не видно его а но тем не менее title отображается не на основной странице именно в заголовке окна браузера мета


[02:24 - 02:40] авторский метод содержится дополнительная информация для юзер агентов а причем не только для браузера то есть ноут и для других агентов которые могут получить данной информации ну 2 распространенных пример например


[02:40 - 02:59] мята name description это описание страница а человеку читаем описание страница а этот тег используется некоторое время назад использовался


[02:59 - 03:15] поисковыми системами а для поиска по страницам с предполагается что в этом теги вы напишете какой то человек и читаем описание а что содержится на данной странице коротко и для чего она предназначается


[03:15 - 03:34] часто это лишь показывалась в сниппет то в поисковой выдаче то есть указывалось название страница и вот этот description а сейчас знаешь поисковая система работает очень сложным алгоритмам и учитывают они или нет это так а это можно только угадать


[03:34 - 03:50] 2 вариант использования t гамета а для перекрытия начнет задание теперь заголовков а зачем то нужно дело в том что человек который разрабатывает


[03:50 - 04:07] а что мои документы вэбмастер у него не всегда есть возможность повлиять на заголовки которые отдает сер а просто чисто организационно допустим не за невозможности их менять но иногда вы мастера требуется поставить некоторые заголовки


[04:07 - 04:24] например указать правильный content type если сервер а дает какой то либо файл загружается вообще с диска что весьма вероятен когда он загружается не через не по протоколу


[04:24 - 04:42] браузер открывает файлы с диска а вы мастером нужно быть заголовок хттп в таком случае используется тег с атрибутами степи круифф где указывается имя заголовка


[04:42 - 04:57] собственно говоря содержимое заголовка а это вещь полезность вы открываете файл с диска иногда сервер а


[04:57 - 05:13] не отдает charset кодировка документ указывает content type но не отдает а в таких случаях можно написать следующий тег


[05:13 - 05:30] а вот такой тег который укажет


[05:30 - 05:49] кодировка документов для того чтобы пользователь видел не кракозябры а символы в нормальной кодировке что еще бывает часто указывают загрузку связанных ресурсов в частности загрузку ссс


Step 3 (S-44723) 3.png

[05:49 - 06:06] и скриптов загрузка цп с делается с помощью тэга линк а причем важный момент у тэга линк есть атрибут рфпл вообще t link он указывает а у него такой


[06:06 - 06:24] значение указания связанных ресурсов связаны ресурсы мог быть совершенно разными ресурсами поэтому важен атрибут рфпл который указывает что же именно это за ресурс если орел равняется стал she style sheet то связанное ресурсы интерпретируется как все с файл


[06:24 - 06:44] и загружаются сразу в этом файле задается оформления страниц но это не обязательно а может быть указано например интернет это означает что по указанному лежит некоторая а


[06:44 - 07:01] альтернативная представления данного документа например если вы смотрите страницу с новостями то есть ленту новостей а здесь может быть ссылка на файл в котором содержатся те же самые новости то есть альтернативные представления данных страниц а


[07:01 - 07:20] т к скрипт так скрипт осуществляет загрузку java script color у него есть атрибуты ассорти то есть указания по какому урлу нужно загрузить с какого числа нужно загрузить


[07:20 - 07:36] javascript файл и есть множество других атрибутов частности charset а charset нужен если у вас файл вдруг находится в другой кодировке нежели а кодировка основной странице


[07:36 - 07:53] и в этом файле присутствуют какие то строки чтобы кодировка не побилось нужно указывать час это то async оказывается атрибут async кстати вот без значение просто 1 имя атрибута


[07:53 - 08:11] этот атрибут указывает что javascript нужно грузить асинхронно а обычно браузер когда доходит до атрибуты скрипт он приостанавливает парсинг документа и загружает javascript выполняет его после чего продолжает


[08:11 - 08:26] документы async указывает на то что останавливаться не следует а скрипт загружается фоне вот такие вот а атрибуты могут находиться в таких нет а


Step 3 (S-44723) 4.png

[08:26 - 08:41] кстати о рекомендациях best practices обещано по поводу тегов линта тегов скрипт есть такая рекомендация а илинка скрит они могут размещаться в х но в принципе могут размещаться и в других местах то есть


[08:41 - 08:56] вполне нормально разместить загрузку сс и внутри создал специальную 3 рекомендация заключается в следующем так link нужно ставить как можно раньше в теле документа например вот а внутри хет


[08:56 - 09:11] а наоборот как можно позже в самом низу зачем это сделано зачем так нужно а дело в том что когда появляются новые стили браузер перерисовывают документ


[09:11 - 09:27] а чем раньше он узнает все возможности которые будут применены к документу чем раньше он все сам загрузит тем меньше ему нужно перерисовывать документ идеальный вариант когда браузер сначала загружается все необходимые стиле а потом начинают


[09:27 - 09:45] отрисовывается что мы а на его выполнение на его парсинг просто требуется время а на небольшое но для пользователя то будет задержка перед отрисовкой поэтому желательно javascript размещать в самом конце страницы чтобы пользователь сначала увидел картинку эта картинка


[09:45 - 10:01] а будет еще не работающая бежал скрипта но буквально через секунду там отработает javascript и картинка станет интерактивным пользователь видит картинку раньше субъективно а быстродействие сайта для него возрастет