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

Название	1 Прототип htmlстраниц вебприложения 3 2 Синтаксис записи тегов и атрибутов в html 3
Дата	04.04.2023
Размер	265.45 Kb.
Формат файла
Имя файла	Ekzamenatsionnye_voprosy.docx
Тип	Документы #1037669
страница	2 из 9

1 2 3 4 5 6 7 8 9

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

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы.

Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display, такие как block, list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента.

, -

,
,
,

Встроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display, такие как inline и inline-table делают элементы строчными.

<a>, <iframe>, <img>, 

Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;}. Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.

, <h2> 4 Структура html-страницы Элементы, находящиеся внутри элемента <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом. <img src="1037669_html_941beee1cea521c.png" name="image1.png" align="bottom" width="602" height="107" border="0"/> <img src="1037669_html_9d36f0eba2255227.png" name="image2.png" align="bottom" width="589" height="308" border="0"/> Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские. <ul> <li/> Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем элементов: , , , <nav> и т.д. <li/> Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент является потомком одновременно для <body> и <html>. <li/> Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Элемент является родительским только для . <li/> Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h2>, <h2>, и <nav> являются дочерними по отношению к <body>. <li/> Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h2>, <h2> и являются между собой сестринскими. </ul> <h2> 5 <a href="/obektnaya-modele-dokumenta-document-object-model-dom/index.html" title="Объектная модель документа (Document Object Model, dom)">Объектная модель документа браузера</a> Объектная Модель Документа (DOM) – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера. Согласно DOM-модели, документ является иерархией. Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. В ближайшем приближении DOM – это "дерево узлов" (node tree). У него единый корень, который разветвляется на множество дочерних ветвей, каждая из которых может ветвиться сама и заканчивается "листьями". Корень – это элемент html, а ветви – вложенные элементы. Проще говоря, DOM - это представление документа в виде дерева тегов. Это дерево образуется за счет вложенной структуры <a href="/konspekt-osnovi-html-i-css/index.html" title="Конспект «Основы html и css»">тегов плюс текстовые фрагменты страницы</a>, каждый из которых образует отдельный узел. <h2> 6 Описание и использование DOM событий</h2> События DOM присылаются чтобы уведомить код о том, что интересующие его действия произошли. События могут возникать в результате действий пользователя, таких как использование мыши или изменение размера окна, изменения состояния базовой среды (например, низкий заряд батареи или мультимедийные события из операционной системы) и других причин. Каждое событие представляет собой объект, который основан на интерфейсе Event и может иметь дополнительные поля и/или функции, позволяющие <a href="/rubejnaya-kontrolenaya-rabota-1-zadanie-1/index.html" title="Рубежная контрольная работа 1 Задание 1">получить дополнительную информацию о том</a>, что произошло. События мыши: <ul> <li/> click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании). <li/> contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши. <li/> mouseover / mouseout – когда мышь наводится на / покидает элемент. <li/> mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе. <li/> mousemove – при движении мыши. </ul> События на элементах управления: <ul> <li/> submit – пользователь отправил форму <form>. <li/> focus – пользователь фокусируется на элементе, например нажимает на <input>. </ul> Клавиатурные события: <ul> <li/> keydown и keyup – когда пользователь нажимает / отпускает клавишу. </ul> События документа: <ul> <li/> DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен. </ul> Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого. Использование атрибута HTML Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>. Использование свойства DOM-объекта Можно <a href="/pri-viyavlenii-furunkula-preddveriya-nosa-sleduet/index.html" title="При выявлении фурункула преддверия носа следует">назначить обработчик</a>, используя свойство DOM-элемента on<событие>. К примеру, elem.onclick: Доступ к элементу через this Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором назначен обработчик. </input></form></h2></h2></body></head></body></nav></h2></h2></body></head></html></html></body></html></body></nav></body></html></html></html></h2>

1 2 3 4 5 6 7 8 9