Безграмотный link php. Атрибут rel=" " и его значение stylesheet

Урок №8
Внедряем CSS-код, с помощью тега

Рассмотрим третий способ внедрения CSS-кода в HTML-документ: Внедрение с помощью тега

Итак, мы узнали что с помощью тегов можно изменять внешний вид тегов на одной странице , с помощью глобального атрибута style=" " , можно изменить внешний вид конкретного тега .

Но что делать, если нужно изменить внешний вид тегов на всех страницах сайта одновременно? Для этого, нам понадобится тег , его нужно поместить в голову каждого HTML-документа. Тег должен ссылаться на , для этого у него имеется атрибут href=" " .

Создайте на рабочем столе папку Мой сайт , в папке создайте три HTML-файла:
index.html
polyarnyi-volk.html
polyarnaya-sova.html
и один CSS-файл:
style.css

В HTML-файлах, разместите следующий HTML-код:
index.html

Страница о снежном барсе Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.

Охотится снежный барс, в основном, на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется в районе около 10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов повсеместно запрещена.

Снежный барс Полярный волк Полярная сова

polyarnyi-volk.html

Страница о полярном волке Полярный волк

Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на обширных пространствах северных регионов, которые пять месяцев в году, погружены в темноту. Чтобы выжить, волк приспособился есть практически любой корм, который только попадается ему на пути.

Полярные волки хорошо усвоились к жизни в Арктике: они могут годами жить при минусовой температуре, месяцами не видеть солнечного света и неделями оставаться без пищи. Длина волка составляет 100-150 см, высота в холке может достигать 100 см, а масса у самцов переваливает за 100 кг. Продолжительность жизни полярного волка около 7 лет. В его рацион входят: леминги, зайцы, овцебыки, олени и птицы.

Снежный барс Полярный волк Полярная сова

polyarnaya-sova.html

Страница о полярной сове Полярная сова

Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия.

Полярная сова обитает обычно в открытой местности, в лесах встречается редко. Питается в основном, мелкими грызунами: леммингами, в год может съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие хищники, птицы, рыба и даже падаль.

Снежный барс Полярный волк Полярная сова

Теперь, для того чтобы изменить цвет заголовка, абзаца, ссылки и т.д., сразу на всех страницах сайта, достаточно лишь внести изменения в одном файле: style.css

Давайте сделаем текст в абзацах p всех страниц, зелёным. Для этого в style.css , вместо значения blue , впишем значение green

P { color: green; }

Теперь цвет текста в абзацах, всех страниц сайта , между тегами стал зелёным.

Задание: сделайте цвет ссылок а, оранжевым orange

Атрибут rel=" " и его значение stylesheet

Aтрибут rel=" " тега link указывает браузеру на то, какой тип файла будет загружаться в HTML-страницу, значение stylesheet указывает на то, что будет загружаться CSS-файл.

За три предыдущих урока, мы изучили три способа внедрения CSS-кода в HTML-документ:

Внедрение с помощью атрибута style=" " , влияет на один тег, данный способ также еще называют встроенным

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

Внедрение с помощью тега , влияет на весь сайт, данный способ также еще называют внешним

Вам понравились уроки? Поддержите проект "Учебники для вебмастера" !
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 50 руб.

Статья обновлена: 5 Фев 2016

, .

Содержимое контейнера не отображается напрямую на экране, за исключением тега , устанавливающего заголовок окна web-страницы.

Тег

Тег задает название web-страницы, которое выводится в заголовке окна или во вкладке браузера. Является обязательным для любого HTML-документа. Название web-страницы должно отражать суть ее содержимого.

Пример Пример тега TITLE ... Тег

Тег устанавливает связь с внешним файлом, который имеет отношение к текущему html-документу.

Контейнер .

Пример ...

В этом примере подключается внешний файл стилей style.css и устанавливается иконка сайта favicon.ico.

Атрибуты тега В качестве значения можно также использовать медиа-запросы . Например, чтобы css-файл не влиял на вид страницы на мобильных устройствах: rel Отношение между текущим документом и связанным файлом.

alternate	альтернативный вариант документа (например, страница для печати или перевод);
author	ссылка на страницу автора документа;
help	ссылка на документ помощи;
icon	иконка сайта (часто используют с shortcut);
licence	ссылка на информацию об авторских правах;
next	ссылка на следующий документ в серии;
pingback	ссылка на адрес Пинг-бэк сервера, который обрабатывает Пинг-бэки в текущем документе;
prefetch	указывает, что конечный документ должен кэшироваться;
prev	ссылка на предыдущий документ в серии;
search	ссылка на поисковый инструмент;
sidebar	ссылка на документ для отображения в боковой панели браузера (если она есть);
stylesheet	ссылка на файл стилей.

sizes Размер иконок для визуального отображения (только для rel="icon").
Значение: ширина иконки в пикселях без указания единиц, латинская буква х в любом регистре, высота иконки. Если иконок несколько, то можно задавать их размеры через пробел. Ключевое слово any показывает, что иконка может масштабироваться в любой размер. Новый атрибутом для тега в HTML 5. type MIME-тип данных связанного файла.
Возможные значение атрибута: Тег

Тег определяет метаданные, которые предназначены для браузеров и поисковых систем. Чаще всего атрибуты любого метатега сводятся к парам «имя=значение».

Контейнер может содержать несколько тегов .

Пример ...

В этом примере устанавливается кодировка UTF-8, имя автора HTML-документа и автоматическая перезагрузка страницы через 30 секунд.

Для сайтов на русском языке возможно применение одной из следующих двух кодировок: Windows-1251 или UTF-8. Главное отличие кодировок – это используемый набор символов. Кодировка Windows-1251 однобайтовая, т.е. представить в ней можно только 255 символов (для кириллицы этого вполне достаточно). В UTF-8 можно представить намного больше символов, т.к. используются последовательности длиной до 6 байт. Символ русского языка в кодировке UTF-8 занимает 2 байта.

Если документ содержит только буквы русского алфавита и никаких других символов, то в UTF-8 он станет в два раза больше. Если сайт имеет одну версию – русскую, то нет смысла использовать UTF-8, будет вполне достаточно Windows-1251. Но если имеются версии на других языках, то следует выбрать UTF-8.

Не забывайте, что в текстовом редакторе должна быть выбрана та же кодировка, что указана в charset.

Атрибуты тега

charset	Кодировка документа. Атрибут введен в HTML5 и предназначен для сокращения формы тега , которая задавала кодировку в предыдущих версиях HTML.
content	Значение атрибута, заданного с помощью name или http-equiv . Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.
http-equiv	Определяет заголовок HTTP, которому принадлежит информация. Например: Другие возможные приведелы в примерах ниже.
name	Определяет имя метатега для пары «имя=значение». Например:

Записать информацию (Cookie) на машине клиента:

Метатеги можно хранить во внешнем файле.

Необязательный атрибут тега profile указывает на внешний файл метатегов. В качестве значения этого атрибута указывается URL данного файла. Например.

Описание

HTML тег определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента . Чаще всего тег используется для подключения внешних таблиц стилей:

Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css" .

Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется:

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется "предварительное получение страницы". Чтобы сделать это, используется тег с атрибутом rel="prefetch" , а также указывается целевая страница, которая будет заранее загружена на компьютер.

Такая запись позволит заранее закешировать страницу tag_p.php на компьютере, пока вы читаете содержимое текущей страницы. Вы можете использовать тег для предварительной загрузки любого количества страниц вашего собственного сайта или любых других из интернета.

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд.).

Атрибуты href: Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса). hreflang: Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут hreflang используется только совместно с атрибутом href . media: Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут media может принимать сразу несколько значений, разделяемых между собой пробелами. rel: Указывает связь между текущим документом и документом, на который ведет ссылка.

alternate - ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
author - определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
canonical - позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег с атрибутом rel="canonical" .
Атрибут href , в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной:
first - указывает ссылку, ведущую на первый документ из последовательности документов.
help - ссылка на документ со справкой.
icon - определяет путь к иконке, которая будет использована для текущего документа.
last - указывает ссылку, ведущую на последний документ в последовательности документов.
licence - ссылка на сведения об авторских правах для документа.
next - указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
prefetch - указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev - указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
search - ссылка на поиск для документа.
stylesheet - определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.

sizes: Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , может принимать следующий значения:

ширинаXвысота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинаxвысота (размеры иконки определяются в пикселях), пример:
any - иконка может масштабироваться до любого размера.

type: Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом href .

Тег так же поддерживает

Элементы, располагающиеся в секции head не отображаются явно на странице и используются для служебных функций.

В секции head могут располагаться скрипты, инструкции об оформлении страницы и различная мета информация о данном HTML документе.

Следующие элементы должны обязательно располагаться в секции head: , , ,, и .

Элемент title

С помощью элемента Вы можете задать заголовок HTML документа. Элемент title обязательно должен присутствовать во всех HTML документах.

Элемент title:

Определяет заголовок окна браузера;
Используется как заголовок страницы в результатах выдачи поисковых систем;
Используется как заголовок страницы при добавлении сайта в избранное.

сайт - онлайн учебники по HTML, CSS, JavaScript, jQuery, HDOM, AJAX.

Элемент meta

Метаданные - это информация о данных находящихся в HTML документе. Пример метаданных: кодировка страницы, краткое описание содержимого, ключевые слова, имя автора, дата последней модификации.

Метаданные не отображаются явно на странице, но используются браузерами и поисковыми системами.

В HTML метаданные HTML документов определяются с помощью тэга . Тэг всегда должен располагаться в секции head.

О кодировке

Для того, чтобы указать браузеру пользователя какая кодировка используется на данной странице необходимо использовать атрибут charset тэга meta.

Обратите внимание: если явно не указать кодировку как в примере выше браузер при отображении страницы будет определять ее автоматически. Если кодировка при этом будет определена не верно пользователь увидит страницу содержащую бессмысленные символы, поэтому кодировка обязательно должна указываться к каждому HTML документу.

Обратите внимание: в HTML5 кодировка может быть задана с помощью нового атрибута charset, например так .

Метаэлементы и поисковые системы

Некоторые поисковые системы во время индексации страницы обращаются к мета элементам.

Например мета элемент ниже определяет описание для HTML документа (данное описание может использоваться поисковыми системами при отображении документа в поисковой выдаче):

Следующий мета элемент задает ключевые слова для документа:

Обратите внимание: в связи с тем, что многие веб-мастеры для поднятия рейтинга выдачи сайта указывали огромное количество ключевых слов не имеющих отношения к их сайту, но пользующихся популярностью поисковые системы были вынуждены прекратить использование keywords для определения ключевых слов страницы.

Элемент link

С помощью тэга Вы можете связать HTML документ с внешним CSS файлом.

Элемент base

С помощью тэга Вы можете задать корневой адрес (адрес, который будет подставляться к относительным ссылкам) и способ открытия ссылок по умолчанию.

Атрибут href используется для задания корневого адреса по умолчанию. По умолчанию корневой адрес равен доменному имени сайта.

Если бы тэг base не был определен мы бы были перемещены на документ "http://www..html".

Ссылка на example.html

Быстрый просмотр

С помощью атрибута target указывается способ открытия ссылок. По умолчанию ссылки открываются в том же окне браузера.

Пришла мне тут как-то мысль освоить PHP, а, как известно, лучший способ изучить язык – это создать на нем велосипед фреймворк. При ковырянии в различных форумах и топиках заинтересовала меня одна методология, которую пропагандируют в уважаемой компании «Яндекс» - БЭМ. Кто ещё не в курсе этой методологии, почитайте на официальной страничке . Так же на Хабре есть публикация от хабраюзера , в котором все объяснятся на конкретном примере. «Яндекс» написали свои модули и скрипты сборки проектов, однако выполнены они все на Node.js, а вот на PHP обнаружить что-то подобное мне не удалось (хотя, признаюсь честно, я особо и не искал). К тому же, PHP, как объектно-ориентированный язык, дает интересные возможности.

СтартСкачиваем с GitHub’а папку BemPHP и кладем её в папку со свои проектом. Дальше подключаем BemPHP.php:
include_once "BemPHP/BemPHP.php";
Если у вас еще нет функции автозагрузки, регистрируем её:
BemPHP::register_autoload();
Теперь давайте создадим свой первый блок. Для этого необходимо в папке BemPHP/blocks/ создать папку с именем блока, например "b-block-name". Собственно всё. Этого уже достаточно что бы можно было загрузить в хранилище блоков объект класса Block с именем b-block-name. Давайте загрузим его:
BemPHP::includeBlocksList("b-block-name");
Конечно загружать каждый блок по отдельности таким образом было бы слишком, поэтому можно написать их через запятую:
BemPHP::includeBlocksList("b-block-1, b-block-2, block-3’);
Обратите внимание, что "block-3’ написан без префикса ‘b-’, это не ошибка, в данном случае все равно будет загружен блок с именем "b-block-3’, если он, конечно, есть. Префикс "b-‘ указывает, что в этой папке находится описание блока, если в папке blocks будет лежать папка которая не начинается с этого префикса, она будет проигнорирована. Указывать префикс в методе includeBlocksList не обязательно.
Перечисление всех необходимых блоков тоже дело довольно трудоемкое, поэтому можно писать маски, например:
BemPHP::includeBlocksList("b-page1*, *input*, *down’);
В данном случае загрузятся все блоки начинающиеся с b-page1, все в названии которых присутствует слово input и все заканчивающиеся на down. Если вам, например, понадобятся все начинающиеся с b-page1 и имеющие input, то запись будет выглядеть так: b-page1*input*. Ну а если вам нужно загрузить все блоки без исключения, то так:
BemPHP::includeBlocksList("*");
Теперь в папку b-block-name можно добавить стили и описание поведения. Для этих целей создаем в папке файлы b-block-name.css и b-block-name.js, они автоматически загрузятся в объект. Стоит отметить, что имена файлов должны совпадать с именем блока, в противном случае они будут игнорированы. Так же во время загрузки произойдет проверка файла b-block-name.css на наличие в нем описания стиля класса ".b-block-name’ и компрессия, то есть удаление лишних пробелов, переносов строк и комментариев.Определение блока Поскольку мы имеем дело с объектно-ориентированным языком, то было бы здорово создавать блоки как объекты средствами PHP. Для этого в папке b-block-name создадим файл b-block-name.php. В этом случае файлы.css и.js будут проигнорированы и всё описание блока будет браться из php-файла.

Use BemPHP\Block; $_blockName_ = "b-block-name"; /* обязательно указать имя блока (оно должно быть уникальным) */ $_blockObj_ = new Block($_blockName_); $_blockObj_->setBlockDir(__DIR__) /*обязательно указать директорию блока, иначе подключение файлов может работать не корректно*/ ->loadCSSFile($_blockName_.".css") /* загружаем данные из css файла (если отправить null, то будет происходить поиск файла $_blockName_.".css") */ ->loadJSFile()/*загрузка файла типа.js*/ ->addCssRule("color:red","hover") /*добавляет в конце описания стиля еще одно правило*/ ->setTag("a") /*добавляем тэг. если тэг не определен то по умолчанию поставиться Block::TAG_DEFAULT*/ ->setAttribute("href","http://tricksterz.ru") /*задаем атрибуты тэга*/ ->setContent("Tricksterz") /*добавляем контент*/ ->addContent("",true) /*добавляем контент в начало*/ ->addContent("") /*добавляем в конец*/ ;
Здесь мы создаем объект класса Block, который при создании будет сохранен в хранилище блоков, указываем директорию где хранятся файлы блока, загружаем файлы (путь указывается относительно директории указанной выше), добавляем правило стиля (второй параметр – это псевдокласс), задаем тэг блока (по умолчанию задается div), добавляем атрибут, и вставляем контент. Стоит отметить два метода – это setContent и addContent. Первый – задает контент удаляя предыдущий, второй добавляет контент, при этом у метода addContent есть второй параметр, который в случае true добавляет контент в начало, а в случае false – в конец существующего контента. По умолчанию false.

Растим дерево Блоки созданы и загружены в хранилище блоков, теперь давайте выведем их на свет. Для этого необходимо подключить модуль Tree и построить БЭМ-дерево:
use BemPHP\Tree; […] echo Tree::html("b-block-name");
В создаваемом html-документе появится запись:
Tricksterz
Все хорошо, вот только у нас нет описания стиля класса ‘.b-block-name’. Для этого в заголовке страницы внутри тэгов style выводим css всех наших блоков:

Аналогично поступаем с js-скриптами:

В дальнейшем эти скрипты можно минимизировать и вывести в отдельные файлы (планируется реализация в релизе 1.2).
Стоит отметить, что метод Tree::html($blockName), возвращает объект, но объект не блока, как такового, а блока в обертке. Нужно это для того, что бы была возможность переопределять блок «на лету». Например код:
echo Tree::html("b-block-name")->setTag("p"); echo Tree::html("b-block-name");
Выведет следующее:

Tricksterz

Tricksterz
То есть сам блок остался не тронутым, просто во время вывода мы переопределили его тэг.
Поскольку Tree::html() возвращает объект, то мы можем присвоить ссылку на него какой-нибудь переменной:
$b_block_name = Tree::html(‘b-block-name’);
В данном случае, если мы переопределим тэг, то он так и останется «жить» в этой переменной, так как мы меняем свойства конкретного объекта обертки:
echo $b_block_name->setTag("p"); echo $b_block_name;
Выведет:

Tricksterz

Для того, что бы вернуть обертку в изначальное состояние, т.е. в состояние изначального блока, нужно использовать метод getDefault():
echo $b_block_name->setTag("p"); // будет тэг p echo $b_block_name->getDefault(); // будет тэг a
Таким образом, можно, например, создать файл где будут описаны все блоки в виде переменных:
$b_menu = Tree::html(‘b-menu’); $b_menu__item = Tree::html(‘b-menu__item’); […]
Подключить его и описывать БЭМ-деревья с подсветкой синтаксиса:
echo $b_menu->setContent($b_menu__item->setContent("Home")->setAttribute("href","#home"). $b_menu__item->setContent("Music")->setAttribute("href","#music"). $b_menu__item->setContent("Video")->setAttribute("href","#video")); Составные блоки «С блоками вроде все понятно, а как же элементы и модификаторы?» - воскликнет внимательный читатель. Дело в том, что элементы и модификаторы по сути те же самые блоки, только они применяются в связке со своими родительскими блоками. Для понимания разберем конкретный пример, который описан в ранее упомянутом мной . Там есть реализация вот такого меню:

Давайте его сделаем. Для начала создаем папку ‘b-menu’ внутри неё b-menu.css с содержанием:
.b-menu { margin:0; padding:0; list-style:none; width:100%; display:table; table-layout: fixed; }
Дальше папка b-link в ней b-link.css:
.b-link { color:#525252; font-size:12px; }
В папке b-link создаем папку модификатора b-link_menu:
.b-link_menu { text-align:center; color:#bfbfbf; cursor:pointer; font-size:14px; height:38px; background-color:#f3f3f3; line-height:38px; border: 1px solid #e7e7e7; display:table-cell; text-decoration: none; }
В папке b-link_menu создаем еще один модификатор b-link_menu_active:
.b-link_menu_active { color:#fefefe; background-color:#29c5e6; border:1px solid #29c5e6; cursor: default; }
Теперь определим параметры блоков, создав в соответствующих папках файлы b-menu.php, b-link.php и b-link_menu_active.php:
//b-menu.php $_blockObj_ = new Block("b-menu"); $_blockObj_->setBlockDir(__DIR__) ->loadCSSFile() ->setTag("nav"); //b-link.php $_blockObj_ = new Block("b-link"); $_blockObj_->setBlockDir(__DIR__) ->loadCSSFile() ->setTag(‘a’); //b-link_menu_active.php $_blockObj_ = new Block("b-link_menu_active"); $_blockObj_->setBlockDir(__DIR__) ->loadCSSFile() ->setTag(‘div’);
А теперь все это добавим к нам на страничку:
//массив названий разделов и ссылок $menu_items_arr = array("HOME"=>"home", "ABOUT US"=>"aboutus", "SERVICES"=>"services", "PARTNERS"=>"partners", "CUSTOMERS"=>"customers", "PROJECTS"=>"projects", "CAREERS"=>"careers", "CONTACT"=>"contact"); // в цикле создаем дерево разделов foreach ($menu_items_arr as $itemName=>$param) { if ($_GET["param"]==$param) $active = " b-link_menu_active"; else $active=null; $menu_items_tree = $menu_items_tree.Tree::html("b-link b-link_menu".$active)->setAttribute("href","?param=".$param)->setContent($itemName); } // оборачиваем дерево разделов в меню $main_menu = Tree::html("b-menu")->setContent($menu_items_tree); echo $main_menu;
Как видите в метод Tree::html() можно добавлять сразу несколько имен блоков через пробел. В этом случае произойдет каскадное переназначение параметров блоков. Например в блоке b-link определен тэг "a", а в блоке b-link_menu_active тэг ‘div’. Если мы пишем Tree::html(‘b-link b-link_menu’) при выводе будет указан тэг ‘a’, потому что в блоке b-link_menu тэг не определен и он будет наследован у предыдущего блока. В случае записи Tree::html(‘b-link b-link_menu b-link_menu_active’) будет указан тэг ‘div’, так как он определен у блока находящегося в конце цепочки. То же самое будет происходить с контентом. С атрибутами будет происходить следующее: если данный атрибут уже есть, то он будет переопределен, если такого атрибута у предыдущего блока не было, то он будет добавлен к тем атрибутам, которые уже были.Плюшки Если вы взгляните на html-код, который у вас получится в результате создания своей страницы, то прочитать его будет трудновато, потому что в нем отсутствуют отступы и переносы строк, но если вам нужно будет посмотреть сгенерированный html какого-нибудь блока, то его можно «подсветить» методом lighting():
echo Tree::html("b-block-name")->lighting();
Тогда в сгенерированном html будет следующее: