В чем разница между содержанием фраз и потоком?

Я новичок в HTML и CSS, и мне хотелось бы узнать разницу между потоковым содержимым и содержанием фраз. Помимо официальной документации W3 документация MDN полезна и заявляет:

Содержимое потока определяется следующим образом:

Элементы, принадлежащие к категории содержимого потока, обычно содержат текст или встроенный контент.

Содержание фразы определяется следующим образом:

Содержание фразы определяет текст и содержащуюся в нем надпись. Запуск фразирование содержимого составляют абзацы.

Однако документация дает очень небольшую разницу между этими двумя, может ли кто-нибудь уточнить, какие основные различия между фразированным контентом и потоковым содержимым?

Ответ 1

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

Текст может быть внутри предложения, поэтому он выражается.

Знак подчеркнутый бит может быть внутри предложения, поэтому он формулирует.

Изображение может быть внутри предложения, поэтому оно выражается.

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

A ссылка может быть внутри предложения, поэтому он формулирует. Но с HTML 5 также разрешено иметь ссылку, содержащую целые блоки текста, и в этом случае она не выражается.

Содержание фразы делится на три категории:

Содержимое, которое заменяется чем-то визуально. (Например, как <img> заменяется изображением.
Содержимое, содержащее текст в рамках прогона.
Содержимое, предоставляющее метаданные о конкретном фрагменте текста в рамках прогона. (Например, <link> при использовании с itemprop, а не <link> в <head>, который определяет взаимосвязь между документом в целом и связанным с ним ресурсом).

Содержимое потока включает в себя содержимое фразы, но также такие элементы, как <p> и <h1 > , которые определяют весь пробег текста <article>, который содержит один или несколько прогонов и <table>, который содержит строки ячеек, которые содержат прогоны текста.

В продвинутом CSS очень важно знать разные типы контента, а не просто его определение, или просто список элементов, которые попадают под определенный тип контента, но также "Почему" определен элемент определенную категорию и каково основное различие между аналогичными категориями контента, в случае моего вопроса, какая разница между "Поэтапным контентом" и "Потоком".

Я не совсем согласен.

Это абсолютно необходимо для базового HTML, чтобы это знать. Это первое, что нужно преподавать в HTML после написания <html><head><title>Hello</title></head><body><p>Hello World!</p></body></html> в текстовом редакторе и открытия его в браузере, и "в HTML есть несколько разных элементов". Это может не стать полностью ясным, пока вы не изучили элементы, которые являются примерами каждого из них, но получение одной головы вокруг важно, поскольку многие вещи просто не имеют смысла в противном случае, и это делает разницу между простым языком разметки с легко запоминающиеся элементы и атрибуты и беспорядочный суп из тегов, где вы никогда не помните, почему валидаторы говорят, что вы делаете это неправильно.

Теперь, конечно, ваш CSS будет, как правило, следовать из вашей семантики, и по умолчанию также следуют из них (наиболее видимым фразированным контентом является либо замененный элемент, либо display: inline;, большинство других потоков содержимого - это display: block; или что-то еще что совершенно очевидно относится к семантике (например, tr: {display: table-row;}).

Но поскольку HTML - это то, о чем вы думаете в первую очередь о семантике, при написании CSS вы можете больше сосредоточиться только на рендеринге и в какой-то степени освободить себя от этой проблемы. Разумеется, правильная семантика не должна, как правило, ограничивать CSS за пределами простого факта, что вам, очевидно, нужен визуальный дизайн, который помогает вашему сообщению пройти.

Так, например, только потому, что <p> определяется как "абзац", а в наших пунктах культуры сегодня обычно набираются как блоки текста с вертикальным разрывом между ними или отступом в первой строке, не означает мы должны следовать этому правилу. Мы можем расставить наши абзацы в стиле позднего медитации, например здесь с параграфами, сгруппированными друг с другом, разделенными стрелками.

Не то, чтобы вы, скорее всего, захотели это сделать, но, безусловно, можете. Таким образом, хотя хороший CSS действительно основывается на семантике элементов, он также освобождает нас от них тем, что нам не нужно иметь неправильную семантику, чтобы что-то выглядело (или звучало) так, как мы хотим.

Ответ 2

Я думаю, что это можно считать основным моментом в формулировании содержания:

Содержание фразы - это текст документа, а также элементы, которые выделяют текст на уровне абзаца. Запускает фразы содержания.

(Выделите меня.)

Содержание фразирования - это, в основном, то, что вы (могли/хотели) вставлять в абзацы. Для более длинных частей текстового содержимого внутри вашей страницы большинство из них обычно должно быть организовано в параграфы. Пункты - это самый базовый уровень структурирования текстового контента, как и в традиционном письменном тексте в книге или подобном.

Содержимое потока является более широкой категорией. Как вы можете видеть на диаграмме Венна на странице MDN, она содержит все другие категории контента (за исключением метаданных, с отображается как частично вне его - что имеет смысл, поскольку много метаданных переходит в элемент head.)

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

Вы видите, что список элементов для потока контента и список элементов для фразирования контента перекрываются в больших частях - fe оба содержат такие элементы, как a, img, input, label, span и т.д. Все эти элементы, которые вы можете поместить в абзац p по уважительной причине, но они могут также быть дочерними body напрямую или вложенными в другие элементы, такие как a ссылки внутри (un-) упорядоченного списка с целью разметки списка навигации, img, который является логотипом сайта (а потому часть абзаца) и т.д. Таким образом, многие вещи могут быть как внутри абзацев, так и вне их - в зависимости от конкретного значения части контента, которую они отмечают.

Элементы, которые не охватывают содержание фразы, но являются частью содержимого потока, - это те, которые не допускаются внутри абзаца - сам p, разные уровни заголовков, section, article, aside, div, form, footer, fieldset, table и т.д. Вы также можете назвать их основными структурными элементами верхнего уровня.

Если вы знакомы со "старой" HTML 4.01 классификацией встроенных и блочных элементов, то это не должно представлять слишком больших проблем. Большая часть того, что была категоризирована в строке, была разрешена в параграфах, в то время как в абзаце не допускалось никакого другого элемента блока. (Конечно, HTML 5 добавил некоторые новые элементы, для чего там, где не является частью встроенного или блока раньше.)

Я использовал абзацы, чтобы в основном указать здесь, но то же самое верно и для элементов заголовка. Им также разрешалось содержать встроенные элементы в HTML 4.01, и теперь их модель контента также содержит текст. Ввод div, footer, table или абзаца внутри заголовка просто не имеет смысла; добавление ссылки или изображения там, однако, может иметь смысл во многих случаях легко.

И, конечно же, этот тип "истощает". Для элемента, такого как em (случайный пример), модель контента также является фразированным контентом. Не имеет смысла в противном случае - для элемента em внутри абзаца, внезапно позволяющего элементам, которые сам абзац не может содержать, не было бы вообще разумным.

(Элемент a получил некоторое специальное обращение в HTML 5. Хотя ранее ему разрешалось содержать встроенные элементы, теперь он может содержать как фразвое содержимое, так и содержимое потока - fe с a содержит div или абзац разрешен. Это зависит от контекста, конечно, если сам a является предком элемента, который позволяет только фразировать контент, тогда он сам может содержать только фразинг-контент. Это изменение было сделано из-за спроса со стороны разработчиков на вы можете использовать более крупные разделы структурированного контента для ссылки где-нибудь еще - fe, вы можете захотеть, чтобы ссылка содержала заголовок плюс дополнительный текст [paragraph] внутри него. Перед HTML 5 людям приходилось "подделывать" это, используя встроенные элементы внутри ссылку и форматирование их через CSS, чтобы они выглядели как заголовок и абзац.)

Итак, хотя HTML 5 разбил две основные категории блоков и встроенных строк на несколько категорий, поток и фразирование контента являются двумя наиболее важными из тех, которые все еще, я думаю, и можно назвать "преемниками" блок и строка в некоторой степени.

И когда сомневаешься, всегда есть спецификация, чтобы искать вещи; и validator расскажет вам, если вы вложенные элементы способом, который не разрешен. Я рекомендую вам всегда проверять свои страницы с помощью этого инструмента - и со временем все это будет само собой разумеющимся.

Ответ 3

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

Содержание фразы определяет текст и содержащую их разметку, а также подкатегорию потока-содержимого, но есть и другие подгруппы как headers и sections....

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

Ответ 4

СОДЕРЖАНИЕ PHRASING

Содержание фразы состоит из текстового содержимого, встроенных элементов контента и элементов фраз, возможно, вкрапленных комментариями HTML и/или пробелом.

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

Содержимое потока

Содержимое потока в HTML состоит из элементов потока, содержимого фразы и текстового содержимого, возможно, вкрапленных комментариями HTML и/или пробелом.

Содержимое потока Элементы ограничены для использования только там, где разрешено содержимое потока Эти HTML-элементы могут использоваться только в HTML-коде, где разрешено содержимое потока, с некоторыми дополнительными ограничениями в конкретных случаях. Кроме того, текстовые и HTML-элементы, классифицированные как фразинг-контент, также могут использоваться там, где ожидается содержимое потока.