Тег пробела html: Тег пробела в HTML (неразрывный пробел nbsp) — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Применить пробел перед таблицей в html

У меня есть таблица с двумя строками и одним столбцом, окруженная тегом P. После P я вставил несколько » » для применения некоторого пробела к таблице с начала строки, но эти пробелы не применяются к таблице, и таблица была показана с начала строки

table {float: left; background: green;}

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
  <strong>
    <span>
      <table>
        <tr>
          <td>
            <textarea name='MainSign'></textarea>
          </td>
        </tr>
        <tr>
          <td>
            <br />شیطون<br />مدیریت کل  
          </td>
        </tr>
      </table>
    </span> 
  </strong>
</p>

html css
Поделиться Источник Masoud Bahrami 14 марта 2015 в 06:08
3 ответа
Как добавить пробел перед маркерными точками в HTML
Я хочу добавить пробел перед точками маркера . Мое требование, как Это параграф 1 Текстовая строка первая Текстовая строка вторая Это параграф 2 Текстовая строка первая Текстовая строка вторая Любая помощь будет оценена по достоинству.
добавить пробел перед заглавными буквами?
Как добавить пробел перед заглавными буквами в строке? Я пишу код c для школы, который требует функции, добавляющей пробел перед каждой заглавной буквой в связанном предложении например , HelloHowAreYou должен выглядеть так Привет, как дела это то, что я пробовал и насколько я получил int i; i =…

1

Тег <table> создает новую строку при ее использовании. Таким образом, все ваши пространства создаются над столом.
Лучший способ сделать это возможным — использовать встроенный код css.
<table>
Нет необходимости делать таблицу внутри тега <p>.
Поделиться PrazSam 14 марта 2015 в 06:30

0

Я предполагаю, что вы хотите переместить свой стол подальше от левой границы. Вы можете легко сделать это с помощью CSS. без добавления
 
Проверьте это fiddle Fiddle я изменил цвет фона на красный, чтобы легче было понять. Затем я дал удостоверение личности для стола. как id='MainSign' с css затем изменил margin-left
#mainTable{ margin-left:100px; }
вы можете использовать любое значение вместо 100px;
Поделиться Anjula Ranasinghe 14 марта 2015 в 06:18

0

Table
не может быть внутри paragraph ( paragraph закрывается, когда начинается table ).
Используйте float для отступа таблицы пробелами в абзаце. И вы также можете удалить span и strong , они пусты и закрыты, когда начинается table .
p {float: left; background: red; margin: 0;} table {float: left; background: green;}
http://jsfiddle.net/5439pj0p /
NOTE:
HTML, который визуализируется браузером из вашего кода, является:
<p> <strong> <span></span> </strong> </p> <table>...</table> <strong></strong> <p></p>
Вот fiddle, где вы можете видеть, что на самом деле есть два элемента strong (желтый, размер 10×10 пикселей).
http://jsfiddle.net/5439pj0p/1/
Поделиться pavel 14 марта 2015 в 06:21
Как добавить пробел перед текстом в JLabel?
Я создал JLabel и что бы поместить в него какой-то текст. Но когда я смотрю на результат, текст приближается к краю экрана. Поэтому я хочу добавить пробел перед ним, чтобы он отодвинулся дальше от края экрана. Но это не работает, пространство не добавляется независимо от того, сколько пробелов я…

Пробел перед изображением
Перед изображением во втором ряду есть пробел. Я не знаю, почему это происходит. Поля и отступы в порядке. Все изображения имеют одинаковый размер, но во втором ряду перед изображением есть пустое пространство. Там могут поместиться еще 2 изображения. При осмотре он просто показывает белое…
Похожие вопросы:

PHP DOM Получить Тег Перед Таблицей N-th
Допустим, HTML содержит 15 тегов таблицы, перед каждой таблицей есть тег div с некоторым текстом внутри. Мне нужно получить текст из тега div, который находится непосредственно перед тегом 10-й…

Magento; удалить пробел перед классом тела
Как удалить пробел перед значениями класса? Для того чтобы проверить HTML, это: <body class= cms-index-index cms-home> Должно быть: <body class=cms-index-index cms-home> Это происходит…

html добавить пробел перед тегом
Я пытаюсь добавить пробел перед входным тегом, и я заметил, что Chrome не визуализирует whitespace. Что я могу сделать, чтобы добавить пробел? Мой код очень прост: Q: <input type=text id=q>…

Как добавить пробел перед маркерными точками в HTML
Я хочу добавить пробел перед точками маркера . Мое требование, как Это параграф 1 Текстовая строка первая Текстовая строка вторая Это параграф 2 Текстовая строка первая Текстовая строка вторая Любая…

добавить пробел перед заглавными буквами?
Как добавить пробел перед заглавными буквами в строке? Я пишу код c для школы, который требует функции, добавляющей пробел перед каждой заглавной буквой в связанном предложении например ,…

Как добавить пробел перед текстом в JLabel?
Я создал JLabel и что бы поместить в него какой-то текст. Но когда я смотрю на результат, текст приближается к краю экрана. Поэтому я хочу добавить пробел перед ним, чтобы он отодвинулся дальше от…

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

python-docx: вставка абзаца перед таблицей
В python-docx есть метод абзаца для вставки абзаца перед другим: p2 = p.insert_paragraph_before(hello,) Предположим, что у нас уже есть сохраненный документ docx с таблицей в нем, и…

Добавить пробел перед датой в ячейку
Какова формула добавления пробела перед датой в ячейке? Например, [пробел]25/12/1999

как добавить пробел перед тегом в beatifulsoup
У меня есть следующий фрагмент кода: html = urlopen(req).read() soup = BeautifulSoup(html, lxml) # remove all script and style elements for script in soup([script, style]): script.extract() # get…

Pug — Pug предоставляет четыре способа получитьпростой текст- то есть любой код или те
Pug предоставляет четыре способа получить простой текст — то есть любой код или текстовое содержимое, которое должно идти, в основном необработанное, непосредственно в обработанный HTML. Они пригодятся в разных ситуациях.
Обычный текст по-прежнему использует интерполяцию тегов и строк , но первое слово в строке не является тегом Pug. А поскольку обычный текст не экранирован, вы также можете включить буквальный HTML.
Одна из распространенных ошибок — управление пробелами в отображаемом HTML. Мы поговорим об этом в конце этой страницы.

Inline in a Tag
Самый простой способ добавить простой текст — встроенный . Первый член в строке — это сам тег. Все, что находится после тега и один пробел, будет текстовым содержимым этого тега. Это наиболее полезно, когда текстовое содержимое короткое (или если вы не против длинных строк).
p This is plain old <em>text</em> content.
<p>This is plain old <em>text</em> content.</p>
Буквальный HTML
Целые строки также рассматриваются как простой текст, если они начинаются с левой угловой скобки ( < ), что иногда может быть полезно для написания буквальных тегов HTML в местах, которые в противном случае могут быть неудобными. Например, одним из вариантов использования являются условные комментарии . Поскольку буквальные HTML-теги не обрабатываются, они не закрываются автоматически, в отличие от тегов Pug.

<html> body p Indenting the body tag here would make no difference. p HTML itself isn't whitespace-sensitive. </html>
<html> <body> <p>Indenting the body tag here would make no difference.</p> <p>HTML itself isn't whitespace-sensitive.</p> </body> </html>
Водопроводный текст
Другой способ добавить простой текст к шаблонам — поставить перед строкой вертикальную черту ( | ). Этот метод полезен для смешивания простого текста со встроенными тегами, как мы обсудим позже в разделе «Управление пробелами».

p | The pipe always goes at the beginning of its own line, | not counting indentation.
<p>The pipe always goes at the beginning of its own line, not counting indentation.</p>
Блок с меткой
Часто вам могут понадобиться большие блоки текста внутри тега. Хороший пример — написание кода JavaScript и CSS в тегах script и style . Для этого просто добавьте . сразу после имени тега или после закрывающей круглой скобки, если тег имеет атрибуты .
Между меткой и точкой не должно быть пробела.Обычное текстовое содержимое тега должно быть снабжено отступом в один уровень:
script. if (usingPug) console.log('you are awesome') else console.log('use pug')
<script> if (usingPug) console.log('you are awesome') else console.log('use pug') </script>
Вы также можете создать точечный блок простого текста после других тегов в родительском теге.
div p This text belongs to the paragraph tag. br . This text belongs to the div tag.
<div> <p>This text belongs to the paragraph tag.</p><br />This text belongs to the div tag. </div>
Контроль в Уайтспейсе
Управление пробелами в отображаемом HTML — одна из самых сложных частей в изучении Pug. Не волнуйтесь, вы скоро освоитесь.
Нужно просто запомнить два основных момента о том,как работает белый пробел.При компиляции в HTML:
Мопс удаляет отступы и все пробелы между элементами .
Таким образом, закрывающий тег HTML-элемента коснется открывающего тега следующего. Обычно это не проблема для элементов блочного уровня, таких как абзацы, потому что они по-прежнему будут отображаться как отдельные абзацы в веб-браузере (если вы не изменили их свойство display CSS ). См. Описанные ниже методы, чтобы узнать, когда вам нужно вставить пробел между элементами.
Мопс сохраняет пробелы внутри элементов, в том числе:
все белые пробелы в середине строки текста.
ведущий белый пробел за пределы блочного отступа.
…идущий в ногу с белым пробелом.
разрывы строк внутри простого текстового блока или между последовательными трубопроводными линиями.
Итак… Паг удаляет пробелы между тегами, но сохраняет пробелы внутри них. Значение здесь в том, что он дает вам полный контроль над тем, должны ли касаться теги и / или обычный текст. Он даже позволяет размещать теги в середине слов.
| You put the em em pha | sis on the wrong syl em la | ble.
You put the em<em>pha</em>sis on the wrong syl<em>la</em>ble.
Компромисс в том , что он требует , чтобы Вы думали о и взять контроль над ли тегами и текстом прикосновения.
Если вам нужно прикоснуться к тексту и / или тегам — возможно, вам нужна точка, чтобы появиться за пределами гиперссылки в конце предложения — это легко, поскольку в основном это происходит, если вы не сообщите Пагу иначе.
a ...sentence ending with a link | .
<a>...sentence ending with a link</a>.
Если вам нужно добавить место, у вас есть несколько вариантов:
Рекомендуемые решения
Вы можете добавить одну или несколько пустых линий трубопровода — трубку с пробелами или без них. Это вставит пробел в обработанный HTML.
| Don't | button#self-destruct touch | | me!
Don't <button>touch</button> me!
Если для ваших встроенных тегов не требуется много атрибутов, вам может показаться, что проще всего использовать интерполяцию тегов или буквальный HTML-код в текстовом блоке .
p. Using regular tags can help keep your lines short, but interpolated tags may be easier to #[em visualize] whether the tags and text are whitespace-separated.
<p>Using regular tags can help keep your lines short, but interpolated tags may be easier to <em>visualize</em> whether the tags and text are whitespace-separated.</p>
Не рекомендуется
В зависимости от того, где вам нужен пробел, вы можете добавить дополнительный пробел в начале текста (после отступа блока, символа вертикальной черты и / или тега). Или вы можете добавить конечный пробел в конце текста.
ОБРАТИТЕ ВНИМАНИЕ на конечные и ведущие пробелы здесь:
| Hey, check out a(href="http://example.biz/kitteh.png") this picture | of my cat!
Hey, check out <a href="http://example.biz/kitteh.png">this picture</a> of my cat!
Вышеупомянутое решение работает отлично, но, по общему признанию, возможно, немного опасно: многие редакторы кода по умолчанию удаляют конечные пробелы при сохранении. Вам и всем вашим участникам, возможно, придется настроить своих редакторов, чтобы предотвратить автоматическое удаление конечных пробелов.
Как сделать пробелы в HTML
Добавление строки пробелов в ваш HTML только для того, чтобы они исчезли из-за того, как HTML обрабатывает пробелы, является разочаровывающим, знакомым опытом для любого, кто работает в веб-дизайне. Тег HTML space будет удобен для создания пробелов, но факт в том, что ни один не существует ..
Источником проблемы является то, что HTML сжимает все пробелы — символы табуляции , пробелы и возврат каретки — до одного символа. Если вы хотите сделать отступ в своих абзацах, вы не можете просто ввести пять пробелов и затем начать текст. Это не значит, что вы не можете контролировать пробелы в своем HTML.
Lifewire / Мэдди Прайс
Альтернативы несуществующему HTML-тегу Space
У вас есть несколько вариантов создания и контроля пустого пространства на ваших веб-страницах :
Тег HTML <br> обозначает разрыв строки, как возврат каретки в программе обработки текста. Вы будете использовать его в конце каждой строки адреса, например, чтобы получить формат блока, к которому привыкли люди.
<Р> Тег создает разрыв абзаца. Он применяется к фрагменту текста, который является блоком текста, отделенным от соседних блоков текста пробелом и / или отступом первой строки.
<Предварительно> используется тег с преформатированным текстом. Он указывает браузеру, что текст должен отображаться точно так, как написано в файле HTML, включая любые пробелы или пустые строки. Если вы введете пять пробелов внутри тегов <pre> , вы получите пять пробелов на website.character
& NBSP; персонаж создает пробел, который не разбивается на новую строку. Два слова, разделенные неразрывным пробелом, всегда появляются в одной строке.
& # 9; и & Tab; символы создают табуляцию в HTML. К сожалению, их нельзя использовать независимо. В любое время, когда вам понадобится вкладка в HTML, вам нужно будет использовать один из этих символов внутри тегов <pre> или подделать его с помощью CSS.
Вы также можете добавить пространство вокруг текста, используя Каскадные таблицы стилей (CSS ). Если вы хотите создать интервал вокруг полного блока текста, это абсолютно верный способ сделать это. CSS также предоставляет множество стилистических элементов управления для самого текста, что делает его первым выбором для многих веб-разработчиков.
Практикуйтесь в использовании этих простых тегов, отмечая результаты каждого. Обойти недостаток тега HTML space не сложно, если вы познакомитесь с этими быстрыми методами.
HTML пункты
HTML документы могут быть разделены на несколько пунктов.
HTML пункты
Прохождение через <р> определение тега.
Примечание: Браузер автоматически добавляет пустую строку до и после абзацев.(</ P> является блочные элементы)
Не забудьте конечный тег
Даже забудьте использовать закрывающий тег, большинство браузеров будет корректно отображать HTML из:
В приведенном выше примере, большинство браузеров не проблема, но не не полагаться на эту практику. Упущение конечного тега может привести к непредсказуемым результатам и ошибок.
Примечание: В будущих версиях HTML, позволяют пропускать конечные теги.
HTML обертка
Если вы хотите, чтобы обернуть (новая линия), не создавая новый пункт, пожалуйста, используйте теги <br />:
примеров
<P> Это <br> Параграф <br> демонстрирует влияние отрасли </ p>

Попробуйте »
<br /> элемент является пустой HTML-элемент. Так как закрывающий тег не имеет никакого смысла, так что это не имеет конечного тега.
HTML выход — использование напоминаний
Нам не удалось определить точный эффект HTML, который будет отображаться. Размер экрана, а также корректировки к окну, может привести к различным результатам.
Для HTML, вы не можете добавить дополнительные пробелы или разрывы строк в HTML-коде, чтобы изменить эффект выходного сигнала путем.
Когда дисплей странице, браузер будет удалять лишние пробелы в исходном коде и пустые строки. Все последовательные пустые строки или пробелы будут учитываться как пространство. Обратите внимание, что HTML-код все последовательные пустые строки (строки) также отображаются как пробел.
пробовать
(Этот пример демонстрирует некоторые аспекты HTML форматирования)
Примеры этого сайта
HTML пункты
Как отображать HTML пункт в вашем браузере.
Wrap
Newline в HTML-документе.
Публикация Тан в HTML код
Когда браузер отображает HTML, исходный код опущен лишние символы пробела (пробелы или символы возврата каретки и т.д.).
Другие примеры
Более пункт
Поведение по умолчанию пункта.
Тег HTML Ссылка
В этом руководстве Tag Reference содержит более подробную информацию о HTML-элементов и их атрибутов.
标签描述
<p> 定义一个段落
<br> 插入单个折行（换行）
Удаление лишних пробелов в генерируемом HTML коде страницы с помощью Twig
Поводом для написания этой заметки послужил вопрос о том, как минифицировать генерируемый HTML код страницы средствами Grav CMS с целью удаления лишних символов пробела, приводящих к неправильному отображению элементов страницы в браузере.
Ставить знак равенства между минификацией HTML кода и удалением лишних пробелов между HTML тегами некорректно. Однако избавление от лишних пробелов помогает решить проблемы с отображением элементов страницы в браузере и сделать минифицированный HTML код менее читаемым, поэтому выполнение этой операции оправдано.
На первый взгляд, для решения поставленной задачи требуется пропустить сгенерированный HTML код страницы через дополнительный обработчик, выполняющий фунцкцию парсера HTML кода и удаляющий требуемые символы пробелов.
Grav CMS не предоставляет встроенную функцию минификации генерируемого HTML кода страницы, но позволяет расширять доступную функциональность за счёт плагинов, а значит, для минификации HTML кода страниц может быть написан специальный плагин.
Однако не стоит забывать о том, что Grav CMS использует шаблонизатор Twig, включающий специальный тег spaceless.
Привычное для большинства разработчиков использование Twig тега spaceless — удаление лишних пробелов в отдельных генерируемых блоках HTML кода, расположенных внутри кода HTML документа.
<div> {% spaceless %} <h3>Items List</h3> <div> {% for item in items %} <span;>{{ item }}</span> {% endfor %} </div> {% endspaceless %} </div>
В пределах рассматриваемой задачи, полный код HTML документа не несёт в себе никаких отличий от HTML кода отдельных блоков. Поэтому для удаления лишних пробелов из полного кода HTML документа, Twig тег spaceless используется аналогичным способом, но включает в себя не фрагменты, а полный код документа, подлежащий обработке.
{% spaceless %} <!DOCTYPE html> <html> <head> <title>Spaceless</title> </head> <body> <h2>Spaceless</h2> </body> </html> {% endspaceless %}
Приведённый фрагмент кода показывает пример использования привычных инструментов при взгляде на задачу с непривычной стороны и не зависит от конкретной системы управления контентом.
«Не закрывайте теги!» — CSS-LIVE
С таким провокационным призывом на днях обратился к своим читателям в Твиттере не кто-нибудь, а Таб Аткинс, главный редактор львиной доли спецификаций CSS. Конечно, речь шла не о любых тегах, а об опциональных (необязательных), которые разрешает не ставить сам стандарт HTML. Но всё равно призыв Таба многих шокировал, очень уж вразрез он шел со всем, чему нас учили с самого начала веб-карьеры.
Может, Таб просто всех троллил? Или же в его совете есть рациональное зерно? Попробуем непредвзято разобраться.
Какие теги можно не закрывать?
Так и хочется воскликнуть «Никакие!» :). Но давайте всё-таки обратимся к стандарту. Он разрешает опускать не только 19 закрывающих тегов, но и 5 открывающих. Все они, вместе с условиями, когда это можно делать, явно перечислены в целом одном страшно секретном разделе 12.1.2.4. И еще 14 тегов закрывать просто нельзя.
В таблицах ниже я попытался максимально упростить формулировку условий из спецификации (если где-то перестарался — прошу поправить):
Необязательные открывающие теги
Тег Когда можно не писать
<html> Если перед ним не идет 
<head> Если перед ним не идет 
<body> Если body начинается не с , пробела, либо одного из тегов, который может быть и в head
<tbody> Перед <tr>, если перед ним нет незакрытого thead, tfoot или другого tbody
<colgroup> Перед <col>, если перед ним нет незакрытого другого colgroup
Нельзя опускать открывающий тег, если у него есть какие-либо атрибуты (напр. lang для <html>). Также открывающий <body> необходим, если его первым потомком должен быть script, link или другой элемент, который может быть и в head — иначе он попадет именно туда.
Необязательные закрывающие теги
Тег Когда можно не писать
</html> Если после него не идет 
</head> Если после него не идет  или пробел
</body> Если после него не идет 
</li> Перед <li> или </ul>/</ol>
</dt> Перед <dt> или <dd>
</dd> Перед <dt>, <dd> или концом родителя
</p> Перед открывающим тегом любого не-фразового потокового («блочного» по-старому:) элемента, либо закрывающим тегом родительского элемента (если у того не прозрачная модель контента)
</rt> и </rp> Перед <rt>, <rp> или </ruby>
</optgroup> Перед <optgroup> или </select>
</option> Перед <option>, <optgroup>, </optgroup> или </select>
</colgroup> Если после него не идет  или пробел
</caption> Если после него не идет  или пробел
</thead> Перед <tbody> или <tfoot>
</tbody> Перед другим <tbody>, <tfoot> или </table>
</tfoot> Перед </table>
</tr> Перед <tr> или концом родителя
</td> и </th> Перед <td>, <th> или концом родителя
Общее правило: закрывающие теги обычно не нужны для однородных сущностей в специализированных контейнерах (пунктов списков, внутренних частей таблиц и т.п.). Напрямую вложенными друг в друга они не бывают, ничего другого в их родителе тоже быть не может, так что если начался следующий — логично, что предыдущий закончился.
У правила для <p> общая логика похожа, но оно сложнее и потому стоит особняком (мы к нему еще вернемся).
А условие про HTML-комментарий означает лишь требование предсказуемости итоговой DOM. Например, что без явного тега нельзя вставить этот комментарий снаружи элемента. Это всё равно не будет ошибкой, просто в итоговой DOM комментарий окажется внутри него.
Теги, закрывать которые нельзя
Это пустые (void) элементы: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.
Многие поспешат возразить: «Это же самозакрывающие(ся) теги, у них свой способ закрытия — слеш перед >!». Что ж, их ждет сюрприз: в HTML этот слеш… не значит ничего! Он не считается ошибкой, чтобы было легче переходить с XHTML, но «самозакрытыми», точнее, не требующими закрытия, их делает не слеш, а «зашитый» в алгоритм парсинга список этих пустых элементов. И «закрыть» по аналогии, скажем, <div /> нельзя — для HTML это будет открывающий тег (притом уже с ошибкой). Только для SVG- и MathML-элементов (напр. <g />) этот слеш означает честное «самозакрытие» (т.е. сокращение для <g></g>).
Аргументы против незакрытия тегов
«Это невалидный код!»
Необязательные теги — часть стандарта HTML. Значит, код, использующий их по правилам, валиден (точнее, соответствует этому стандарту). Так что это — невалидный аргумент:)
Нельзя полагаться на механизм исправления ошибок в браузерах
Вообще-то, в HTML5 алгоритм исправления ошибок «зашит» в стандартный алгоритм парсинга, и все браузеры ~~мамой~~ клянутся, что соблюдают этот стандарт. Так что ошибочная запись <a href="...">раз<a href="...">два</a> везде даст две ссылки подряд, а не вложенную ссылку.
Но я согласен: полагаться на ошибочное поведение чего бы то ни было — очень, очень плохая идея.
Вот только разрешенные необязательные теги — не ошибка. А хоть и непривычный, но вариант правильного HTML-кода. И этот аргумент валидный — но мимо:)
Хрупкость
Часто говорят, что код с незакрытыми тегами легче сломать чем-то непредвиденным. Но давайте поищем конкретную ситуацию, где это проявится.
Например, вдруг в нашем шаблоне появился HTML-комментарий. Давайте честно: на что может повлиять, добавится этот комментарий внутрь неявного <head> или <body> или снаружи?
Или возьмем динамически генерируемый список. Если внутрь нашего пункта списка попадет другой <li>, то пункт развалится на два — но это произойдет независимо от того, явно он был закрыт или неявно.
Еще в <head>...</head> нередко попадает то, что не может там находиться. Например, что-то, что браузер считает выводимым на экран текстом (в подключаемых PHP-шаблонах это часто могла быть BOM-метка). Это сразу же неявно закрывает </head> и открывает <body>. И снова независимо от того, где и как стояли соотв. теги.
Другое дело, если кто-то возьмет и не закроет другой тег, скажем, </div> или тот же </a>. Но это уже проблема нарушения стандарта (равно как и закрытие тега в неподходящем месте!). Ее решение — валидация кода (в т.ч. автоматическая, на этапе сборки/CI). И оно снова не зависит от наличия/отсутствия необязательных тегов!
Может быть, в комментариях вы подскажете более убедительный пример, где именно легально незакрытый тег будет причиной хрупкости?
Несовместимость с XML (и JSX)
Факт: HTML и XML — разные языки (а JSX — вообще де-факто третий, хоть отчасти и «косплеит» XML внешне), и правила у них разные. Если нужно соблюсти и те, и те, то, конечно, без явного закрытия тегов никак. Другой вопрос, где и зачем сегодня нужна совместимость HTML с XML?..
Несовместимость с редакторами и IDE
Многие редакторы кода при подсветке синтаксиса, сворачивании ветвей и т.п. привязываются к явным закрывающим тегам. Некоторые даже закрывают их автоматически. Что ж, правила инструментов тоже желательно соблюдать. Только стоит отличать их от правил языка.
Несовместимость с кодстайлами и рабочими процессами
Аналогично: если в проекте принят какой-то дополнительный стандарт оформления кода помимо синтаксической корректности HTML — будь то лимит длины строк или требование явно закрывать теги — его тоже надо соблюдать. Но он не должен становиться самоцелью: если на его соблюдение уходит слишком много сил и он мешает использовать какую-то стандартную возможность языка, удобную для конкретной задачи — может, легче будет его пересмотреть или перейти на другой?
Трудность чтения
Большинству из нас, наверное, читать код с незакрытыми тегами труднее: нет привычных маркеров конца элемента. Правда, это во многом вопрос привычки и форматирования исходника (см. далее). Но привычка — важный фактор, не поспорить. Особенно в команде.
Сложность правил для запоминания
Таблицы с правилами, когда какой тег можно не закрывать, выглядят внушительно. И это я еще их упростил! Даже сам Таб Аткинс в исходном твиттерском треде запутался, какие теги неявно закрывают <p>, а разница между случаями, когда открывающий <body> обязателен, а когда нет, навскидку еще менее интуитивна. Не лучше ли вместо этого вот всего запомнить одно простое правило «всегда закрывай все теги!»?
Увы: одним простым правилом от HTML не отделаешься:). Как минимум 14 исключений — пустые элементы, которые закрывать нельзя — помнить всё равно надо. А что еще важнее, явное закрытие тега не гарантирует, что элемент действительно закончится именно в этом месте (мы уже мельком видели пару примеров, дальше будет больше). Но разве в других языках нет таких «странных» правил? Одна таблица приведения типов в JS чего стоит.
Простота записи поощряет бардак в коде
Занятно, что этот аргумент часто сочетается с предыдущим.
Да, код в стиле «ляпнул открывающий тег и вперёд» может показаться небрежным и «несерьезным». Но это тоже вопрос привычки. Пример обратного — Markdown: одна звездочка — один пункт списка и никаких «закрывающих тегов», при этом в коде полный порядок и читать его — одно удовольствие. Но да, Markdown и HTML — тоже разные языки:)
В любом случае, закрыть тег ~~много ума не надо~~ не так уж сложно (тем более часто это на автомате делает IDE). Сложнее поставить его там, где надо, по правилам языка. Но не поставить его там, где можно по стандарту и уместно по задаче — сложность примерно сопоставимая. Ниже мы увидим, что чтобы писать правильный HTML — хоть с явными тегами, хоть без — его всё равно придется знать.
Явное лучше неявного
Безусловно!
Когда между ними действительно есть выбор.
Увы, с HTML это не всегда так (подробности чуть ниже).
Аргументы за незакрытие тегов
Всего лишь сокращенная запись
В XML были две равнозначные записи элемента без содержимого — полная (<tag></tag>) и сокращенная (<tag/>). Вторая почему-то до сих пор популярна даже в HTML, хотя там этот слеш ничего не значит (см. выше).
Точно так же и в HTML по сути есть две равнозначные записи конструкции «конец элемента и начало следующего» — полная (напр. </p><p>) и сокращенная (напр. <p>). Т.е. формально в обоих случаях эти теги закрыты, просто не всегда очевидным образом.
Экономия трафика
Принцип прост: если не видно разницы — зачем ~~платить~~ писать (и гонять по сети) больше. Древний «гайд» по оформлению HTML/CSS от Google так этот совет и формулировал: «байты — деньги».
Это может быть и вправду актуально для Гугла с его объемами трафика. Для остальных это скорее всего экономия на спичках. Особенно с gzip или еще лучшими новыми алгоритмами сжатия. Но протестировать всё равно не помешает:)
Экономия памяти
Любые символы между тегами — включая пробелы и переносы строк — попадают в DOM в виде текстовых нод. В эпоху верстки инлайн-блоками эти ноды-пробелы доставляли немало хлопот (и одним из решений как раз было не закрывать теги:). Сейчас это неактуально, но сами ноды никуда не делись. Так что в DOM списка с закрытыми тегами <li> на самом деле будет вдвое больше нод, чем в DOM списка с незакрытыми (при обычном форматировании исходника, без минификации):
See the Pen
poJKLzb by Ilya Streltsyn (@SelenIT)
on CodePen.
И эти лишние ноды — полноценные DOM-объекты, с кучей свойств и методов. Другой вопрос, так ли много места они занимают в памяти и сильно ли это влияет на производительность страницы (как всегда, надо тестировать и измерять!)
По правде, этот аргумент выходит не столько за незакрытие тегов, сколько за минификацию кода для продакшна, с убиранием всех ненужных пробелов и т.д. Хотя тот же минификатор можно настроить и на вырезание необязательных тегов. Если тесты покажут, что от этого есть толк. Добавлено 26.03.2020: к счастью, проблемы минификаторов 10-летней давности, не всегда умевших отличить необязательный тег от обязательного, остались в прошлом – нынешняя версия html-minifier использует честный HTML5-парсер и, если не злоупотреблять опциями с «невалидным HTML» на выходе, ничего не сломает.
«Защита от дурака»
Вопреки стереотипу, что «явно закрытые теги надежнее», эти добавочные сущности в DOM — еще и новые потенциальные точки отказа, если случайно поставить закрывающий тег не там:
See the Pen
KKpGBqO by Ilya Streltsyn (@SelenIT)
on CodePen.
Причем для абзацев это и валидатор пропустит. Неявно же элементы закрываются только сразу перед другим элементом, и такой неуправляемый «неприкаянный» текст заведомо не появится.
Удобство чтения
Как ни странно, некоторым проще читать код без закрывающих тегов. Для людей программистского склада, привыкших держать все сущности в контейнерах, это звучит дико, но тем, кто больше работает с текстом, часто привычнее думать о разделителях абзацев, пунктов списка и ячеек таблицы. Именно разделители используются в редакторах типа Word, вышеупомянутом Markdown… и HTML задумывался так же (в одном из ранних черновиков те же <p>, <li> и т.п. так и были одиночными разделителями, вроде <br>).
Сравните две разметки таблицы с внешне идентичным результатом:
<table> <caption>Цены на продукты<caption> <thead> <tr> <th>Продукт</th> <th>Февраль</th> <th>Март</th> </tr> </thead> <tbody> <tr> <th>Гречка</th> <td>80</td> <td>120</td> </tr> <tr> <th>Соль</th> <td>5</td> <td>15</td> </tr> <tr> <th>Икра</th> <td>1500</td> <td>900</td> </tr> </tbody> </table> <table> <caption>Цены на продукты <thead> <tr> <th>Продукт <th>Февраль <th>Март <tbody> <tr> <th>Гречка <td>80 <td>120 <tr> <th>Соль <td>5 <td>15 <tr> <th>Икра <td>1500 <td>900 </table>
Правда, тут повезло, что вся таблица и текст в ячейках короткие, а хороший кодстайл должен быть универсальным и не зависеть от везения..:)
Лучшее понимание специфики HTML и защита от сюрпризов
Этот аргумент Таба я вынес отдельно, чтобы он не затерялся (и выделил ключевые, на мой взгляд, слова жирным):
Еще одна причина привыкнуть к этому [не ставить необязательные теги] — то, что HTML-парсер будет делать это [достраивать DOM] в любом случае, и вы сможете заодно выучить соответствующие правила, так что не споткнетесь на этом. Если вы используете закрывающие теги с бездумным фанатизмом, вы можете *полагать*, что знаете, где заканчивается элемент, но окажетесь неправы!
Частый вопрос на форумах, StackOverflow, да и в жизни верстальщика: «Почему мой список внутри абзаца не отображается как надо?» Во всех руководствах по HTML <p>...</p> — пример блочного контейнера. С детства мы помним, что абзац — это «законченная мысль», так что если она включает в себя список чего-либо, подводку к нему и некий итог — логично, чтобы всё это было в одном абзаце. Вот открывающий <p>, вот список внутри, вот закрывающий </p>, всё закрыто в правильном порядке… Почему же в DOM-инспекторе список оказался снаружи абзаца?
Да, иногда привычка «мыслить контейнерами» и безоговорочно доверять явным тегам может оказать медвежью услугу не только новичку, маскируя неочевидное поведение парсера. А новичку здесь и валидатор мало поможет: «Найден закрывающий тег без открывающего…» — ну как же его нет, когда вот он? Ладно, <p> допускает лишь «фразовое» («строчное», по-старому) содержимое, а список к нему не относится — но ведь другие теги, даже насквозь «строчный» <span>, от точно такой же неправильной вложенности не рвутся!
А вот знание, что закрывающий </p> необязателен, и открывающий тег любого «блочного» (по-старому) элемента — его стандартный эквивалент, эту ситуацию бы предотвратило. Мы бы сразу обернули эту «мысль» не в <p>...</p>, а во что-то другое, без неявного закрытия — хоть <div>. Что, кстати, рекомендует и спецификация.
Аргумент против тегов вообще
Браузерам, по большому счету, вообще плевать на теги. Они отображают не разметку, а DOM, и оперируют лишь DOM-элементами и их свойствами. DOM может строиться по-разному, и в современном мире куда чаще она строится скриптами, а не парсится прямо из разметки. Разметка — лишь один из способов описания будущей DOM в текстовом формате, в принципе не лучший для машины, зато более понятный для человека.
А люди в наше время тоже редко пишут разметку руками. Чаще эту скучную механическую работу за нас делают инструменты — препроцессоры, шаблонизаторы и всё такое прочее. И это их задача — ставить те теги, которые надо, где надо и как надо, чтобы парсеры, со всеми их странностями и документированными причудами, всё правильно поняли. Их, а не наша.
Не в том ли причина многих проблем нынешней веб-отрасли, что истинную природу веб-платформы от разработчиков всю их жизнь вольно или невольно скрывают — сначала за тегами (и пустяками типа их регистра, словно мы до сих пор в 90-х), а затем за абстракциями фреймворков?..
Заключение
Думаю, подытожить эту статью можно примерно так:
Необязательные теги — не ошибка, не «магия», не «браузерная самодеятельность» и т.п. (как часто считают), а документированная особенность стандарта. По сути — еще один инструмент HTML, такой же, как и закрывающие теги. Можно спорить, входят ли они в «The good parts» языка HTML (скорее всего нет!:), но в некоторых задачах (напр. для экстремальной оптимизации) они могут быть полезны;
Почти все валидные аргументы и за, и против необязательных тегов сводятся к двум фразам: «делайте, как вам удобнее», и «делайте, как у вас (в проекте, в команде, в настройках окружения и т.д.) заведено». Ну и еще «смотрите по задаче и тестируйте!».
Поэтому в подавляющем большинстве случаев все необязательные теги лучше всё-таки ставить. Не потому, что «Так Надо, Ибо Воистину ©», или будто это автоматически «сделает код надежнее», а лишь потому, что:
так удобнее и понятнее большинству разработчиков;
так настроено по умолчанию большинство инструментов.
Код должен решать свою задачу. Задача исходников — не столько инструкция для браузеров (им-то стиль кода не важен), сколько коммуникация между разработчиками. Понятнее для большинства — коммуникация лучше.
Но не забывайте, что бывают люди и с другими предпочтениями. И увидев у кого-то непривычный стиль валидного кода, не спешите тыкать пальцем «гы-гы, вот ламер, даже теги не закрыл». Лучше поинтересуйтесь, почему так сделано. Некрасиво — не обязательно плохо, а непривычно — не всегда некрасиво. Иногда красота проявляется лишь в целой картине.
А вообще в веб-платформе масса вещей, куда более важных, чем стиль написания тегов или спор между табами и пробелами. Та же доступность хотя бы!
И всё-таки, к одному из аргументов я хотел бы вернуться. В общем-то, ради него я и затеял эту статью:)
Веб-платформа большая и сложная. В ней много неизвестного и непонятного — даже для авторов спецификаций. Сложность и неизвестность пугает. Это естественно. И людям естественно успокаивать себя, отгораживаться от своих страхов приметами и ритуалами. Сплюнул через левое плечо — «беда обойдет». Успел потрогать пуговицу перед черной кошкой — «неудача отступит». Написал тег со слешем — «код не сломается». И т.п.
Не надо так. Приметы не работают. Единственная настоящая защита против неизвестности — знание. Не бойтесь узнавать новое. Даже в том, что другие считают «элементарным». В технике нет мелочей. А HTML — давно не смешные буквы в угловых скобках, а целая колоссальная экосистема. В ней надолго хватит места самым неожиданным открытиям.
А лучший способ изучить что-либо — эксперимент. И у веба огромное преимущество перед, скажем, ядерной физикой или генетикой, что здесь в экспериментах «для себя» иногда можно нарушать правила и смотреть, что из этого выйдет — ничего действительно страшного не случится. Зато станет понятнее, почему правила именно такие. И вообще — а правила ли это (а не реликт совсем другой эпохи с совсем другими ограничениями, скажем — это я не про закрытие тегов, а абстрактно:)
Так что не бойтесь экспериментировать! И пусть с каждым днем всё больше особенностей веб-платформы становится для вас не странной «магией», а понятным и предсказуемым инструментом. Который при ненадобности всегда можно отложить в дальний ящик, но иногда, если задача того потребует, использовать на радость себе и пользователям.
P.S. Это тоже может быть интересно:
Узнаем как ставить пробел html
Если вы занимаетесь разработкой html-файлов, то наверняка замечали такую особенность, когда браузер игнорирует пробелы. В исходном коде их может стоять неограниченное количество, но в результате виден только один. Чаще всего такое ограничение только положительно сказывается при выводе информации. Ведь иногда можно поставить случайно несколько пробелов, в итоге документ получается неупорядоченным. А с помощью ограничения дистанция между словами будет всегда фиксированной. Но порой появляется потребность сделать двойной или тройной пробел, html позволит сделать неограниченное расстояние между словами на ваше усмотрение. Осуществить данную потребность можно несколькими способами, о которых мы и поговорим в этой статье.
Первый способ
Когда есть необходимость сделать более длинное расстояние между определенными словами, можно использовать специальный код пробела html. Достаточно добавить запись «&nbsp», которая увеличит дистанцию между символами. Такой код может использоваться как обычный пробел, только с тем исключением, что он всегда будет учитываться при выведении информации браузером. Этот специальный пробел html иногда используются для эмуляции красной строки или выделения отдельного фрагмента текста. Стоит немного рассказать о самом коде. Первый символ является знаком амперсанда. Он обозначает действие специального кода. В html есть множество других комбинаций, дающих различные эффекты. Например, «&gt» и «&gl» заменяют знаки «<» и «>». Их употребление необходимо, так как они обозначают начало и конец тега. В данном случае «nbsp» означает сокращенную форму команды «non-breaking space», что в переводе значит «неразрывный пробел». Для этой команды существует числовая замена «&#160», которая полностью повторяет эффект такого пробела. Стоит заметить тот факт, что если между словами будет стоять код «&nbsp», то они всегда будут находиться на одной строке. Если они заходят за границы экрана, то появляется полоса прокрутки в браузере. Код «&nbsp» – это полная эмуляция обычного пробела.
Второй способ
Второй способ применяется для более масштабных целей. Пробел в html может ставиться с помощью тега <pre>. Он позволяет выводить текст без дополнительного форматирования. Если информация помещена в этот тег, то она будет представлена в исходном виде как в html-коде страницы. При этом учитываются не только пробелы, но и переносы строк. Но стоит заметить, что, как и в случае с кодом «&nbsp», текст, заключенный в тег <pre>, будет выходить на одной строке, если не будет естественного перевода. Есть еще одно замечание. Все, что находится между открывающим и, соответственно, закрывающим тегом <pre>, будет иметь специфический шрифт.
Третий способ
Данный способ нельзя назвать новым, ведь он просто предлагает альтернативу второму. Использовав каскадные таблицы стилей, можно добиться того же эффекта, что и от тега <pre>. Но при этом шрифт будет оставаться неизменным. Правило «white-space» со значением «pre» полностью эмулирует пробел html с использованием ранее описанного тега. Данная команда может применяться к любой области текста.
Заключение
Изложенные выше способы помогут вам поставить неоднократный пробел. HTML позволяет таким образом очень гибко и на свое усмотрение настраивать свои страницы. Но, как показывает практика, использовать множественный пробел приходится редко.
Как выровнять текст на веб-странице в HTML или CSS
Обновлено: 30.06.2020 компанией Computer Hope
Любой текст можно выровнять по левому краю, центру или правому краю на веб-странице. Изображения на веб-странице также можно выровнять так же, как и текст. Ниже приведены примеры выравнивания текста и изображений по левому краю, табуляции, центру и правому краю.
Кончик
Если какое-либо выравнивание текста не работает, убедитесь, что другие стили CSS, примененные к элементу или содержащему его элементу, не конфликтуют с выравниванием, которое вы пытаетесь установить.
Примечание
С этими примерами и большей частью выравнивания текст выравнивается в элементе, содержащем текст. Текст может быть центрирован в HTML-блоке div и выровнен по левому краю на остальной части веб-страницы. Кроме того, все, что содержится в теге, содержащем выравнивание CSS (например, изображение), также выравнивается.
Примеры центровки
С выравниванием по левому краю
Выровненный выступ
По центру
С выравниванием по правому краю
Пример с выравниванием по левому краю
По умолчанию английский и другие языки выравнивают текст по левому краю.Однако, если вам нужно изменить выравнивание элементов, приведенный ниже код можно добавить к элементу или в CSS.
HTML код

Выровнено по левому краю

Кончик
См. Дополнительные советы ниже по настройке выравнивания, заполнения и поля элемента.
Пример с выравниванием по табуляции
Хотя здесь нет выравнивания текста «табуляция», добавление левого поля дает вид выравнивания табуляции, как показано ниже.
HTML код

Табуляция с выравниванием

Кончик
См. Дополнительные советы ниже по настройке выравнивания, заполнения и поля элемента.
Пример с выравниванием по центру
Используя атрибут text-align, вы можете центрировать любой текст или изображение в элементе, как показано в примере ниже.
HTML код

По центру

Кончик
См. Дополнительные советы ниже по настройке выравнивания, заполнения и поля элемента.
Пример с выравниванием по правому краю
Используя атрибут text-align, вы можете центрировать любой текст или изображение в элементе, как показано в примере ниже.
HTML код

С выравниванием по правому краю

Кончик
См. Дополнительные советы ниже по настройке выравнивания, заполнения и поля элемента.
Дополнительные насадки для выравнивания
Ниже приведены дополнительные советы по выравниванию, которые можно применить к любому из вышеперечисленных правил стиля или другим классам CSS.
Дополнительное поле можно добавить к любому из вышеперечисленных стилей, если вам требуется дополнительный отступ или требуется больше отступов. Например, вы можете применить margin-right к примеру с выравниванием по правому краю, чтобы переместить текст дальше в элемент.
Если вам нужна более отзывчивая страница, не забудьте отрегулировать или удалить любое выравнивание по левому или правому краю при просмотре на меньшем экране.
Пустое пространство HTML
Билл Кисс
18-01-2010
Коротко, мило и по делу. Как раз то, что мне было нужно. Спасибо!
Ray Su
20-01-2010
Мне нравятся мужчины
myspace uh
27-01-2010
спасибо, все работает отлично: )
Selvi
30-01-2010
Очень красиво и полезно.Легко понять. Спасибо!
Hansje
04-02-2010
хорошо, но что означает nbsp?
smo
04-02-2010
nbsp — неразрывное пространство. Браузер без разрыва строки должен отображать это.
siya
04-02-2010
Спасибо .. это очень помогло
Получить в Google
05-02-2010
Просто сделайте быстрый поиск, и я нашел эту страницу.Спасибо за код, я всегда забывал этот символ.
Colin D
23-02-2010
Спасибо за это, это помогло мне сделать мой неуклюжий предлог, чтобы панель навигации сайта выглядела лучше 🙂
Orion
01-03-2010
Спасибо. То, что я искал. 🙂
Plada
31-03-2010
Это действительно полезно, спасибо.Но у меня все еще есть вопрос.
Карлос Кастильо
01-06-2010
Будьте осторожны при использовании нескольких — некоторые браузеры игнорируют более одного и будут отображать только одно пустое пространство независимо от того, сколько вы определили в ваш код. Чтобы получить согласованные результаты (и действительный код), используйте вместо этого CSS и определите «отступы» и / или «поля» для ваших элементов.
Билли Кэррингтон
21-06-2010
Как и сказал Билл.Коротко, мило и по делу
Улыбки
17-06-2011
Огромное спасибо! Я использовал этот код, чтобы украсить свою страницу картинками, разместив и выровняв картинки. Теперь это выглядит идеально. Ты жжешь!!
Phani
10-03-2012
Это мне очень помогает, очень полезно
Afsana
30-06-2012
Спасибо.оно работает!
LazarusStr
07-02-2013
Сработало, я мог тебя поцеловать! Большое спасибо!
Адитья Мишра
09-03-2013
& nbsp ——— что такое &.
M Hamidi
22-06-2013
Отлично ???? Очень полезно
fran
03-09-2013
отличная помощь, проще говоря,
большое спасибо..
Джейми Джабра
24-04-2014
Вот это огромное спасибо!
Анвар Хан
12-09-2014
Как мы можем добавить дополнительные пробелы между текстом?
Аравиндхан
12.02.2014
Точно на цель …… 🙂
ehsan
08-04-2015
спасибо alllot
HTML-теги / теги изображений / пространство изображения
Атрибуты vspace и hspace элемента IMG добавляют пустое пространство вокруг изображения.

Атрибут Значение Пояснение
vspace = «» пикселей вертикальное белое пространство (верхняя и нижняя стороны)
hspace = «» пикселей горизонтальное белое пространство (левая и правая стороны)
Использование этих атрибутов не рекомендуется.(Используйте вместо этого CSS)
Используйте CSS вместо устаревшего HTML. Подробную информацию о CSS см. В «Связанном документе».
Пример
vspace: 30px
некоторый текст некоторый текст некоторый текст некоторый текст некоторый текст ...
Выход
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
пространство: 30px
некоторый текст некоторый текст некоторый текст некоторый текст некоторый текст ...
Выход
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
vspace: 30px, hspace: 30px
некоторый текст некоторый текст некоторый текст некоторый текст некоторый текст ...
Выход
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
некоторый текст некоторый текст
Теги изображений
Связанный документ
Абзацы, строки и фразы
Абзацы, строки и фразы
В следующих разделах обсуждаются вопросы, связанные со структурированием текста.Элементы, которые присутствуют текст (элементы выравнивания, элементы шрифта, таблицы стилей и т. д.) обсуждаются в другом месте в спецификации. Для получения информации о символов, обратитесь к разделу, посвященному набору символов документа.
Набор символов документа включает широкий выбор символов пробела. Многие из них типографские элементы, используемые в некоторых приложениях для создания конкретных визуальные эффекты интервалов. HTML учитывает только следующие символы быть пробелами :
Пробел ASCII (& # x0020;)
Вкладка ASCII (& # x0009;)
Подача формы ASCII (& # x000C;)
Пробел нулевой ширины (& # x0009;)
Разрывы строк также считаются символы пробела.Обратите внимание, что хотя & # x2028; и & # x2029; определены в [ISO10646], чтобы однозначно отдельные строки и абзацы соответственно, они не составляют разрывы строк в HTML, и эта спецификация не включает их в более общая категория символов пробела.
Эта спецификация не указывает на поведение, рендеринг или в противном случае — пробелов, кроме явно указанных здесь как символы пробела.
Для всех элементов HTML, кроме PRE , любые последовательность символов пробела сразу после начального тега должны игнорироваться пользовательскими агентами, и любая последующая последовательность непрерывные символы пробела следует интерпретировать как межсловные Космос.Таким образом, следующие два примера должны быть визуализированы одинаково:

Томас смотрит телевизор.

Томас смотрит телевизор.

Поскольку (абстрактное) понятие межсловного пространства меняется от сценария (письменный язык) к сценарию, пользовательские агенты должны свернуться последовательности пробелов в зависимости от сценария. За Например, в латинских шрифтах межсловное пространство обычно отображается как пробел ASCII (& # x0020;), в то время как на тайском языке это слово нулевой ширины разделитель (& # x200B;).В японском и китайском нет межсловных пространство обычно вообще отображается.
Элемент PRE используется для предварительно отформатированного текста, где пробелы существенный. Описание элемента PRE ниже.
Обработка пространства текста может и должна выполняться даже в отсутствие языковой информации, указанной атрибутом lang .
9.2 Структурированный текст
9.2.1 Элементы фразы:
EM , СИЛЬНЫЙ , DFN , КОД , SAMP , KBD , VAR , CITE и ABBR
Начальный тег: требуется , Конечный тег: требуется
Атрибуты, определенные в другом месте
id , класс (по всему документу идентификаторы)
lang (информация о языке), dir (направление текста)
title (заголовки элементов)
стиль (встроенная информация о стиле )
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
Элементы Phrase добавляют структурную информацию к фрагментам текста.Обычные значения словосочетаний следующие:
EM:
Обозначает выделение.
СИЛЬНЫЙ:
Обозначает более сильный акцент.
CITE:
Содержит цитату или ссылку на другие источники.
DFN:
Указывает, что это определяющий экземпляр вложенного срок.
КОД:
Обозначает фрагмент компьютерного кода.
SAMP:
Обозначает пример вывода программ, сценариев и т. Д.
КБД:
Обозначает текст, который должен ввести пользователь.
VAR:
Указывает экземпляр переменной или аргумента программы.
ABBR:
Обозначает сокращенную форму (например, WWW, HTTP, URL и т. Д.).
EM и STRONG являются используется для обозначения акцента.Остальные элементы фразы имеют особое значение в технической документации. Эти примеры иллюстрируют рендеринг некоторых элементов текстовой разметки:
Как сказал Гарри С. Трумэн : На этом деньги заканчиваются. Дополнительную информацию можно найти в [ISO-0000] . Пожалуйста, обращайтесь к следующему справочному номеру в будущем переписка: 1-234-55
Представление элементов фразы зависит от пользовательского агента.Как правило, визуальные пользовательские агенты представляют EM текст курсивом и СИЛЬНЫЙ текст жирным шрифтом шрифт. Пользовательские агенты синтезатора речи могут изменять синтез параметры, такие как громкость, высота тона и скорость соответственно.
Элемент ABBR позволяет авторам четко указать сокращенные выражения различного рода. Западный языки широко используют аббревиатуры или «инициалы», такие как «GmbH», «НАТО» и «F.B.I.», а также такие сокращения, как «М.», «Inc.», «et al.»,» и т. д. И в Китае, и в Японии используются аналогичные механизмы сокращения, в которых длинное имя относится к впоследствии с подмножеством символов Хань из оригинала вхождение. Все эти выражения могут быть помечены тегом ABBR , предоставляя полезную информацию пользовательским агентам. и такие инструменты, как проверка орфографии, синтезаторы речи, перевод системы и поисковые индексаторы. Содержимое элемента ABBR указывает само сокращенное выражение, как оно обычно встречается в бегущий текст.Атрибут заголовка на ABBR может использоваться для предоставления полной или развернутой формы выражения.
Вот несколько примеров использования ABBR :
WWW SNCF Д & ntilde; а сокр.
Обратите внимание, что у сокращенных форм часто есть идиосинкразические произношения. Например, в то время как «IRS» и «BBC» обычно произносится буква за буквой, произносятся «НАТО» и «ЮНЕСКО» фонетически. Другие сокращенные формы (например, «URL» и «SQL») произносятся одними людьми и произносятся как слова другими люди. При необходимости авторам следует использовать таблицы стилей, чтобы указать, как произносится конкретная сокращенная форма.
Примечание. В более ранних версиях HTML и более ранних черновиках HTML 4.0 этот элемент назывался ACRONYM.
9.2.2 Котировки:
BLOCKQUOTE и Q элементы
Начальный тег: требуется , Конечный тег: требуется
Определения атрибутов
цитировать = url [CT]
Значением этого атрибута является URL-адрес, обозначающий источник документ или сообщение. Этот атрибут предназначен для предоставления информации об источнике, из которого заимствована цитата.
Атрибуты, определенные в другом месте
id , класс (по всему документу идентификаторы)
lang (информация о языке), dir (направление текста)
title (заголовки элементов)
стиль (встроенная информация о стиле )
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
Эти два элемента обозначают цитируемый текст. BLOCKQUOTE предназначен для длинных цитат (содержимое на уровне блока) и Q предназначен для коротких котировок (inline content), не требующие разрывов абзаца.
В этом примере форматируется отрывок из «Двух башен» Дж. Толкин, как цитата.

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

Визуальные пользовательские агенты обычно отображают BLOCKQUOTE как блок с отступом.
Визуальные пользовательские агенты должны добавлять разделительные кавычки, когда рендеринг Q ; пользователи не должны ставить разделители кавычки внутри элемента Q . Кроме того, пользовательские агенты должны добавлять кавычки в с учетом языка (см. lang атрибут). Многие языки используют разные стили цитаты для внешних и внутренние цитаты, которые должны соблюдаться пользовательскими агентами реализация этого элемента.
Кавычки Мы рекомендуем эту таблицу стилей реализации предоставляют механизм для вставки кавычек до и после цитаты, разделенной BLOCKQUOTE способом, соответствующим текущему языковой контекст и степень вложенности цитат.
Однако, поскольку некоторые авторы использовали BLOCKQUOTE просто как механизм для отступа текста, чтобы сохранить замысел авторов, пользовательские агенты должны не вставлять кавычки в стиле по умолчанию.
Использование BLOCKQUOTE для отступа текст устарел в пользу таблиц стилей.
9.2.3 Нижние и верхние индексы:
SUB и SUP элементы
Начальный тег: требуется , Конечный тег: требуется
Атрибуты, определенные в другом месте
id , класс (по всему документу идентификаторы)
lang (информация о языке), dir (направление текста)
title (заголовки элементов)
стиль (встроенная информация о стиле )
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
Многие скрипты (например.g., французский) требуются надстрочные или подстрочные индексы. для правильного рендеринга. Элементы SUB и SUP следует использовать для разметки текста в эти случаи.
H ₂ O E = mc ² М ^lle Dupont
9.3 Строки и абзацы
Авторы традиционно делят свои мысли и аргументы на последовательности абзацев. Организация информации в абзацы не зависят от того, как они представлены: абзацы с двойным выравниванием содержат те же мысли, что и те, которые выровнены по левому краю.
Разметка HTML для , определяющая абзац: просто: элемент P определяет пункт.
Визуальное представление абзацев не так уж и просто. Число вопросов, как стилистических, так и технических, необходимо решить:
Обработка белого пространства
Разрыв строки и перенос слов
Обоснование
Расстановка переносов
Условные обозначения письменного языка и направленность текста
Форматирование абзацев по отношению к окружающему содержанию
Мы ответим на эти вопросы ниже.Выравнивание абзаца и плавающие объекты обсуждаются позже в этом документе.
9.3.1 Пункты:
P элемент
Начальный тег: требуется , Конечный тег: необязательно
Атрибуты, определенные в другом месте
id , класс (по всему документу идентификаторы)
lang (информация о языке), dir (направление текста)
title (заголовки элементов)
стиль (встроенная информация о стиле )
выровнять (выровнять)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
Элемент P представляет собой абзац.Он не может содержать элементы уровня блока (включая сам P ). Конечный тег может быть опущен, и в этом случае это подразумевается либо следующим начальным тегом уровня блока, либо концом тег элемента, который содержит P элемент, в зависимости от того, что наступит раньше.
Например, следующие два абзаца:
Это первый абзац.

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

Это абзац.

конечный тег включающего блочного элемента (здесь DIV ) подразумевает конечный тег элемента P .
Мы не рекомендуем авторам использовать пустые P элементы.Пользовательские агенты должны игнорировать пустой код P элементы.
9.3.2 Контроль разрывов строк
Спецификация SGML различает начало записи символы и символы конца записи, которые в HTML определены как «перевод строки» (& # x00OA;) и «возврат каретки» (& # x000D;), соответственно.
В Интернете на некоторых платформах используются пары возврата каретки / перевода строки. для представления разрывов строки, некоторые используют только перевод строки, а другие просто возврат каретки. Пользовательские агенты HTML должны интерпретировать каждую каретку пара возврата, перевода строки и возврата каретки / перевода строки как одна строка перемена.В другом месте в этой спецификации термин разрыв строки относится к любому из трех.
Все разрывы строк представляют собой пробелы.
Для получения дополнительной информации о спецификации SGML разрывов строк, пожалуйста, проконсультируйтесь с примечания о линейных тормозах в приложении.
Принудительный разрыв строки:
BR элемент
Начальный тег: требуется , Конечный тег: запрещено
Атрибуты, определенные в другом месте
Элемент BR принудительно ломается (концы) текущая строка текста.
Для визуальных агентов пользователя clear атрибут может использоваться для определения того, следует ли разметка после BR элемент обтекает изображения и другие объекты смещаются к левому или правому краю, или начинается ли он после дна таких предметов. Более подробная информация представлена в раздел по выравниванию и плавучие объекты. Авторам рекомендуется использовать таблицы стилей. для управления потоком текста вокруг плавающих изображений и других объектов.
Что касается двунаправленного форматирования, элемент BR должен обрабатываться пользовательскими агентами в так же, как [ISO10646] символ РАЗДЕЛЕНИЯ СТРОКИ.
Запрет на разрыв строки
Иногда авторы могут захотеть предотвратить перенос строки из происходит между двумя словами. & Nbsp; объект (& # 160; или & # xA0;) действует как пространство, где пользовательские агенты не должны вызывать Разрыв строки.
9.3.3 Расстановка переносов
В HTML есть два типа дефисов: простой дефис и мягкий дефис. Простой дефис должен интерпретироваться пользователем агент как еще один персонаж. Мягкий дефис сообщает пользователю агент, в котором может произойти разрыв строки.
Браузеры, интерпретирующие мягкие дефисы, должны соблюдать следующая семантика: если строка разорвана мягким дефисом, дефис символ должен отображаться в конце первой строки. Если линия не разбивается на дефис, пользовательский агент не должен отображать дефис персонаж. Для таких операций, как поиск и сортировка, программный дефис всегда следует игнорировать.
В HTML простой дефис представлен знаком «-«. (& # 45; или & # x2D;). Мягкий дефис представлен ссылка на объект персонажа & shy; (& # 173; или & # xAD;)
9.3.4 Предварительно отформатированный текст: элемент
PRE
Начальный тег: требуется , Конечный тег: требуется
Определения атрибутов
ширина = число [CN]
Этот атрибут предоставляет визуальным агентам пользователя подсказку о желаемая ширина форматируемого блока. Пользовательский агент может использовать это информацию, чтобы выбрать подходящий размер шрифта или сделать отступ контент соответствующим образом.Желаемая ширина выражается в количестве символы. В настоящее время этот атрибут широко не поддерживается.
Атрибуты, определенные в другом месте
id , класс (по всему документу идентификаторы)
lang (информация о языке), dir (направление текста)
title (заголовки элементов)
стиль (встроенная информация о стиле )
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
Элемент PRE сообщает визуальному пользователю агенты, заключенный в текст «предварительно отформатирован».Визуальные пользовательские агенты должен обрабатывать предварительно отформатированный текст следующим образом:
Они могут оставить пустое пространство нетронутым.
Они могут отображать текст шрифтом с фиксированным шагом.
Они могут отключить автоматический перенос слов.
Они не должны отключать двунаправленную обработку.
Невизуальные пользовательские агенты могут игнорировать интервалы и разрывы строк в содержимом этого элемента.
Обратите внимание, что стандарт SGML требует, чтобы синтаксический анализатор удалил новая строка сразу после начального тега или сразу перед конечным тегом PRE .
Фрагмент DTD выше указывает, какие элементы могут не отображаться. в декларации PRE . Это то же, что и в HTML 3.2, и предназначен для сохранения постоянной строки интервал и выравнивание столбцов для текста, отображаемого с фиксированным шагом шрифт. Авторам не рекомендуется изменять такое поведение с помощью таблицы стилей.
В следующем примере показан отформатированный стих из стихотворения Шелли. Стихотворение Жаворонку :
Все выше и выше Ты спрыгнул с земли Как облако огня; Голубая глубина ты крыла, И пение по-прежнему парит, и парение всегда поет.
Вот тот же стих, который обработал ваш пользовательский агент:
Все выше и выше Ты спрыгнул с земли Как облако огня; Голубая глубина ты крыла, И пение по-прежнему парит, и парение всегда поет.
Символ горизонтальной табуляции
символ горизонтальной табуляции (десятичное число 9 в [ISO10646] и [ISO88591] ) обычно интерпретируется визуальными пользовательскими агентами как наименьший ненулевое количество пробелов, необходимых для выравнивания символов по табуляции остановки через каждые 8 символов.Мы настоятельно не рекомендуем использовать горизонтальные табуляции в предварительно отформатированном тексте, поскольку это обычная практика, когда редактирования, чтобы установить для интервала табуляции другие значения, что приведет к смещению документы.
9.3.5 Визуальное отображение абзацев
Примечание. Следующий раздел является информативное описание поведения некоторого текущего визуального пользователя агенты при форматировании абзацев. Таблицы стилей позволяют лучше контролировать форматирования абзаца.
Визуальное отображение абзацев зависит от пользовательского агента.Абзацы обычно отображаются заподлицо с левым краем и неровным правым. поле. Другие значения по умолчанию подходят для скриптов с написанием справа налево.
Пользовательские агенты HTML традиционно отображали абзацы с пробел до и после, например,
В то же время начала формироваться система нумерации, календарь, иероглифическое письмо и технически продвинутый искусство, которое впоследствии повлияло на другие народы. В рамках этой постепенной эволюции или культурного прогресс доклассический горизонт был разделен на нижний, Средний и Верхний периоды, к которым можно добавить переходный или Протоклассический период с некоторыми особенностями, которые позже различать зарождающиеся цивилизации Мезоамерики.
Это контрастирует со стилем романов, в котором первая строка абзаца и использует обычный межстрочный интервал между последняя строка текущего абзаца и первая строка следующий, например,
В то же время начала формироваться система нумерация, календарь, иероглифическое письмо и технически передовое искусство, которое впоследствии оказало влияние на другие народы. В рамках этой постепенной эволюции или культурного прогресс доклассический горизонт был разделен на нижний, Средний и Верхний периоды, к которым можно добавить переходный или Протоклассический период с некоторыми особенностями, которые позже различать зарождающиеся цивилизации Мезоамерики.
Следуя прецеденту, созданному браузером NCSA Mosaic в 1993 году, пользовательские агенты обычно не оправдывают оба поля, отчасти потому, что трудно сделать это эффективно без сложной расстановки переносов рутины. Появление таблиц стилей и шрифтов со сглаживанием субпиксельное позиционирование обещает предложить более богатый выбор для HTML авторов, чем это было возможно ранее.
Таблицы стилей
обеспечивают полный контроль над размером и стилем шрифт, поля, пробел до и после абзаца, первый отступ строки, выравнивание и многие другие детали.Пользовательский агент Таблица стилей по умолчанию отображает P элементов в знакомой форме, как показано выше. В принципе можно было переопределить это, чтобы отображать абзацы без разрывов, которые условно различать последовательные абзацы. В общем, поскольку это может сбить с толку читателей, мы не приветствуем такую практику.
По соглашению, визуальные пользовательские агенты HTML переносят текстовые строки, чтобы они соответствовали в пределах доступных полей. Алгоритмы упаковки зависят от форматируемый скрипт.
Например, в западных шрифтах текст должен быть перенесен только на белое пространство.Ранние пользовательские агенты неправильно переносили строки в начало (или конец) элементов, в результате которых возникло свисание пунктуация. Например, рассмотрим это предложение:
Статуя Cihuateteus , покровителя ...
Перенос строки в конец тега привязки вызывает запятую. оказаться в начале следующей строки:
Статуя Чихуатетея , кто покровитель ...
Это ошибка, поскольку в этой точке не было пробела. в разметке.
9.4 Маркировка изменений документа: элементы INS и DEL
Начальный тег: требуется , Конечный тег: требуется
Определения атрибутов
цитировать = URL [CT]
Значением этого атрибута является URL-адрес, обозначающий источник документ или сообщение. Этот атрибут предназначен для указания на информация, объясняющая, почему документ был изменен.
дата и время = дата и время [CS]
Значение этого атрибута указывает дату и время, когда изменение было внесено.
Атрибуты, определенные в другом месте
id , класс (по всему документу идентификаторы)
lang (информация о языке), dir (направление текста)
title (заголовки элементов)
стиль (встроенная информация о стиле )
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
INS и DEL являются используется для разметки разделов документа, которые были вставлены или удалены в отношении другой версии документа (например,г., в черновике законодательство, в котором законодателям необходимо ознакомиться с изменениями).
Эти два элемента необычны для HTML тем, что они могут служить либо блочные, либо встроенные элементы (но не оба сразу). Они могут содержать одно или несколько слов в абзаце или содержать одно или несколько элементы блочного уровня, такие как абзацы, списки и таблицы.
Этот пример может быть взят из законопроекта об изменении законодательства. на сколько заместителей может нанять шериф округа от 3 до 5.
Шериф может нанять 3 5 заместителей.

Элементы INS и DEL не должны содержать содержимое уровня блока. когда эти элементы ведут себя как встроенные элементы.
НЕЗАКОННЫЙ ПРИМЕР:
Нижеследующее не считается допустимым HTML.

... содержимое уровня блока ...

Пользовательские агенты должны отображать вставленный и удаленный текст таким образом, чтобы сделайте изменение очевидным. Например, вставленный текст может появиться в специальный шрифт, удаленный текст может вообще не отображаться или отображаться как зачеркнутые или со специальной маркировкой и т. д.
Оба следующих примера соответствуют 5 ноября 1994 г., 8:15:30 по восточному поясному времени США.
1994-11-05T13: 15: 30Z 1994-11-05T08: 15: 30-05: 00
Используется с INS , это дает:
Кроме того, последние данные отдела маркетинга предполагают, что такая практика растет.
Документ «http: // www.foo.org/mydoc/comments.html «будет содержать комментарии о том, почему информация была вставлена в документ.
Авторы также могут комментировать вставленный или удаленный текст средства атрибута title для INS и DEL элементы. Пользовательские агенты могут предоставлять эту информацию пользователю. (например, в виде всплывающей заметки). Например:
Кроме того, последние данные отдела маркетинга предполагают, что такая практика растет.
как добавить лишние пробелы между текстом или словами в html
При создании веб-страниц и программировании в HTML вы могли заметить, что независимо от того, сколько пробелов вы ставите между словами или текстовыми элементами, они сжимаются до одного места при визуализации страницы.
При написании текста или предложений в большинстве программ обработки текста вы сможете нажимать клавишу пробела несколько раз и добавлять несколько пробелов в любом месте.В зависимости от того, какой HTML-редактор вы используете, вы можете сделать это и в редакторе, но как только страница отобразится в веб-браузере, эти пробелы исчезнут.
Это может сбить с толку новых пользователей и начинающих программистов. Вы смотрите на исходный код и видите несколько пробелов, но почему-то на веб-странице их нет. Это связано с тем, как работает спецификация HTML и как запрограммированы механизмы рендеринга. Но еще не все потеряно….
пробелов между словами или символами в текстовых элементах
Чтобы вставить несколько пробелов, вам необходимо знать о расширенном HTML-символе: & nbsp; или неразрывный пробел.Вы можете использовать их, чтобы добавить дополнительное пространство практически в любом месте. Давайте посмотрим на пример:

это & nbsp; & nbsp; а & nbsp; короткое предложение с & nbsp; & nbsp; & nbsp; лишние пробелы между текстом

Приведенный выше пример будет отображаться или отображаться в веб-браузере как:
это короткое предложение с дополнительными пробелами между текстом
Вы можете использовать это между любыми элементами и в любом теге HTML.Здесь мы использовали тег
или абзац, но вы также можете использовать его внутри div или span. Это полезно для добавления горизонтальных пробелов между словами и символами. Если вы думаете о добавлении вертикального промежутка между словами или предложениями, тогда это называется высотой строки, а высоту строки можно настроить совершенно по-разному.
с использованием CSS для добавления интервала между словами
Вышеупомянутый метод использования неразрывного пробела, вероятно, является наиболее гибким подходом, поскольку он дает вам возможность случайным образом вставлять пробелы там, где вы хотите.Это все хорошо, когда вы добавляете только несколько пробелов здесь и там. Но если вы хотите последовательно добавлять дополнительные пробелы между каждым словом во всем текстовом элементе, это может стать довольно громоздким.
Итак, чтобы сделать это с помощью этого метода, вам нужно будет добавить неразрывный пробел между каждым словом в тексте. Другой вариант — использовать свойство CSS для межсловного интервала. Свойство CSS называется word-spacing и может использоваться с любым тегом HTML, отображающим текст.

это пример предложения с очень широким межсловным интервалом между текстом

Приведенный выше код будет отображаться как
это пример предложения с очень широким интервалом между словами
пробелов между абзацами или другими текстовыми элементами на странице
Хотя это плохой способ добиться этого, вы можете добавить неразрывный пробел ( & nbsp; ), чтобы также добавить пробелы между абзацами.Лучше всего это сделать с помощью каскадной таблицы стилей или тега стиля.
Итак, первый способ добавить пробел между двумя абзацами — это добавить новый пустой абзац между ними. Этого можно добиться, используя неразрывные пробелы в тегах p .

первый абзац здесь
& nbsp; & nbsp; второй абзац
Вы можете добавить столько «лишних» абзацев, сколько вам нужно, добавив пробела между абзацами.Немного лучший вариант — использовать тег разрыва строки в HTML, то есть тег
.

первый абзац
второй абзац
Вы можете добавить столько тегов br , сколько хотите добавить вертикальное пространство между текстом или визуальными блоками в HTML. И лучший способ — использовать тег стиля или CSS и настроить поля или отступы элемента. Как это сделать, вероятно, выходит за рамки этой статьи…
Как создать пробел или контролировать расстояние между свободным текстом и полем ввода — HTML и CSS — Форумы SitePoint
Привет,
У вас нет метки с идентификатором заголовка, и даже если вы это сделаете, синий цвет будет отменен в следующем правиле, где вы все равно установите красный цвет.
Присвойте метке класс или уникальный идентификатор и переместите правило после правила красного цвета. Вам нужно убедиться, что элементы имеют большую специфичность, чтобы выигрывать, когда они предшествуют аналогичным правилам. Если элементы имеют одинаковую специфичность, то побеждает последний в таблице стилей.
Документ без названия Запись журнала Заголовок * Примечания * Загрузить
Наконец, не поддавайтесь соблазну тестировать без doctype, поскольку это переводит браузеры в режим причуд, а затем все ставки прекращаются.Действительно, это заставит IE забыть обо всем, чему научился в этом столетии, и будет вести себя так же, как ie5.
Как ставить пробелы между текстом в HTML
Введение
Эта статья покажет вам различные способы вставки пробелов в текст HTML. Поскольку HTML сжимает все символы пробелов в вашем HTML-файле (то есть табуляции, пробелы и т. Д.) До одного символа, вам нужно будет использовать специальные методы для добавления более одного пробела.
Это может расстраивать, поскольку иногда HTML затрудняет обработку пробелов на ваших веб-страницах.В этой статье мы перечислим различные способы избежать этой проблемы и получить больший контроль над пробелами в тексте HTML.
HTML
Тег
HTML
теги используются для указанного предварительно отформатированного текста. Это означает, что ваш HTML-код сообщает браузеру, что текст внутри тега должен отображаться точно так, как написано в HTML-файле, включая любые пробелы или пустые строки.

Вот пример использования тега
:

имя файла.html

Копия

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

Выход

Этот текст сохранил пробелы и разрывы строк
Пробельные символы HTML
Далее мы собираемся рассмотреть несколько из множества пробельных символов Unicode, которые вы можете использовать в HTML (см. Полный список здесь).
Вот список тех, которые мы рассмотрим, каждый из которых дает разную ширину пробелов:
Неразрывное пространство : & nbsp; или & # 160;
Узкое неразрывное пространство : & # 8239;
En Space : & ensp; или & # 8194;
Em Space : & emsp; или & # 8195;
Пространство для трех человек : & emsp13; или & # 8196;
Пространство для 4 человек : & emsp14; или & # 8197;
Пространство из 6 штук : & # 8198;
Пространство фигуры : & numsp; или & # 8199;
Пространство пунктуации : & puncsp; или & # 8200;
Тонкое пространство : & thinsp; или & # 8201;
Место для волос : & hairsp; или & # 8202;
Все, что вам нужно сделать, это скопировать и вставить символы кода в ваш HTML, чтобы добавить пробел.
Методы CSS
Использование CSS даст вам наиболее последовательные результаты при работе с пробелами в тексте.
Таким образом, это предлагаемый нами метод.
Двумя ключевыми способами являются использование пустого диапазона заданной ширины и установка поля справа и слева от блоков текста.
Мы рассмотрим оба метода ниже.
Пустой пролет с указанной шириной
В этом методе мы добавим пустой div в середину предложения и зададим ему ширину 15 пикселей .Это добавит пробелы такой длины внутри предложения. Посмотрите это ниже.
Пример HTML:
HTML
Копия

Это пример предложения .

И имеет следующий вывод:
Выход
Это пример предложения.
Установка маржи на промежутке
Этот метод аналогичен предыдущему, но мы будем использовать свойства margin-left и margin-right внутри ширины .
No related posts.

Тег	Когда можно не писать
`<html>`	Если перед ним не идет `<!-- комментарий -->`
`<head>`	Если перед ним не идет `<!-- комментарий -->`
`<body>`	Если `body` начинается не с `<!-- комментария -->`, пробела, либо одного из тегов, который может быть и в `head`
`<tbody>`	Перед `<tr>`, если перед ним нет незакрытого `thead`, `tfoot` или другого `tbody`
`<colgroup>`	Перед `<col>`, если перед ним нет незакрытого другого `colgroup`

Тег	Когда можно не писать
`</html>`	Если после него не идет `<!-- комментарий -->`
`</head>`	Если после него не идет `<!-- комментарий -->` или пробел
`</body>`	Если после него не идет `<!-- комментарий -->`
`</li>`	Перед `<li>` или `</ul>`/`</ol>`
`</dt>`	Перед `<dt>` или `<dd>`
`</dd>`	Перед `<dt>`, `<dd>` или концом родителя
`</p>`	Перед открывающим тегом любого не-фразового потокового («блочного» по-старому:) элемента, либо закрывающим тегом родительского элемента (если у того не прозрачная модель контента)
`</rt>` и `</rp>`	Перед `<rt>`, `<rp>` или `</ruby>`
`</optgroup>`	Перед `<optgroup>` или `</select>`
`</option>`	Перед `<option>`, `<optgroup>`, `</optgroup>` или `</select>`
`</colgroup>`	Если после него не идет `<!-- комментарий -->` или пробел
`</caption>`	Если после него не идет `<!-- комментарий -->` или пробел
`</thead>`	Перед `<tbody>` или `<tfoot>`
`</tbody>`	Перед другим `<tbody>`, `<tfoot>` или `</table>`
`</tfoot>`	Перед `</table>`
`</tr>`	Перед `<tr>` или концом родителя
`</td>` и `</th>`	Перед `<td>`, `<th>` или концом родителя

Атрибут	Значение	Пояснение
vspace = «»	пикселей	вертикальное белое пространство (верхняя и нижняя стороны)
hspace = «»	пикселей	горизонтальное белое пространство (левая и правая стороны)