Файл: 1 Прототип htmlстраниц вебприложения 3 2 Синтаксис записи тегов и атрибутов в html 3.docx
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 03.02.2024
Просмотров: 174
Скачиваний: 1
СОДЕРЖАНИЕ
1 Прототип html-страниц веб-приложения
2 Синтаксис записи тегов и атрибутов в html
3 Блочные и строчные теги в html
7 Объект Document в DOM браузера
8 Объект Location в DOM браузера
9 Что такое селектор в CSS? (типы селекторов)
14 Назначение свойства float в CSS
15 Назначение свойства display в CSS
16 Назначение свойства position в CSS
17 Способ включения JS-кода в html страницу
18 Что такое формальные и фактические параметры у функции на языке JavaScript?
19 Создание переменной в языке JavaScript и область видимости переменной
20 Создание функции в языке JavaScript
21 Создание функционального выражения в языке JavaScript
22 Создание стрелочной функции в языке JavaScript
23 Как создать библиотеку функций языка JavaScript?
24 Что такое конкатенации строк в JavaScript?
25 Как создавать массив в JavaScript?
26 Какие символы допускается использовать при создании переменной в JavaScript?
28 Какие символы являются разделителем команд в JavaScript?
29 Назначение оператора return в JavaScript?
30 Создание объектов в JavaScript
31 Логические операторы в языке JavaScript
32 Работа со строками в Javascript
33 Создание и использование библиотек Javascript
36 Ассоциативный массив в JavaScript?
37 Способы подключения библиотеки Jquery в html-странице
39 Как подключить регулярное выражение в коде JavaScript
40 Управляющие символы в регулярном выражении
41 Назначение метода replace() при использовании регулярных выражений
42 Назначение метода match() при использовании регулярных выражений
Location.toString() - Возвращает DOMString, содержащий URL целиком. Это синоним URLUtils.href, однако он не может использоваться для изменения значения.
9 Что такое селектор в CSS? (типы селекторов)
Селектор - это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.
Универсальный селектор
Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта.
Селектор типа
Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1.
Селектор класса
Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта.
Селектор идентификатора
Селектор идентификатора позволяет форматировать один конкретный элемент. Значение id должно быть уникальным, на одной странице может встречаться только один раз и должно содержать хотя бы один символ.
Селектор потомка
Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li, являющиеся потомками всех элементов ul.
Дочерний селектор
Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента, может быть, несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong, являющиеся дочерними по отношению к элементу p.
Сестринский селектор
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня:
-
h1 + p — выберет все первые абзацы, идущие непосредственно за любым элементом , не затрагивая остальные абзацы;
Селектор атрибута
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:
-
[атрибут] — все элементы, содержащие указанный атрибут, [alt] — все элементы, для которых задан атрибут alt;
Селектор псевдокласса
Псевдоклассы — это классы, фактически не прикрепленные к HTML-элементам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу.
-
:link — не посещенная ссылка; -
:visited — посещенная ссылка; -
:hover — любой элемент, по которому проводят курсором мыши;
Селектор структурных псевдоклассов
Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:
-
:nth-child(odd) — нечётные дочерние элементы; -
:nth-child(even) — чётные дочерние элементы;
Селектор структурных псевдоклассов типа
Указывают на конкретный тип дочернего элемента:
-
:nth-of-type() — выбирает элементы по аналогии с :nth-child(), при этом берёт во внимание только тип элемента;
Селектор псевдоэлемента
Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:
-
:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;
10 Способы подключения каскадной таблицы стилей в html-странице
Таблицу стилей CSS можно добавить к HTML элементам тремя способами:
-
с помощью атрибута style в HTML-элементах (встроенный или строчный);
-
с помощью тега в разделе (внутренний)
-
с помощью внешнего файла, используя тег (внешний)
11 Синтаксис оформления правил форматирования элементов html-странице в CSS
На изображении ниже показана структура (синтаксис) правила:
-
Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.
-
Далее следует блок объявлений, который начинается с открывающей фигурной скобки { и заканчивается закрывающей }, между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем.
-
Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание ";" можно только в конце последнего объявления перед закрывающей фигурной скобкой.
-
Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.
с помощью атрибута style в HTML-элементах (встроенный или строчный);
с помощью тега в разделе (внутренний)
с помощью внешнего файла, используя тег (внешний)
Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.
Далее следует блок объявлений, который начинается с открывающей фигурной скобки { и заканчивается закрывающей }, между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем.
Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание ";" можно только в конце последнего объявления перед закрывающей фигурной скобкой.
Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.
12 Селекторы атрибутов в CSS
Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.
В качестве селектора используются квадратные скобки, внутри которых пишется произвольный атрибут.
[title] { border-bottom: 1px dotted blue; }
Здесь для всех элементов, к которым добавляется атрибут title, задаётся нижнее точечное подчёркивание синего цвета.
Чтобы сузить число элементов, перед квадратными скобками ставится имя элемента без пробелов.
a[target] { font-weight: bold; }
В данном случае выбираются только элементы , к которым добавлен атрибут target с произвольным значением.
13 Что можно изменять на веб странице с помощью каскадных таблиц стилей?
Каскадные таблицы стилей (Cascading Style Sheets, CSS) — это стандарт, определяющий представление данных в браузере. Если HTML предоставляет информацию о структуре документа, то таблицы стилей сообщают как он должен выглядеть.
Стиль — это совокупность правил, применяемых к элементу гипертекста и определяющих способ его отображения. Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
Другими словами, каскадные таблицы стилей используются для задания цветов, шрифтов, расположения и других аспектов представления веб-документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и оформления документа (написанного на CSS).
14 Назначение свойства float в CSS
Определение
CSS-свойство float указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.
Синтаксис
float: left | right | none | inherit
Значения
left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right - Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none - Обтекание элемента не задается.
inherit - Наследует значение родителя.
Пример
15 Назначение свойства display в CSS
Определение
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, inline-block, inline-table, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно.
Значение | Описание | ||||||||||||||||||||||||||
block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. | ||||||||||||||||||||||||||
inline | Элемент отображается как встроенный. Использование блочных тегов, таких как и
, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. | ||||||||||||||||||||||||||
inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. | ||||||||||||||||||||||||||
inline-table | Определяет, что элемент является таблицей как при использовании тега
|