{"draftJsState":{"blocks":[{"data":{"image":{"id":"5fa7f626b1fbcf2e236eb2f7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"15lue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5rdsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"fmmq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спецсимволы\n","type":"header-two","key":"2bc73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помимо тегов в языке HTML используется специальный управляющий символ & — амперсант. Этот символ используется для вывода специальных символов и символов из расширенной кодовой таблицы, которые нельзя ввести с клавиатуры. Например, вывод самого символа амперсант & осуществляется посредством последовательности символов &аmp; для вывода угловых скобок используются < для “<” и > для “>”, а, скажем, символ с номером 182 из кодовой таблицы, может быть задан последовательностью ¶.\n","type":"header-three","key":"f8hvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый часто используемый спецсимвол – это неразрывный пробел (его мнемоника ).\n","type":"header-three","key":"bpv0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данный символ используется для контролирования переноса строки (после данного символа автоматический перевод строки невозможен) и для вставки в текст подряд идущих пробелов (по умолчанию, если вы вставите в текст 5 подряд идущих пробелов, браузер вырежет 4 и отобразит лишь один).\n","type":"header-three","key":"a4bpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мнемоники и коды часто используемых спецсимволов\n","type":"header-three","key":"5rl82"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Символ Описание Мнемоника Коd\n","type":"unstyled","key":"6evsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пробел \n","type":"unstyled","key":"87thr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"< Меньше чем < <\n","type":"unstyled","key":"b9tvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"> Больше чем > >\n","type":"unstyled","key":"1f1fc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"© Знак охраны авторского права © ©\n","type":"unstyled","key":"361rh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"® Зарегистрированный товарный знак ® ®\n","type":"unstyled","key":"r5va"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"& Знак амперсанда & &","type":"unstyled","key":"3ko58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6glg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Семантические теги","type":"header-two","key":"36qg3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Благодаря использованию CSS вы можете создавать страницы с хорошо понятной для пользователей визуальной структурой, но будут ли эти страницы также понятны для поисковых систем или браузеров?","type":"header-two","key":"2a78m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, как поисковый робот может отличить содержимое документа от навигационного меню если они размечены с помощью одинаковых div-элементов?","type":"header-two","key":"c42qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того, чтобы разрешить эту проблему, в HTML5 были введены семантические теги. С помощью семантических тегов вы можете сделать страницы сайтов более понятными для поисковых систем и браузеров.

Определяет футер

Определяет заголовочный блок сайта

Определяет навигационное меню С помощью тега

вы можете группировать логически связанное содержимое в документе.","type":"header-two","key":"i0kb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если логически связанное содержимое является автономным (может использоваться в других документах независимо от остального содержимого на странице) необходимо использовать вместо

тег

. Тег aside используется для выделения элементов, которые не являются частью содержимого, но косвенно с ним связаны.","type":"header-two","key":"c6kob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данным тегом могут выделяться: цитаты, дополнительная информация к статье, словарь с терминами, список ссылок и т.д.","type":"header-two","key":"4e45f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как уже говорилось выше, с помощью тега вы можете выделить \"важную\" часть в тексте.","type":"header-two","key":"dts3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В журналах и газетах иллюстрации часто сопровождаются подписями. В HTML4 невозможно было создавать подписи, не прибегая к использованию CSS.","type":"header-two","key":"9uelr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В HTML5 это проблема решена добавлением новых тегов:

.","type":"header-two","key":"55slg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"header-two","key":"7u51u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"501ss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
Мы с Машей на отдыхе, Красное море
","type":"header-two","key":"6hqeq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"header-two","key":"5er8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"5mt1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форма////","type":"header-two","key":"cmh64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функциональность сайтов, предоставляющих пользователю возможность ввода данных и получения результатов их обработки, обеспечивается использованием программ, работающих на стороне сервера — серверных приложений. Эти приложения обрабатывают полученные от посетителя Web-сайта данные и выдают результат в виде обычной Web-страницы.","type":"header-two","key":"f8tpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Именно для них в HTML предусмотрена возможность создания Web-форм и элементов управления — чтобы посетитель мог ввести данные, которые потом обработает серверное приложение.","type":"header-two","key":"fdfcj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основная схема работы серверного приложения:","type":"header-two","key":"3r8oa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Посетитель вводит в элементы управления, расположенные в Web-форме на Web-странице, нужные данные.","type":"header-two","key":"daud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Введя данные, посетитель нажимает расположенную в той же Web-форме особую кнопку — кнопку отправки данных.","type":"header-two","key":"6njpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Web-форма кодирует введенные в нее данные и отправляет их серверному приложению, расположенному по указанному интернет-адресу.","type":"header-two","key":"cilo3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Web-сервер перехватывает отправленные данные, запускает серверное приложении и передает данные ему.","type":"header-two","key":"40ehu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Серверное приложение обрабатывает полученные данные.","type":"header-two","key":"fk72j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Серверное приложение формирует ответ (возможно, это Web-страница) с результатами обработки данных посетителя и передает ее Web-серверу.","type":"header-two","key":"acbhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Web-сервер получает сформированную серверным приложением ответ и отправляет ее посетителю.","type":"header-two","key":"4vl7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.","type":"header-two","key":"232mo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для создания интерактивных HTML-документов используют заполняемые формы, определяемые тегом form. В одном документе может быть определено несколько форм для заполнения, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга и вложенные теги form не допускаются. Формат тега form следующий:","type":"header-two","key":"45j8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
...
","type":"header-two","key":"bdnf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь используются следующие атрибуты:","type":"header-two","key":"9ihib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-- action=url – URL-адрес сервера запросов, куда будет отослано содержание формы после подтверждения. Если это поле отсутствует, будет использован URL-адрес текущего документа.","type":"header-two","key":"3n8ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-- method=GET/POST – HTTP-метод, используемый для посылки содержания заполненной формы на сервер. Возможные варианты при этом следующие:","type":"header-two","key":"7jd0r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• GET – это метод по умолчанию, который приводит к добавлению содержимого заполненной формы к URL;","type":"header-two","key":"dh071"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• POST – при использовании этого метода содержимое заполненной формы пересылается не как часть URL, а как содержимое тела запроса.","type":"header-two","key":"45il5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• ENCTYPE - задаёт тип кодирования содержимого заполненной формы.","type":"header-two","key":"df6a1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот атрибут действует только когда используется метод POST.","type":"header-two","key":"aaa8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойства и методы формы:","type":"header-two","key":"a1q2c"},{"data":{"image":{"id":"5fa7eceb1aeb58326c19a3c4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9gt7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action тега
. Предварительно браузер подготавливает информацию в виде пары \"имя=значение\", где имя определяется атрибутом name тега , а значение введено пользователем или установлено в поле формы по умолчанию.","type":"header-three","key":"64bbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутрь контейнера помещаются другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.","type":"header-three","key":"bqr3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги формы*****/","type":"header-two","key":"2m0n3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cikil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри тега form могут находиться любые теги, кроме другого тега form.","type":"header-three","key":"ff105"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для задания интерфейсных элементов внутри form используются теги input, select, textarea и другие. Давайте их рассмотрим.","type":"header-three","key":"4ik7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того чтобы ввести информацию о пользователе (логин, пароль, дату рождения и т.д.) используют элемент ввода . Его основной атрибут – type – определяет, что мы будем вводить и как.","type":"header-three","key":"5k3vm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег input используется для задания простого элемента ввода, при этом могут быть использованы следующие атрибуты:","type":"header-three","key":"9vpmn"},{"data":{"image":{"id":"5fa7ee128eb5b23a300a9b96"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7buqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8vn19"},{"data":{"image":{"id":"5fa7ee9f47a34812ce36dafb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9c8r7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения предпоследнего атрибута type в списке очень обширны и важны, поскольку задают поведение при вводе в input","type":"header-three","key":"e0r60"},{"data":{"image":{"id":"5fa7ef8f3a59d85105d9b0d5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5edl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1jhs4"},{"data":{"image":{"id":"5fa7f01c1aeb58326c1f7ef7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fi81r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очень часто мы сталкиваемся с необходимостью выбора. Например, мы выбираем, согласны ли с лицензионным соглашением, мы выбираем какие странички отображать в меню соц. сети, приложения.","type":"header-three","key":"6mhsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда надо выбрать несколько элементов из многих, используют checkbox –поле с квадратиком, куда устанавливается галочка. Создается это поле так:","type":"header-three","key":"ff55i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"mgq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Английский
","type":"header-three","key":"a7098"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"value – значение, которое вы выбрали. Используется для обработки в скриптах. Рядом с полем пишется то слово, которое соответствует элементу выбора, и которое мы хотим отобразить на странице в браузере.","type":"header-three","key":"7vnkd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда мы можем выбирать только один элемент из списка предложенных альтернатив. Например, мы выбираем пол: мужской/женский. Такой выбор нам помогут организовать радиокнопки.","type":"header-three","key":"sd47"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"81dt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаются они так:","type":"header-three","key":"a2d56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" мужской","type":"header-three","key":"8j2tu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" женский","type":"header-three","key":"8got6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что имена (name) – одинаковые. Это обеспечивает то, что вы сможете выбрать (одновременно) только один из элементов.","type":"header-three","key":"4b8i6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда очень удобно задавать альтернативы в виде выпадающего списка.","type":"header-three","key":"8enh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На некоторых сайтах так организован выбор страны, вуза, возраста.","type":"header-three","key":"162er"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задание перечня альтернатив удобно для обработки, так как пользователь правильно введёт данные (ну хотя бы с точки зрения орфографии).","type":"header-three","key":"7h6uj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование выпадающего списка значительно экономит место на форме.","type":"header-three","key":"b3c6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег select предназначен для создания списков в форме, при этом внутри разрешена только последовательность тегов option, за каждым из которых следует некоторое количество простого текста. Атрибуты тега select следующие: name=идентификатор – символьное имя для элемента select, по которому он идентифицируется; size=n – если значение равно 1 или если этот атрибут опущен, то элемент select будет представлен как выпадающее меню. Если size = 2 или более, то элемент будет представлен как окно выбора, а значение будет определять, сколько элементов списка будут видны; multiple – если этот атрибут присутствует, то допускается множественный выбор из списка.","type":"header-three","key":"9trqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4n9ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создать список можно так:","type":"header-three","key":"chjal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"a3dq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"где select – сам список, option – элемент списка.","type":"header-three","key":"4q6u0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно так же организовать выбор из заданного списка: datalist. Это называется альтернативой и ее можно задавать с помощью списка вариантов:","type":"header-three","key":"fq18c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Любимое блюдо","type":"header-three","key":"2v8ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"4glr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1sa2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"4r6s0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"d0odn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"eaqt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1f0qr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"3kcu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание на то, что атрибут list элемента input и атрибут id элемента содержат одинаковое значение dish_list. Это их связывает.","type":"header-three","key":"8mvod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег button создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега (с атрибутом type=\"button | reset | submit\"). В отличие от этого тега, ","type":"unstyled","key":"83l12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7bmeh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ckko6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"которая в браузере будет выглядеть так, как показано на рис. 1 .","type":"unstyled","key":"amsdi"},{"data":{"image":{"id":"5fa7f2801aeb58326c23dedd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7h2g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблицы%%%","type":"header-two","key":"8nkfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6f94f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В таблице каждый кусок информации отображается в ячейке (cell).","type":"header-three","key":"6ffj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ячейки, лежащие на одной линии, составляют строку (row). В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы – заголовок (header), в конце – нижний колонтитул (footer). Главные строки таблицы – тело (body), и они могут быть также сгруппирированы.","type":"header-three","key":"ck5ck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ячейки в линии сверху вниз, составляют столбец (column), но столбцы имеют ограниченное приминение в таблицах CSS.","type":"header-three","key":"70r01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Описание таблиц в HTML-документах осуществляется с помощью тега . Таблица задается двумя тегами: , – описание строки таблицы и – описание клетки таблицы.","type":"header-three","key":"77a4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ячейки не имеют границ. У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, это свойство border-spacing.","type":"header-three","key":"90i23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы можете также полностью удалить пространство, установив свойство таблицы border-collapse в collapse.","type":"header-three","key":"d18f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию, текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.","type":"header-three","key":"1j0db"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допускается добавлять к таблице, строке или столбцу заголовок. Тег caption после тега table задает заголовок к таблице, который по умолчанию центрируется относительно таблицы и, по умолчанию, она отображается вверху таблицы.","type":"header-three","key":"23ohb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы переместить её вниз, установите её свойство caption-side в bottom.","type":"header-three","key":"9q21s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка. Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.","type":"header-three","key":"1cfpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег
,
должен размещаться внутри тега , причём непосредственно внутри него и первым, до остальных вложенных тегов.","type":"header-three","key":"ecq9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Задание заголовка к строке или столбцу таблицы осуществляется при помощи тега th после tr или td соответственно.","type":"header-three","key":"8g11p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут border= к тегу table рисует рамку вокруг таблицы и каждой клетки, при этом ширина рамки задается в пикселях. Следует иметь ввиду, что атрибуты colspan= и rowspan= тегов td и tr позволяют объединять клетки таблицы в группы, вокруг которых рисуется рамка.","type":"header-three","key":"2gf9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим пример таблицы, занимающей по ширине весь экран браузера:","type":"header-three","key":"c8aam"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"header-three","key":"2k2e5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5ub4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"8kdmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5cgqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"v8bn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"boj85"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"dg56b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"bpu6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"ct6ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"2e90e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"dcf5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"header-three","key":"46qq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Две ячейки, объединенные по горизонтали","type":"header-three","key":"3kk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"
","type":"header-three","key":"e9jib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Две ячейки, объединенные по вертикали","type":"header-three","key":"c4omi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" просто ячейка
просто ячейка
","type":"header-three","key":"e1gj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"что в окне браузера даст результат, приведённый на рис. 2.","type":"header-three","key":"gjj2"},{"data":{"image":{"id":"5fa7f433b1fbcf2e236b212e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a2q4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как хорошо стилизовать таблицу с помощью CSS? Необходимо знать несколько основных свойств и то, как они работают. Это уже упоминавшиеся border-spacing и border-collapse. border-collapse устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка. Значение по умолчанию separate.","type":"header-three","key":"fgegk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис:","type":"header-three","key":"c6vl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-collapse: collapse | separate","type":"header-three","key":"9uik6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения: collapse – линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing. separate – вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. border-spacing - задаёт расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse. Значение по умолчанию 0.","type":"header-three","key":"dkjkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис:","type":"header-three","key":"43l6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-spacing: <размер> [<размер>]","type":"header-three","key":"2vrbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения: Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.","type":"header-three","key":"8q7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8ssc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и всё эти самые основы вы и должны знать без теории без мысленно начинать практику.. а так же подписывайтесь на сообщество в вк https://vk.com/treeplantbussines там я выкинул урок в формате psd а так же в видео. Будет урок по основам css до скорой встречи! ","type":"unstyled","key":"9nkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6qt3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ie4DhLjSeeI6JQeQFOXa"}],"entityMap":{}},"mentions":[]}