При создании веб-страниц часто возникает необходимость отображения компьютерного кода. HTML предоставляет несколько тегов, которые помогают форматировать и отображать код. В этом уроке мы рассмотрим различные способы вставки и форматирования кода, а также обсудим распространенные ошибки.
<code>Тег <code> используется для выделения фрагментов кода в тексте. Он сохраняет моноширинное форматирование, что делает код более читаемым.
<p>Пример использования тега <code><code></code>:</p>
<p><code>console.log('Hello, world!');</code></p>
<pre>Тег <pre> используется для отображения предварительно форматированного текста. Он сохраняет пробелы и переводы строк, что делает его идеальным для больших фрагментов кода.
<pre>
function greet() {
console.log('Hello, world!');
}
greet();
</pre>
<pre> и <code>Для улучшенного форматирования и семантики часто используется комбинация тегов <pre> и <code>. Это позволяет сохранить форматирование и подчеркнуть, что внутри находится код.
<pre><code>
function greet() {
console.log('Hello, world!');
}
greet();
</code></pre>
<samp>Тег <samp> используется для отображения текста, который представляет вывод программы или результат работы компьютера.
<p>Вывод программы: <samp>Hello, world!</samp></p>
<kbd>Тег <kbd> используется для отображения текста, который представляет ввод пользователя с клавиатуры.
<p>Нажмите <kbd>Ctrl</kbd> + <kbd>C</kbd> для копирования текста.</p>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<pre> и добавьте класс hljs для подсветки.
<pre><code class="hljs javascript">
function greet() {
console.log('Hello, world!');
}
greet();
</code></pre>
Неправильное вложение тегов: Убедитесь, что теги правильно вложены друг в друга.
<pre><code>function greet() {
console.log('Hello, world!');
Пропуск пробелов и переводов строк: Используйте тег <pre>, чтобы сохранить форматирование кода.
<code>function greet() { console.log('Hello, world!'); }</code>
Отсутствие синтаксической подсветки: Добавьте библиотеки для синтаксической подсветки, чтобы улучшить читаемость кода.
Отображение компьютерного кода в HTML является важным аспектом при создании технической документации, блогов и учебных материалов. Правильное использование тегов и библиотек для синтаксической подсветки поможет сделать ваш код более читаемым и понятным.
Теперь, когда вы освоили основы вставки и форматирования кода в HTML, вы можете применять эти знания в своих проектах для улучшения качества представления кода.
Создайте HTML-документ, который включает следующие элементы:
<code>.<pre>.<pre> и <code> для отображения блока кода.<samp> для отображения вывода программы.<kbd> для отображения ввода пользователя.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Вставка кода в HTML</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<h1>Примеры вставки кода</h1>
<p>Фрагмент кода: <code>console.log('Hello, world!');</code></p>
<pre>
function greet() {
console.log('Hello, world!');
}
greet();
</pre>
<pre><code>
function greet() {
console.log('Hello, world!');
}
greet();
</code></pre>
<p>Вывод программы: <samp>Hello, world!</samp></p>
<p>Нажмите <kbd>Ctrl</kbd> + <kbd>C</kbd> для копирования текста.</p>
<pre><code class="hljs javascript">
function greet() {
console.log('Hello, world!');
}
greet();
</code></pre>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
