Как вставить код css в html

— элемент добавления аудио на страницу

HTML-элемент используется для встраивания звукового контента в документ. Он может содержать один или более источников аудио, представленных с помощью атрибута src или элемента – браузер выберет один наиболее подходящий. Он так же может предназначаться для потокового мультимедиа, используя интерфейс MediaStream .

Интерактивный пример

Контент между открывающим и закрывающим тегами элемента (см. выше) отображается в браузерах, которые не поддерживают этот элемент.

Не все браузеры поддерживают одинаковые форматы аудио. Вы можете предоставить множество источников внутри вложенных элементов , и тогда браузер будет использовать первый, который он понимает:

audio controls> source src="myAudio.mp3" type="audio/mpeg" /> source src="myAudio.ogg" type="audio/ogg" /> p> Ваш браузер не поддерживает HTML5 аудио. Вот взамен a href="myAudio.mp4">ссылка на аудиоa> p> audio> 

Другие примечания по использованию:

• если вы не укажете атрибут controls , тогда аудиоплеер не будет добавлять стандартные элементы управления звуком браузера. Вы можете создать ваши собственные элементы управления в помощью JavaScript и HTMLMediaElementAPI;
• чтобы обеспечить точный контроль над вашим аудиоконтентом, HTMLMediaElement инициирует (вызывает) множество различных событий;
• вы так же можете использовать Web Audio API для непосредственной генерации и управления потоками аудио из кода JavaScript;
• элементы не могут иметь субтитры, в отличие от элементов . Смотрите «WebVTT и аудио» для более подробной информации.

Хороший источник информации по использованию HTML-элемента – это руководство для начинающих «Видео- и аудиоконтент».

Атрибуты

К этому элементу применимы глобальные атрибуты.

Атрибут логического типа. Если он указан, аудио начнёт автоматически воспроизводиться, как только сможет это сделать, не дожидаясь завершения загрузки всего файла.

Примечание: Сайты, которые автоматически проигрывают аудио (или видео с аудиодорожкой) могут быть неприятными для пользователей, поэтому этого следует по возможности избегать. Если вам необходимо предлагать функцию автовоспроизведения, то вы должны сделать её Opt-in (вид подписки), то есть когда пользователь специально (сам) включил её. Тем не менее, это может быть полезно, при создании элементов мультимедиа, чей источник будет установлен позднее под контролем пользователя.

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

Этот атрибут указывает, следует ли использовать CORS при загрузке мультимедиа или нет. Допустимые значения:

• anonymous : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация);
• use-credentials : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация).Если этот атрибут не задан, то CORS при загрузке мультимедиа не используется (т.е. без отправки HTTP-заголовка Origin ). Если задан неправильно, то он обрабатывается так, как если бы использовалось значение anonymous . Для получения дополнительной информации смотрите «Настройки атрибутов CORS».

Атрибут логического типа. Если он указан, проигрыватель будет автоматически возвращаться в начало при достижении конца аудио.

Атрибут логического типа, который указывает, будет ли звук изначально отключён. Значением по умолчанию является false .

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

• none : указывает, что аудио не должно предварительно загружаться;
• metadata : указывает, что предварительно загружаются только метаданные аудио (например, продолжительность аудио);
• auto : указывает, что весь файл аудио может быть предварительно загружен, даже если пользователь не предполагает его использовать;
• пустая строка: синоним значения auto .Значение по умолчанию отличается для каждого браузера. Спецификация рекомендует установить значение metadata .

• Атрибут autoplay имеет приоритет над preload . Если autoplay указан, браузер, очевидно, должен будет начать загрузку аудио для воспроизведения.
• Спецификация не обязывает браузер придерживаться значения этого атрибута – это просто совет.

URL аудио для встраивания. Это является темой контроля доступа HTTP. Этот атрибут является необязательным; вы можете вместо него использовать элемент внутри блока audio ( ), чтобы указать аудио для встраивания.

События

Этот элемент может инициировать (вызывать) различные события (en-US) .

Взаимодействие с CSS

Элемент не имеет собственного визуального вывода, если только не указан атрибут controls , в этом случае отображаются стандартные элементы управления браузера.

Стандартные элементы управления имеют значение свойства display , равное inline , и зачастую хорошей идеей является установка этого свойства в значение block , чтобы улучшить контроль над позиционированием и разметкой, если вы не хотите, чтобы он находился внутри текстового блока или чего-то подобного.

Вы можете стилизовать стандартные элементы управления CSS-свойствами, которые влияют на блок как единое целое, например, вы можете задать border и border-radius , padding , margin и т.д. Тем не менее вы не можете стилизовать отдельные компоненты внутри аудиоплеера (например, изменить размер кнопок, иконок, размер шрифта и т.д.), и элементы управления в разных браузерах отличаются.

Чтобы получить внешний вид совместимый с разными браузерами, вам необходимо создать собственные элементы управления. Они могут быть размечены и стилизованы любым удобным для вас способом и затем может быть использован JavaScript вместе с API HTMLMediaElement для объединения функций, которые они выполняют.

Примеры

Базовое использование

Следующий пример показывает простое использования элемента для воспроизведения файла в формате OGG. Он будет автоматически воспроизводиться из-за атрибута autoplay . Также он содержит резервный контент, на случай отсутствия поддержи браузером элемента .

audio src="AudioTest.ogg" autoplay> Ваш браузер не поддерживает элемент code>audiocode>. audio> 

Элемент с элементом

В этом примере указывается, какой аудиотрек будет добавлен с помощью атрибута src во вложенный элемент , а не в непосредственно элемент . Всегда полезно включать MIME-тип файла в атрибут type , так как браузер может немедленно определить, может ли он воспроизвести этот файл, и не тратить на него время, если не может.

audio controls="controls"> source src="foo.wav" type="audio/wav" /> Ваш браузер не поддерживает элемент code>audiocode>. audio> 

Элемент с множеством элементов

Этот пример включает множество элементов . Браузер попытается загрузить источник из первого элемента (Opus), если он не в состоянии воспроизвести его, тогда он перейдёт ко второму (Vorbis) и, наконец, к третьему (MP3), если все предыдущие по каким-либо причинам не могут быть воспроизведены браузером:

audio controls=""> source src="foo.opus" type="audio/ogg; codecs=opus" /> source src="foo.ogg" type="audio/ogg; codecs=vorbis" /> source src="foo.mp3" type="audio/mpeg" /> audio> 

Проблемы доступности

Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording’s content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording’s content at a pace and format that is comfortable for them.

If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.

In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone:

1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?

• Субтитры и скрытые субтитры (en-US).
• Формат Web Video Text Tracks (WebVTT).
• WebAIM: субтитры, стенограммы и описания аудио.
• Понимание WCAG, Руководство 1.2 объяснения (en-US).
• Понимание критерия успешного исхода 1.2.1 | W3C Понимание WCAG 2.0
• Понимание критерия успешного исхода 1.2.2 | W3C Понимание WCAG 2.0

Техническая сводка

Категории контента	Потоковый контент, фразовый контент, встроенный контент. Если элемент имеет атрибут controls , он так же принадлежит к категориям интерактивного и явного контента.
Допустимое содержимое	Если элемент имеет атрибут src : ноль или более элементов , за которыми следует прозрачный контентет, который не содержит элементов или . Иначе: ноль или более элементов , за которыми следует ноль или более элементов , за которыми следует прозрачный контент, который не содержит элементов или .
Пропуск тегов	Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Допустимые родители	Любой элемент, который разрешает встроенный контент в качестве содержимого.
Допустимые ARIA-роли	application (en-US)
DOM-интерфейс	HTMLAudioElement

Спецификации

Specification
HTML Standard # the-audio-element

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

• Медиа форматы для HTML-элементов audio и video.
• Web Audio API.
• HTMLAudioElement .
• nsIDOMHTMLMediaElement .
• .
• .
• Видео и аудио контент.
• Основы кросс-браузерного audio.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 19 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Основы редактирования текста в HTML

Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

Предварительные требования:	Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:	Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..

Основы: Заголовки и абзацы / параграфы

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

Упорядоченный контент делает чтение более лёгким и приятным.

В HTML каждый абзац заключён в элемент , подобно:

p>Я параграф, да, это я.p> 

Каждый заголовок заключён в элемент заголовка (en-US):

h1>Я заголовок истории.h1> 

Имеется шесть элементов заголовка: (en-US), (en-US), (en-US), (en-US), (en-US) и (en-US). Каждый элемент представляет разный уровень контента в документе; представляет главный заголовок, представляет подзаголовки, представляет под-подзаголовки и так далее.

Создание иерархической структуры

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

h1>Сокрушительная скукаh1> p>Крис Миллсp> h2>Глава 1: Тёмная ночьh2> p>Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на . p> h2>Глава 2: Вечное молчаниеh2> p>Наш главный герой ничего не мог, когда шёпот из тёмной фигуры . p> h3>Призрак говоритh3> p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» p> 

Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.

• Предпочтительнее использовать только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
• Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте для создания подзаголовков при одновременном использовании для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
• Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).

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

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

• Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
• Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
• Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
• Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> Моя мини-история Я полицейский, и моё имя Триш. Мои ноги сделаны из картона, и мой муж — рыба.textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Показать решение"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "
Моя мини-история
\n
Я полицейский, и моё имя Триш.
\n
Мои ноги сделаны из картона, и мой муж — рыба.
"; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > textarea.onkeyup = function ()  if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент (en-US) также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».

h1>Это заголовок верхнего уровняh1> 

По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).

С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:

span style="font-size: 32px; margin: 21px 0;" >Это заголовок верхнего уровня?span > 

Списки

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

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:

молоко яйца хлеб хумус

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент (элемент списка):

ul> li>молокоli> li>яйцаli> li>хлебli> li>хумусli> ul> 

Активное изучение: разметка неупорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> молоко яйца хлеб хумусtextarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:

Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дороге

ol> li>Двигайтесь до конца дорогиli> li>Поверните направоli> li>Езжайте прямо через первые два перекрёстка с круговым движениемli> li>Поверните налево на третьем перекрёсткеli> li>Школа справа от вас, в 300 метрах вверх по дорогеli> ol> 

Активное изучение: разметка упорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> Двигайтесь до конца дороги Поверните направо Езжайте прямо через первые два перекрёстка с круговым движением Поверните налево на третьем перекрёстке Школа справа от вас, 300 метров вверх по дорогеtextarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Активное изучение: разметка собственной страницы рецептов

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> Рецепт быстрого приготовления хумуса. Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет. Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой. Ингредиенты 1 банка (400г) турецкого гороха (или бараньего гороха) 175г тахини 6 вяленых томатов Половинка красного перца Щепотка кайенского перца 1 зубчик чеснока Чуть-чуть оливкового масла Рецепт Очистите чеснок от кожуры и крупно нарежьте. Удалите стебель и семена у перца; крупно нарежьте перец. Добавьте все ингредиенты в пищевой комбайн. Измельчите все ингредиенты до состояния пасты. Если вы хотите "грубый" хумус, измельчайте пару минут. Если вам нужен гладкий хумус, измельчайте дольше. По вкусу вы также можете добавить в небольших количествах лимон с кориандром, перец чили, лайм с чипотле, хариссу с мятой или же шпинат с брынзой. Попробуйте и решите, что подойдёт вам. Хранение Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его. Хумус можно хранить в морозильном отделении 2–3 месяца.textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: "Open Sans Light", Helvetica, Arial, sans-serif; > body  margin: 10px; background: #f5f9fa; > .input, .output  width: 90%; height: 6em; padding: 10px; border: 1px solid #0095dd; overflow: auto; > button  padding: 10px 10px 10px 0; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > 

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

Вложенные списки

Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмём второй список из нашего примера рецепта:

ol> li>Очистите чеснок от кожуры и крупно нарежьте.li> li>Удалите стебель и семена у перца; крупно нарежьте перец.li> li>Добавьте все ингредиенты в пищевой комбайн.li> li>Измельчите все ингредиенты до состояния пасты.li> li>Если вы хотите "грубый" хумус, измельчайте пару минут.li> li>Если вам нужен гладкий хумус, измельчайте дольше.li> ol> 

Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего. Это будет выглядеть так:

ol> li>Очистите чеснок от кожуры и крупно нарежьте.li> li>Удалите стебель и семена у перца; крупно нарежьте перец.li> li>Добавьте все ингредиенты в пищевой комбайн.li> li> Измельчите все ингредиенты до состояния пасты. ul> li>Если вы хотите "грубый" хумус, измельчайте пару минут.li> li>Если вам нужен гладкий хумус, измельчайте дольше.li> ul> li> ol> 

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

Акцент и важность

В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.

Акцент

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

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена досада от того, что человек немного опоздал.

p>Я em>радem>, что ты не em>опоздалem>.p> 

Важное значение

Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и выделять жирным на письменном языке. Например:

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

p>Эта жидкость strong>очень токсичнаstrong>.p> p>Я рассчитываю на тебя. strong>Не strong>опаздывай!p> 

При желании вы можете вложить важные и акцентированные слова друг в друга:

p> Эта жидкость strong>очень токсичнаstrong> — если ты выпьешь её, strong>то можешь em>умеретьem>strong >. p> 

Активное изучение: Давайте будем важны!

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

h2>Результатh2> div class="output" style="min-height: 50px;">div> h2>Редактируемый кодh2> p class="a11y-label"> Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции). p> textarea id="code" class="input" style="min-height: 200px; width: 95%"> h1>Важное объявлениеh1> p>9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов из торгового центра в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.p>textarea > div class="playable-buttons"> input id="reset" type="button" value="Сбросить" /> input id="solution" type="button" value="Показать решение" /> div> 

html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 

var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  output.innerHTML = textarea.value; > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Показать решение")  textarea.value = solutionEntry; solution.value = "Спрятать решение"; > else  textarea.value = userEntry; solution.value = "Показать решение"; > updateCode(); >); var htmlSolution = "
Важное объявление
\n
9 января 2010 года, в воскресенье, банда вандалов была обнаружена за кражей нескольких садовых гномов торговом центре в центре Милуоки. На них были надеты зелёные спортивные костюмы и глупые шляпы, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть какая-либо информация об этом инциденте, пожалуйста, позвоните в полицию немедленно.
"; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Показать решение")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Курсив, жирный шрифт, подчеркивание

Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с , (en-US) и (en-US) несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.

HTML5 переопределил , и с новыми, несколько запутанными, семантическими ролями.

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

• (en-US) используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли .
• используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения .
• (en-US) используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка .

Примечание: Предупреждение о подчёркивании: люди сильно ассоциируют подчёркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент , когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.

p> Колибри обыкновенный (i>архилоус обыкновенныйi>) — наиболее часто встречающийся вид колибри в северо-восточной Америке. p> p> Случился прилив иностранных слов, таких как i lang="uk-latn">vatrushkai>, i lang="id">nasi gorengi> и i lang="fr">soupe à l'oignoni>. p> p>Когда-нибудь я узнаю, как u>гаваритьu> без ошибок.p> ol> li>b>Отрежьтеb> два ломтика хлеба.li> li>b>Добавьтеb> кусочек помидора и лист латука между ломтями хлеба.li> ol> 

Заключение

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.

В этом модуле

• Начало работы с HTML
• Что такое заголовок? Метаданные в HTML
• Основы редактирования текста в HTML
• Создание гиперссылок
• Углублённое форматирование текста
• Структура документа и веб-сайта
• Отладка HTML
• Разметка письма
• Структурируем страницу

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

CSS: Рамки

Для создания границы у элемента используется свойство border , которое является сокращением от нескольких свойств:

• border-width — ширина границы
• border-style — стиль границы
• border-color — цвет границы

Можно указывать несколько свойств, а можно всё объединить в рамках свойства border . Такой вариант встречается чаще всего и выглядит он так:

.element

• 1px — ширина границы
• solid — стиль границы
• #ccc — цвет границы

Со значениями в пикселях и hex-цветом мы уже сталкивались в рамках курса, а вот стилей границ в CSS восемь:

и есть значение none , которое «удалит» границу, так как при значении border-style: none браузеры игнорируют другие свойства и удаляют границу

Примеры границ

solid (сплошная)
dotted (пунктирная)
dashed (штриховая)

 .border-dotted 
 

Задание

Добавьте в редактор с классом border-bold и установите сплошную границу толщиной 5 пикселей. Цвет рамки #2196F3 . Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Попробуйте разные стили границ в редакторе

Создание таблиц в HTML. Все о HTML таблицах

В HTML для создания таблиц используются теги группы table. К ним относятся:

Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

Простая HTML таблица

Чтобы создать простую таблицу HTML достаточно 3 тега: , и .

Далее необходимо определить строки и ячейки — структуру таблицы.

Пример простой таблицы HTML

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Исходный код простой таблицы HTML

 
 
 
Ячейка 1 
Ячейка 2 
Ячейка 3 
 
Ячейка 4 
Ячейка 5 
Ячейка 6 
 
Ячейка 7 
Ячейка 8 
Ячейка 9 

Заголовки таблицы HTML

Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.

Пример HTML таблицы с заголовком th

Volkswagen AG	Daimler AG	BMW Group
Audi	Mercedes-Benz	BMW
Skoda	Mercedes-AMG	Mini
Lamborghini	Smart	Rolls-Royce

Исходный код таблицы HTML с заголовками th

 
 
 
Volkswagen AG 
Daimler AG 
BMW Group 
 
Audi 
Mercedes-Benz 
BMW 
 
Skoda 
Mercedes-AMG 
Mini 
 
Lamborghini 
Smart 
Rolls-Royce 

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan , у ячейки или , где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan , у ячейки или , где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Текст ячейки

Пример HTML таблицы с объединением ячеек

Nissan
Модель	Комплектация	Наличие
Nissan Qashqai	VISIA	+
	TEKNA	+
Nissan X-Trail	ACENTA	+
	CONNECTA	—

Исходный код таблицы HTML с объединенными ячейками

 
 
 
Nissan 
 
Модель 
Комплектация 
Наличие 
 
Nissan Qashqai 
VISIA 
+ 
 
TEKNA 
+ 
 
Nissan X-Trail 
ACENTA 
+ 
 
CONNECTA 
- 

Колонтитулы и подпись в HTML таблицах

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

По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.

По необходимости к таблице можно добавить подпись. Для этого используйте тег .

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Наличие	+	+	+
Мощность двигателя	0,9 (90 л.с.)	0,9 (90 л.с.)	1,5 (90 л.с.)
Топливо	бензин	бензин	дизель
Норма токсичности	Евро-6	Евро-6	Евро-5

Исходный код таблицы с колонтитулами и подписью

 
Комплектации Renault Sandero Stepway 
 
 
Характеристика 
SUTA 09H 6R 
SUTA 09HR6R 
SUTA 15H 5R 
 
 
Наличие 
+ 
+ 
+ 
 
 
Мощность двигателя 
0,9 (90 л.с.) 
0,9 (90 л.с.) 
1,5 (90 л.с.) 
 
Топливо 
бензин 
бензин 
дизель 
 
Норма токсичности 
Евро-6 
Евро-6 
Евро-5 

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .

Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).

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

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Характеристика
1.5 (90 л.с.)	1.2 (115 л.с.)	1.5 (90 л.с.)	Мощность двигателя
дизель	бензин	дизель	Топливо
АКП6 (EDC)	АКП6 (EDC)	АКП6 (EDC)	Трансмиссия

Исходный код таблицы HTML c и

 
 
 
 
  
 
 
ZEN 2E2C AL A 
ZEN 2E2C J5 A 
INTENSE 2E3C AL A 
Характеристика 
 
1.5 (90 л.с.) 
1.2 (115 л.с.) 
1.5 (90 л.с.) 
Мощность двигателя 
 
дизель 
бензин 
дизель 
Топливо 
 
АКП6 (EDC) 
АКП6 (EDC) 
АКП6 (EDC) 
Трансмиссия 

Таблицы в макете страниц сайта

На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).

Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.