Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Харьковский Национальный Университет им. В. Н. Каразина

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

elements_of_HTML.doc

Скачиваний:

Добавлен:

01.07.2025

Размер:

591.36 Кб

Скачать

☆

<<< < Предыдущая 1 2 3 45 / 55

Синтаксис

<ul>
  <li>элемент маркированного списка</li>
</ul> 

<ol>
  <li>элемент нумерованного списка</li>
</ol>
Закрывающий тег Не обязателен.
Атрибуты: value Число, с которого будет начинаться нумерованный список. 
70) Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a>.
<head>
  <link href="<адрес>">
</head>
Закрывающий тег Не требуется.
Атрибуты: href Путь к связываемому файлу. 
Media Определяет устройство, для которого следует применять стилевое оформление.

Rel Определяет отношения между текущим документом и файлом, на который делается ссылка.

Sizes Указывает размер иконок для визуального отображения.

Type MIME-тип данных подключаемого файла.: 71) Предназначен для вывода листинга программ или кода. Отображает содержимое моноширинным шрифтом уменьшенного размера.

Это устаревший элемент, взамен него используйте элемент <code>.

<listing>Текст</listing>
72) Элемент <main> предназначен для основного содержимого документа. На странице может быть только один <main> и он не должен располагаться внутри элементов <article>, <aside>, <footer>, <header> или <nav>.

Элемент <main> включает в себя содержимое, которое является уникальным для данного документа, и не должен включать повторяющиеся разделы сайта, такие как навигация, название сайта, логотип, поисковая форма, баннеры и др.

<main>
</main>
73) Элемент <map> служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования <map> — в связывании элемента <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в <img>, задаваемого атрибутом usemap, так и в <map>, устанавливаемого атрибутом name.
<map name="<имя>">
  <area>
</map>
Атрибуты: name Имя карты-изображения.
74) Элемент <marquee> создаёт бегущую строку на странице. На самом деле содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т. д. Перемещение можно задать не только по горизонтали, но и по вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Это нестандартный элемент, взамен него используйте стили.

<marquee>...</marquee>
Атрибуты: behavior Задаёт тип движения содержимого контейнера <marquee>.

Bgcolor Цвет фона.

Direction Указывает направление движения содержимого контейнера <marquee>.

Height Высота области прокрутки.

Hspace Горизонтальные поля вокруг контента.

Loop Задаёт, сколько раз будет прокручиваться содержимое.

Scrollamount Скорость движения контента.

Scrolldelay Величина задержки в миллисекундах между движениями.

Truespeed Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
Vspace Вертикальные поля вокруг содержимого.

Width Ширина области прокрутки.: 75) Элемент <mark> помечает текст как выделенный. В браузере фоновый цвет текста внутри <mark> выделяется жёлтым цветом.

Авторы обычно используют <mark> для привлечения внимания читателя к части текста. Заметьте, что такой текст ничего не говорит о важности выделенного фрагмента, а лишь предлагает обратить на него внимание.

<mark>текст</mark>
76) Элемент <menu> предназначен для отображения списка пунктов меню. Аналогично элементам <ol> и <ul> внутри контейнера <menu> список формируется с помощью <li>.

В HTML4 элемент <menu> вышел из употребления, вместо него рекомендуется использовать <ul>. В HTML5 элемент <menu> вновь включен, но уже в другом качестве. Теперь он выступает контейнером для элемента <command> и создания меню.

<menu>
  <li>пункт меню</li>
  <li>пункт меню</li>
</menu>
Атрибуты: label Устанавливает видимую метку для меню.

Type Задаёт тип меню.: 77) <menuitem> Задаёт команду, которую пользователь может вызывать через контекстное меню. Команда выглядит как текстовая метка, а также дополнительно может содержать небольшую картинку. Сама команда связана с программой на JavaScript.; Значения: checked Устанавливает, что команда выбрана. Используется в сочетании с типом checkbox или radio.
Default Выбирает команду меню по умолчанию.

Disabled Блокирует команду меню.

Icon Адрес изображения, которое будет выводиться перед текстом команды.

Label Название команды показываемое пользователю.

Radiogroup Задаёт имя группы переключателей.

Type Задаёт тип команды.

Закрывающий тег Не обязателен.

78) Элемент <meta> определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», имена которых определяются ключевыми словами content, name или http-equiv.

<head>
  <meta>
</head>
Закрывающий тег Не требуется.
Атрибуты: charset Задаёт кодировку документа.

Content Устанавливает значение атрибута, заданного с помощью name или http-equiv.

Http-equiv Предназначен для конвертирования метатега в заголовок HTTP.

Name Имя метатега, также косвенно устанавливает его предназначение.: 79) Используется для вывода значения в некотором известном диапазоне. Применяется преимущественно для отображения числовых значений, например, количества результатов поиска, объёма жидкости, давления и др.

Браузеры, которые поддерживают элемент <meter>, отображают значение в виде рисунка, на котором цветом помечается текущее значение в указанном диапазоне. Остальные браузеры выводят текст, написанный внутри <meter>.

<meter value="<число>">текст</meter>
Атрибуты: value Устанавливает значение.

Min Задаёт минимально возможное значение.

Max Задаёт максимально возможное значение.

Low Определяет предел, при достижении которого значение считается низким.

High Определяет предел, при достижении которого значение считается высоким.

Optimum Определяет наилучшее или оптимальное значение.: 80) Задаёт количество колонок, ширину и расстояние между колонок в многоколоночном тексте.

Это нестандартный элемент, не используйте его, взамен применяйте стили.

<multicol cols="<число>">Текст</multicol>
Атрибуты: cols Количество колонок.

Gutter Расстояние между колонок в пикселях.

Width Определяет общую ширину колонок включая пространство между ними. Это значение может быть задано в пикселях или процентах.

Примечание Для создания многоколоночного текста применяется стилевое свойство columns.: 81) Элемент <nav> задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

<nav>ссылки</nav>
82) Элемент <nobr> уведомляет браузер отображать текст без переносов. Без него текст выравнивается по левому краю окна браузера или родительского элемента. При этом браузер переводы строк расставляет автоматически, чтобы текст полностью поместился по ширине окна. Использование <nobr> заставляет отображать текст без переносов, одной строкой, что может привести к появлению горизонтальной полосы прокрутки. Пользователям придется прокручивать текст по горизонтали, чтобы увидеть его полностью.

Это нестандартный элемент, взамен него используйте стили.

<nobr>Текст</nobr>
83) Элемент <noembed> предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами. Во всех остальных случаях содержимое контейнера <noembed> будет проигнорировано.

Плагином называется подключаемый к браузеру программный модуль, расширяющий возможности браузера. Например, к плагинам можно отнести поддержку Flash, QuickTime VR, VRML и т. д.

Это нестандартный элемент, не используйте его.

<noembed>Текст</noembed>
84) Поисковый робот Яндекса «ходит» по сайтам, просматривает и анализирует их содержимое, после чего сохраняет указатель на текст и изображения в поисковую базу данных Яндекса. Такой процесс называется индексированием. Часть веб-страницы можно закрыть от индексирования, поместив её внутрь элемента <noindex>. Тогда при следующем посещении веб-страницы поисковый робот проигнорирует такое содержимое и не станет добавлять его в свою базу данных. Это делается по разным причинам, к примеру, закрытые от индексации ссылки не передают ТИЦ (тематический индекс цитирования).

Важно понимать, что это нестандартный элемент и придуман Яндексом для своих целей. Браузеры никак не поддерживают <noindex> и просто выводят его содержимое как обычно.

Если вам нужно закрыть ссылку для поисковиков, добавьте к ней атрибут rel со значением nofollow:

<a href="//webref.ru" rel="nofollow">Ссылка не индексируется</a>

Если требуется закрыть для поисковиков всю страницу используйте элемент <meta>, добавив его в код HTML:

<meta name="robots" content="noindex">

Или добавьте в файл robots.txt следующую строку:

Disallow: /private.html

Где private.html адрес страницы.

<noindex>...</noindex>
85) Содержимое элемента <noframes> отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое <noframes>. Как правило, внутри этого элемента располагается текст, информирующий пользователя о том, что его браузер фреймы не поддерживает или с предложением перейти на страницу без фреймов.

Поскольку все современные браузеры поддерживают фреймы, данный элемент потерял свою актуальность.

<frameset>
 <noframes>Текст</noframes>
</frameset>
86) Контейнер <noscript> показывает своё содержимое, если браузер не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях браузер игнорирует этот элемент и всё, что располагается внутри него.
<noscript>Текст</noscript>
87) Элемент <object> сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

Дополнительно внутрь контейнера <object> можно поместить элемент <param>, который передаёт дополнительные параметры для отображения объекта.

<object></object> 
Атрибуты: data Адрес файла для его отображения в окне браузера.

Height Высота объекта.

Type MIME-тип объекта.

Width Ширина объекта.: 88) Элемент <ol> устанавливает нумерованный (упорядоченный) список. Каждый элемент списка должен начинаться с <li>. Если к <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.

<ol>
  <li>элемент нумерованного списка</li>
  <li>элемент нумерованного списка</li>
</ol>
Атрибуты: type Устанавливает вид маркера списка.

Reversed Нумерация в списке становится по убыванию (3,2,1).

start Задаёт число, с которого будет начинаться нумерованный список.: 89) Элемент <optgroup> представляет собой контейнер, внутри которого располагаются элементы <option>, объединённые в одну группу. Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения.

<select>
 <optgroup label="<текст>">
  <option>...</option>
 </optgroup> 
</select>
Атрибуты: disabled Блокирует доступ к группе списка.

Label Текст, который будет входить в список в виде заголовка группы.: 90) Элемент <option> определяет отдельные пункты списка, создаваемого с помощью контейнера <select>. Ширина списка определяется самым широким текстом, указанным в <option>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>
Закрывающий тег Не обязателен.
Атрибуты: disabled Заблокировать для доступа элемент списка.

Label Указание метки пункта списка.

Selected Заранее устанавливает определённый пункт списка выделенным.

Value Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.: 91) Определяет область в которую выводится информация, преимущественно с помощью скриптов.

<output>
</output>
Атрибуты: for Определяет идентификатор одного и более элементов для связывания с элементом <output>.
Form Задаёт имя формы, которой принадлежит область для вывода.
Name Задаёт уникальное имя элемента.
92) Определяет текстовый абзац. Элемент <p> является блочным, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой . Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего абзаца или другого блочного элемента.
<p>Текст</p>
Закрывающий тег Не обязателен.
93) Элемент <param> предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью элементов <applet> или <object>. Такой подход позволяет прямо в коде HTML-документа изменять характеристики объекта без его дополнительной компиляции. Количество одновременно используемых элементов <param> может быть больше одного и для каждого из них задаётся пара «имя=значение» через атрибуты name и value.
<param name="<имя>" value="<значение>">
Закрывающий тег Не требуется.
Атрибуты: name Имя параметра.

Value Значение параметра.
: 94) Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Вот несколько областей применения <picture>:

для экранов ретина можно показывать картинку большего размера;
выводить рисунки разного размера для мобильных и настольных устройств;
отображать изображения разных пропорций, учитывающих ориентацию устройства;
выводить изображение в векторном формате SVG, а для браузеров, его не поддерживающих, показывать PNG.

<picture>
  <source>
  <img>
</picture>

Внутри <picture> содержится ноль или несколько элементов <source>, которые идут перед одним элементом <img>.

95) Элемент <plaintext> отображает содержимое контейнера «как есть». Пока тег <plaintext> не закрыт, все теги внутри него отображаются как обычный текст. Несмотря на то, что все браузеры поддерживают этот тег, он не входит в спецификацию HTML и его использование осуждается.

Это нестандартный элемент, не применяйте его.

<plaintext>Текст</plaintext>
Закрывающий тег Не обязателен.
Примечание: Все браузеры игнорируют закрывающий тег и отображают его в виде текста.  Элемент <plaintext> действует до конца кода веб-страницы, включая закрывающие теги </body> и </html>.
96) Элемент <pre> определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.
<pre>Текст</pre>
97) Используется для отображения прогресса завершённости задачи. Изменение значения происходит через JavaScript.

Вид элемента зависит от браузера и операционной системы и может довольно сильно различаться между собой.

<progress value="<число>" max="<число>">
Текст
</progress>
Атрибуты: value Текущее значение прогресса.

Max Максимальное значение прогресса.: 98) Элемент <q> используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

<q>Текст</q>.
Атрибуты: cite Адрес, который указывает на источник цитаты.
99) Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby>. В остальных браузерах текст, заключенный в контейнер <rp>, не отображается. Элемент <rp> должен идти до или после <rt>.
<ruby>
 текст
 <rp>текст</rp><rt>аннотация</rt><rp>текст</rp>
</ruby>
Закрывающий тег Не обязателен.
100) Элемент <rt> добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>. Сама аннотация выводится уменьшенным шрифтом.

Такая форма записи преимущественно используется для азиатских языков вроде китайского или японского, но также может применяться для других языков, если требуется написать один текст над другим.

<ruby>
 текст
 <rt>аннотация</rt>
</ruby>
Закрывающий тег Не обязателен, если идёт последним.
101) Элемент <rtc> обозначает текстовый контейнер внутри <ruby>. В основном применяется в качестве описательной части или аннотации для иероглифов.
<ruby>
 текст
 <rtc>аннотация</rtc>
</ruby>
Закрывающий тег Не обязателен, если идёт последним.
102) Элемент <ruby> предназначен для добавления небольшой аннотации сверху или снизу от заданного текста. Такая форма записи преимущественно используется для идеографической письменности вроде китайского языка, но может применяться и для других языков, если требуется написать один текст над другим.

Сам элемент <ruby> выступает контейнером для <rt>, он и формирует аннотацию к тексту, после которого идёт; а также <rp>, этот элемент предназначен для браузеров, которые не поддерживают <ruby>.

Название происходит от слова «рубин», которым в типографии обозначается небольшой шрифт.

<ruby>
 текст
 <rt>аннотация</rt>
</ruby>
103) Элемент <s> используется для содержимого, которое уже не является точным или актуальным. Браузеры отображают такой текст как перечёркнутый. Элемент <s> не должен применяться для удалённого текста, для этой цели есть элемент <del>.

В HTML4 использование данного элемента осуждается.

<s>Текст</s>
104) Элемент <samp> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта.
<samp>Текст</samp>
105) Элемент <script> предназначен для описания скриптов, может содержать ссылку на программу или её текст на определённом языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т. к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

<script>
 <скрипт>
</script> 
<script src="<адрес>"></script>
атрибуты: async Загружает скрипт асинхронно.

Defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
Srca Адрес скрипта из внешнего файла для импорта в текущий документ.
Type Определяет тип содержимого <script>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>SCRIPT</title>
 </head>
 <body> 
  <script type="text/javascript">
    document.write ('<table width="100%" border="1">');
    for (i=1; i<6; i++) {
      document.writeln("<tr>");
      for (j=1; j<6; j++) document.write("<td>" + i + j + "<\/td>");
      document.writeln("<\/tr>");
    }
    document.write ("<\/table> ");
  </script>
 </body>
</html>

Результат данного примера показан на рисунке

Рис. Результат работы скрипта

В данном примере с помощью скрипта выводится таблица, состоящая из пяти строк и столбцов, которая заполняется числами.

106) Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого.
<section>
</section>
107) <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в элементе <option>, а также может изменяться с помощью стилей. Каждый пункт создаётся с помощью элемента <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.
<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>
Атрибуты: autofocus Устанавливает, что список получает фокус после загрузки страницы. 
Disabled Блокирует доступ и изменение элемента.

Form Связывает список с формой.

Multiple Позволяет одновременно выбирать сразу несколько элементов списка.

Name Имя элемента для отправки на сервер или обращения через скрипты.

Required Список обязателен для выбора перед отправкой формы.

Size Количество отображаемых строк списка.: 108) В HTML4 <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML4 размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление <small> уменьшает текст на одну условную единицу. Допускается применение вложенных элементов <small>, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1.

В HTML5 элемент <small> используется для сносок и комментариев, написанных обычно мелким текстом. К ним могут относиться предостережения, информация о лицензии, авторских правах и др.

<small>Текст</small>
109) Вставляет звуковой или видеофайл для элементов <audio> и <video>. Обобщённо такие файлы называются медийными. Также применяется для добавления изображений в контейнере <picture>

Когда располагается внутри <audio> или <video>, элемент <source> должен идти после медийных файлов, но до <track>. Внутри <picture> он должен идти перед <img>.

<audio>
 <source src="<адрес>">
</audio>

<video>
 <source src="<адрес>">
</video>

<picture>
 <source srcset="...">
</picture>
Закрывающий тег Не обязателен.
Атрибуты: media Определяет устройство, для которого будет воспроизводиться файл.

Sizes Задаёт размеры изображений для разных макетов страницы.
Src Адрес медиа-файла.
Srcset Изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.).
type MIME-тип медийного источника.: 110) Создаёт пустое пространство по вертикали или горизонтали.

Это нестандартный элемент, не применяйте его, взамен воспользуйтесь стилями.

<spacer height="<число>" width="<число>"></spacer>
Закрывающий тег Не обязателен.
Атрибуты: align Определяет выравнивание элемента относительно содержимого.

Height Устанавливает высоту пустого пространства в пикселях.
Size Число пикселей пустого пространства вставляемых горизонтально или вертикально, в зависимости от значения атрибута type — horizontal или vertical.

Type Указывает тип элемента. Возможные значения block | horizontal | vertical.

Width Устанавливает ширину пустого пространства в пикселях.: 111) Универсальный строчный элемент <span> предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей. Например, внутри абзаца (<p>) можно изменить цвет и размер первого слова, если его выделить с помощью элемента <span> и задать для него желаемый стиль.

<span>...</span>
112) Элемент <strike> отображает текст как перечёркнутый. По своему действию аналогичен <s>, который имеет сокращённую форму записи.

Использование этого элемента осуждается спецификацией HTML, вместо него применяйте стили.

<strike>Текст</strike>
113) Элемент <strong> предназначен для выделения важного текста. Браузеры отображают такой текст жирным начертанием.
<strong>Текст</strong>
Примечание
Следует отметить, что элементы <b> и <strong>, несмотря на сходный результат, не эквивалентны и заменяемы. Первый элемент <b> — устанавливает жирный текст, в то время как <strong> — определяет важность помеченного текста. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью элементов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат их использования равнозначен.
114) <style> применяется для определения стилей элементов веб-страницы. Элемент <style> необходимо использовать внутри контейнера <head>. Можно задавать несколько <style>.
<head>
  <style>
   ...
  </style>
</head>
Атрибуты: media Определяет устройство вывода, для работы с которым предназначена таблица стилей.

Type Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.: 115) Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

<sub>Текст</sub>
116) <summary> Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации. Элемент <summary> должен идти первым внутри <details>.
<details>
 <summary>Текст</summary>
</details>
117) <sup> Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
<sup>Текст</sup>
118) <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашёл воплощение на многих сайтах, пока ему на смену не пришли более современные способы вёрстки.

<table>
  <tr>
    <td>...</td>
  </tr>
</table>
119) Элемент <tbody> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.

Допускается применять несколько элементов <tbody> внутри контейнера <table>. Доступны и другие виды группировок строк — <tfoot> и <thead>, ни один из них не должен перекрываться с элементом <tbody>.

<table>
 <thead> .... </thead>
 <tfoot> ... </tfoot>
 <tbody>
  <tr>
   <td> ... </td>
  </tr>
 </tbody>
</table>
Закрывающий тег Не обязателен.
120) Предназначен для создания одной ячейки таблицы. Элемент <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри <table>.
<table>
  <tr>
    <td>...</td>
  </tr>
</table>
Закрывающий тег Не обязателен.
Атрибуты: colspan Объединяет горизонтальные ячейки.

Headers Позволяет связать ячейки с заголовком.

Rowspan Объединяет вертикальные ячейки.
121) Элемент <template> представляет собой механизм для хранения содержимого на стороне клиента, которое не отображается в процессе загрузки страницы, но впоследствии может быть заполнено с помощью JavaScript.

Содержимое <template> — это шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты. Обычно применяется для элементов с повторяющейся структурой, вроде списков, таблиц, списков <select> и др.

Внутри <template> располагаются пустые элементы, образующие требуемый шаблон. Повторение этих элементов и их заполнение содержимым берут на себя скрипты.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>template</title> 
  <style>
   table {
    width: 100%;
    border-collapse: collapse;
   }
   td, th {
    padding: 4px;
    border: 1px solid #333;
   } 
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th>Твёрдость по Моосу</th>
     <th>Эталонный минерал</th>
     <th>Обрабатываемость</th>
    </tr>
   </thead>
   <tbody>
    <template id="row">
     <tr><td><td><td>
    </template>
   </tbody>
  </table>
  <script>
   var data = [
    { hardness: 1, mineral: 'Тальк', workability: 'Царапается ногтём'},
    { hardness: 2, mineral: 'Гипс', workability: 'Царапается ногтём'},
    { hardness: 3, mineral: 'Кальцит', workability: 'Царапается медью'},
    { hardness: 4, mineral: 'Флюорит', workability: 'Легко царапается ножом, оконным стеклом'},
    { hardness: 5, mineral: 'Апатит', workability: 'С усилием царапается ножом, оконным стеклом'},
    { hardness: 6, mineral: 'Ортоклаз', workability: 'Царапает стекло. Обрабатывается напильником'},
    { hardness: 7, mineral: 'Кварц', workability: 'Поддаётся обработке алмазом, царапает стекло'},
    { hardness: 8, mineral: 'Топаз', workability: 'Поддаётся обработке алмазом, царапает стекло'},
    { hardness: 9, mineral: 'Корунд', workability: 'Поддаётся обработке алмазом, царапает стекло'},
    { hardness: 10, mineral: 'Алмаз', workability: 'Царапает стекло'}
   ];
   var template = document.querySelector('#row');
   for (var i = 0; i < data.length; i++) {
    var mohs = data[i];
    var clone = template.content.cloneNode(true);
    var cells = clone.querySelectorAll('td');
    cells[0].textContent = mohs.hardness;
    cells[1].textContent = mohs.mineral;
    cells[2].textContent = mohs.workability;
    template.parentNode.appendChild(clone);
   }
  </script>
 </body>
</html>

122) <textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от элемента <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

<textarea>
  текст
</textarea>
Атрибуты: autocomplete Включает или отключает автозаполнение.

Autofocus Автоматическое получение фокуса.

Cols Ширина поля в символах.

Dirname Параметр, который передаёт на сервер направление текста.

Disabled Блокирует доступ и изменение элемента.

Form Связывает текстовое поле с формой по её идентификатору.

Maxlength Максимальное число введённых символов.

Minlength Минимальное число введённых символов.

Name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

Placeholder Добавляет подсказывающий текст.
Readonly Устанавливает, что поле не может изменяться пользователем.

Required Обязательное для заполнения поле.

Rows Высота поля в строках текста.

Wrap Параметры переноса строк.: 123) Элемент <tfoot> предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя <tfoot> в исходном коде должен быть определён до элемента <tbody>, браузеры отображают его в самом низу таблицы.

В пределах таблицы разрешается использовать только один элемент <tfoot>.

<table>
 <thead> ... </thead>
 <tfoot>
  <tr>
   <td> ... </td>
  </tr>
 </tfoot>
 <tbody> ... </tbody>
</table>
Закрывающий тег Не обязателен.
124) Элемент <tfoot> предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя <tfoot> в исходном коде должен быть определён до элемента <tbody>, браузеры отображают его в самом низу таблицы.

В пределах таблицы разрешается использовать только один элемент <tfoot>.

<table>
 <thead> ... </thead>
 <tfoot>
  <tr>
   <td> ... </td>
  </tr>
 </tfoot>
 <tbody> ... </tbody>
</table>
Закрывающий тег Не обязателен.
Атрибуты: colspan Объединяет горизонтальные ячейки.

Headers Позволяет связать ячейки таблицы с заголовками в речевых браузерах.

Rowspan Объединяет вертикальные ячейки.: 125) Элемент <thead> предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде сразу после элемента <table>.

<table>
 <thead>
  <tr>
   <td> ... </td>
  </tr>
 </thead>
 <tfoot> ... </tfoot>
 <tbody> ... </tbody>
</table>
Закрывающий тег Не обязателен.
126) Помечает текст внутри элемента <time> как дата, время или оба значения. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime.
<time>дата и время</time>
<time datetime="<дата и время>">текст</time>
Атрибуты datetime Задаёт дату, время или оба значения для текста.
Pubdate Указывает дату публикации документа.
127) Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. Текст заголовка отображается, как правило, на вкладке браузера (рис. 1). Допускается использовать только один <title> на документ и размещать его в контейнере <head>.

Рис. Вид заголовка в браузере Firefox

<head>
  <title>Заголовок</title>
</head>
Примечание:
Элемент <title> выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы.

По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница.
Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы, недопустимые в имени файла (\ / : * ? " < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами.
При сохранении в разделе браузера «Избранное», адрес текущей страницы с её заголовком помещается в список предпочитаемых ссылок.
В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечёт больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.

128) Элемент <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки устанавливается с помощью элемента <th> или <td>.
<table>
  <tr>
   <td>...</td>
  </tr>
</table>
Закрывающий тег Не обязателен.
129) <track> Позволяет авторам указать текстовую дорожку для медийных элементов <audio> и <video>. Такая дорожка обычно содержит субтитры на разных языках, комментарии, заголовки и др.
<audio>
  <track kind | src | srclang | label | default>
</audio>
<video>
  <track kind | src | srclang | label | default>
</video>
Закрывающий тег Не требуется.
Атрибуты: kind Указывает тип дорожки, возможные варианты перечислены в табл.

Src Путь к файлу с дорожкой.

Srclang Язык дорожки. См. коды языков.

Label Отображаемое название дорожки. Если этот атрибут не указан, браузер станет использовать значение, которое применяется у него по умолчанию, например «untitled1».

Default Наличие этого атрибута указывает, что данная дорожка предпочтительна и должна быть выбрана по умолчанию. Только одна дорожка может иметь атрибут default.

Табл. Значения атрибута kind

Значение	Предназначение	Описание
subtitles	Субтитры	Предназначены для дублирования звуковой дорожки фильма в виде текста на языке оригинала для глухих людей. Также могут содержать перевод на другие языки для тех, кто не знаком с языком оригинала. Текст субтитров выводится поверх видео.
captions	Заголовки	Дублирование диалогов, звуковых эффектов, музыкального сопровождения в виде текста для тех случаев, когда звук недоступен или для глухих пользователей. Выводится поверх видео, при этом помечается, что подходит для плохо слышащих людей.
descriptions	Описание	Звуковое описание происходящего в видео для тех случаев, когда изображение недоступно или для слепых людей.
chapters	Главы	Названия глав используемые для быстрой навигации по видео или аудио. Отображаются в виде списка.
metadata	Метаданные	Предназначены для использования скриптами и не отображаются в браузере.

130) Элемент <tt> отображает текст моноширинным шрифтом.

Использование этого элемента осуждается спецификацией HTML, вместо него применяйте стили.

<tt>Текст</tt>
131) Используется для разметки текста, который должен отличаться стилистически от обычного текста. К примеру, так можно помечать ошибки в тексте, собственные имена, иностранные слова. Текст в <u> выделяется подчёркиванием.

В HTML4 использование этого элемента осуждается.

<u>Текст</u>
132) Элемент <ul> устанавливает маркированный (неупорядоченный) список. Каждый пункт списка должен начинаться с элемента <li>.
<ul>
  <li>пункт маркированного списка</li>
</ul>
133) Элемент <var> используется для выделения переменных из компьютерных программ. Браузеры обычно помечают текст в контейнере <var> курсивным начертанием.
<var>Текст</var>
134) <video> Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задаётся через атрибут src или вложенный элемент <source>.

Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).

<video>
 <source src="<адрес>">
</video>
Атрибуты: autoplay Видео начинает воспроизводиться автоматически после загрузки страницы.
Controls Добавляет панель управления к видеоролику.

Height Задаёт высоту области для воспроизведения видеоролика.

Loop Повторяет воспроизведение видео с начала после его завершения.

Poster Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
Preload Используется для загрузки видео вместе с загрузкой веб-страницы.
Src Указывает путь к воспроизводимому видеоролику.
Width Задаёт ширину области для воспроизведения видеоролика.

Пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls" poster="video/duel.jpg">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Элемент video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>
135) Элемент <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
Текст<wbr>текст
Закрывающий тег Не требуется.
Примечание: Ни один браузер при переносе текста не добавляет символ дефиса. При необходимости дефис можно имитировать, заменив <wbr> на символ мягкого переноса .
136) Элемент <xmp> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока элемент <xmp> не закрыт, все теги внутри него отображаются как обычный текст.

Данный элемент устарел, не используйте его. Взамен применяйте элемент <pre>, заменяя скобки < и > на < и >. Также для управления видом содержимого предназначены стили.

<xmp>Текст</xmp>

<<< < Предыдущая 1 2 3 45 / 55

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
13.03.2016245.76 Кб21EKZAMEN_KUL_TURA.doc
#
05.09.2019177.15 Кб3ekzamen_po_ekonomicheskoy_teorii.doc
#
22.04.2019302.59 Кб4Ekzamen_po_MChP_1-8_44_46.doc
#
20.04.201981.55 Кб29ekzamen_po_sotsiologii.docx
#
23.02.2015131.67 Кб11Ekzamen_Vera_Kris_Ilana.docx
#
01.07.2025591.36 Кб0elements_of_HTML.doc
#
20.11.2019250.37 Кб5Emil_und_die_Detektive.doc
#
23.02.20153.19 Mб702English for Geographers.pdf
#
01.05.2025517.76 Кб0english for physicists 1105..docx
#
23.02.20151.07 Mб333English_for_Students_of_Chemistry.doc
#
01.07.20251.27 Mб0EU.doc