G|Translate: English EN Français FR Deutsch DE Italiano IT Русский RU Español ES

Приключение пробелов и TAB в html

5/5 - (1 голос)

Крайне забавная тема.

Приключение пробелов и TAB в html

Вот они.

Мнемоника – специальный синтаксис для указания символов в html коде.

Читаем Мнемоники в HTML

Символ пробела, ASCII / UNICOD код 32

В спецификации HTML сделана интересная схема отображения пробелов:

  • несколько пробелов между символами отображается как один
  • несколько пробелов до символа отображаются как один
  • один пробел на пустой строке не отображается
  • внутри тэгов <pre> показываются все пробелы

Зачем это сделано?

Для удобства редактирования кода html руками :)

Вот пример кода в тегах <pre>

<p><b>
   пример текста
   пример текста
   пример текста
</b></p>

данный текст отобразится как

пример текста пример текста пример текста

все пробелы слева и справа будут сокращены до одного.

Кстати, именно по этому вывод массива в PHP необходимо делать в тегах <pre>, что бы браузер не удалял пробелы, которые обеспечивают форматирование

echo '<pre>';
print_r($array);
echo '</pre>';

Символ неразрывного пробела ASCII код 255, UNICODE 0160

Почитать статью

Неразрывный пробел

Можно набрать как ATL 255, визуально пробел 32 и пробел 255 будут выглядеть одинаков

” “

” “

можно посмотреть с помощью конвертера символов в html код

http://wb0.ru/chrconv.php

Приключение пробелов и TAB в html

Так и есть:

  • первый пробел это &#32;
  • второй пробел это &#160;

Пробел называется “неразрывным”, т.к. браузер эти пробелы:

  • не сокращает
  • не переносит на другую сторону

Также этот пробел используется в визуальных редакторах CMS для обозначению пустой строки в виде 

<p>&nbsp;</p>

Это же html страница, а не полноценный текстовый редактор. Для визуального редактированию нужно как-то поставить курсор в начале пустой строки.

Вариант <p></p> ничего не даст, так как в самом тексте html будет пустота и курсор между тэгами не поставить.

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

А. С. Пушкин

Приключение пробелов и TAB в html

Точно – код 8239 – Narrow No-Break Space

Символ табуляции TAB ASCII / UNICOD код 09 и его отображение

Вот тут вообще зоопарк.

Читаем статью Табуляция

Да, табуляция – это смещение на 8, 16 символов (и так далее).

Если посмотреть в классическом блокноте Windows, то оно так и будет.

Приключение пробелов и TAB в html

вверху символ табуляции – смещение 8 позиций

ниже – 4 обычных пробела

Приключение пробелов и TAB в html

Так и есть, до первой единицы символ табуляции 09, до второй – 4 пробела 32

В коде html смещение 8 символов для табуляции останется, 4 пробела превратятся в один. Если код html в тэгах <pre> = то обычные пробелы останутся на месте.

Так, стоп.

А почему в части обычных редакторов и IDE для разработки (которые есть и виде сайтов html) кода клавиша TAB делает сдвиг на 4 символа, а не на 8?

Приключение пробелов и TAB в html

Вот редактор Notepad++ = смещение одинаковое. Если посмотреть коды – то картина будет такая же: стандартный символ табуляции (на первой строке) и 4 пробела (на второй).

А просто так договорились. Что сдвиг 4 позиции будет красившие,  чем 8 позиций. И программно прописано показывать сдвиг на 4 символа.

Более того – клавиша TAB передает в ПК только код нажатия, а что делать дальше – решает программа.

И вот тут могут быть варианты:

  • вставляет код 09, показываем как смещение на 4 позиции
  • вставляет код 09, показываем как смещение на 8 позиций
  • вставляем код 32, показываем смещение на 4 пробела
  • вставляем код 0160 (он же ALT 255), показываем смещение на 4 пробела

В результате, если Вам необходимо показать код на своей веб-страницы = нужно перехватить буфер и программного его обработать:

  • заменить 09 на 4 символа 32 (если вставка в тэгах <pre>) и добавить в конец строки <br / >
  • заменить 09 на 4 символа 0160 (если вставка просто на странице html) и добавить в конец строки <br / >
  • или заставить браузер показывать 09 как смещение на 4 позиции (через стили CSS)

Тогда, например код Python (с отступами) корректно отобразится на Вашем сайте.

Наилучшим решением (самый первый вариант) будет использование 4х стандартных пробелов с кодом 32 для смещения на 4 позиции и обертка тегами <pre>.

Это позволит корректно копировать код с сайта в среду разработки языка, “Блокнот” и Notepad++ (и там и там всё будет отображаться одинаково).

Мессенджер “Telegram” делает именно это – все отступы заменяет на набор стандартных пробелов.

Приключение пробелов и TAB в html

Вот код на Python подбора “пифагоровых троек”, скопированный из среды разработки IDE в мессенджер. Что там с кодами символов после вставки?

Приключение пробелов и TAB в html

Всё в порядке – четыре символа 32 (стандартные пробелы) вместо одного символа 09 (табуляция). Причем визуально смещение кажется в три символа, но это не так. Просто “длина” пробелов меньше ширины стандартного шрифта.

 И при копировании и вставке обратно в IDE = всё будет нормально работать.

Использование, например “неразрывного пробела” при обратной вставке кода с сайта в IDE – приводит к проблемам.

Приключение пробелов и TAB в html

“Не нравятся” символы в начале строки :(

Четыре неразрывных пробела показываются как красные черточки.

 

Подпишитесь в VKontakte - нажмите кнопку
Подпишитесь в Telegram - нажмите кнопку
Наша группа ODNOKLASSNIKI

Вы можете сохранить ссылку на эту страницу себе на компьютер в виде htm файла




Запрос на размещение Вашего рекламного поста (тема и email будут добавлены автоматически в письмо)

В Вашем браузере должна быть настроена обработка ссылок mailto

site_post@bk.ru

или просто скопируйте адрес e-mail



Последние публикации

  • Статьи от: GoodWin
  • Рубрика: Блог
  • Сортировка: дата публикации по убыванию

Яндекс Metrika добавила кнопку на фронтенд

05.08.2022
Публикация 10 месяцев назад
На сайтах появилась новая кнопка Вот она - маленькая, круглая справа внизу, рядом с кнопкой "Наверх" При нажатии появляется статистика Яндекс.Метрика. Вообще это некрасиво. Счетчик должен считать - а не добавлять что-то на сайт.  Скрипт, которые Вы установили на сайт для подсчета посетителей - начал что-то добавлять на фронтенде Вашего сайта - и Вас никто не спрашивал. Да - конечно, статистика показывается только владельцу счетчика (т.е. он зарегистрирован в текущей сессии в Яндексе под своим логином). Модуль статистики на сайте Показывать статистику прямо на сайте для владельца счетчика. Статистика будет отображаться только при условиях: ваш браузер...
(Читать полностью...)

Пароль для внешних приложений mail.ru

10.07.2022
Публикация 11 месяцев назад
Упс... А что случилось? Пришло письмо на почту. А что это? А это Вы используется сервер SMTP Вашего почтового ящика от mail.ru на своем сайте - и он перестал работать :( Читаем статью  Как отправить e-mail с сайта? И теперь всё перестало работать - где-то с июня 2022 г. Почта mail.ru ввела дополнительную защиту аккаунта Теперь Ваш пароль от почтового ящика работает только для Вас. Для входа в аккаунт и для использования почты. Если Вы хотите использовать сервер SMTP для отправки почты с сайта - Вам теперь нужен отдельный пароль для приложений. Если враги его узнают - они не получат доступа к аккаунту,  с его помощью можно только получать и оправлять письма с помощью...
(Читать полностью...)

Как выбрать регистратора доменов в 2022 году

14.06.2022
Публикация 12 месяцев назад
Простой вопрос. Выбираем подешевле - и вперед? Какая разница? Цена за регистрацию и за продление обычно разная Да, есть такое дело. Цена может отличаться в 4 раза. Срок регистрации для доменов в зоне .RU один год, первый год - дешево, потом дороже. Но это не является совсем уж ключевым параметром. Есть другая проблема - часть регистраторов занимается "продажей" услуг в нагрузку.  Добавление навязанных услуг в корзину - очень плохой вариант Невозможно купить нормально домен - смотрим примеры выбираем домен и добавляем его в корзину Упс, добавилась позиция за 89 руб.  Т.е. не просто добавили товар с нулевой стоимостью в рамках акции - а добавили то, что клиент не...
(Читать полностью...)

Алгоритм суммы одинаковых элементов массива (на примере Python)

09.12.2021
Публикация 1 год назад
Простая задача - посчитать количество одинаковых элементов массива Глазами легко видеть, что суммы правильные :) Попробуем теперь сделать тоже самое программно. Используем  Python.  Логика кажется очень простой: делаем счетчик складываем при смене элемента счетчик обнуляем выводим то, что насчитали Поехали. Будет картинками, правильный код в виде текста будет в конце статьи. Используем интерпретатор Питона по ссылке https://www.online-python.com/ Варианты неправильного кода для подсчета числа элементов массива Конечно, массив надо сначала отсортировать, что бы одинаковые элементы были рядом. Будем считать, что это сделано заранее. Позвольте, а где элемент...
(Читать полностью...)

Используем PHP и псевдографику для простой гистограммы

05.12.2021
Публикация 2 года назад
Вот такой вывод "гистограммы" на основе данных массива   Нет никаких графических библиотек, чистый PHP и символ псевдографики ▓ (ASCII 2593). Разная насыщенность: значение более 70% от размера ячейки значение менее полного размера ячейки нет значения - фон Для построения используется цифровой массив - могут быть положительные и отрицательные данные. Массив ниже - данные вначале более актуальные по времени, поэтому в коде используется реверс (что бы эти данные оказались справа на гистограмме) $arr_count = array (150,145,20,10,5,0,99,85,41,34,21,56,75,46,78,34,125,130,128,10,15,24,50,30,20,0,10,20,30,50,30,20,10,5,0,5,10,20,30,50,150,145); Да  - точность не особо...
(Читать полностью...)

В Debian 11 нет команды iptables

09.10.2021
Публикация 2 года назад
При вводе команды iptables получаем “command not found”. Это  как? А вот так :) По умолчанию теперь есть nftables. Включена в ядро Linux, начиная с версии 3.13, выпущенной 19 января 2014 года. Является заменой четырех команд: iptables ip6tables arptables ebtables Базовых отличий два: в одной команде объедена работа с протоколами IPv4 и IPv6 теперь нет изначально созданных таблиц - нужно создавать самостоятельно Таблицы могут быть одного из 6-ти семейств (families): ip — для обработки пакетов IPv4 ip6 — IPv6 inet — обрабатывает сразу и IPv4 и IPv6 (чтобы не дублировать одинаковые правила) arp — пакеты протокола ARP bridge — пакеты, проходящие через мост netdev...
(Читать полностью...)

Использование тройного === в программировании (PHP)

05.05.2021
Публикация 2 года назад
Любопытный пример. Программисты знают, что есть несколько вариантов "равно": присваивание $a = 10 сравнение if ($a == $b) {........} тождественное сравнение if ($a === $b) {........} Если с первыми двумя вариантами достаточно понятно, то третий вариант вызывает вопросы.  Тождественно равно - должны совпадать не только значения, но и типы переменных. Основные типы в PHP: число $a = 10; строка $b = '10'; // кавычки показывают, что внутри строка логическая переменная $c = FALSE; И например, условие $a == $b будет верным, т.к. сравниваются значения и интерпретатор PHP "понимает", что это десять. А вот условие $a === $b будет ложным, т.к....
(Читать полностью...)

X

    Пожалуйста, докажите, что вы человек, выбрав флаг.