Cсылки
|
1 |
https://htmlacademy.ru/ |
Неупорядоченный список:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Тег <ul> (сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта. Непосредственно в теге <ul> могут находиться только теги <li> (сокращение от «list item»), которые обозначают элементы или пункты списка: <ul> <li>Я пункт списка, могу быть на любом месте</li> <li>И я пункт списка, и мне тоже не важен порядок</li> </ul> По умолчанию элементы <ul> отмечаются маркерами такого же цвета, как цвет текста. |
Упорядоченный список:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
Тег <ol> (сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее. Пункты упорядоченного списка тоже размечаются с помощью тега <li>. Пример кода: <ol> <li>Я первый и только первый пункт</li> <li>Я не я, если я не второй пункт</li> <li>Третий после стольких лет? Всегда!</li> </ol> По умолчанию перед элементами <ol> ставится их порядковый номер. У <ol> может быть несколько атрибутов: start, reversed и type. Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным. Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения. С помощью атрибута type можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры. |
Список описаний:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Тег <dl> (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов: <dl> обозначает сам список описаний; <dt> (сокращение от «description term») обозначает термин; <dd> (сокращение от «description definition») обозначает описание или определение. Теги <dt> и <dd> пишутся внутри <dl>. Каждый список <dl> может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода: <dl> <dt>HTML</dt> <dd>Язык гипертекстовой разметки</dd> <dt>CSS</dt> <dd>Каскадные таблицы стилей</dd> <dd>Язык для оформления HTML-документов</dd> </dl> По умолчанию браузер добавляет небольшой отступ слева от определений. |
Переформатированный текст и код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
!!! спец символы больше и меньше пропущены Тег "pre" (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега "pre". Пример: pre переформатированного текста с сохранёнными пробелами и переносами строк /pre |
Обозначения фрагментов кода:
|
1 2 3 4 5 6 7 8 9 10 |
Тег <code>. Используется для обозначения фрагментов кода. С его помощью размечается любой фрагмент текста, который распознается компьютером: код программы, разметки, название файла и так далее. Обычно браузеры отображают текст в теге <code> моноширинным шрифтом. Тег <code>ul</code> — это неупорядоченный список. Тег <code> можно вкладывать внутрь тега "pre". |
Цитаты:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
Небольшие цитаты Тег <q> (сокращение от «quote»). Предназначен для выделения цитат внутри предложения. Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно. Источник цитат Тег <cite>. В нём можно указывать помимо адреса источника цитаты ещё и название произведения, откуда цитируется текст, а также имя автора или организации, чей текст цитируется. Содержимое <cite> в браузере выделяется курсивом. <p>По словам <cite>Чарльза Буковски</cite> — <q>Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.</q></p> Тег <cite> может быть самостоятельным и не привязываться к цитате: <p>Какой доктор ваш любимый (в сериале <cite>Доктор Кто</cite>)?</p> Длинные цитаты Тег <blockquote>. Предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату не как фрагмент текста в предложении, а как отдельный блок текста с отступами. <blockquote> <p>Ум ценится дорого, когда дешевеет сила.</p> <cite>Джейсон Стэтхэм</cite> </blockquote> В браузере контенту тега <blockquote> обычно добавляется дополнительный отступ слева и справа. |
Символы-мнемоники:
|
1 2 3 4 5 6 7 8 9 |
Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой '<' (less than), а знак больше мнемоникой '>' (greater than): Некоторые символы в HTML зарезервированы, то есть браузер считает их HTML-кодом. Например, любой текст после знака меньше (<) браузер будет пытаться интерпретировать как тег и на странице не отобразит. Чтобы использовать специальные символы в тексте страницы как обычные символы их нужно заменить на символы-мнемоники. & lt ; < & gt ; > |
Перенос строк:
|
1 2 3 |
Тег <br> (сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен. |
Верхний и нижний индексы:
|
1 2 3 4 5 6 7 8 9 10 11 |
Теги <sup> и <sub>. Названия образованы от слов «superscript» и «subscript». Тег <sup> отображает текст в виде верхнего индекса, а <sub> отображает текст в виде нижнего индекса. Их используют для указания единиц измерения или для написания простых формул: 20м<sup>2</sup> H<sub>2</sub>O X<sup>3</sup>+X<sup>2</sup>=1 Для создания более сложных формул, эти теги можно использовать внутри друг друга. |
Дата и время:
|
1 2 3 4 5 6 7 8 9 |
Тег <time>. С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так: <time datetime="2016-11-18T09:54">09:54 утра</time> <time datetime="2015-11-18">18 ноября 2015</time> <time datetime="2018-09-23">в прошлую субботу</time> <time datetime="2017-04-20">вчера</time> Браузер отображает только содержимое тега, а содержимое datetime не отображается. |
Акцентирование внимания:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Теги <em> и <i>. Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом. Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения. Я <em>просто обожаю</em> холодные зимние дни! Тег <i> применяется для обозначения текста, который отличается от окружающего текста, но не является более важным. Например, в <i> можно заключать названия, термины, иностранные слова. Также в этот тег можно обернуть мысли героя. В речи такой текст обычно выделяется интонационно: Он взглянул в окно и подумал — <i>такого просто не может быть</i>! |
Выделение и придание важности:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Теги <strong> и <b>. Название <b> образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным. Тег <strong> указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом <strong> не должно изменять смысла предложения. <strong>Внимание!</strong> Это место опасно. <strong>Вы можете упасть в пропасть</strong>, если подойдёте близко к краю. Тег <b> предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи. Вы входите в небольшую комнату. Ваш <b>меч</b> загорается ярче. <b>Крыса</b> стремительно пробегает вдоль стены. |
Описание изменений:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Теги <del> и <ins>. Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе. Тег <del> выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается. Тег <ins> выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается. <ul> <li>Почистить посудомоечную машину</li> <li><del datetime="2009-10-11T01:25-07:00">Погулять</del></li> <li><del datetime="2009-10-10T23:38-07:00">Поспать</del></li> <li><ins>Купить принтер</ins></li> </ul> |
Разделение контента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Теги <div> и <span>. Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось. Тег <div> используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки. Тег <span> используется для группировки текстовых элементов, выделения отдельных слов или фраз внутри абзацев, пунктов списка и так далее. <article> <div class="highlight"> <p>…</p> <p>…</p> </div> <p>Текст, в котором <span>выделена фраза</span></p> </article> |