pre html что это

Pre html что это

Элемент HTML представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием непропорционального («monospace») шрифта. Пробелы внутри этого элемента отображаются как записанные.

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

Атрибуты

Этот элемент включает в себя только глобальные атрибуты.

Содержит предпочтительное количество символов, которое должна иметь строка. Это был нестандартный синоним width . Чтобы добиться такого эффекта, используйте CSS width .

Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS width .

Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS white-space .

Пример

HTML

p>Использовать CSS для изменения цвета шрифта легко.p> pre> body < color: red; >pre> 

Результат

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

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

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

Комбинация элементов и , дополненная id и ARIA role и aria-labelledby , позволяет объявить предварительно отформатированный текст как изображение, а figcaption служит альтернативным описанием изображения.

Пример

figure role="img" aria-labelledby="cow-caption"> pre> ____________________________ < Я эксперт в своей области. >---------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || pre> figcaption id="cow-caption"> Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов. figcaption> figure> 

• MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
• H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0

Характеристики

Совместимость браузера

BCD tables only load in the browser

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

• CSS: white-space , word-break
• Связанный элемент:

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.

Pre html что это

HTML5 IE Cr Op Sa Fx

       
- ----- ----- |----- ||----| ----|| ||----- -----|| ||-----| |-----|| || ----- ------|| ||- ----| |------|| ||---||-- -------|| ||--|| --| |-------|| || -|| |-- --- - --|| || -|| --|-|--| - ---| |---|| |-----| |-----| |---|| |---- |-----| |----| --- |-----| |----- ------|
  
Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега
Тег pre, преформатированный текст
В этой записи мы экспериментируем с ASCII-графикой и пытаемся нарисовать котика. Но ничего не получается, так как отображение кода в HTML-редакторе и в мини-браузере отличаются. Вы можете ставить сколько угодно пробелов в HTML-коде, но браузер всё равно отобразит их как один. То же самое с переносами строк — они не сохраняются при отображении в браузере.
Изменить это поведение можно с помощью тега (сокращение от «preformatted text»), который обозначает «предварительно отформатированный текст». Чаще всего этот тег используется для отображения примеров кода, реже применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега .
Пример преформатированного текста с сохранёнными пробелами и переносами строк

И результат отображения в браузере:
Пример преформатированного текста с сохранёнными пробелами и переносами строк
Мы добавили немного стилей (параметры шрифта и цвет текста), чтобы содержимое смотрелось красивее. Вы можете изучить стили во вкладке style.css .
Перейти к заданию

index.html Сплит-режим
style.css Сплит-режим

     

Блог


 
 


День пятый. Отдыхаю
Решил отвлечься. Смотрите, что нарисовал.
 /\_/\ ( o.o ) = ^ =

 
 


   

body < padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; >h1 < font-size: 20px; line-height: normal; >nav < color: #888888; >aside < margin: 20px 0; color: #c4c4c4; >pre < line-height: normal; font-family: "Courier New", "Courier", monospace; color: #6a2cce; >

Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Автозапуск
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Увеличить 100% Уменьшить

Задачи Выполнено

Оберните весь текст после первого абзаца в .

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

Наша группа в VK
Наш канал на YouTube
Наша страница в Twitter
Наш канал в Telegram

Что такое pre в HTML5?
Стоит знать: в этом теге вы можете применять любые допустимые HTML теги, кроме этих: big, img, object, small, sub и sup.
Атрибуты:

У этого тега нет специальных атрибутов, но вы можете использовать все универсальные теги, такие как title.

Пример:
 
Забавная картинка: * *** ***** ******* ********* ******* ***** *** *
 
Результат:
Забавная картинка: * *** ***** ******* ********* ******* ***** *** *
Читать:
Как узнать частоту процессора в python