Html учебник: Самоучитель HTML4

Содержание

Фреймы | htmlbook.ru

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

Достоинства фреймов

Простота

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

Быстрота

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

А так как фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее.

Размещение

Фреймы предоставляют уникальную возможность — размещение информации точно в нужном месте окна браузера. Так, можно поместить фрейм внизу браузера и независимо от прокручивания содержимого, эта область не изменит своего положения.

Изменение размеров областей

Можно изменять размеры фреймов «на лету», чего не позволяет сделать традиционная верстка HTML.

Загрузка

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

Недостатки фреймов

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

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

Плохая индексация поисковыми системами

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

Внутренние страницы нельзя добавить в «Закладки»

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

Несовместимость с разными браузерами

Параметры фреймов обладают свойством совершенно по разному отображаться в различных браузерах.

Причём противоречие между ними настолько явное, что одни и те же параметры интерпретируются браузерами совершенно по-своему.

Непрестижность

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

Надо отметить, что некоторые приведённые недостатки вполне обходятся. Так, с помощью скриптов можно сделать, что открытый в браузере отдельный документ формируется со всей фреймовой структурой. Поисковые системы также уже лучше индексируют фреймовые документы, чем это было несколько лет назад.

Группировка ячеек HTML таблиц для новичков

Сейчас мы с вами займемся объединением ячеек. Будем объединять их как по горизонтали, так и по вертикали.

Смотрите пример того, что у нас будет получаться:

Ячейка 1	Ячейка 2
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

Таблица, с которой мы будем работать

Сначала я приведу таблицу без объединений, с которой мы будем работать дальше:

<table border="1">
	<tr>
		<td>Ячейка 1</td>
		<td>Ячейка 2</td>
		<td>Ячейка 3</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 5</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 8</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

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

Блок . Как объединить столбцы

Столбцы объединяются с помощью атрибута colspan. При этом на самом деле этот атрибут не объединяет столбцы, а расширяет ячейку по горизонтали. К примеру, запись colspan=»2″ заставит ячейку стать такого же размера по ширине как две ячейки, а colspan=»3″ — как три. Давайте рассмотрим примеры, чтобы понять более подробно, как это работает.

Расширим Ячейку1 на два столбца

Расширим Ячейку1 на два столбца, задав ей атрибут colspan в значении 2. При этом она вытеснит ячейки справа и таблица развалится:

<table>
	<tr>
		<td colspan="2">Ячейка 1</td>
		<td>Ячейка 2</td>
		<td>Ячейка 3</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 5</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 8</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Таблица развалилась (Ячейка3 вылезла справа):

Ячейка 1		Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на два столбца без разваливания таблицы

Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек справа от нашей (это Ячейка2 или Ячейка3 — без разницы):

<table>
	<tr>
		<td colspan="2">Ячейка 1</td>
		<td>Ячейка 2</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 5</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 8</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Таблица больше не разваливается:

Ячейка 1		Ячейка 2
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на 3 столбца без разваливания таблицы

Расширим Ячейку1 на 3 столбца, задав ей атрибут colspan в значении 3. При этом удалим еще одну ячейку справа, чтобы таблица не развалилась:

<table>
	<tr>
		<td colspan="3">Ячейка 1</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 5</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 8</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Ячейка 1
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Блок . Как объединить строки

Кроме атрибута colspan существует также аналогичный атрибут rowspan, который расширяет ячейки по вертикали.

Расширим Ячейку1 на два ряда

Расширим Ячейку1 на два ряда, задав ей атрибут rowspan в значении 2. При этом она вытеснит ячейки из ряда под ней и таблица развалится:

<table>
	<tr>
		<td rowspan="2">Ячейка 1</td>
		<td>Ячейка 2</td>
		<td>Ячейка 3</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 5</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 8</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Таблица развалилась (Ячейка6 вылезла справа):

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 1	Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на два ряда без разваливания таблицы

Чтобы поправить проблему с разваливанием таблицы из предыдущего примера, удалим одну из ячеек из второго ряда (и это не обязательно Ячейка4, которая находится непосредственно под нашей Ячейкой1, можно удалять любую, я удалил ячейку с номером 5):

<table>
	<tr>
		<td rowspan="2">Ячейка 1</td>
		<td>Ячейка 2</td>
		<td>Ячейка 3</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 8</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 1	Ячейка 4	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Расширим Ячейку1 на 3 ряда без разваливания таблицы

Теперь расширим нашу ячейку не на два ряда, а на 3, задав ей rowspan в значении 3. При этом удалим одну из ячеек из третьего ряда (ячейку 7, 8 или 9 — без разницы), чтобы таблица не развалилась:

<table>
	<tr>
		<td rowspan="3">Ячейка 1</td>
		<td>Ячейка 2</td>
		<td>Ячейка 3</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

Расширим еще и Ячейку2 на 2 столбца

Расширим еще и Ячейку2 на 2 столбца в дополнение к первой ячейке. Для этого Ячейке2 добавим colspan в значении 2. При этом удалим Ячейку3, чтобы таблица не развалилась:

<table>
	<tr>
		<td rowspan="3">Ячейка 1</td>
		<td colspan="2">Ячейка 2</td>
	</tr>
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 6</td>
	</tr>
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2
	Ячейка 4	Ячейка 6
	Ячейка 7	Ячейка 9

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Учебник HTML

HTML расшифровывается как Hyper Text Markup Language, т.е. язык гипертекстовой разметки — основной строительный блок веб-страниц, используется для создания и визуального представления веб-станиц.

Язык HTML добавляет разметку в обычный текст. Гипертекст содержит различные ссылки благодаря которым веб-страницы связываются между собой. С помощью HTML каждый может создавать как статические так и динимические сайты. HTML является языком, описывающим структуру и семантику содержимого веб-документа. Содержимое веб-страницы размечается с помощью тегов, представляющих HTML-элементы. Примерами таких элементов являются <html>, <img>, <div> и так далее. Эти элементы формируют строительные блоки для любого веб-сайта.

HTML был изобретён в 1991 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и изначально предназначался для обмена документами между учёными различных университетов. Своим изобретением Тим Бёрнс-Ли заложил основы современной сети Internet.

Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого — почти каждый год выходит новая версия HTML. Версия «HTML 2.0» была первым стандартом HTML спецификации, которая была опубликована в 1995 году. HTML 4.01 является основной версией HTML, которая была опубликована в конце 1999 года, и широко используется в настоящее время. Сегодня наиболее популярной становится версия HTML-5, которая является расширением HTML 4.01, и опубликована в 2012 году.

HTML-документ или веб-страница — это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в угловые скобки <имя тэга>). Веб-страницу можно набрать как в обычном текстовом редакторе (Блокнот, WordPad, Word и т.д.), так и в специализированном, с подсветкой кода (Notepad++, Sublime Text идр.). Документы HTML хранятся в виде файлов с расширением .htm или .html.

Онлайн-примеры в каждом уроке

В процессе изложения материала в каждом уроке будут приводиться примеры, которые помогут вам детально разобраться в каждом коде и, благодаря практике, наслаждаться обучением. С помощью нашего онлайн-редактора HTML, вы можете отредактировать HTML-документ, а затем нажмите в редакторе оранжевую кнопку «Выполнить», которая расположена над левым окном редактора, чтобы увидеть результат. Если вы пользуетесь специализированным HTML-редактором, то, вы можете скопировать пример и посмотреть результаты своего труда в браузере, установленном на вашем компьютере.

Пример HTML: Попробуй сам
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Заголовок страницы</title> </head>   <body>     <h2>Это заголовок</h2>     <p>Это параграф.</p>   </body> </html>
Кликни по кнопке «Попробуй сам» и посмотри как это работает.
Онлайн-примеры HTML
В учебнике HTML для вас подготовлено более 100 онлайн-примеров, благодаря которым вы легко освоите язык разметки. Лучше один раз увидеть, чем сто раз услышать! Теория плюс практика — залог вашего успеха в освоении HTML.
С помощью онлайн-редактора вы сможете редактировать и анализировать каждый пример в учебнике HTML.
Перейти к онлайн- примерам HTML
Справочник HTML
В справочнике вы найдете полную информацию по любым тегам, атрибутам, событиям, ссылкам, кодам цветов, изображениям и много чего еще.
Перейти к справочнику HTML

Учебник HTML:
Web-страницы
Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация, апплеты Java и т.п. должны быть записаны в виде отдельных файлов.
Web-страницы можно разделить на две группы:
статические (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются;

динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).

Для просмотра Web-страниц на экране нужна специальная программа — браузер. Со всеми современными версиями Windows поставляется браузер Internet Explorer. Многие пользователи выбирают Mozilla Firefox, а также очень компактный и быстрый браузер Opera.
Язык HTML
Мы будем рассматривать только статические Web-страницы, которые создаются на языке HTML (Hypertext Markup Language — язык разметки гипертекста). Напомним, что гипертекстом называется документ, содержащий гиперссылки — активные ссылки на другие документы на локальном компьютере или в Интернете, щелкнув по которым можно перейти к связанному документу.
Язык HTML использует специальные команды (они называются тэги) для разметки Web-страницы, то есть для размещения на ней текста, таблиц, рисунков, списков и т.п. Браузер, читая такой файл, обрабатывает эти команды и выводит страницы на экран. Поэтому одну и ту же Web-страницу разные браузеры могут выводить на экран по-разному.
В следующем разделе вы узнаете о том, как построить простейшую Web-страницу.
Хорошие книги по Web-дизайну
Дуванов А. Web-конструирование. HTML. — СПб: БХВ-Петербург, 2005.

Дуванов А. Web-конструирование. DHTML. — СПб: БХВ-Петербург, 2003.

Кирсанов Д. Веб-дизайн. — М: Символ-Плюс, 2006.

Зельдман Д. Web-дизайн по стандартам. — М: НТ-Пресс, 2005.

Нильсен Я. Веб-дизайн. — М: Символ-Плюс, 2006.

Смирнова И.Е. Начала Web-дизайна. — СПб: БХВ-Петербург, 2005.

Нильсен Я., Лоранжер Х. Web-дизайн. Удобство использования Web-сайтов. — М: Вильямс, 2007.

Лебедев А. Ководство. Параграфы о дизайне. — М: Издательство Студии Лебедева, 2007.

Учебники | MDN
Ссылки на этой странице ведут к целому ряду учебных пособий и материалов. Если вы только начинаете учить основы, или же вы уже бывалый веб-разработчик, то здесь вы сможете найти полезные ресурсы для получения передового практического опыта.  Эти ресурсы создаются дальновидными компаниями и веб-разработчиками, включают открытые стандарты и лучшие практики для веб-разработки, предоставляют или позволяют переводы под открытой лицензией, такой, как Creative Commons.
Вводный уровень
Введение в HTML
Что такое HTML, что он делает, его краткая история, и что представляет собой структура HTML документа. В последующих статьях мы подробнее рассмотрим отдельные части HTML.
Базовая структура веб-страницы (SitePoint)
Узнайте как HTML элементы сочетаются в общую картину.
MDN HTML Element Reference
Комплексный справочник для HTML элементов, и, как различные браузеры поддерживают их.
HTML Challenges (Wikiversity)
Используйте эти задачки, чтобы отточить свои HTML навыки (для примера, «Какой элемент нужно использовать —  <h3> или <STRONG>?»), фокусируясь на смысле разметки.
Продвинутый уровень
Tips for Authoring Fast-Loading HTML Pages
Оптимизация веб-страниц, для большей адаптивности сайта и снижения нагрузки на веб-сервера и подключение к Интернету
HTML5 Tutorials (HTML5 Rocks)
Совершите экскурсию в код, который использует возможности HTML5.
Semantics in HTML5 (A List Apart)
Изучите рабочую разметку, обеспечивающую обратную совместимость, расширяемую и поддерживающую будущие изменения (совместимость вперёд).
Canvas Tutorial
Узнайте, как рисовать с помощью скриптов, используя элемент canvas.
HTML5 Doctor
Статьи о том, как используется HTML5 прямо сейчас.
The Joy of HTML5 Audio (Elated)
Узнайте как использовать HTML аудио элемент для того, чтобы вставлять звуки в ваши веб-страницы. В учебнике представлено много примеров кода.
Javascript учебники
Вводный уровень
JavaScript First Steps
JavaScript руководство, написанное как часть MDN Learning Area.
Codecademy (Codecademy)
Codecademy это простой способ изучить JavaScript. Он интерактивный, и вы можете делать это вместе с друзьями
Getting Started with JavaScript
Что такое JavaScript и как он может пригодиться вам?
JavaScript Best Practices (WebPlatform.org)
Узнайте о некоторых из очевидных (и не очень очевидных) лучших практиках для написания кода на JavaScript.
Средний уровень
A Re-Introduction to JavaScript
Повторение языка программирования JavaScript для разработчиков среднего уровня.
Eloquent JavaScript
Полное руководство по «средним» и «продвинутым» методикам JavaScript.
Essential JavaScript Design Patterns (Addy Osmani)
Введение в основы шаблонов проектирования JavaScript.
The JavaScript Programming Language (YUI Blog)
Douglas Crockford исследует язык, какой он есть сегодня, и как он пришёл, чтобы быть.
Introduction to Object-Oriented JavaScript
Узнайте об ООП в JavaScript.
Speaking JavaScript (Dr. Axel Rauschmayer)
Для тех программистов, кто хочет быстро и хорошо выучить JavaScript, а так же для тех, кто хочет углубить свои навыки или же изучить какие-то специфические темы.
Продвинутый уровень
JavaScript Guide
Полное, регулярно обновляемое руководство по JavaScript для всех уровней обучения от начального до продвинутого.
Learning Advanced JavaScript (John Resig)
Гид по «продвинутому» JavaScript от John Resig.
Introducing the JavaScript DOM (Elated)
Что такое Document Object Model, и зачем она нужна? Эта статья даёт вам постепенное введение в эту мощную способность JavaScript.
An Inconvenient API: The Theory of the DOM (YUI Blog)
Douglas Crockford объясняет Document Object Model.
Advanced JavaScript (YUI Blog)
Douglas Crockford пристально следит за шаблоном кода, который JavaScript программисты могут выбрать в авторстве своих приложений.
JavaScript Garden
Документация из самых необычных частей JavaScript
Which JavaScript Framework? (StackOverflow)
Советы по выбору основы JavaScript..
Non-Blocking JavaScript Downloads (YUI Blog)
Советы по улучшению производительности скачивания страниц, содержащих JavaScript
JavaScript Patterns
Шаблоны и антишаблоны проектирования JavaScript, которые охватывают функциональные шаблоны, шаблоны JQuery, шаблоны плагинов JQuery, шаблоны проектирования, основные шаблоны, literal patterns и шаблоны конструирования, шаблоны создания объекта, переиспользуемый шаблонный код, DOM.
How Browsers Work
Статья с подробным исследованием, описывающая различные современные браузеры, их движки, рендеринг страниц и пр.
Exploring ES6 (Dr. Axel Rauschmayer)
Надёжная и подробная информация об ECMAScript 2015.
JavaScript Videos (GitHub)
Видео о JavaScript.
CSS учебники
Вводный уровень
CSS Getting Started
Этот учебник познакомит вас с каскадными таблицами стилей (CSS). Он проведёт вас через основные особенности CSS и предложит практические примеры, которые можно попробовать на вашем компьютере.
CSS Selector Classes (Wikiversity)
Что такое классы в CSS?
External CSS (Wikiversity)
Использование CSS из внешних источников.
Adding a Touch of Style (W3C)
Краткое руководство для начинающих по стилизации веб-страниц с помощью CSS.
Common CSS Questions
Общие вопросы и ответы для начинающих.
CSS Selectors
Введение в CSS селекторы.
Средний уровень
CSS Reference
Полный справочник по CSS, с информацией о поддержке в Firefox и других браузерах.
CSS Challenges (Wikiversity)
Улучшите ваши навыки CSS, и обратите внимание на то, где вам нужно больше практики.
Intermediate CSS Concepts (HTML.net)
Группировка, псевдоклассы и многое другое.
CSS Positioning 101 (A List Apart)
Использование позиционирования в соответствии со стандартами, без использования таблиц.
Progressive Enhancement with CSS (A List Apart)
Прогрессивное улучшение в веб-страницы с помощью CSS.
Fluid Grids (A List Apart)
Дизайн вёрстки, который плавно изменяется вместе с размерами окна, основанный на сетке.
Продвинутый уровень
Using CSS Transforms
Как применять поворот, наклон, масштабирование и перемещение при помощи CSS
CSS Transitions
CSS переходы, спецификация CSS3 по этой теме, как анимировать изменения стилей в CSS, вместо того, чтобы делать их «сразу».
Quick Guide to Implement Web Fonts with @font-face (HTML5 Rocks)
Возможности @font-face в CSS3, создание собственных шрифтов и работа с ними.
Starting to Write CSS (David Walsh)
Введение в инструменты и методологии для разработки более краткого, масштабируемого и поддерживаемого CSS.
Учебник по JavaScript: 2 часть, нужно знание HTML и CSS, CSS-селекторы: ilyachalov — LiveJournal
Прочел подраздел 1.4 «Поиск: getElement*, querySelector*» второй части («Браузер: документ, события, интерфейсы») учебника по JavaScript.
Вообще, для изучения JavaScript нужно хотя бы базовое понимание HTML и CSS. Конкретно в этом учебнике авторы изначально и не собираются давать какую-либо информацию по основам HTML и CSS, разве что косвенно, ненароком.
Во время изучения первой части учебника мне хватало базового знания HTML и CSS, но во второй части стало не хватать некоторых отдельных разделов знаний по CSS. Например, при чтении указанного выше подраздела я заметил, что авторы учебника постоянно используют термин «CSS-селектор», но не потрудились его объяснить. Как я понимаю, это потому, что этот термин, в принципе, не относится к JavaScript.
Что такое «CSS-селектор»? Как я понял, это текстовая строка, которая идентифицирует один или сразу несколько элементов HTML-страницы («selector» в переводе на русский значит «выборщик», то есть данный селектор помогает нам выбрать нужные для обработки скриптом элементы HTML-страницы). Как я понимаю, в CSS обсуждаемый селектор используется для выбора нужных элементов HTML-страницы, чтобы обработать эти элементы нужным стилем, а в скрипте на языке JavaScript — чтобы обработать эти элементы в коде.
CSS-селектор задается многим встроенным методам в качестве параметра. В указанном выше подразделе учебника в пример приводятся встроенные методы querySelectorAll, querySelector и другие.
При построении строки CSS-селектора используются определенные правила. Кое-какие подробности есть в этой статье:
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Selectors
Два примера простых CSS-селекторов:
CSS-селектор по типу элемента HTML-страницы:
"table"

CSS-селектор по типу элемента HTML-страницы и определенному атрибуту этого элемента:
'form[name="search"]'

В принципе, не обязательно самому сочинять строку CSS-селектора, если имеется готовая HTML-страница. В инструменте «Elements» инструментов разработчика браузера (я использую браузер «Microsoft Edge» на движке «Chromium») можно легко получить CSS-селектор нужного элемента. Для этого можно нажать правой кнопкой мыши на нужный элемент HTML-страницы и в открывшемся контекстном меню выбрать пункт «Copy», а в его подменю пункт «Copy selector» (чтобы скопировать строку CSS-селектора) или пункт «Copy JS path» (чтобы получить строку кода на языке JavaScript, нужную для получения самого этого элемента HTML-страницы в виде объекта).
Посоветуйте учебник для изучения HTML и CSS
Посоветуйте учебник для изучения HTML и CSS — Stack Overflow на русском
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу
Любой может задать вопрос
Любой может ответить
Лучшие ответы получают голоса и поднимаются наверх

Вопрос задан 8 лет 4 месяца назад
Просмотрен 17k раз
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.
Закрыт 6 лет назад.

Друг хочет научиться верстать. Была попытка ему объяснять, но этого я совсем не умею на уровне «с нуля»… Подскажите, пожалуйста, нормальный учебник, где обучают основам верстки. И по-новее, желательно, чтобы не было оформления лэйаута таблицами..
Заранее спасибо!
задан 27 апр ’13 в 8:00
inferusvvinferusvv
2,8521212 золотых знаков5252 серебряных знака9898 бронзовых знаков
4
Вот вам лучший учебник — http://htmlbook.ru/

ответ дан 27 апр ’13 в 8:05
AstorAstor
2,78333 золотых знака2020 серебряных знаков4141 бронзовый знак
3
Книги O’reilly:
HTML5. Рецепты программирования
HTML и CSS. Путь к совершенству
Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript
Веб-приложения на JavaScript
Добавляем Ajax
Руководство по MySQL

ответ дан 27 апр ’13 в 15:05
DeeechDeeech
17411 серебряный знак1313 бронзовых знаков
1
Наилучший учебник — интерактивный учебник. Рекомендую HTMLAcademy. Сам проходил там курсы и узнал много тонкостей, хитрых и, главное, правильных приемов в работе верстальщика.

ответ дан 1 июн ’15 в 8:11
kover-samoletkover-samolet
45344 серебряных знака1717 бронзовых знаков
C++: учебный курс Автор: Франка П. link text
Deleted
36111 золотой знак55 серебряных знаков1313 бронзовых знаков
ответ дан 30 сен ’13 в 11:16
Нужно хотеть сделать сайт самому (лично я фанател на одну музыкальную группу и хотел сделать сайт с инфой об этой группе).
Вам нужно купить самый тоненький учебник по HTML.
Нужно начать делать сайт.
Cначала всё верстать таблицами и без CSS; → потом из этой тоненькой книжечки узнаёте про CSS и начинаете его применять, → потом узнаёте про блочную верстку (многоколоночные техники; резиновый дизайн) и переверстаете весь свой сайт → потом узнаёте про CSS3, спрайты → адаптивную верстку, SASS (всё остальное, по моему мнению, неоптимальные решения) → BEM (перестанете использовать каскад) → эммм… → что там ещё… → PROFIT! → ну а дальше — JavaScript, jQuery.
Саша Черных
4,1981313 золотых знаков3333 серебряных знака8787 бронзовых знаков
ответ дан 6 мая ’13 в 19:58
artuskaartuska
58911 золотой знак44 серебряных знака1212 бронзовых знаков
8
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css книги или задайте свой вопрос.
default
Stack Overflow на русском лучше работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принять все файлы cookie Настроить параметры

Intro to React — React
Это руководство не предполагает наличия каких-либо знаний React.
Перед тем, как начать обучение
Во время этого урока мы создадим небольшую игру. У вас может возникнуть соблазн пропустить его, потому что вы не создаете игры, но дайте ему шанс. Приемы, которые вы изучите в этом руководстве, являются фундаментальными для создания любого приложения React, и их освоение даст вам глубокое понимание React.
Подсказка
Это руководство предназначено для людей, которые предпочитают учиться, выполняя .Если вы предпочитаете изучать концепции с нуля, ознакомьтесь с нашим пошаговым руководством. Вы можете найти это руководство и руководство, дополняющие друг друга.
Учебное пособие разделено на несколько разделов:
Вам не нужно заполнять все разделы сразу, чтобы получить пользу от этого руководства. Постарайтесь пройти как можно дальше — даже если это один или два раздела.
Что мы строим?
В этом уроке мы покажем, как создать интерактивную игру в крестики-нолики с React.
Вы можете увидеть, что мы будем строить здесь: Final Result . Если код вам не понятен или вы не знакомы с его синтаксисом, не волнуйтесь! Цель этого руководства — помочь вам понять React и его синтаксис.
Мы рекомендуем вам проверить игру в крестики-нолики, прежде чем продолжить обучение. Одна из особенностей, которую вы заметите, — это пронумерованный список справа от игрового поля. Этот список дает вам историю всех ходов, которые произошли в игре, и он обновляется по ходу игры.
Вы можете закрыть игру в крестики-нолики, когда ознакомитесь с ней. В этом руководстве мы начнем с более простого шаблона. Наш следующий шаг — настроить вас так, чтобы вы могли начать сборку игры.
Предварительные требования
Мы предполагаем, что вы знакомы с HTML и JavaScript, но у вас должна быть возможность продолжить, даже если вы переходите с другого языка программирования. Мы также предполагаем, что вы знакомы с такими понятиями программирования, как функции, объекты, массивы и, в меньшей степени, классы.
Если вам нужно изучить JavaScript, мы рекомендуем прочитать это руководство. Обратите внимание, что мы также используем некоторые функции из ES6 — последней версии JavaScript. В этом руководстве мы используем стрелочные функции, классы, операторы let и const . Вы можете использовать Babel REPL, чтобы проверить, в какой код ES6 компилируется.
Установка для учебника
Есть два способа выполнить это руководство: вы можете написать код в браузере или настроить локальную среду разработки на своем компьютере.
Вариант установки 1. Запись кода в браузере
Это самый быстрый способ начать работу!
Сначала откройте этот Стартовый код в новой вкладке. На новой вкладке должно отображаться пустое поле для игры в крестики-нолики и код React. В этом руководстве мы будем редактировать код React.
Теперь вы можете пропустить второй вариант настройки и перейти в раздел «Обзор», чтобы получить обзор React.
Вариант установки 2: Локальная среда разработки
Это совершенно необязательно и не требуется для этого урока!

Необязательно: инструкции по локальному выполнению с использованием предпочитаемого вами текстового редактора
Эта настройка требует больше работы, но позволяет завершить обучение с помощью редактора по вашему выбору.Вот шаги, которые необходимо выполнить:
Убедитесь, что у вас установлена последняя версия Node.js.
Следуйте инструкциям по установке Create React App, чтобы создать новый проект.
npx приложение create-реагировать мое приложение
Удалить все файлы в папке src / нового проекта
Примечание:
Не удаляйте всю папку src , только исходные файлы внутри нее. На следующем шаге мы заменим исходные файлы по умолчанию примерами для этого проекта.
cd my-app cd src rm -f * del * cd ..
Добавьте файл с именем index.css в папку src / с этим кодом CSS.
Добавьте файл с именем index.js в папку src / с этим кодом JS.
Добавьте эти три строки в начало файла index.js в папке src / :
импортировать React из react; импортировать ReactDOM из react-dom; Импортировать './index.css ';
Теперь, если вы запустите npm start в папке проекта и откроете http: // localhost: 3000 в браузере, вы должны увидеть пустое поле крестики-нолики.
Мы рекомендуем следовать этим инструкциям, чтобы настроить подсветку синтаксиса для вашего редактора.
Помогите, я застрял!
Если вы застряли, обратитесь к ресурсам поддержки сообщества. В частности, Reactiflux Chat — отличный способ быстро получить помощь. Если вы не получили ответа или по-прежнему не можете решить проблему, сообщите о проблеме, и мы поможем вам.
Обзор
Теперь, когда вы настроили, давайте рассмотрим React!
Что такое React?
React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет составлять сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».
React имеет несколько различных типов компонентов, но мы начнем с подклассов React.Component :
class ShoppingList расширяет React.Составная часть { оказывать() { возвращение ( Список покупок для {this.props.name} Instagram WhatsApp Oculus ); } }
Скоро мы перейдем к забавным тегам в стиле XML. Мы используем компоненты, чтобы сообщить React, что мы хотим видеть на экране. Когда наши данные изменяются, React будет эффективно обновлять и повторно отображать наши компоненты.
Здесь ShoppingList — это компонент класса React или компонент типа React. Компонент принимает параметры, называемые props (сокращение от «свойства»), и возвращает иерархию представлений для отображения с помощью метода render .
Метод render возвращает описание того, что вы хотите видеть на экране. React берет описание и отображает результат. В частности, render возвращает элемент React , который является упрощенным описанием того, что нужно визуализировать.Большинство разработчиков React используют специальный синтаксис под названием «JSX», который упрощает написание этих структур. Синтаксис
преобразуется во время сборки в React.createElement ('div') . Пример выше эквивалентен:
return React.createElement ('div', {className: 'shopping-list'}, React.createElement ('h2',), React.createElement ('ul',) );
См. Полную развернутую версию.
Если вам интересно, createElement () более подробно описан в справочнике по API, но мы не будем использовать его в этом руководстве.Вместо этого мы продолжим использовать JSX.
JSX включает все возможности JavaScript. Вы можете поместить любых выражений JavaScript в фигурные скобки внутри JSX. Каждый элемент React — это объект JavaScript, который вы можете сохранить в переменной или передать в своей программе.
Компонент ShoppingList выше отображает только встроенные компоненты DOM, такие как
и
. Но вы также можете создавать и отображать собственные компоненты React.Например, теперь мы можем обратиться ко всему списку покупок, написав . Каждый компонент React инкапсулирован и может работать независимо; это позволяет создавать сложные пользовательские интерфейсы из простых компонентов.
Проверка стартового кода
Если вы собираетесь работать с учебником в своем браузере, откройте этот код в новой вкладке: Starter Code . Если вы собираетесь работать над учебником локально, вместо откройте src / index.js в папке вашего проекта (вы уже касались этого файла во время установки).
Этот Стартовый код — основа того, что мы создаем. Мы предусмотрели стили CSS, поэтому вам нужно сосредоточиться только на изучении React и программировании игры в крестики-нолики.
Изучив код, вы заметите, что у нас есть три компонента React:
Компонент Square отображает один ); } }
Раньше:
После: вы должны увидеть число в каждом квадрате визуализированного вывода.
Посмотреть полный код здесь
Поздравляем! Вы только что «передали опору» от родительского компонента Board дочернему компоненту Square. Передача реквизита - это то, как информация передается в приложениях React от родителей к детям.
Создание интерактивного компонента
Давайте заполним квадратный компонент буквой «X», когда мы щелкнем по нему. Сначала измените тег кнопки, возвращаемый функцией render () компонента Square, на этот:
класс Square расширяет React.Составная часть { оказывать() { возвращение ( ); } }
Если вы сейчас нажмете на квадрат, вы должны увидеть «щелчок» в консоли инструментов разработчика вашего браузера.
Примечание
Чтобы сохранить ввод и избежать запутанного поведения и , мы будем использовать синтаксис стрелочной функции для обработчиков событий здесь и далее:
класс Square расширяет React.Составная часть { оказывать() { возвращение ( ); } }
Обратите внимание, как с onClick = {() => console.log ('click')} мы передаем функцию как опору onClick . React вызовет эту функцию только после щелчка. Забыть () => и написать onClick = {console.log ('click')} - это распространенная ошибка, которая срабатывает каждый раз при повторном рендеринге компонента.
В качестве следующего шага мы хотим, чтобы компонент Square «запомнил», что по нему щелкнули, и заполнил его знаком «X». Чтобы «запомнить» вещи, компоненты используют состояние .
Компоненты React могут иметь состояние, задав this.state в их конструкторах. this.state следует рассматривать как частный для компонента React, в котором он определен. Давайте сохраним текущее значение Square в this.state и изменим его при нажатии на Square.
Сначала мы добавим в класс конструктор для инициализации состояния:
class Square extends React.Component { конструктор (реквизит) {супер (реквизит); this.state = {значение: null,}; } оказывать() { возвращение ( ); } }
Примечание
В классах JavaScript необходимо всегда вызывать super при определении конструктора подкласса.Все классы компонентов React, которые имеют конструктор , должны начинаться с вызова super (props) .
Теперь мы изменим метод Square render , чтобы отображать значение текущего состояния при нажатии:
Замените this.props.value на this.state.value внутри тега
Замените обработчик событий onClick = {...} на onClick = {() => this.setState ({value: 'X'})} .
Поместите свойства className и onClick в отдельные строки для лучшей читаемости.
После этих изменений тег ); } }
Вызывая this.setState из обработчика onClick в методе рендеринга Square , мы говорим React повторно отображать этот Square всякий раз, когда нажимается его ); } }
При щелчке по квадрату вызывается функция onClick , предоставляемая Board. Вот обзор того, как это достигается:
Свойство onClick во встроенном компоненте DOM
При нажатии кнопки React вызовет обработчик события onClick , который определен в методе render () Square.
Этот обработчик событий вызывает this.props.onClick () . Свойство Square onClick было указано Правлением.
Поскольку Board передал onClick = {() => this.handleClick (i)} в Square, Square вызывает this.handleClick (i) при нажатии.
Мы еще не определили метод handleClick () , поэтому наш код дает сбой.Если сейчас щелкнуть квадрат, вы должны увидеть красный экран с ошибкой вроде «this.handleClick не является функцией».
Примечание
Атрибут onClick элемента DOM
Когда мы пытаемся щелкнуть квадрат, мы должны получить сообщение об ошибке, потому что мы еще не определили handleClick . Теперь мы добавим handleClick к классу Board:
. class Board расширяет React.Component { конструктор (реквизит) { супер (реквизит); this.state = { квадраты: Массив (9).заполнить (ноль), }; } handleClick (я) {константные квадраты = this.state.squares.slice (); квадраты [я] = 'X'; this.setState ({квадраты: квадраты}); } renderSquare (i) { возвращение ( <Квадрат значение = {this.state.squares [i]} onClick = {() => this.handleClick (i)} /> ); } оказывать() { const status = 'Следующий игрок: X'; возвращение ( {status} {это.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)} {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)} {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)} ); } } Посмотреть полный код здесь После этих изменений мы снова можем нажимать на квадраты, чтобы заполнить их, как и раньше.Однако теперь состояние сохраняется в компоненте Board, а не в отдельных компонентах Square. Когда состояние Board изменяется, компоненты Square автоматически обновляются. Сохранение состояния всех квадратов в компоненте Board позволит в будущем определить победителя. Поскольку компоненты Square больше не поддерживают состояние, компоненты Square получают значения от компонента Board и информируют компонент Board при нажатии на них. В терминах React компоненты Square теперь являются контролируемыми компонентами .Правление полностью контролирует их. Обратите внимание, как в handleClick мы вызываем .slice () , чтобы создать копию массива squares для изменения вместо изменения существующего массива. Мы объясним, почему мы создаем копию массива квадратов в следующем разделе. Почему важна неизменность В предыдущем примере кода мы предложили вам создать копию массива squares , используя метод slice () вместо изменения существующего массива.Теперь мы обсудим неизменность и то, почему ее важно изучать. Обычно есть два подхода к изменению данных. Первый подход состоит в том, чтобы изменить данные, напрямую изменив значения данных. Второй подход - заменить данные новой копией, в которой есть желаемые изменения. Изменение данных с мутацией var player = {оценка: 1, имя: 'Джефф'}; player.score = 2; Изменение данных без мутации var player = {оценка: 1, имя: 'Джефф'}; var newPlayer = Объект.назначить ({}, игрок, {оценка: 2}); Конечный результат тот же, но без непосредственного изменения (или изменения базовых данных) мы получаем несколько преимуществ, описанных ниже. Сложные функции становятся простыми Неизменяемость значительно упрощает реализацию сложных функций. Позже в этом руководстве мы реализуем функцию «путешествия во времени», которая позволит нам просматривать историю игры в крестики-нолики и «возвращаться» к предыдущим ходам. Эта функция не относится к играм - возможность отменять и повторять определенные действия является обычным требованием для приложений.Избежание прямой мутации данных позволяет нам сохранить предыдущие версии истории игры нетронутыми и повторно использовать их позже. Обнаружение изменений Обнаружение изменений в изменяемых объектах затруднено, поскольку они изменяются напрямую. Это обнаружение требует, чтобы изменяемый объект сравнивался с предыдущими копиями самого себя и все дерево объектов, которое необходимо пройти. Обнаруживать изменения в неизменяемых объектах значительно проще. Если неизменяемый объект, на который делается ссылка, отличается от предыдущего, значит, объект был изменен. Определение момента повторного рендеринга в React Основным преимуществом неизменяемости является то, что она помогает вам создавать чистых компонента в React. Неизменяемые данные могут легко определить, были ли внесены изменения, что помогает определить, когда компонент требует повторной визуализации. Вы можете узнать больше о shouldComponentUpdate () и о том, как построить чистых компонентов , прочитав Оптимизация производительности. Функциональные компоненты Теперь мы изменим Square на функциональный компонент . В React функциональных компонентов - это более простой способ писать компоненты, которые содержат только метод render и не имеют собственного состояния. Вместо определения класса, который расширяет React.Component , мы можем написать функцию, которая принимает props в качестве входных данных и возвращает то, что должно быть визуализировано. Функциональные компоненты писать менее утомительно, чем классы, и многие компоненты могут быть выражены таким образом. Замените класс Square этой функцией: квадрат функции (реквизит) { возвращение ( ); } Мы изменили this.props на props оба раза, когда он появляется. Посмотреть полный код здесь Примечание Когда мы изменили Square как функциональный компонент, мы также изменили onClick = {() => this.props.onClick ()} на более короткий onClick = {props.onClick} (обратите внимание на отсутствие круглых скобок на с обеих сторон ). По очереди Теперь нам нужно исправить очевидный дефект в нашей игре в крестики-нолики: буквы «О» не могут быть отмечены на доске. По умолчанию мы установим первый ход как «X». Мы можем установить это значение по умолчанию, изменив начальное состояние в нашем конструкторе Board: class Board расширяет React.Component { конструктор (реквизит) { супер (реквизит); this.state = { квадраты: Array (9) .fill (null), xIsNext: true,}; } Каждый раз, когда игрок перемещается, значение xIsNext (логическое значение) будет переворачиваться, чтобы определить, какой игрок пойдет следующим, и состояние игры будет сохранено.Мы обновим функцию handleClick на плате, чтобы перевернуть значение xIsNext : . handleClick (i) { const squares = this.state.squares.slice (); квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({ квадраты: квадраты, xIsNext:! this.state.xIsNext,}); } С этим изменением «X» и «O» могут меняться по очереди. Попытайся! Давайте также изменим текст «статус» в панели render , чтобы он отображал, у какого игрока следующий ход: render () { const status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); возвращение ( После применения этих изменений у вас должен быть этот компонент платы: class Board расширяет React.Component { конструктор (реквизит) { супер (реквизит); this.state = { квадраты: Array (9) .fill (null), xIsNext: true,}; } handleClick (i) { const squares = this.state.squares.slice (); квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({квадраты: квадраты, xIsNext:! this.state.xIsNext,}); } renderSquare (i) { возвращение ( <Квадрат значение = {this.state.squares [i]} onClick = {() => this.handleClick (i)} /> ); } оказывать() { const status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); возвращение ( {status} {this.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)} {это.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)} {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)} ); } } Посмотреть полный код здесь Объявление победителя Теперь, когда мы показываем, какой игрок следующий ход, мы также должны показать, когда игра выиграна и больше нет ходов.Скопируйте эту вспомогательную функцию и вставьте ее в конец файла: функция calculateWinner (квадраты) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i Учитывая массив из 9 квадратов, эта функция проверяет победителя и возвращает 'X' , 'O' или null в зависимости от ситуации. Мы вызовем calculateWinner (squares) в функции Board render , чтобы проверить, выиграл ли игрок. Если игрок выиграл, мы можем отобразить такой текст, как «Победитель: X» или «Победитель: O». Мы заменим объявление status в функции Board render на этот код: render () { констант победитель = вычислить победитель (this.state.squares); пусть статус; if (победитель) {status = 'Победитель:' + победитель; } else {status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); } возвращение ( Теперь мы можем изменить функцию Board handleClick , чтобы она возвращалась раньше, игнорируя щелчок, если кто-то выиграл игру или если квадрат уже заполнен: handleClick (i) { const squares = this.state.squares.slice (); если (вычислитьПобедитель (квадраты) || квадраты [я]) {возврат; } квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({ квадраты: квадраты, xIsNext:! this.state.xIsNext, }); } Посмотреть полный код здесь Поздравляем! Теперь у вас есть рабочая игра в крестики-нолики. И вы тоже только что узнали основы React. Итак, , вы , вероятно, здесь настоящий победитель. Добавление путешествия во времени В качестве заключительного упражнения давайте «вернемся во времени» к предыдущим ходам в игре. Сохранение истории перемещений Если бы мы изменили массив квадратов и , реализовать путешествие во времени было бы очень сложно. Однако мы использовали slice () для создания новой копии массива squares после каждого хода и считали ее неизменной. Это позволит нам хранить все предыдущие версии массива квадратов и перемещаться между уже произошедшими поворотами. Мы будем хранить прошлые квадратов массивов в другом массиве под названием history . История Массив представляет все состояния доски, от первого до последнего хода, и имеет такую форму: история = [ { квадраты: [ нуль, ноль, ноль, нуль, ноль, ноль, нуль, ноль, ноль, ] }, { квадраты: [ нуль, ноль, ноль, ноль, 'X', ноль, нуль, ноль, ноль, ] }, { квадраты: [ нуль, ноль, ноль, ноль, 'X', ноль, ноль, ноль, 'O', ] }, ] Теперь нам нужно решить, какой компонент должен владеть состоянием истории . Состояние подъема, снова Нам нужно, чтобы компонент Game верхнего уровня отображал список прошлых ходов. Для этого ему потребуется доступ к истории , поэтому мы поместим состояние истории в компонент Game верхнего уровня. Размещение состояния history в компоненте Game позволяет нам удалить состояние squares из его дочернего компонента Board. Точно так же, как мы «подняли состояние» из компонента Square в компонент Board, мы теперь поднимаем его из Board в компонент Game верхнего уровня.Это дает игровому компоненту полный контроль над данными Board и позволяет ему проинструктировать Board о рендеринге предыдущих ходов из истории . Сначала мы установим начальное состояние для компонента Game в его конструкторе: class Game расширяет React.Component { конструктор (реквизит) {супер (реквизит); this.state = {история: [{квадраты: массив (9) .fill (null),}], xIsNext: true,}; } оказывать() { возвращение ( <Доска /> {} {} ); } } Затем компонент Board получит квадратов и props onClick из компонента Game.Поскольку теперь у нас есть обработчик одного клика в Board для многих Squares, нам нужно передать местоположение каждого Square в обработчик onClick , чтобы указать, какой Square был нажат. Вот необходимые шаги для преобразования компонента Board: Удалите конструктор в Board. Замените this.state.squares [i] на this.props.squares [i] в панели renderSquare . Замените this.handleClick (i) на this.props.onClick (i) в файле Board renderSquare . Компонент Board теперь выглядит так: class Board расширяет React.Component { handleClick (i) { const squares = this.state.squares.slice (); if (calculateWinner (squares) || squares [i]) { возвращение; } квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({ квадраты: квадраты, xIsNext:! this.state.xIsNext, }); } renderSquare (i) { возвращение ( <Квадрат value = {this.props.squares [i]} onClick = {() => this.props.onClick (i)} /> ); } оказывать() { констант победитель = вычислить победитель (this.state.squares); пусть статус; если (победитель) { status = 'Победитель:' + победитель; } еще { status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); } возвращение ( {status} {this.renderSquare (0)} {this.renderSquare (1)} {это.renderSquare (2)} {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)} {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)} ); } } Мы обновим функцию render компонента Game, чтобы использовать самую последнюю запись в истории для определения и отображения статуса игры: render () { const history = this.state.history; const current = history [history.length - 1]; const Winner = calculateWinner (current.squares); пусть статус; if (победитель) {status = 'Победитель:' + победитель; } else {status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); } возвращение ( this.handleClick (i)} /> {status} {} ); } Поскольку компонент Game теперь отображает статус игры, мы можем удалить соответствующий код из метода render Board.После рефакторинга функция платы render выглядит так: render () {return ( {this.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)} {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)} {это.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)} ); } Наконец, нам нужно переместить метод handleClick из компонента Board в компонент Game. Нам также необходимо изменить handleClick , потому что состояние компонента Game имеет другую структуру. В рамках метода handleClick игры мы объединяем новые записи истории с историей . handleClick (i) { const history = this.state.history; const current = history [history.length - 1]; const squares = current.squares.slice (); if (calculateWinner (squares) || squares [i]) { возвращение; } квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({ history: history.concat ([{квадраты: квадраты,}]), xIsNext:! this.state.xIsNext, }); } Примечание В отличие от метода array push () , с которым вы, возможно, более знакомы, метод concat () не изменяет исходный массив, поэтому мы предпочитаем его. На данный момент компоненту Board нужны только методы renderSquare и render . Состояние игры и метод handleClick должны быть в компоненте Game. Посмотреть полный код здесь Отображение прошлых ходов Поскольку мы записываем историю игры в крестики-нолики, теперь мы можем отображать ее игроку в виде списка прошлых ходов. Ранее мы узнали, что элементы React - это первоклассные объекты JavaScript; мы можем передавать их в наших приложениях.Чтобы отобразить несколько элементов в React, мы можем использовать массив элементов React. В JavaScript массивы имеют метод map () , который обычно используется для сопоставления данных с другими данными, например: постоянные числа = [1, 2, 3]; const doubled = numbers.map (x => x * 2); Используя метод map , мы можем сопоставить нашу историю ходов с элементами React, представляющими кнопки на экране, и отобразить список кнопок для «перехода» к прошлым ходам. Давайте сопоставим с историей в методе рендеринга игры : render () { const history = this.state.history; const current = history [history.length - 1]; const Winner = calculateWinner (current.squares); const move = history.map ((step, move) => {const desc = move? 'Перейти к перемещению #' + move: 'Перейти к началу игры'; return ( );}); пусть статус; если (победитель) { status = 'Победитель:' + победитель; } еще { status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); } возвращение ( <Доска квадраты = {current.squares} onClick = {(i) => this.handleClick (i)} /> {статус} {движется} ); } Посмотреть полный код здесь Для каждого хода в истории игры в крестики-нолики мы создаем элемент списка
, который содержит кнопку
); }); Посмотреть полный код здесь При нажатии любой из кнопок элемента списка возникает ошибка, поскольку метод jumpTo не определен.Перед тем как реализовать jumpTo , мы добавим stepNumber в состояние компонента Game, чтобы указать, какой шаг мы просматриваем в данный момент. Сначала добавьте stepNumber: 0 к начальному состоянию в конструкторе Game : class Game расширяет React.Component { конструктор (реквизит) { супер (реквизит); this.state = { история: [{ квадраты: Array (9) .fill (null), }], stepNumber: 0, xIsNext: истина, }; } Затем мы определим метод jumpTo в Game, чтобы обновить этот stepNumber .Мы также устанавливаем для xIsNext значение true, если число, которое мы меняем stepNumber на четное: handleClick (i) { } jumpTo (шаг) {this.setState ({stepNumber: шаг, xIsNext: (шаг% 2) === 0,}); } оказывать() { } Теперь мы внесем несколько изменений в метод игры handleClick , который срабатывает при нажатии на квадрат. Добавленное нами состояние stepNumber отражает ход, отображаемый для пользователя сейчас.После того, как мы сделаем новый ход, нам нужно обновить stepNumber , добавив stepNumber: history.length как часть аргумента this.setState . Это гарантирует, что мы не застрянем, показывая один и тот же ход после того, как был сделан новый. Мы также заменим чтение this.state.history на this.state.history.slice (0, this.state.stepNumber + 1) . Это гарантирует, что если мы «вернемся в прошлое», а затем сделаем новый шаг с этого момента, мы выбросим всю «будущую» историю, которая теперь стала бы неверной. handleClick (i) { const history = this.state.history.slice (0, this.state.stepNumber + 1); const current = history [history.length - 1]; const squares = current.squares.slice (); if (calculateWinner (squares) || squares [i]) { возвращение; } квадраты [i] = this.state.xIsNext? 'X': 'O'; this.setState ({ history: history.concat ([{ квадраты: квадраты }]), stepNumber: history.length, xIsNext:! this.state.xIsNext, }); } Наконец, мы изменим метод render компонента Game, заменив всегда визуализацию последнего хода на визуализацию текущего выбранного хода в соответствии с stepNumber : render () { const history = this.state.history; const current = история [this.state.stepNumber]; const Winner = calculateWinner (current.squares); Если мы щелкнем по любому шагу в истории игры, доска для игры в крестики-нолики должна немедленно обновиться, чтобы показать, как доска выглядела после того, как этот шаг произошел. Посмотреть полный код здесь Заключение Поздравляем! Вы создали игру в крестики-нолики, в которой: Позволяет играть в крестики-нолики, Указывает, когда игрок выиграл игру, Сохраняет историю игры по мере ее прохождения, Позволяет игрокам просматривать историю игры и предыдущие версии игрового поля. Отличная работа! Мы надеемся, что теперь вы чувствуете, что имеете хорошее представление о том, как работает React. Посмотрите окончательный результат здесь: Final Result . Если у вас есть дополнительное время или вы хотите попрактиковаться в новых навыках React, вот несколько идей по улучшению, которые вы могли бы внести в игру в крестики-нолики, которые перечислены в порядке возрастания сложности: Показать местоположение каждого хода в формате (столбец, строка) в списке истории ходов. Выделенный в данный момент элемент в списке перемещений выделен жирным шрифтом. Rewrite Board, чтобы использовать две петли для создания квадратов вместо их жесткого кодирования. Добавьте переключатель, который позволяет вам сортировать ходы в возрастающем или убывающем порядке. Когда кто-то выигрывает, выделите три квадрата, которые привели к победе. Если никто не выиграл, отобразить сообщение о ничьей. В этом руководстве мы затронули концепции React, включая элементы, компоненты, свойства и состояние. Для более подробного объяснения каждой из этих тем ознакомьтесь с остальной документацией.Чтобы узнать больше об определении компонентов, ознакомьтесь с справочником React.Component API. Изучите HTML Вот бесплатное руководство по HTML, которое научит вас HTML (язык гипертекстовой разметки), чтобы шаг за шагом приступить к созданию вашего веб-сайта. Вы можете найти все, что связано с HTML, проиллюстрированное с примерами для каждой главы отдельно, чтобы помочь вам полностью понять язык разметки. HTML, аббревиатура от HyperText Markup Language, является основным языком разметки для создания веб-сайтов.Он состоит из серии кодов, используемых для структурирования текстов, изображений и другого содержимого, отображаемого в браузере. Наша книга в формате HTML состоит из нескольких разделов, в которых содержится вся необходимая информация для обогащения ваших знаний о HMTL. Основы HTML В разделе Основы HTML вы получите полное представление о редакторах и инструментах, которые вам понадобятся при создании веб-страниц. Он проинформирует вас о профессиональных редакторах, которые веб-разработчики используют для кодирования. Элементы - это основа HTML.Каждый документ HTML состоит из элементов, которые определяются с помощью тегов. HTML Elements обучает вас типам HTML-элементов. Он также подчеркивает разницу между тегами HTML и элементами HTML, которые часто путают. HTML-теги Basic используются для структурирования содержимого веб-сайта (текст, гиперссылки, изображения, мультимедиа и т. Д.). Теги только «инструктируют» браузеры, как отображать содержимое веб-страницы. В главе «HTML-теги» предлагаются наиболее часто используемые теги в HTML с их примерами. Атрибуты HTML добавляются к элементу HTML, чтобы предоставить дополнительную информацию о нем.Книга предлагает множество примеров и список наиболее часто используемых атрибутов. Сложная глава «Форматирование HTML» позволяет вам изучить категории тегов форматирования с кратким описанием и примерами. Веб-сайты содержат различные типы ссылок, которые ведут вас прямо на другие страницы или позволяют перейти к определенной части страницы. Узнайте, как определить гиперссылки в главе «Ссылки HTML» и как использовать различные атрибуты со ссылками и как применять ссылки к изображению. Наша следующая глава HTML Color Names показывает способы изменения цвета текста в HTML. Также найдите 216 кроссбраузерную цветовую палитру, используемую для создания страниц веб-сайтов. В разделе «Таблицы HTML» предлагается список устаревших атрибутов, что означает, что они больше не используются в упомянутых тегах и заменены другими альтернативными атрибутами. В разделе «Сценарии HTML» описывается способ встраивания скрипта или ссылки на исполняемый скрипт в HTML-документ и запуск скриптов. HTML-шаблоны В этой части книги представлена коллекция шаблонов макета HTML и шаблонов форм, в которых представлены основные макеты веб-сайтов и различные виды форм, созданные с использованием только HTML и CSS. HTML 5 включает введение в HTML, а также предлагает основные преимущества и модели содержимого. Каждая из этих моделей описывает тип содержащихся в ней элементов. Вы также можете найти список тегов HTML5 с их описаниями и семантическими элементами, представленными с примерами.HTML5 позволяет встраивать аудиофайлы без подключения сторонних плагинов. Ссылки HTML В этой части предлагаются наборы символов, необходимые для правильного отображения HTML-страницы. Вы можете найти печатные символы ASCII с их эквивалентными кодами объектов HTML, символы ISO 8859-1, символы, список кодов символов UTF-8, набор символьных объектов, математические символы, греческие буквы с их номерами объектов и именами. В главе также рассматриваются методы HTTP, сообщения о состоянии HTTP, таблица типов MIME и таблица тегов HTML, разделенных на категории.Другая глава HTML-изображений содержит необходимые и рекомендуемые атрибуты изображений, плавающие изображения и современные форматы изображений на выбор. На странице XHTML вы получите представление о преимуществах и различиях между HTML и XHTML. HTML-тегов HTML-тегов представляет собой самый большой раздел со всеми тегами HTML, включая устаревшие. В главе «Устаревшие теги» вы прочитаете о наборе устаревших тегов HTML с их альтернативными предложениями. Две другие главы включают Глобальные атрибуты HTML и Атрибуты событий, где вы можете найти все, что связано с этими темами. На нашем веб-сайте вы можете найти редактор HTML, в котором вы можете редактировать HTML-код, и нажать «Отправить», чтобы увидеть результат. HTML не так уж и сложен, поэтому мы уверены, что вам понравится учиться. После успешного завершения книги HTML перед вами встанет вызов! Проверьте себя с помощью этой базовой викторины HTML и узнайте, сколько вы узнали. Начни учиться прямо сейчас! Учебники и ресурсы HTML - W3schools Учебники и ресурсы HTML - W3schools 21 Уроки В этой серии руководств HTML описываются различные функции языка HTML, упрощающие веб-разработку. HTML (язык гипертекстовой разметки) - единственный язык разметки для создания веб-страниц. Он предоставляет некоторые заголовки, заголовки, абзацы, списки, таблицы, встроенные изображения и т. Д. Для описания структуры текстовой информации в документах HTML. Этот урок описывает краткую историю HTML. HTML - это очень развивающийся язык разметки, который эволюционировал с обновлением различных версий. Задолго до того, как введены в действие пересмотренные стандарты и спецификации, каждая версия позволяла пользователю создавать веб-страницы гораздо проще и красивее, а также делать сайты очень эффективными. Веб-страница - это текстовый файл, в котором гипертекстовый язык написан в соответствии с грамматикой HTML. Этот HTML-код отображается браузером, преобразуя его в веб-страницу. В этом уроке вы узнаете, как писать, сохранять и запускать HTML-документы. В этой главе вы узнаете о различных типах тегов HTML и некоторых основных тегах, которые используются для разработки веб-страниц. О тегах HTML, Head и Body. HTML имеет различные функции, которые могут быть предоставлены с помощью тегов и связанных с ними атрибутов, теперь пора узнать больше об этих тегах. Разница между элементами и тегами? На что способны элементы HTML? Большинство тегов HTML имеют атрибуты, которые являются дополнительными свойствами и информацией для тегов, чтобы сделать их более точными. Об атрибутах id, title, class и style. Форматирование можно определить как внешний вид вашей документации или представление вашего HTML-кода в осмысленном и красивом виде.Форматирование в основном делается для того, чтобы сделать макет привлекательным. Комментарии являются важной частью HTML; он помогает предоставить подробную информацию о том, что написано в исходном коде HTML. Теги комментариев HTML полностью игнорируются для отображения браузерами. Он используется для вставки комментариев в исходный код. В этом уроке рассказывается, как писать комментарии в HTML. Мета может называться данными о данных. Это означает, что он содержит информацию о другой информации, но информация находится в форме необработанных данных.Мета-теги в HTML позволяют вам предоставлять метаданные вашей HTML-страницы. Тег привязки в HTML можно определить как средство для создания гиперссылки, которая может связать вашу текущую страницу, на которой текст преобразуется в гипертекст через (тег привязки), на другую страницу. Что такое тег привязки? Об атрибуте HREF. Внешний вид тега привязки HTML. HTML имеет замечательный тег шрифта, который помогает настраивать цвета, формы и стили шрифтов веб-страниц.В этой главе вы узнаете об основном теге и его важности. Размер, стиль и цвет шрифта. Веб-страница может выглядеть лучше с изображениями. Итак, в этой главе вы узнаете, как отображать изображения на веб-странице и настраивать ее. О теге HTML img. src и атрибут alt тега IMG. Граница изображения, hspace, vspace, высота и ширина. Фразовые теги HTML - это теги с уникальным назначением, предназначенные для использования неопределенных регистров, даже если они реализованы таким же образом, как и другие теги, что вы, возможно, видели в предыдущих главах.Итак, теперь давайте углубимся в каждый из различных типов фразовых тегов. HTML-таблицы могут быть полезны в разных случаях, когда вы можете упорядочивать данные, такие как тексты, списки, ссылки, изображения, таблицы в таблице, видео и т. Д., В форме строк и столбцов, где каждое пересечение называется ячейкой . В этой главе вы узнаете, как использовать списки и различные теги, используемые для перечисления ваших данных. HTML предоставляет три различных метода для указания информации в форме списков. HTML-теги листинга Тип и начальные атрибуты Список определений © w3schools.in - Все права защищены. Camtasia Учебники | ТехСмит Camtasia Учебники | TechSmith {{display}} Количество: {{количество}} {{total}} {{#each groups}} {{#each items}} {{#if selected}} {{display}} {{#iff path 'содержит' 'upgrade'}} Включено {{еще}} {{total}} {{/ iff}} {{/если}} {{/каждый}} {{/каждый}} {{/ iff}} {{/ eachByOrder}} {{#each items}} {{#each items}} {{#iff path '===' 'SystemExtension.shippingcalculation '}} {{/ iff}} {{/каждый}} {{/каждый}} {{#каждый заказ}} {{#iff taxValue "! ==" 0}} {{#taxLabel taxType 'Tax:' 'НДС:' 'Потребительский налог:'}} {{/ taxLabel}} {{налог}} {{/ iff}} {{itemCount this}} {{#isPlural this}} товаров {{else}} Товар {{/ isPlural}} Всего: {{total}} {{/каждый}} Работа с внешними носителями Учебник - рыбий панцирь 3.3.1 документация Почему рыба? Fish - это полностью оборудованная оболочка командной строки (например, bash или zsh), которая удобна и удобна для пользователя. Fish поддерживает такие мощные функции, как подсветка синтаксиса, автоматические подсказки и завершение табуляции, которые просто работают, и ничего не нужно изучать или настраивать. Если вы хотите сделать свою командную строку более продуктивной, полезной и увлекательной, не изучая кучу загадочного синтаксиса и параметров конфигурации, то рыба может быть именно тем, что вы ищете! Начало работы После установки просто введите fish в текущую оболочку, чтобы попробовать! Вас встретит стандартная подсказка с рыбой, Это означает, что вы все настроены и можете начать использовать fish: > рыба Добро пожаловать в дружественную интерактивную оболочку Fish Введите help для получения инструкций по использованию рыбы. ты @ имя хоста ~> Это приглашение, которое вы видите выше, является приглашением по умолчанию для рыбы: оно показывает ваше имя пользователя, имя хоста и рабочий каталог.- чтобы изменить это приглашение, посмотрите, как изменить ваше приглашение - чтобы переключиться на рыбу навсегда, см. переключение оболочки по умолчанию на рыбу. С этого момента мы будем делать вид, что ваше приглашение - это просто > , чтобы сэкономить место. Обучение рыбок Это руководство предполагает базовое понимание оболочек командной строки и команд Unix, а также то, что у вас есть рабочая копия fish. Если вы хорошо разбираетесь в других раковинах и хотите знать, что рыба делает по-другому, поищите волшебную фразу в отличие от других раковин , которая используется для обозначения важных различий. Или, если вам нужен быстрый обзор отличий от других оболочек, таких как Bash, см. Fish For Bash Users. Выполнение команд Fish запускает команды, как и другие оболочки: вы вводите команду, а затем ее аргументы. Пробелы-разделители: > эхо привет мир Привет, мир Это запускает команду echo с аргументами hello и world . В этом случае это то же самое, что и один аргумент hello world , но во многих случаях это не так.Если вам нужно передать аргумент, который включает пробел, вы можете экранировать его с помощью обратной косой черты или заключить его в одинарные или двойные кавычки: > mkdir Мои \ Файлы # Создает каталог под названием "Мои файлы" с пробелом в имени > cp ~ / Some \ File 'Мои файлы' # Копирует файл "Some File" из домашнего каталога в "My Files" > ls "Мои файлы" Некоторый файл Получение помощи Запустите help , чтобы открыть справку Fish в веб-браузере, и man со страницей (например, fish-language ), чтобы открыть ее на странице руководства.Вы также можете запросить помощь с определенной командой, например, help установить для открытия в веб-браузере или man установить , чтобы увидеть его в терминале. > мужской набор set - обрабатывать переменные оболочки Сводка ... Подсветка синтаксиса Вы быстро заметите, что fish выделяет синтаксис при вводе текста. По умолчанию недопустимые команды окрашены в красный цвет: > / bin / mkd Команда может быть недопустимой, потому что она не существует или относится к файлу, который вы не можете выполнить.Когда команда становится действительной, она отображается другим цветом: Допустимые пути к файлам подчеркиваются по мере их ввода: > кошка ~ / somefi Это говорит о том, что существует файл, который начинается с somefi , что является полезной обратной связью при вводе. Эти и многие другие цвета можно изменить, запустив fish_config или напрямую изменив переменные цвета. Подстановочные знаки Fish поддерживает знакомый подстановочный знак * .Чтобы перечислить все файлы JPEG: > ls * .jpg lena.jpg meena.jpg santa maria.jpg Вы можете использовать несколько подстановочных знаков: > ls l * .p * lena.png lesson.pdf Особенно эффективен рекурсивный подстановочный знак **, который рекурсивно ищет каталоги: > ls /var/**.log /var/log/system.log /var/run/sntp.log Если этот обход каталога занимает много времени, вы можете выйти из него Control + C . Подробнее см. Подстановочные знаки. Каналы и перенаправления Вы можете перемещаться между командами через обычную вертикальную черту: > эхо привет мир | Туалет 1 2 12 stdin и stdout можно перенаправить через знакомые < и > . stderr перенаправляется с помощью 2> . > grep fish ~ / output.txt 2> ~ / errors.txt Чтобы перенаправить stdout и stderr в один файл, вам нужно сначала перенаправить stdout, а затем stderr в stdout: > сделать> make_output.txt 2> & 1 Дополнительные сведения см. В разделах «Перенаправления ввода и вывода» и «Каналы». Самовнушения По мере того, как вы набираете текст, рыба будет предлагать команды справа от курсора серым цветом. Например: > / bin / имя хоста Знает о путях и опциях: > grep --ignore-case И история тоже. Введите команду один раз, и вы можете повторно вызвать ее, просто набрав несколько букв: > rsync -avze ssh. myname @ somelonghost.ком: / некоторые / длинный / путь / ду / ди / ду / ди / ду Чтобы принять самовнушение, нажмите → (стрелка вправо) или Control + F . Чтобы принять отдельное слово самовнушения, Alt + → (стрелка вправо). Если самовнушение не то, что вам нужно, просто проигнорируйте его. Завершение вкладок Богатый набор дополнений вкладок работает "из коробки". Нажмите Tab , и рыба попытается завершить команду, аргумент или путь: > / pri Вкладка => / private / Если существует более одной возможности, они будут перечислены: > ~ / stuff / s Вкладка ~ / вещи / скрипт.sh (Исполняемый файл, 4,8 КБ) ~ / stuff / sources / (Каталог) Нажмите вкладку еще раз, чтобы просмотреть возможности. fish также может выполнять множество команд, например git branch: > git merge pr вкладка => git merge prompt_designer > git checkout b вкладка builtin_list_io_merge (ветвь) builtin_set_color (ветка) busted_events (тег) Попробуйте нажать вкладку и посмотрите, на что способна рыба! Переменные Как и в других оболочках, знак доллара, за которым следует имя переменной, заменяется значением этой переменной: > echo Мой домашний каталог - $ HOME Мой домашний каталог / home / tutorial Это известно как подстановка переменных, и это также происходит в двойных кавычках, но не в одинарных: > echo "Мой текущий каталог - $ PWD" Мой текущий каталог / home / tutorial > echo 'Мой текущий каталог - $ PWD' Мой текущий каталог - $ PWD В отличие от других оболочек, fish не имеет специального синтаксиса VARIABLE = VALUE для установки переменных.Вместо этого есть обычная команда: установить , которая принимает имя переменной, а затем ее значение. > название набора 'Mister Noodle' > echo $ name Мистер Нудл (Обратите внимание на кавычки: без них Mister и Noodle были бы отдельными аргументами, а $ name было бы преобразовано в список из двух элементов.) В отличие от других оболочек, переменные не разделяются после замены: > mkdir $ name > ls Мистер Нудл В bash это привело бы к созданию двух каталогов «Мистер» и «Лапша».В fish он создал только один: переменная имела значение «Mister Noodle», так что это аргумент, который был передан в mkdir, , пробелы и все остальное. В других оболочках используется термин «массивы», а не списки. Вы можете стереть (или "удалить") переменную с помощью -e или --erase > установить -e MyVariable > env | grep MyVariable (нет вывода) Подробнее см. Расширение переменных. Экспорт (переменные оболочки) Иногда вам нужно иметь переменную, доступную для внешней команды, часто как параметр.Например, многие программы, такие как git или man , читают переменную $ PAGER , чтобы определить ваш предпочтительный пейджер (программа, которая позволяет прокручивать текст). Другие используемые переменные включают $ BROWSER , $ LANG (для настройки вашего языка) и $ PATH . Вы заметите, что они написаны ALLCAPS, но это всего лишь соглашение. Чтобы передать переменную внешней команде, ее нужно «экспортировать». В отличие от других снарядов, у fish нет команды экспорта.Вместо этого переменная экспортируется через опцию set , либо --export , либо просто -x . > установить -x MyVariable SomeValue > env | grep MyVariable MyVariable = SomeValue Его также можно не экспортировать с -unexport или -u . Это работает и наоборот! Если рыба запускается чем-то другим, она наследует переменные, экспортированные родителями. Итак, если ваш эмулятор терминала запускает рыбу и экспортирует $ LANG, устанавливается на en_US.UTF-8 , рыба получит этот параметр. И независимо от того, что запускало ваш эмулятор терминала, он также дал некоторые переменные, которые он затем передаст, если он специально не решит не делать этого. Вот как рыба обычно получает значения для таких вещей, как $ LANG , $ PATH и $ TERM , без необходимости указывать их снова. Экспортируемые переменные могут быть локальными, глобальными или универсальными - «экспортированные» не являются областью действия! Обычно вы делаете их глобальными с помощью набора -gx MyVariable SomeValue . Подробнее см. Экспорт переменных. Списки Вышеупомянутая команда set использовала кавычки, чтобы гарантировать, что Mister Noodle был одним из аргументов. Если бы это было два аргумента, тогда name был бы списком длины 2. Фактически, все переменные в fish на самом деле являются списками, которые могут содержать любое количество значений или вообще ни одного. Некоторые переменные, например $ PWD , имеют только одно значение. По соглашению мы говорим о значении этой переменной, но на самом деле мы имеем в виду ее первое (и единственное) значение. Другие переменные, например $ PATH , действительно имеют несколько значений. Во время расширения переменная расширяется и становится несколькими аргументами: > echo $ PATH / usr / bin / bin / usr / sbin / sbin / usr / local / bin Переменные, имена которых заканчиваются на «ПУТЬ», автоматически разделяются двоеточиями, чтобы стать списками. Они соединяются двоеточиями при экспорте в подкоманды. Это сделано для совместимости с другими инструментами, которые ожидают, что $ PATH будет использовать двоеточия. Вы также можете явно добавить эту причуду к переменной с помощью набора --path или удалить его с помощью набора --unpath . Списки не могут содержать другие списки: нет рекурсии. Переменная - это список строк, точка. Получить длину списка с количеством : Вы можете добавить (или добавить) к списку, установив список сам по себе с некоторыми дополнительными аргументами. Здесь мы добавляем / usr / local / bin к $ PATH: > установить PATH $ PATH / usr / local / bin Вы можете получить доступ к отдельным элементам с помощью квадратных скобок. Индексирование начинается с 1 с начала и с -1 с конца: > echo $ PATH / usr / bin / bin / usr / sbin / sbin / usr / local / bin > echo $ PATH [1] / usr / bin > echo $ PATH [-1] / USR / местные / бен Вы также можете получить доступ к диапазонам элементов, известным как «фрагменты»: > echo $ PATH [1..2] / usr / bin / bin > echo $ PATH [-1..2] / USR / местные / бен / SBIN / USR / SBIN / бен Вы можете перебирать список (или фрагмент) с помощью цикла for: > для val в $ PATH эхо "запись: $ val" конец запись: / usr / bin / запись: / bin запись: / usr / sbin запись: / sbin запись: / usr / local / bin Списки, смежные с другими списками или строками, раскрываются как декартовы произведения, если не указаны (см. Расширение переменных): > установить 1 2 3 > установить 1 a b c > echo $ a $ 1 1a 2a 3a 1b 2b 3b 1c 2c 3c > echo $ a "банан" 1 банан 2 банана 3 банана > эхо "$ банан" 1 2 3 банана Это похоже на расширение Brace. Подробнее см. Списки. Подстановки команд Подстановки команд используют вывод одной команды в качестве аргумента для другой. В отличие от других оболочек, fish не использует обратные кавычки для подстановки команд. Вместо этого используются круглые скобки: > echo In (pwd), работает (uname) В / home / tutorial, запущена FreeBSD Распространенная идиома - записать вывод команды в переменную: > установить ОС (uname) > echo $ os Linux Подстановки команд не раскрываются в кавычках.Вместо этого вы можете временно закрыть кавычки, добавить подстановку команд и снова открыть их с тем же аргументом: > нажмите "тестирование _" (дата +% s) ". Txt" > ls * .txt testing_1360099791.txt В отличие от других оболочек, fish не разделяет подстановки команд на какие-либо пробелы (например, пробелы или табуляции), а только на новые строки. Это может быть проблемой с такими командами, как pkg-config , которые печатают то, что подразумевается как несколько аргументов в одной строке. Чтобы разделить его также на пробелы, используйте разделение строк . > printf '% s \ n' (pkg-config --libs gio-2.0) -lgio-2.0 -lgobject-2.0 -lglib-2.0 > printf '% s \ n' (pkg-config --libs gio-2.0 | разделение строки -n "") -lgio-2.0 -lgobject-2.0 -lglib-2.0 Если вам нужен вывод команды подстановки как один аргумент, без каких-либо разделений, используйте string collect : > echo "первая строка вторая строка "> myfile > установить myfile (cat myfile | сбор строк) > printf '|% s |' $ myfile | первая строка вторая линия | Подробнее см. Подстановка команд. Разделение команд (точка с запятой) Как и другие оболочки, fish позволяет использовать несколько команд в отдельных строках или в одной строке. Чтобы записать их в одной строке, используйте точку с запятой (";"). Это означает, что следующие два примера эквивалентны: эхо-рыба; эхо-чипы # или эхо рыбы эхо-чипы Статус выхода Когда команда завершается, она возвращает код состояния в виде неотрицательного целого числа. В отличие от других оболочек, fish сохраняет статус выхода последней команды в $ status вместо $? . Это указывает на выполнение команды - 0 обычно означает успех, в то время как другие указывают на неудачу. Например, набор рыб --query возвращает количество запрошенных переменных, которые не были установлены - set --query PATH обычно возвращает 0, набор --query arglbargl boogagoogoo обычно возвращает 2. Также существует переменная списка $ pipestatus для статусов завершения процессов в конвейере. Подробнее см. Переменная состояния. Комбайнеры (И, Или, Не) fish поддерживает знакомые && и || для объединения команд и ! , чтобы отрицать их: > ./configure && make && sudo make install Здесь make выполняется только в случае успеха ./configure (возвращает 0), а sudo make install выполняется только в том случае, если оба ./configure и делают успешными. рыбок тоже поддерживает и, или, и не.Первые два являются модификаторами задания и имеют более низкий приоритет. Пример использования: > cp file1 file1_bak && cp file2 file2_bak; и эхо «Резервное копирование выполнено успешно»; или эхо "Ошибка резервного копирования" Ошибка резервного копирования Как упоминалось в разделе о точке с запятой, это также можно записать в несколько строк, например: cp file1 file1_bak && cp file2 file2_bak и эхо "Резервное копирование выполнено успешно" или эхо "Ошибка резервного копирования" Условные выражения (Если, Иначе, Переключить) Используйте if и else для условного выполнения кода в зависимости от статуса выхода команды. если grep fish / etc / shells эхо Найденная рыба иначе, если grep bash / etc / shells echo Найдено bash еще эхо ничего нет конец Чтобы сравнить строки или числа или проверить свойства файла (существует ли файл, доступен для записи и т. Д.), Используйте test, например если тест "$ fish" = "flounder" эхо FLOUNDER конец # или if test "$ number" -gt 5 echo $ number больше пяти еще echo $ number пять или меньше конец # или # Этот тест верен, если путь / etc / hosts существует # - это может быть файл, каталог или символическая ссылка (или, возможно, что-то еще).если test -e / etc / hosts echo Скорее всего у нас есть файл hosts еще echo У нас нет файла hosts конец Комбайнеры также могут использоваться для создания более сложных условий, например . если grep fish / etc / shells; и команда -sq рыба echo fish установлено и настроено конец Для еще более сложных условий используйте begin и end, чтобы сгруппировать их части. Также есть команда переключения: Переключатель (uname) чехол Linux эхо Привет, Смокинг! случай Дарвина эхо Привет, Хексли! case FreeBSD NetBSD DragonFly эхо Привет, Beastie! кейс '*' эхо Привет, незнакомец! конец Как видите, регистр не проваливается и может принимать несколько аргументов или (заключенных в кавычки) подстановочных знаков. Подробнее см. Условия. Функции Функция рыбы - это список команд, которые могут дополнительно принимать аргументы. В отличие от других оболочек, аргументы передаются не в «нумерованных переменных», таких как $ 1 , а вместо этого передаются в виде единого списка $ argv . Чтобы создать функцию, используйте встроенную функцию: > функция say_hello эхо Привет, $ argv конец > say_hello Привет > say_hello всем! Привет всем! В отличие от других оболочек, у fish нет псевдонимов или специального синтаксиса подсказок.Их место занимают функции. Вы можете перечислить имена всех функций со встроенными функциями (обратите внимание на множественное число!). рыба начинается с ряда функций: > функции N_, abbr, псевдоним, bg, cd, cdh, contains_seq, delete-or-exit, dirh, dirs, disown, down-or-search, edit_command_buffer, export, fg, fish_add_path, fish_breakpoint_prompt, fish_clipboard_copy, fish_clipboard_faste_conste, fish_clipboard_index fish_default_mode_prompt, fish_git_prompt, fish_hg_prompt, fish_hybrid_key_bindings, fish_indent, fish_is_root_user, fish_job_summary, fish_key_reader, fish_md5, fish_mode_prompt, fish_npm_helper, fish_opt, fish_print_git_action, fish_print_hg_root, fish_prompt, fish_sigtrap_handler, fish_svn_prompt, fish_title, fish_update_completions, fish_vcs_prompt, fish_vi_cursor, fish_vi_key_bindings, funced, funcsave, Grep, help, history, hostname, isatty, kill, la, ll, ls, man, nextd, next-or-forward-word, open, popd, prevd, prevd-or-backward-word, prompt_hostname, prompt_pwd, psub, pushd, realpath, seq, setenv, приостановить, trap, type, umask, up-or-search, vared, wait Вы можете увидеть исходный код любой функции, передав ее имя в functions : > функции ls function ls --description 'Список содержимого каталога' команда ls -G $ argv конец Подробнее см. Функции. Петли В то время как петли: > пока правда эхо "Цикл навсегда" конец Цикл навсегда Цикл навсегда Цикл навсегда ... # да, это действительно будет повторяться вечно. Если вы не прервете его с помощью ctrl-c. Циклы For можно использовать для перебора списка. Например, список файлов: > для файла в формате * .txt cp $ file $ file.bak конец Перебор списка чисел может быть выполнен с помощью seq : > для x дюймов (seq 5) коснитесь file_ $ x.текст конец Подробнее см. Циклы и блоки. Подсказка В отличие от других оболочек, здесь нет переменной подсказки, такой как PS1 . Чтобы отобразить вашу подсказку, fish выполняет функцию fish_prompt и использует ее вывод в качестве подсказки. И если он существует, fish также выполняет функцию fish_right_prompt и использует ее вывод в качестве правильного приглашения. Вы можете определить собственное приглашение из командной строки: > функция fish_prompt; echo "Новое приглашение%"; конец Новое приглашение% _ Затем, если вас это устраивает, вы можете сохранить его на диск, набрав funcsave fish_prompt .Это сохранит приглашение в ~ / .config / fish / functions / fish_prompt.fish . (Или, если хотите, вы можете создать этот файл вручную с самого начала.) Несколько строк в порядке. Цвета можно установить с помощью set_color, передав ему названные цвета ANSI или шестнадцатеричные значения RGB: функция fish_prompt set_color фиолетовый дата "+% m /% d /% y" set_color F00 echo (pwd) '>' (set_color нормальный) конец Это приглашение будет выглядеть так: 06.02.13 / home / tutorial> _ Вы можете выбрать один из примеров подсказок, запустив fish_config для веб-интерфейса или fish_config prompt для более простой версии внутри вашего терминала. $ ПУТЬ $ PATH - это переменная среды, содержащая каталоги, в которых Fish ищет команды. В отличие от других оболочек, $ PATH представляет собой список, а не строку, разделенную двоеточиями. Fish позаботится о том, чтобы установить $ PATH по умолчанию, но обычно он просто наследуется от родительского процесса fish и имеет значение, которое имеет смысл для системы - см. Экспорт. Чтобы добавить / usr / local / bin и / usr / sbin к $ PATH , вы можете написать: > установить PATH / usr / local / bin / usr / sbin $ PATH Чтобы удалить / usr / local / bin из $ PATH , вы можете написать: > установить ПУТЬ (совпадение строки -v / usr / local / bin $ PATH) Для совместимости с другими оболочками и внешними командами $ PATH - это переменная пути, поэтому при цитировании она будет объединена двоеточиями (а не пробелами): > echo "$ PATH" / usr / местный / sbin: / usr / местный / bin: / usr / bin , и он будет экспортирован таким образом, и когда рыба запускается, она разбивает полученный $ PATH на список по двоеточию. Вы можете сделать это прямо в config.fish , как и в других оболочках с .profile . См. Этот пример. Более быстрый способ - использовать функцию fish_add_path, которая добавляет заданные каталоги к пути, если они еще не включены. Это достигается путем изменения универсальной переменной $ fish_user_paths , которая автоматически добавляется к $ PATH . Например, чтобы навсегда добавить / usr / local / bin в ваш $ PATH , вы можете написать: > путь_адд_рыбы / usr / local / bin Преимущество в том, что вам не нужно копаться в файлах: просто запустите это один раз в командной строке, и это повлияет на текущий сеанс и все будущие экземпляры.Вы также можете добавить эту строку в config.fish, поскольку она добавляет компонент только при необходимости. Или вы можете изменить $ fish_user_paths самостоятельно, но будьте осторожны, , а не , безоговорочно добавляйте к нему в config.fish, иначе он будет становиться все длиннее и дольше. Запуск (Где .bashrc?) Fish запускается с выполнения команд в ~ / .config / fish / config.fish . Вы можете создать его, если он не существует. В конфиге можно напрямую создавать функции и переменные.fish , используя команды, показанные выше. Например: > кошка ~ / .config / fish / config.fish установить -x ПУТЬ $ ПУТЬ / sbin / функция ll ls -lh $ argv конец Однако более распространенным и эффективным является использование функций автозагрузки и универсальных переменных. Если вы хотите организовать свою конфигурацию, fish также читает команды из файлов .fish в ~ / .config / fish / conf.d / . См. Подробности в файлах конфигурации. Функции автозагрузки Когда fish встречает команду, он пытается автоматически загрузить функцию для этой команды, ища файл с именем этой команды в ~ /.конфигурация / рыба / функции / . Например, если вы хотите иметь функцию ll , вы должны добавить текстовый файл ll.fish в ~ / .config / fish / functions : > кошка ~ / .config / fish / functions / ll.fish функция ll ls -lh $ argv конец Это предпочтительный способ определения вашего приглашения: > кошка ~ / .config / fish / functions / fish_prompt.fish функция fish_prompt echo (pwd) ">" конец См. Документацию для funced и funcsave для получения информации о способах автоматического создания этих файлов и $ fish_function_path для управления их местоположением. Универсальные переменные Универсальная переменная - это переменная, значение которой является общим для всех экземпляров fish, сейчас и в будущем - даже после перезагрузки. Универсальную переменную можно сделать с помощью набора -U : Теперь в другой оболочке: Переходите на рыбу? Если вы хотите использовать fish (или любую другую оболочку) в качестве оболочки по умолчанию, вам нужно ввести исполняемый файл вашей новой оболочки в двух местах. Добавьте оболочку в / etc / shells с помощью: > эхо / usr / local / bin / fish | sudo tee -a / etc / shells Измените оболочку по умолчанию на: > chsh -s / usr / local / bin / fish Предполагается, что вы установили fish в / usr / local / bin, что является местом по умолчанию, когда вы скомпилировали его самостоятельно.Если вы установили его с помощью диспетчера пакетов, обычное расположение - / usr / bin / fish, но менеджеры пакетов обычно уже добавляют его в / etc / shells. Просто подставьте правильное место. (Чтобы вернуться к другой оболочке, просто замените / usr / local / bin / fish с / bin / bash , / bin / tcsh или / bin / zsh в соответствии с шагами выше.) HTML для детей Глава 1 Что такое HTML в любом случае Что такое HTML? HTML означает язык разметки гипертекста.Разработанный ученым Тимом Бернерсом- Ли в 1990 году, HTML - это «скрытый» код, который помогает нам общаться с другими людьми во всемирной паутине (WWW). При написании HTML вы добавляете к тексту «теги», чтобы создать структуру. Эти теги сообщают браузеру, как отображать текст или графику в документе. Например, следующий документ имеет простой макет (структуру). Обратите внимание, что есть три основных части: заголовок, два абзаца и маркированный список. Текстовые редакторы Чтобы добиться аналогичного макета в браузере, вы используете текстовый редактор.Здесь вы размещаете весь свой код и контент. Для ПК это Блокнот; для MAC это TextEdit. Ниже код (зеленый) и текст для этой страницы. Почему я люблю плавать Почему я люблю купаться летом. Плавание - мое самое любимое занятие летом. Когда светит солнце и воздух теплый, вы обнаружите, что я ныряю в бассейн на заднем дворе.Это не впечатляющий бассейн, глубиной всего три фута, но он мой. Есть три причины, по которым я люблю плавать: Я много тренируюсь < / li> Я наслаждаюсь свободой У меня есть возможность побыть на солнце. Вот как это выглядит в редакторе Блокнота: А вот и получившаяся страница в браузере. Заметили, что в браузере пропали теги? Это потому, что теги сообщают браузеру, как отображать файлы, но не отображаются сами по себе. Синтаксис: новое слово для изучения Если вы посмотрите синтаксис слова в словаре, вы узнаете, что это набор правил о том, как соединять слова и фразы вместе, чтобы сформировать хорошие предложения. Другими словами, синтаксис означает грамматику. Компьютерный язык немного отличается.Согласно Ванги Бил из Webopedia, синтаксис: «Относится к орфографии и грамматике языка программирования. Компьютеры - это негибкие машины, которые понимают, что вы набираете, только если вы набираете его в точной форме, которую ожидает компьютер. Ожидаемая форма называется синтаксисом ». Вы будете часто видеть это слово. Важно точно соблюдать синтаксис (то, как написан код), иначе ваш браузер не будет отображать вашу страницу должным образом. Перейти к главе 2: Основные понятия Заявление о конфиденциальности Изучение HTML для детей © 1999- , 2015, Джилл Джефферс Гуделл Содержание Как выучить HTML бесплатно · Практическое руководство для разработчиков Вы слышали, что HTML используется для создания веб-сайтов.Этот пост для вас, если вы хотите изучить HTML, но у вас все еще есть некоторые назойливые вопросы. Да, вы можете изучить HTML, не посещая колледж или учебный лагерь. Фактически, вы можете изучать HTML, не выходя из дома. Однако вам потребуются учебные материалы, которые позволят вам эффективно учиться. К счастью, существует множество веб-сайтов и онлайн-курсов, которые могут помочь вам в обучении. Все, что вам понадобится, это компьютер и подключение к Интернету. Затем вы будете использовать эти онлайн-ресурсы для своих уроков и практики.Так я смог изучить HTML, CSS и Javascript. Зачем вам изучать HTML вы можете легко получить доступ к ресурсам онлайн . вы сэкономите свое время . Вы учитесь, когда у вас есть время, и вам не нужно ехать на занятия. вы экономите свои деньги . Курсы доступны онлайн бесплатно или составляют часть суммы, которую вы заплатили бы за курс колледжа. Как можно выучить HTML, не ходя в школу? Есть много способов изучить HTML.Это: Просмотр видеокурсов на Youtube. Есть много парней, которые создали отличные каналы на YouTube, чтобы научить вас и меня, как создавать веб-сайты. И они обучают базовым и продвинутым навыкам HTML. Существует множество видеокурсов на YouTube, которые могут научить вас HTML. Если вы научитесь хорошо слушать и смотреть, вам понравятся видеокурсы. Некоторые из пройденных мной курсов - это ускоренный курс HTML для абсолютных новичков Брэда Трэверси . Прохождение онлайн-курса. Вы можете изучить HTML, пройдя онлайн-курс, который учит навыкам HTML. Есть много бесплатных и платных курсов. А пока я бы порекомендовал придерживаться самых популярных онлайн-курсов. Это: Краткий вводный курс по HTML на этом сайте. Курс FreeCodeCamp HTML Курс Codecademy HTML Курс Mozilla Dev MDN HTML Team Treehouse [Бесплатная пробная версия] Лучший разработчик HTML Создавайте адаптивные веб-сайты из реального мира с помощью HTML5 и CSS3 Чтение справочных руководств в формате HTML. После нескольких первых уроков вы столкнетесь с ситуацией, когда ваш код работает не так, как вы ожидаете. Используйте ссылки HTML для устранения неполадок в коде. Метод обучения - поиск - запрос Иногда, когда вы застреваете, поищите в Google то, что вы пытаетесь выполнить. Вы, вероятно, получите ответ, как только спросите. Я застрял в HTML, что мне делать? Если при изучении HTML вы столкнулись с проблемой, решения которой не знаете, вы можете попробовать следующие решения: Найдите в Интернете решение вашего вопроса. Присоединяйтесь к активному онлайн-форуму: FreeCodeCamp Forum Присоединяйтесь к группе однокурсников на Facebook, где вы можете задавать вопросы. Как выбрать хороший учебник по HTML Выбирая хорошее учебное пособие по HTML, убедитесь, что курс: актуально. должно быть практическим обучением. охватывает все наиболее часто используемые теги HTML. Практикуйте то, что вы узнали. После того, как вы изучите основы HTML, самое время попрактиковаться в приобретенных навыках.
Категории: Разное

Html учебник: Самоучитель HTML4 | htmlbook.ru

Фреймы | htmlbook.ru

Достоинства фреймов

Простота

Быстрота

Размещение

Изменение размеров областей

Загрузка

Недостатки фреймов

Навигация

Плохая индексация поисковыми системами

Внутренние страницы нельзя добавить в «Закладки»

Несовместимость с разными браузерами

Непрестижность

Группировка ячеек HTML таблиц для новичков

Таблица, с которой мы будем работать

Блок . Как объединить столбцы

Расширим Ячейку1 на два столбца

Расширим Ячейку1 на два столбца без разваливания таблицы

Расширим Ячейку1 на 3 столбца без разваливания таблицы

Блок . Как объединить строки

Расширим Ячейку1 на два ряда

Расширим Ячейку1 на два ряда без разваливания таблицы

Расширим Ячейку1 на 3 ряда без разваливания таблицы

Расширим еще и Ячейку2 на 2 столбца

Что вам делать дальше:

Учебник HTML

Онлайн-примеры в каждом уроке

Онлайн-примеры HTML

Справочник HTML

Учебник HTML:

Web-страницы

Язык HTML

Хорошие книги по Web-дизайну

Учебники | MDN

Вводный уровень

Продвинутый уровень

Javascript учебники

Вводный уровень

Средний уровень

Продвинутый уровень

CSS учебники

Вводный уровень

Средний уровень

Продвинутый уровень

Учебник по JavaScript: 2 часть, нужно знание HTML и CSS, CSS-селекторы: ilyachalov — LiveJournal

Посоветуйте учебник для изучения HTML и CSS

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css книги или задайте свой вопрос.

Intro to React — React

Перед тем, как начать обучение

Что мы строим?

Предварительные требования

Установка для учебника

Вариант установки 1. Запись кода в браузере

Вариант установки 2: Локальная среда разработки

Помогите, я застрял!

Обзор

Что такое React?

Список покупок для {this.props.name}

Проверка стартового кода

Передача данных через реквизиты

Создание интерактивного компонента

Инструменты разработчика

Завершение игры

Состояние подъема вверх

Почему важна неизменность

Изменение данных с мутацией

Изменение данных без мутации

Сложные функции становятся простыми

Обнаружение изменений

Определение момента повторного рендеринга в React

Функциональные компоненты

По очереди

Объявление победителя

Добавление путешествия во времени

Сохранение истории перемещений

Состояние подъема, снова

Отображение прошлых ходов

Выбор ключа

Реализация путешествия во времени

`Создание интерактивного компонента`

`Добавление путешествия во времени`

`Сохранение истории перемещений`

`Состояние подъема, снова`

`Отображение прошлых ходов`

`Заключение`

`Изучите HTML`

`Основы HTML`

`HTML-шаблоны`

`Ссылки HTML`

`HTML-тегов`

`Учебники и ресурсы HTML - W3schools`