в чем отличие тегов div и span
Разница между
— элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь разные размеры, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.
Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как
Чтобы увидеть как работают элементы
Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.
Посмотрим на это в браузере.
Похоже на один большой прямоугольник. Как насчёт отделить теги
Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый
Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.
В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:
Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле
может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.
Позвольте мне поделиться с вами некоторыми примерами элементов, которые можно классифицировать в соответствии с одной из этих трёх групп.
Браузер отобразит в одну линию:
Однако можно изменить это поведение, добавив одну строку в CSS:
Для этого примера мы используем
Вообще, хорошей идеей будет не злоупотреблять тегом
С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.
Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги
Ещё раз, давайте сравним новый (справа) и старый код (слева).
А теперь посмотрим, как новый код отображается в браузере!
В чем разница между HTML тегами
Я хотел бы попросить несколько простых примеров, показывающих использование
13 ответов
Я заметил, что большинство людей используют слова HTML тегов и HTML элементов взаимозаменяемо. Но в чем разница между ними? Я вижу это так: теги находятся в исходном коде, а элементы обрабатываются тегами (браузером) в DOM. Я ошибаюсь?
Это означает, что для их семантического использования divs следует использовать для обертывания разделов документа, а spans-для обертывания небольших частей текста, изображений и т. д.
Например:
Обратите внимание, что размещение элемента уровня блока внутри встроенного элемента незаконно, поэтому:
EDIT: начиная с HTML5, некоторые блочные элементы могут быть помещены внутри некоторых встроенных элементов. См. ссылку MDN здесь для довольно четкого списка. Выше по-прежнему запрещены, как принимает только формулировка содержания, и
Вы просили привести несколько конкретных примеров, так что один из них взят с моего сайта боулинга, BowlSK :
Ладно, что происходит?
Также обратите внимание, что HTML5 включает в себя широкий новый набор элементов, определяющих общие структуры страниц, такие как статья, раздел, навигация и т. д.
Просто для полноты картины я предлагаю вам подумать об этом так:
Здесь уже есть хорошие, подробные ответы, но нет визуальных примеров, так что вот краткая иллюстрация:
Как отмечают другие, есть некоторая семантика, подразумеваемая с каждым из них, наиболее существенно то, что a
Действительно важное различие уже упомянуто в ответе Криса. Однако последствия не будут очевидны для всех.
Как встроенный элемент, может содержать только другие встроенные элементы. Поэтому следующий код неверен:
Приведенный выше код недействителен. Чтобы обернуть элементы уровня блока, необходимо использовать другой элемент уровня блока (например,
Более того, эти правила зафиксированы в (X) HTML и не изменяются при наличии CSS правил! Так что следующие коды тоже неверны!
Значение «block element» подразумевается, но никогда не указывается явно. Если мы проигнорируем всю теорию (теория хороша), то следующее будет прагматичным сравнением. Следующий:
Это показывает, что div не только не должен использоваться встроенным, но и просто не будет производить желаемого эффекта.
Как упоминалось в других ответах, по умолчанию div будет отображаться как блочный элемент, в то время как span будет отображаться встроенным в его контекст. Но ни то, ни другое не имеет никакого семантического значения; они существуют, чтобы позволить вам применить стиль и идентичность к любому данному биту контента. Используя стили, вы можете заставить div действовать как span и наоборот.
Одним из полезных стилей для div является inline-block
Я использовал inline-block с большим успехом в игровых веб-проектах.
Я бы сказал, что если вы немного знаете испанский, то посмотрите на эту страницу, где все правильно объяснено.
Просто хотел добавить немного исторического контекста к тому, как появились span против div
3 июля 1995 года Benjamin C. W. Sittler предлагает общий тег текстового контейнера для применения стилей к определенным блокам текста. Рендеринг нейтрален, за исключением случаев, когда он используется в сочетании с таблицей стилей. Вокруг него идут споры о читабельности, смысле. Берт Бос упоминает о природе расширяемости элемента через атрибут класса (с такими значениями, как город, лицо, дата и т. д.). пол Прескод обеспокоен тем, что оба элемента будут злоупотреблять. Он против того, чтобы текст упомянул это «any new element should be on an old one» и добавил: «Если мы создадим тег без семантики, он может быть использован в любом месте, никогда не ошибаясь. Мы должны заставить авторов правильно пометить семантику своего документа. Мы должны заставить поставщиков редакторов сделать этот выбор явным в своих интерфейсах.»
Из проекта RFC, который вводит span :
Во-первых, общий обман- тейнер необходим для переноса атрибутов LANG и BIDI в тех случаях, когда никакой другой элемент не подходит; для этой цели вводится элемент SPAN.
Элементы DIV могут быть использованы для структурирования документов HTML в виде иерархии подразделений.
CENTER был представлен компанией Netscape до того, как они добавили поддержку HTML 3.0 DIV элемент. Он сохраняется в HTML 3.2 из-за его широкого распространения deployment.
Короче говоря, оба элемента возникли из потребности в более семантически-общем контейнере. Span был предложен в качестве более общей замены элемента
для стилизации текста. Div был предложен как общий способ разделения страниц и имел дополнительное преимущество в замене тега для выравнивания содержимого по центру. Div всегда был блочным элементом из-за его истории как разделителя страниц. Span всегда был встроенным элементом, потому что его первоначальным назначением был стиль текста, и сегодня div и span стали универсальными элементами со свойствами блока по умолчанию и встроенного отображения соответственно.
В HTML есть теги, которые добавляют структуру или семантику к содержимому. Например, тег
используется для идентификации абзаца. Другой пример-тег
- для упорядоченного списка.
Когда в HTML нет подходящего тега, как показано выше, обычно прибегают к тегам
Примерами того, где можно использовать теги div, являются верхние и нижние колонтитулы, навигация и т. д. Однако в HTML 5 Эти теги уже были предоставлены.
Тег используется для идентификации встроенного раздела/подразделения документа.
Например, тег span можно использовать для добавления встроенных пиктограмм к элементу.
Их можно настроить только с помощью CSS.
А теперь перейдем к вашему вопросу:
Тег SPAN вместе с некоторым стилем будет полезен при удержании внутри строки, скажем, в абзаце, в html. Это своего рода уровень строки или уровень оператора в HTML.
Функциональность тега DIV, как уже было сказано, может быть видна только при поддержке стиля, может содержать большие куски кода HTML.
У обоих есть свое время и случай, когда их можно использовать, исходя из ваших требований.
Надеюсь, с ответом все ясно. Спасибо.
Похожие вопросы:
Возможный Дубликат : В чем разница между HTML тегами DIV и SPAN? Я хотел бы знать разницу между использованием и
Я заметил, что большинство людей используют слова HTML тегов и HTML элементов взаимозаменяемо. Но в чем разница между ними? Я вижу это так: теги находятся в исходном коде, а элементы обрабатываются.
В чем разница между
Возможный Дубликат : В чем разница между HTML тегами DIV и SPAN? Я знаю, что при кодировании HTML я должен иметь в виду семантику, например, h1 должен быть основным заголовком, h2 должен быть.
Возможный Дубликат : В чем разница между HTML тегами DIV и SPAN? Разница между div и span Многие люди задают мне один и тот же вопрос, и я не знаю ответа. Не могли бы вы сказать мне, в чем разница.
В чем разница между HTML тегами
Я хотел бы попросить несколько простых примеров, показывающих использование
13 ответов
Это означает, что для их семантического использования divs следует использовать для обертывания разделов документа, а spans-для обертывания небольших частей текста, изображений и т. д.
Например:
Обратите внимание, что размещение элемента уровня блока внутри встроенного элемента незаконно, поэтому:
EDIT: начиная с HTML5, некоторые блочные элементы могут быть помещены внутри некоторых встроенных элементов. См. ссылку MDN здесь для довольно четкого списка. Выше по-прежнему запрещены, как принимает только формулировка содержания, и
Вы просили привести несколько конкретных примеров, так что один из них взят с моего сайта боулинга, BowlSK :
Ладно, что происходит?
Также обратите внимание, что HTML5 включает в себя широкий новый набор элементов, определяющих общие структуры страниц, такие как статья, раздел, навигация и т. д.
Просто для полноты картины я предлагаю вам подумать об этом так:
Здесь уже есть хорошие, подробные ответы, но нет визуальных примеров, поэтому вот краткая иллюстрация:
Как отмечают другие, есть некоторая семантика, подразумеваемая с каждым из них, наиболее существенно то, что a
Действительно важное различие уже упомянуто в ответе Криса. Однако последствия не будут очевидны для всех.
Как встроенный элемент, может содержать только другие встроенные элементы. Поэтому следующий код неверен:
Приведенный выше код недействителен. Чтобы обернуть элементы уровня блока, необходимо использовать другой элемент уровня блока (например,
Более того, эти правила зафиксированы в (X) HTML и не изменяются при наличии CSS правил! Так что следующие коды тоже неверны!
Значение «block element» подразумевается, но никогда не указывается явно. Если мы проигнорируем всю теорию (теория хороша), то следующее будет прагматичным сравнением. Следующий:
Это показывает, что не только не следует использовать div встраиваемый, он просто не будет производить желаемого эффекта.
Как упоминалось в других ответах, по умолчанию div будет отображаться как блочный элемент, в то время как span будет отображаться встроенным в его контекст. Но ни то, ни другое не имеет никакого семантического значения; они существуют, чтобы позволить вам применить стиль и идентичность к любому данному биту контента. Используя стили, вы можете заставить div действовать как span и наоборот.
Одним из полезных стилей для div является inline-block
Я использовал inline-block с большим успехом в игровых веб-проектах.
Я бы сказал, что если вы немного знаете испанский, то посмотрите на эту страницу, где все правильно объяснено.
Div-это блочный элемент, а span-встроенный элемент, и его ширина зависит от его содержимого, где div не
Просто хотел добавить некоторый исторический контекст к тому, как появились span против div
3 июля 1995 года Бенджамин C. W. Ситтлер предлагает общий тег текстового контейнера для применения стилей к определенным блокам текста. Рендеринг нейтрален, за исключением случаев, когда он используется в сочетании с таблицей стилей. Существует дискуссия по поводу читабельности, смысла. Берт Бос упоминает о природе расширяемости элемента через атрибут класса (со значениями, такими как город, человек, дата и т. Д.). Пол Прескод обеспокоен тем, что оба элемента будут злоупотреблять. Он против того, чтобы в тексте упоминалось, что «any new element should be on an old one» и добавлялось: «Если мы создадим тег без семантики, он может использоваться где угодно, никогда не ошибаясь. Мы должны заставить авторов правильно пометить семантику своего документа. Мы должны заставить поставщиков редакторов сделать этот выбор явным в своих интерфейсах.»
Из проекта RFC, который вводит span :
Во-первых, общая афера- tainer необходим для переноса атрибутов LANG и BIDI в тех случаях, когда никакой другой элемент не подходит; для этой цели вводится элемент SPAN.
элементы DIV можно использовать для структурирования документов HTML в виде иерархии подразделений.
CENTER был представлен Netscape до того, как они добавили поддержку HTML 3.0 DIV элемент. Он сохраняется в HTML 3.2 из-за его широкого распространения deployment.
В двух словах, оба элемента возникли из-за необходимости более семантически общего контейнера. Span был предложен в качестве более общей замены элемента
для стилизации текста. Div был предложен в качестве общего способа разделения страниц и имел дополнительное преимущество в замене тега для выравнивания по центру контента. Div всегда был элементом блока из-за его истории как разделителя страниц. Span всегда был встроенным элементом, потому что его первоначальным назначением был стиль текста, и сегодня div и span стали универсальными элементами со свойствами блочного и встроенного отображения по умолчанию соответственно.
В HTML есть теги, которые добавляют структуру или семантику к контенту. Например, тег
используется для идентификации абзаца. Другим примером является тег
- для упорядоченного списка.
Когда в HTML нет подходящего тега, как показано выше, обычно используются теги
Примерами того, где могут использоваться теги div, являются верхние и нижние колонтитулы, навигация и т. Д. Однако в HTML 5 эти теги уже были предоставлены.
Тег используется для идентификации встроенного раздела/подразделения документа.
Например, тег span можно использовать для добавления встроенных пиктограмм к элементу.
Их можно настроить только с помощью CSS.
Теперь, что касается вашего вопроса:
тег SPAN вместе с некоторым стилем будет полезен при удержании внутри строки, скажем, в абзаце, в html. Это своего рода уровень строки или уровень оператора в HTML.
функциональность тега DIV, как уже было сказано, может быть видна только при поддержке стиля, может содержать большие куски кода HTML.
У обоих есть свое время и случай, когда их следует использовать, в зависимости от ваших требований.
Надеюсь, мне ясен ответ. Спасибо.
Похожие вопросы:
Возможный Дубликат : В чем разница между HTML тегами DIV и SPAN? Я хотел бы знать разницу между использованием и
Возможный Дубликат : В чем разница между HTML тегами DIV и SPAN? Я знаю, что при кодировании HTML я должен иметь в виду семантику, например, h1 должен быть основным заголовком, h2 должен быть.
Я заметил, что большинство людей используют слова HTML тегов и HTML элементов взаимозаменяемо. Но в чем разница между ними? Я вижу это так: теги находятся в исходном коде, а элементы обрабатываются.
Возможный Дубликат : В чем разница между HTML тегами DIV и SPAN? Разница между div и span Многие люди задают мне один и тот же вопрос, и я не знаю ответа. Не могли бы вы сказать мне, в чем разница.
В чем разница между
div, span и display — Основы HTML, CSS и веб-дизайна
В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.
display
Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.
Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.
Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset — наборы CSS-стилей, которые «сбрасывают» браузерные стили.
div & span
Элемент p имеет семантическое значение. Он определяет абзац текста.
Такой элемент не стоит использовать там, где это по смыслу не имеет значения. Например, не стоит помещать в p меню с кнопками для навигации по сайту.
Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.
Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.
div обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.
Блочная модель
Каждый элемент на странице — прямоугольник. Это, пожалуй, самое важное утверждение в вёрстке веб-страниц. В примере в начале этого урока это можно заметить: мы задали параграфам фоновый цвет, и стало видно: каждый параграф — это прямоугольник.
У каждого прямоугольника есть несколько свойств, влияющих на размер:
Давайте сделаем элемент, в котором явно видно все эти части:
See the Pen Div Box by Hexlet (@hexlet) on CodePen.
Сколько же места требуется всему элементу? Нужно сложить показатели:
Границы и отступы можно задать свои для каждой из сторон:
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
В чем разница между тегами HTML
Я хотел бы попросить несколько простых примеров, показывающих использование
Например:
Обратите внимание, что нельзя размещать элемент уровня блока внутри встроенного элемента, поэтому:
РЕДАКТИРОВАТЬ: Начиная с HTML5, некоторые элементы блока могут быть размещены внутри некоторых встроенных элементов. Смотрите ссылку на MDN здесь для довольно четкого списка. Вышеупомянутое все еще незаконно, так как принимает только контент фраз и
Вы попросили несколько конкретных примеров, так что это взято с моего сайта по боулингу, BowlSK :
Хорошо, что происходит?
Также обратите внимание, что HTML5 включает в себя широкий новый набор элементов, которые определяют общие структуры страниц, такие как article, section, nav и т. Д.
Просто для полноты, я предлагаю вам подумать об этом так:
Здесь уже есть хорошие, подробные ответы, но нет наглядных примеров, так что вот небольшая иллюстрация:
Если вы хотите что-то сделать с некоторым встроенным текстом, это путь, так как он не будет вводить разрывы строк, как это
Как отмечали другие, есть некоторая семантика, подразумеваемая каждым из них, наиболее значительным является тот факт, что
Действительно важное различие уже упоминалось в ответе Криса. Тем не менее, последствия не будут очевидны для всех.
Как встроенный элемент, может содержать только другие встроенные элементы. Поэтому следующий код неверен:
Код выше недействителен. Чтобы обернуть элементы уровня блока, необходимо использовать другой элемент уровня блока (например,
Кроме того, эти правила зафиксированы в (X) HTML, и они не изменяются при наличии правил CSS! Так что следующие коды тоже неверны!
Значение «блочного элемента» подразумевается, но никогда не указывается явно. Если мы игнорируем всю теорию (теория хороша), то следующее сравнение является прагматическим. Последующий:
Это показывает, что не только если div не используется inline, он просто не даст желаемого эффекта.
Как уже упоминалось в других ответах, по умолчанию div будет отображаться как элемент блока, в то время как span будет отображаться встроенным в его контексте. Но ни то, ни другое не имеет семантической ценности; они существуют, чтобы позволить вам применять стилизацию и идентификацию к любому конкретному фрагменту контента. Используя стили, вы можете сделать что-то div вроде span и наоборот.
Одним из полезных стилей для div IS inline-block
Я привык inline-block к большому успеху в игровых веб-проектах.
Div является блочным элементом, а span является встроенным элементом, и его ширина зависит от содержимого самого себя, где div не
Просто хотел добавить некоторый исторический контекст к тому, как произошло span против div
3 июля 1995 года Бенджамин С.В. Ситтлер предлагает общий текстовый контейнер. тег для применения стилей к определенным блокам текста. Рендеринг нейтрален, за исключением случаев, когда он используется в сочетании с таблицей стилей. Существует спор вокруг о читаемости, смысл. Берт Бос упоминает природу атрибута элемента через атрибут класса (со значениями, такими как город, человек, дата и т. Д.). Пол Прескод обеспокоен тем, что оба элемента будут злоупотреблены. Он выступает против текста, в котором упоминается, что «любой новый элемент должен быть на старом», и добавляется «Если мы создаем тег без семантики, его можно использовать везде, где бы он ни был, не ошибаясь». Мы должны заставить авторов правильно пометить семантику своего документа. Мы должны заставить поставщиков редакторов сделать этот выбор явным в своих интерфейсах ».
Из проекта RFC, который представляет span :
Во-первых, универсальный контейнер необходим для переноса атрибутов LANG и BIDI в тех случаях, когда другой элемент не подходит; элемент SPAN вводится для этой цели.
Элементы DIV можно использовать для структурирования документов HTML в виде иерархии подразделений.
CENTER был представлен Netscape до того, как была добавлена поддержка элемента HTML 3.0 DIV. Он сохраняется в HTML 3.2 из-за его широкого распространения.
Короче говоря, оба элемента возникли из-за необходимости в более семантически обобщенном контейнере. Span был предложен в качестве более общей замены
элемента стиля текста. Div был предложен в качестве общего способа разделения страниц и имел дополнительное преимущество замены тега для выравнивания по центру контента. Div всегда был блочным элементом из-за его истории как разделителя страниц. Span всегда был встроенным элементом, поскольку его первоначальная цель заключалась в стилизации текста, и сегодня div и span стали общими элементами со свойствами по умолчанию для блоков и встроенного отображения соответственно.