Divs а также пролеты не взаимозаменяемы при создании веб-страниц. Каждый из них служит разным целям, и знание того, когда использовать каждый, поможет вам разрабатывать чистые и простые в управлении веб-сайты.
Использование элемента Div
Divs определите логические подразделения на своей веб-странице. А div- сокращение для разделения - это, по сути, ящик, в который вы можете поместить другие HTML-элементы которые принадлежат друг другу. В подразделении может быть несколько других элементов, таких как абзацы, заголовки, списки, ссылки, изображения и т. Д. Внутри него могут быть даже другие подразделения, обеспечивающие дополнительную структуру и организацию.
Чтобы использовать div элемент, поместите открытый тег перед областью вашей страницы, которую вы хотите сделать отдельным разделом, и закрывающий
содержимое div
Если вы будете стилизовать эту область с помощью CSS, вы можете добавить Я БЫ селектор на открывающий тег div:
Или вы можете добавить селектор класса:
Затем вы можете работать с этими элементами в CSS или JavaScript.
Текущие лучшие практики склоняются к использованию селекторов классов вместо идентификаторов, отчасти из-за того, насколько специфичны селекторы идентификаторов. Однако любой из них приемлем, и вы даже можете дать div как идентификатор, так и селектор класса.
Дивизии или разделы?
В div элемент отличается от HTML5раздел элемент, потому что он не придает вложенному содержимому никакого смыслового значения. Если вы не уверены, должен ли блок контента быть div или раздел, подумайте о назначении элемента и его содержании.
- Если вам нужен элемент просто для добавления стилей в эту область страницы, вы должны использовать div элемент.
- Если контент имеет четкую направленность и может стоять сам по себе, подумайте об использовании раздел элемент вместо этого.
В конечном итоге оба дивы а также разделы ведут себя аналогичным образом, и вы можете присвоить любому из них атрибуты и стилизовать их с помощью CSS. Оба являются элементами блочного уровня.
Использование промежутков
Охватывать по умолчанию является встроенным элементом, в отличие от div а также раздел элементы. В охватывать Элемент обычно используется для обертывания определенного фрагмента контента, такого как текст, чтобы дать ему дополнительный крючок, который вы можете использовать для добавления стилей. Однако без каких-либо атрибутов стиля охватывать вообще не влияет на текст.
Еще одно различие между охватывать а также div элементов заключается в том, что div элемент включает разрыв абзаца, тогда как охватывать элемент только сообщает браузеру применить связанные правила стиля CSS к тому, что заключено теги:
Выделенный текст и невыделенный текст.
Вы могли бы добавить.
class = "выделить"
или аналогичный охватывать элемент для стилизации текста с помощью CSS.
Элемент span не имеет обязательных атрибутов, но три наиболее полезных - те же самые, что и у элемента div элемент:
- стиль
- класс
- Я БЫ
Использовать охватывать если вы хотите изменить стиль содержимого, не определяя его как новый блочный элемент в документе.
Например, если вы хотите, чтобы второе слово h3 заголовок должен быть красным, вы можете окружить это слово охватывать элемент, который будет стилизовать это слово как красный текст. Слово до сих пор остается частью h3 элемент, но будет отображаться красным.