: элемент отображения кода
Элемент HTML отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода. По умолчанию текст содержимого отображается с использованием шрифта монопространства по умолчанию пользовательского агента.
Интерактивный пример
| Content categories | Flow content, phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement (en-US) interface for this element. |
Атрибуты
Этот элемент включает в себя только глобальные атрибуты.
Пример
Текстовый абзац, включающий :
p> The function code>selectAll()code> highlights all the text in the input field so the user can, for example, copy or delete the text. p>
Вывод, генерируемый этим HTML, выглядит так:
Примечания
CSS-правило может быть определено для того, чтобы селектор code переопределил шрифт браузера по умолчанию. Предпочтения, установленные пользователем, могут иметь приоритет над указанными CSS.
Спецификации
| Specification |
|---|
| HTML Standard # the-code-element |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
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 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Вывод кода HTML страницы на экран
Приветствую. Если тема была — прошу перенаправить, поиск не помог. Представим, на странице нажимаем Ctrl+U, видим код, запихиваем его в БД, затем выводим. Просто, в ‘pre’ или ‘textarea’ ест-но, если внутри HTML будут закрывающие тэги, то вывод будет ‘неполный’. Вопрос, как всегда предельно неадекватен: Как вывести переменную с кодом HTML для просмотра? p.s. прошу не издеваться, чую ответ какой то очень простой, или его вообще нету p.p.s. ну вот иногда встречаю на всяких ресурсах выводят полный код страницы, для показа, его причем можно от туда копировать манипуляцией ctrl+c/ctrl+v.. как надо — начал искать, и нет нигде
Отслеживать
задан 16 июл 2014 в 10:16
1,928 10 10 золотых знаков 54 54 серебряных знака 104 104 бронзовых знака
Можно вывести код как value инпута)0))
23 июл 2019 в 17:33
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если вопрос был «как вывести код страницы, а не результат его отображения», то ответ: экранируйте символы < и >, заменяя их на < и > соответственно.
Если вопрос был «как вывести результат отображения кода, не повредив окружающую разметку», то ответ: используйте iframe . Посмотрите, как это реализовано на http://jsfiddle.net, например.
Отслеживать
ответ дан 16 июл 2014 в 10:41
23.4k 3 3 золотых знака 49 49 серебряных знаков 70 70 бронзовых знаков
Можно в input это вставить:
var input = document.createElement('input'); input.value = "code"; input.innerHTML = "code"; document.body.appendChild(input); Как вывести символы и теги html на странице сайта
Браузеры интерпретируют html-теги в свой синтаксис. В итоге любой html-тег при написании его в виде не отображается на странице, так как мы видим его в коде. Рассмотрим все способы как можно выводить теги html на странице сайта так, как они написаны в коде.
Существует три способа. Каждый из них не идеален. Я пользуюсь первым.
Замена левой и правой скобки на коды
Чем характеризуется любой html-тег? Наличием открывающей и закрывающий скобки: < и >. Если мы будем писать эти скобки с помощью html-кодов, то добьемся как раз нужного нам результата, а точнее, что браузер поймет этот код, как простой текст.
Например, мы хотим вывести следующий html-код на странице сайта:
html> head> style> .primer1< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; > /style> /head> body> div class css">primer1">Пример №1. Рамка с тенью/div> /body> /html>
Для этого заменяем
<html> <head> <style> .primer1< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; > </style> </head> <body> <div class css">primer1">Пример №1. Рамка с тенью</div> </body> </html>
Заменять каждую знак муторно и долго. Поэтому проще всего определиться сразу какой код нужно вывести, а потом массово сделать замену. Это делается с помощью любого блокнота (например, notepad++). Открыв код в блокноте, нажмите комбинацию «CTRL + H» (заменить). Заполните поля что заменить и чем. Таким образом, можно автоматом массово заменить все нужные символы на другие.
В интернете есть специальные онлайн генераторы для замены.
В целом я придерживаюсь этого метода, т.к. он кроссбраузерный и валидный (отвечает всем стандартам).
Используя теги и
В html есть специальные теги для отображения кода как есть: