Строчные элементы Flashcards
(26 cards)
<i>Текст</i>
Строчные. Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
<p><b><i>Lorem ipsum dolor sit amet</i></b></p>
<p><i>Lorem</i> ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. <i>Ut</i> wisis enim ad minim veniam, quis nostrud exerci
tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<textarea>
текст
</textarea>
(текстовая область)
Строчные. Представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input></input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
<form>
<p><b>Введите ваш отзыв:</b></p>
<p><textarea></textarea></p>
<p><input></input></p>
</form>
“<select>”</select>
(выберите)
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Строчные. Позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.</select></select></option></option></select>
<form>
<p><select>
<option>Выберите героя</option>
<option>Чебурашка</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select></p>
<p><input></input></p>
</form>
“<label>”</label>
(этикетка, метка)
<input></input><label>Текст</label>
<label><input></input> Текст</label>
Строчные. Устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input></input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.</label></textarea></select>
Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.</label></label>
<p><input></input><label>Lorem</label><br></br>
<input></input><label>Ipsum</label><br></br>
<input></input><label>Dolor</label><br></br>
<input></input><label>Sit amet</label></p>
<input></input>
(ввод, вход)
Строчные. Является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input></input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input></input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input></input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
<form>
<p><b>Ваше имя:</b><br></br>
<input></input>
</p>
<p><b>Каким браузером в основном пользуетесь:</b><br></br>
<input></input> Internet Explorer<br></br>
<input></input> Opera<br></br>
<input></input> Firefox<br></br>
</p>
<p>Комментарий<br></br>
<textarea></textarea></p>
<p><input></input>
<input></input></p>
</form>
Текст<br></br> текст
Строчные. Устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br></br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br></br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
<p>Р.Л. Стивенсон</p>
<p>Лето в стране настало,<br></br>
Вереск опять цветет.<br></br>
Но некому готовить<br></br>
Вересковый мед.</p>
<bdo>Текст</bdo>
Строчные. Устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево. Например, к ним относится арабский язык.
<p><bdo>А роза упала на лапу Азора</bdo></p>
<acronym>Текст</acronym>
Строчные. Указывает на то, что текст является акронимом. В отличие от аббревиатуры, акроним — это устоявшееся сокращение, которое применяется как самостоятельное слово. К акронимам, например, можно отнести следующие слова: СПИД, ликбез, замполит, США, DOS и др.
По умолчанию, текст заключенный в контейнере <acronym> подчеркивается пунктирной линией.</acronym>
<p>Популярность языка JavaScript порождена его широкими возможностями
по взаимодействию с элементами веб-страницы через <acronym>DOM</acronym>.</p>
<abbr>Текст</abbr>
Строчные. Указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
<p><abbr>CGI</abbr>
обозначается протокол, с помощью которого любые внешние программы взаимодействуют
с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом
языке программирования и результат их действия выводить в виде веб-страницы.</p>
”</a>”
<a>…</a>
<a>…</a>
Строчные. Является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.</a>
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
<p><a>Посмотрите на мою фотографию!</a></p>
<p><a>Как сделать такое же фото?</a></p>
<var>Текст</var>
Строчные. Используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере <var> курсивным начертанием.</var>
<p>В данном примере делается запрос к базе данных для получения поля <var>content_title</var>
из таблицы <var>content</var>, причем должно удовлетворяться условие
<code>section_id = 1</code>.</p>
<tt>Текст</tt>
Строчные. Контейнер <tt> отображает текст моноширинным текстом. Этот тег относится к группе тегов физического форматирования.</tt>
<p><tt>Lorem ipsum dolor sit amet</tt></p>
Текст
Строчные. Отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
<p><i>X <small>n</small> + Y <small>n</small>
= Z <small>n</small></i></p>
Текст
Строчные. Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
<p>Под действием гидроксиламина альдегиды превращаются в оксимы:
СН3СНО + NH2OH =
CH3C(=NOH)H + H2O</p>
<strong>Текст</strong>
Строчные. Предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<p><strong>Lorem ipsum dolor sit amet</strong></p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. <strong>Ut wisis</strong> enim ad minim veniam, quis nostrud exerci
tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<span>…</span>
Строчные. Предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.</span></span>
<p><span>Р</span>азумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется
действиями неразумных людей.</p>
<small>Текст</small>
Строчные. Тег <small> уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <small> уменьшает текст на одну условную единицу. Допускается применение вложенных тегов <small>, при этом размер шрифта будет меньше с каждым вложенным уровнем, но не может быть меньше, чем 1.</small></small></small>
<p>Из семейства кошачьих самая большая кошка это совсем не
<small>лев</small>, как можно было бы подумать исходя из
титула «царя зверей». А уссурийский тигр, вес которого
достигает 300 килограмм. Тигр уступает по <small>размерам</small>
и <small>весу</small> только другому наземному
хищнику, белому медведю.</p>
<samp>Текст</samp>
Строчные. Элемент <samp> используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере <samp> с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.</samp></samp>
<p>В результате выполнения скрипта вы увидите текст <samp>Ваш
браузер поддерживает JavaScript 1.3</samp>, в том случае, если браузер
работает с версией 1.3.</p>
<q>Текст</q>
Строчные. Используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
<p>Станислав Лец утверждал: <q>Чаще всего выход там, где был
вход</q>.</p>
<kbd>Текст</kbd>
Строчные. Тег <kbd> используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере <kbd> моноширинным шрифтом.</kbd></kbd>
<p>Для быстрого закрашивания выделенной области цветом переднего плана
используйте комбинацию клавиш <kbd><Alt>+<Backspace></kbd>
или <kbd><Alt>+<Delete></kbd>.
Для закрашивания выделенной области фоновым цветом
воспользуйтесь комбинацией
<kbd><Ctrl>+<Backspace></kbd> или
<kbd><Ctrl>+<Delete></kbd>.</p>
<em>Текст</em>
Строчные. Предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
<p><em>Lorem ipsum dolor sit amet</em></p>
<p><b><em>Lorem</em></b> ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. <em>Ut</em> wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
<dfn>Текст</dfn>
Строчные. Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег <dfn> применяется для выделения таких терминов при их первом появлении в тексте.</dfn>
Браузеры отображают содержимое контейнера <dfn> с помощью курсивного начертания.</dfn>
<p><dfn>Капителью</dfn> в типографике называется текст, набранный
прописными буквами уменьшенного размера.</p>
<code>Текст</code>
Строчные. Тег <code> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера <code> как моноширинный текст уменьшенного размера.</code></code>
В отличие от тега <pre> дополнительные пробелы внутри контейнера <code> не учитываются, так же, как и переносы текста. Поэтому используйте тег <br></br> или <p> для создания переносов.</code>
<p><code>
function checkParent (src, dest) {<br></br>
while (src != null) {<br></br>
if (src.tagName == dest) return src<br></br>
src = src.parentElement<br></br>
}<br></br>
return null<br></br>
}</code></p>
<cite>Текст</cite>
Строчные. Тег <cite> помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера <cite> курсивом.</cite></cite>
<p><cite>http://www.asimovonline.com</cite></p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
