Файл: 1 Прототип htmlстраниц вебприложения 3 2 Синтаксис записи тегов и атрибутов в html 3.docx

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 03.02.2024

Просмотров: 165

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

ОГЛАВЛЕНИЕ

1 Прототип html-страниц веб-приложения

2 Синтаксис записи тегов и атрибутов в html

3 Блочные и строчные теги в html

7 Объект Document в DOM браузера

8 Объект Location в DOM браузера

9 Что такое селектор в CSS? (типы селекторов)

10 Способы подключения каскадной таблицы стилей в html-странице Таблицу стилей CSS можно добавить к HTML элементам тремя способами: с помощью атрибута style в HTML-элементах (встроенный или строчный); с помощью тега в разделе (внутренний) с помощью внешнего файла, используя тег (внешний) 11 Синтаксис оформления правил форматирования элементов html-странице в CSS На изображении ниже показана структура (синтаксис) правила: Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль. Далее следует блок объявлений, который начинается с открывающей фигурной скобки { и заканчивается закрывающей }, между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем. Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание ";" можно только в конце последнего объявления перед закрывающей фигурной скобкой. Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.

12 Селекторы атрибутов в 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?

27 Что обозначают знаки: один знак равенства (=), два знака равенства (==) и три знака равенства (===) в JS?

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() при использовании регулярных выражений

43 За счет какого алгоритма обеспечивается быстродействие перестройки html-страницы во фреймворке React?

44 Как подключить фреймворк React к html-странице



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


На изображении ниже показана структура (синтаксис) правила:



  • Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.

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

  • Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание ";" можно только в конце последнего объявления перед закрывающей фигурной скобкой.

  • Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.

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

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

list-item

Элемент выводится как блочный и добавляется маркер списка.

none

Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

run-in

Устанавливает элемент как блочный или встроенный в зависимости от контекста.

table

Определяет, что элемент является блочной таблицей подобно использованию тега .
.
.
).

table-caption

Задает заголовок таблицы

table-cell

Указывает, что элемент представляет собой ячейку таблицы (тег
или ).

table-column

Назначает элемент колонкой таблицы, словно был добавлен тег

table-column-group

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

table-footer-group

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

table-header-group

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

table-row

Элемент отображается как строка таблицы (тег

table-row-group

Создает структурный блок, состоящий из нескольких строк таблицы

Пример