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

Содержание

Фреймы | 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
Ячейка 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
Ячейка 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-дизайну

  1. Дуванов А. Web-конструирование. HTML. — СПб: БХВ-Петербург, 2005.
  2. Дуванов А. Web-конструирование. DHTML. — СПб: БХВ-Петербург, 2003.
  3. Кирсанов Д. Веб-дизайн. — М: Символ-Плюс, 2006.
  4. Зельдман Д. Web-дизайн по стандартам. — М: НТ-Пресс, 2005.
  5. Нильсен Я. Веб-дизайн. — М: Символ-Плюс, 2006.
  6. Смирнова И.Е. Начала Web-дизайна. — СПб: БХВ-Петербург, 2005.
  7. Нильсен Я., Лоранжер Х. Web-дизайн. Удобство использования Web-сайтов. — М: Вильямс, 2007.
  8. Лебедев А. Ководство. Параграфы о дизайне. — М: Издательство Студии Лебедева, 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 на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.

Присоединиться к сообществу

Любой может задать вопрос

Любой может ответить

Лучшие ответы получают голоса и поднимаются наверх

Вопрос задан

Просмотрен 17k раз

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 6 лет назад.

Друг хочет научиться верстать. Была попытка ему объяснять, но этого я совсем не умею на уровне "с нуля"... Подскажите, пожалуйста, нормальный учебник, где обучают основам верстки. И по-новее, желательно, чтобы не было оформления лэйаута таблицами..

Заранее спасибо!

задан 27 апр '13 в 8:00

inferusvvinferusvv

2,8521212 золотых знаков5252 серебряных знака9898 бронзовых знаков

4

Вот вам лучший учебник - http://htmlbook.ru/

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.