Что такое div в html: Учебник HTML — Тег

Содержание

10 альтернатив использованию div | Techrocks

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться ×

Поднимите руку те, чей обычный HTML-макет выглядит так:

<body>
	<div>
		<div>
			<ul>
				<li><a href="/">Home</a></li>
				<li><a href="/">About</a></li>
				<li><a href="/">Contact</a></li>
			</ul>
		</div>
	</div>
	<div>
		<div>This is the introduction to the site, which is full of divs.</div>
	</div>
	<div></div>
</body>

Многие из нас по умолчанию используют элемент <div>, потому что это самый быстрый способ построить HTML-каркас. Слишком силен соблазн по-быстрому разобраться с разметкой и приступить к самому интересному: CSS или JavaScript.

Но хотя создание всего макета на сплошных <div> кажется простым решением, оно может создать проблемы в дальнейшем.

Проблемы, связанные со злоупотреблением div

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

Но когда <div> используется для создания практически всех блоков на странице, это неизбежно породит проблемы и для вас самого, и для коллег, которые могут присоединиться к проекту.

Читаемость

Если вам случалось читать чужой код (или даже свой — через несколько месяцев после написания), вы знаете, насколько трудно бывает в нем разобраться, если он наводнен сплошными <div>.

Расшифровка такого макета может занять больше времени, чем следовало бы, а это убивает продуктивность. Ведь даже найти закрывающий </div> для отдельного блока бывает непросто.

Доступность

Чтобы сайт был доступным, нужно обращать внимание не только на цвета, контраст и подписи. Согласно данным Всемирной организации здравоохранения, проблемы со зрением имеют 285 миллионов людей: 29 миллионов слепы, а еще 246 миллионов плохо видят.

И это еще одна причина писать HTML так, чтобы он был как можно более доступным. А это означает, что код должен быть семантическим.

Скринридерам, чтобы точно прочитать веб-страницу, нужен контекст. Названия элементов <div> и <span> ничего не говорят этим программам. А вот семантические <form> и <button> им проще распознать.

Последовательность и предсказуемость

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

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

Кроме того, когда придет пора применять CSS, вам будет куда проще находить специфичные элементы.

SEO

При использовании семантической разметки поисковики расценивают ее как важные ключевые слова, что влияет на ранжирование страницы. (MDN Web Docs)

Что такое семантический HTML?

Самое понятное объяснение, которое я нашел:

«Семантический элемент четко описывает свою суть как браузеру, так и разработчику».

Представьте, что вы указываете рукой на что-то в небе и говорите: «Смотри: какой-то объект!». А вот если вы говорите: «Смотри: самолет!» — это похоже на использование семантического HTML.

Называя объекты реального мира более конкретно, мы облегчаем общение с людьми. Аналогично, использование семантического HTML облегчает чтение кода.

Фактически, использование семантического HTML предписано как часть стандарта HTML5:

«Авторам настоятельно рекомендуется рассматривать элемент <div> как элемент последней надежды, когда никакой другой элемент не подходит. Использование более подходящих случаю элементов вместо <div> повышает доступность для читателей и облегчает поддержку кода в будущем для самих авторов».

Рассмотрим пример. Что легче просканировать? Вот это:

<div>
"Get your facts first, then you can distort them as you please." – Mark Twain
</div>

Или это?

<blockquote>
"Get your facts first, then you can distort them as you please." – Mark Twain
</blockquote>

Во втором примере вы видите элемент <blockquote>, и вам сразу ясно, что этот текст нужно отобразить в формате цитаты.

Использование альтернативных вариантов вместо <div> может потребовать дополнительной умственной работы. Но эта толика внимания к планированию семантического HTML в конечном итоге окупится с лихвой.

Альтернативы div в HTML

Давайте обозначим наиболее употребимые альтернативы div. Скорее всего, вы уже встречали эти элементы раньше. Здесь мы опишем, для чего они предназначены и как ими пользоваться.

Элемент <nav>
<nav>
	<ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/">Contact</a></li>
	</ul>
</nav>

Nav — сокращение от navigation. Соответственно, используется этот элемент для набора ссылок навигации.

Как уже говорилось, это также позволяет скринридерам определить, нужно ли отображать этот тип контента сразу. Элемент <nav> лучше всего использовать для основного блока ссылок навигации в документе.

Элемент <main>
<main>
	<h2>The Godfather of All Content</h2>
	<h3>The Wedding</h3>
	<p>
		Why did you go to the police? Why didn't you come to me first? Vito, how do you like my little
		angel? Isn't she beautiful? Only don't tell me you're innocent. Because it insults my
		intelligence and makes me very angry. I see you took the name of the town. What was your
		father's name? The hotel, the casino. The Corleone Family wants to buy you out.
	</p>
</main>

Название этого элемента тоже говорит само за себя (англ. main — «главный», «основной»). Этот элемент оборачивает блоки кода, образующие основной контент страницы или документа. <main> располагается между открывающим и закрывающим тегами <body>.

Элемент <section>
<section> <h2>The Best Sandwich Ever</h2> <p>The best sandwich is a mutton, lettuce and tomato, where the mutton is nice and lean. It's so perky, I love that. </p> </section>

<section> — отличный пример использования альтернативы div для разделения контента.

В приведенном примере мы разделяем вступление и первый абзац на две секции. Найти и стилизовать эти секции в CSS будет куда проще, чем отлавливать нужный класс <div>.

Элемент <header>
<header> <img src="/"> </header>

Элемент <header>, в отличие от <head>, вы можете использовать многократно по всему документу.

Например, можно использовать один <header> для размещения лого, а другой — для описания заголовка отдельной части контента, например, статьи.

Элемент <footer>
<footer>
<p>© 2021 All rights reserved. Don't steal.</p>
<p>Contact: <a href="mailto:[email protected]">Email Jiffy!</a></p>
</footer>

<footer>, как и <header>, можно использовать где угодно в документе.

Обычно в <footer> помещают копирайт и информацию об авторе. Но вы также можете использовать элемент <footer> как концовку внутри элемента <section>.

Менее распространенные альтернативы div

Есть еще несколько элементов, которые встречаются реже описанных выше, так что вы могли их и не видеть. Но они тоже могут пригодиться и сделать ваш код более читабельным.

Элемент <aside>
<p>My favorite TV show of all time is The Muppet Show. It's sweet, funny and brilliant.</p> <aside> <h4>The Muppet Show</h4> <p>The Muppet Show was created by Jim Henson and aired from 1976 – 1981.</p> </aside>

В театре и кино «aside» — театральный термин, означающий монологи или реплики, направленные в публику (считается, что присутствующие на сцене их не слышат). Эти реплики стоят особняком от основного диалога на сцене. В русской терминологии это называется репликами апарт (пришло из французского).

Элемент <aside> именно так и используется. С его помощью можно сделать примечание, имеющее отношение к контенту, но стоящее отдельно.

Также <aside> можно использовать в боковой панели.

Элемент <code>
<p>You can use this for a piece of code such as:
<code>const muppetFrog = 'Kermit'</code>, which looks different from the other text.
</p>

Когда мы хотим визуально отделить код, вставленный в текст, от собственно текста, пригодится элемент <code>. При рендеринге в браузере содержимое элемента будет выглядеть примерно так:

Элемент <article>
<article>
<h2>Muppets</h2>
<article>
<p>Kermit is the Muppet leader.</p>
</article>
<article>
<p>Fozzy is a stand-up bear.</p>
</article>
<article>
<p>Don't mess with Miss Piggy.</p>
</article>

Еще один элемент, используемый для разделения контента на виды в рамках одного макета.

В элементе <article> должен находиться самодостаточный контент, отделяемый от основного. Использование этого элемента облегчает стилизацию при помощи CSS и позволяет явно выделить часть контента на странице.

Элемент <blockquote>

«Blockquote» в переводе с английского — цитата. И элемент <blockquote> используется именно для выделения цитат на фоне остального текста.

Элемент <mark>
<p>This is a sentence about the best Muppet ever, which happens to be <mark>Pepe the King Prawn</mark>.</p>

Элемент <mark> — отличный способ выделить блок текста. Он совершенно понятен, когда вы натыкаетесь на него в документе. Выглядит это так:

Итоги

Старайтесь использовать в своем коде альтернативы div, и вы увидите, насколько проще станет его читать.

Семантика полезна для читаемости, SEO и доступности. Написание семантического HTML — хорошая привычка, которую нужно приобрести как можно раньше.

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

Перевод статьи «Semantic HTML Guide – 10 Alternatives to Using divs».

Что такое div в html

Тег <div>

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.

HTML тег <div>

Пару лет назад «скелетом» для сайта всегда служила таблица (тег <table>). Создавалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. С появлением тега <div> все вебмастера стали пользоваться им для создания «скелета» будущего сайта. Например, так может выглядеть структуру страницы сайта:

Синтаксис тега <div>

HTML тег <div> является блочным элементом. Самым главным его атрибутом является class . С помощью него можно создавать блоки с нужными стилями CSS.

Пример . Использование блока div

Преобразуется на странице в следующее:

Это элементарный пример использования тега <div> . Его возможности уходят далеко за рамки этого примера. Например, с помощью этого тега можно создавать красивые меню (см. как сделать выпадющее меню на css »)

Теперь рассмотрим подробно все атрибуты тега div .

Атрибуты и свойства тега <div>

  • align=»параметр» — задает выравнивание. Может принимать следующие значения:
  • center — выравнивание текста по центру
  • left — выравнивание текста по левому краю
  • right — выравнивание текста по правому краю
  • justify — выравнивание по левому и правому краю

Практические примеры использования <div>

Давайте рассмотрим пару практических примеров с тегом <div> .

Пример. Вывод контента по центру с использованием div

Преобразуется на странице в следующее:

Теперь вместо тега <center></center> можно писать <div ></div> и текст будет выведен по центру. Это соответствует требования стандарта HTML (валидация сайта).

Пример. Красивая рамка с div

Преобразуется на странице в следующее:

Пример. Реализация тизеров на сайте

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

Таких элементов можно сделать множество. В итоге Вы получаете что-то подобное:

HTML тег <div>

Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.

Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.

Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div> .

Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный.

Прочитать о разметке страницы в HTML 5 вы можете в следующей статье учебника: «Теги разметки страницы».

В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег <span> вы можете использовать для таких задач как:

  • Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
  • Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
  • Создание различных форматирующих стилей для выбранного участка текста.
  • Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.

Поддержка браузерами

Тег Chrome Firefox Opera Safari IExplorer Edge
<div> Да Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
align left
right
center
justify
Не поддерживается в HTML5.
Определяет выравнивание содержимого внутри элемента.

Пример использования

В этом примере мы:

  • Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
  • Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
  • Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Использование тегов разметки в HTML.

В чем разница между тегами HTML и ?

Это означает, что для их семантического использования div-ы должны использоваться для переноса разделов документа, а span-ы — для переноса небольших фрагментов текста, изображений и т. Д.

Например:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Обратите внимание, что нельзя размещать элемент уровня блока внутри встроенного элемента, поэтому:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

… незаконно


РЕДАКТИРОВАТЬ: Начиная с HTML5, некоторые элементы блока могут быть размещены внутри некоторых встроенных элементов. Смотрите ссылку на MDN здесь для довольно четкого списка. Вышеупомянутое все еще незаконно, так как <span>принимает только контент фраз и <div>является потоком контента.


Вы попросили несколько конкретных примеров, так что это взято с моего сайта по боулингу, BowlSK :

<div>
  <div>
    Hi there, <span>Chris Marasti-Georg</span> |
    <a href="/edit-profile.html">Profile</a> |
    <a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
  </div>
  <h2><a href="/">Bowl<span>SK</span></a></h2>
</div>

Хорошо, что происходит?

В верхней части моей страницы у меня есть логический раздел, «заголовок». Поскольку это раздел, я использую div (с соответствующим идентификатором). В этом у меня есть пара разделов: панель пользователя и фактическое название страницы. В заголовке используется соответствующий тег h2. Пользовательская панель, будучи разделом, обернута в div. В этом имя пользователя обернуто в span, так что я могу изменить стиль. Как вы можете видеть, я также обернул spanоколо 2 букв в названии — это позволяет мне менять их цвет в моей таблице стилей.

Также обратите внимание, что HTML5 включает в себя широкий новый набор элементов, которые определяют общие структуры страниц, такие как article, section, nav и т. Д.

Раздел 4.4 рабочего проекта HTML 5 перечисляет их и дает советы относительно их использования. HTML5 все еще является рабочей спецификацией, поэтому пока что нет ничего «окончательного», но весьма сомнительно, что какой-либо из этих элементов куда-то движется. Существует взлом javascript, который вам нужно будет использовать, если вы хотите стилизовать эти элементы в какой-то более старой версии IE — вам нужно создать один из каждого элемента, используя, document.createElementпрежде чем какой-либо из этих элементов будет указан в вашем источнике. Есть множество библиотек, которые позаботятся об этом за вас — быстрый поиск в Google включил html5shiv .

Что такое div в html

align=»параметр» — задает выравнивание. Может принимать следующие значения:
  • center — выравнивание текста по центру
  • left — выравнивание текста по левому краю
  • right — выравнивание текста по правому краю
  • justify — выравнивание по левому и правому краю

Практические примеры использования <div>

Давайте рассмотрим пару практических примеров с тегом <div> .

Пример. Вывод контента по центру с использованием div

Преобразуется на странице в следующее:

Теперь вместо тега <center></center> можно писать <div ></div> и текст будет выведен по центру. Это соответствует требования стандарта HTML (валидация сайта).

Пример. Красивая рамка с div

Преобразуется на странице в следующее:

Пример. Реализация тизеров на сайте

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

Таких элементов можно сделать множество. В итоге Вы получаете что-то подобное:

Еще каких-то десять лет назад в рунете наиболее часто использовалась так называемая табличная верстка. Ввиду того что стандарты некоторых браузеров значительно отличались друг от друга, приходилось искать решение, которое бы позволило правильно отобразить интернет-документ во всех приложениях. Но время шло, развивались стандарты, и на смену достаточно жесткой и негибкой табличной пришла хорошо изменяемая и отзывчивая блочная верстка. Во главе угла такой технологии лежит принцип использования элементов <div>. HTML-документы в большинстве своем начали строиться на основе отдельных блоков, которые, в отличие от табличной верстки, могут быть независимыми друг от друга.

Возникновение

Усложнение веб-страниц и развитие компьютерной техники привело к тому, что веб-документ был разделен на две части — каркас (HTML-код) и оформление (таблицы стилей). Благодаря этому удалось достичь небывалого развития веба, результаты которого мы сейчас можем лицезреть на большинстве современных сайтов. Кроме улучшения процесса разработки <div> HTML позволил определить для каждого отдельного элемента свои правила оформления. Это способствовало улучшению читаемости кода веб-страницы и уменьшению времени загрузки документа. Теперь поисковые машины гораздо быстрее и лучше обрабатывают информацию, доступную на сайте.

Стандарты и проверка

Тег <div> в HTML используется в строгом соответствии со стандартами W3C (Консорциума всемирной паутины). Проверка кода страницы проводится специальным инструментом — валидатором, который парсит (сканирует и ищет) всевозможные ошибки на странице. Валидная страница означает, что все теги были использованы правильно и полностью отвечают требованиям стандартов.

Теги <div> позволяют создавать блоки или, как их еще называют, контейнеры. При этом отдельные элементы могут вкладывать друг в друга, создавая при этом структуры необходимой конфигурации и сложности. Использование тега <div> без сопровождения классом или идентификатором практически не встречается. Это обусловлено «безликостью» элемента. Если ему не присвоить класс, то в итоге все контейнеры будут иметь идентичную конфигурацию.

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

Использование классов и идентификаторов

Блок <div> HTML может определяться как идентификатором id, так и классом class. Отличие первого от второго в том, что id используется на странице документа только один раз. То есть его используют для определения уникальных элементов, которые более нигде не повторяются в коде страницы. Атрибут класса позволяет применять те же правила стилей к нескольким элементам. Такой подход значительно упрощает разработку и поддержку кода. Кроме того, один объект может иметь одновременно несколько классов. Для правильного распознания их просто разделяют пробелами.

Естественно, блочная структура документа вовсе не подразумевает использование только лишь одних тегов <div>. В структуре любой интернет-страницы всегда будут и другие элементы. Кроме того, сам по себе блочный элемент <div> может иметь совсем другой вид отображения. Делается это при помощи свойства display. Элемент может иметь строчное или даже табличное отображение, что позволяет значительно увеличить гибкость использования блока и создать сайт любой конфигурации.

Тег <div>. HTML-свойства

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

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

Так как данный элемент является блочным, то вмещенный в него контент будет начинаться с новой строки. Для изменения подобного поведения необходимо изменить параметры отображения блока свойством display. Кроме группирования вложенных элементов, тег <div> позволяет форматировать расположение контента внутри него. Для этого используется атрибут align, благодаря которому можно разместить текст или изображение по левому краю, по правому краю или по центру родительского элемента.

Позиционирование блоков

Использование атрибута position позволяет изменить метод позиционирования выбранного элемента. Так, существует три типа позиционирования:

  • Статическое (static) — используется по умолчанию. В этом случае элемент располагается в соответствии с позицией в HTML-коде.
  • Относительное (relative). В данном случае расположение объекта рассчитывается так же, как и в случае со статическим позиционированием, но данное свойство позволяет изменять позицию для дочерних элементов. Положение его рассчитывается относительно элемента с относительным позиционированием.

Другие атрибуты

Для изменения позиции относительно точки начала координат используются атрибуты top и left. Значения могут быть как положительными, так и отрицательными. Ширина и высота блочного элемента задается атрибутами width и height соответственно. Если они не были указаны в таблицах стилей, то блок будет занимать всю ширину родительского элемента. Если контент блока не помещается по всей ширине «родителя», то тогда поведение элемента определяется атрибутом overflow.

Надеемся, данная стать помогла разобраться с вопросом о том, что такое <div> в HTML.

Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.

Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.

Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div> .

Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный.

Прочитать о разметке страницы в HTML 5 вы можете в следующей статье учебника: «Теги разметки страницы».

В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.

Тег <span> вы можете использовать для таких задач как:

  • Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
  • Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
  • Создание различных форматирующих стилей для выбранного участка текста.
  • Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.

Поддержка браузерами

Тег Chrome Firefox Opera Safari IExplorer Edge
<div> Да Да Да Да Да Да

Атрибуты

Атрибут Значение Описание
align left
right
center
justify
Не поддерживается в HTML5.
Определяет выравнивание содержимого внутри элемента.

Пример использования

В этом примере мы:

  • Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
  • Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
  • Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.

Результат нашего примера:

Использование тегов разметки в HTML.

Что такое «тег div»? (Пожалуйста, объясните на примерах)



Нормально так,

Возможно, это не самый лучший вопрос, но я новичок в программировании (мне 12 лет) Я думаю, что я в значительной степени спустился с HTML и CSS, и я переехал в JavaScript. Но я не понимаю, что они делают. Не могли бы вы мне это объяснить? 🙂 спасибо

javascript html tags
Поделиться Источник OwenCraddock     27 октября 2013 в 18:02

2 ответа




7

Элемент HTML <div> (или элемент разделения документов HTML) является общим контейнером для содержимого потока, который по своей сути ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (с использованием атрибутов класса или идентификатора) или потому, что они имеют общие значения атрибутов, такие как lang. Его следует использовать только тогда, когда никакой другой семантический элемент (например, <article> или <nav> ) не подходит.

Пример

<div>
  <p>Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div>

Результат

Любой вид контента здесь. Например, <p>, <table>. Вы называете это!

DIV — MDN

Что касается javascript, то это элемент HTML, и им можно манипулировать так же, как и любым другим элементом html, за исключением элементов формы. HTMLElement — MDN

С каждым элементом HTML у вас есть стиль браузера по умолчанию, например теги <b> и <strong> , их стиль по умолчанию-полужирный текст или font-weight: bold . И <div> стиль по умолчанию-это display: block , что просто означает, что есть разрыв строки до и после каждого элемента div, и, конечно, вы знаете, что можете изменить стиль по умолчанию этого элемента с помощью CSS

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

 div {
  // change default styling here
  color: red;
 }

Похоже, вам тоже понадобятся ссылки CSS, кстати, не используйте w3school. попробуйте MDN Learn CSS | MDN

Поделиться Jay Harris     27 октября 2013 в 18:04



2

Тег div -это код HTML для указания элемента div . Пример:

<div>content</div>

Причина, по которой может быть трудно понять, что делает элемент div , заключается в том, что он делает как можно меньше. Название div означает разделение, и это просто контейнер, в который можно поместить текст или другие элементы. Конечно, вы можете добавить стиль к элементу div , например, к границе и фону, но элемент по-прежнему просто «looks», не имеет специальных функций, таких как, например, элемент input . Вы также можете добавить в него события, такие как обработчик кликов, как и большинство элементов, но по умолчанию он не реагирует ни на какие события.

Есть два таких минималистичных элемента, как элемент div и элемент span . Элемент div является блочным элементом, а элемент span -встроенным элементом. Если вы добавляете их в markup, не стилизуя их каким-либо образом, элемент div виден только по тому, как он влияет на другие элементы, будучи элементом блока, а элемент span вообще не виден.

HTML5 добавляет еще несколько элементов, таких как header , footer и section , которые похожи на элемент div , только с более конкретной целью.

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

Поделиться Guffa     27 октября 2013 в 18:20


  • Что такое активные веб-страницы?

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

  • Пожалуйста, объясните мне, что на самом деле означает это письмо в примерах?

    Если nCode меньше нуля, процедура подключения должна возвращать значение возвращено CallNextHookEx. Если nCode больше или равно нулю, а процедура hook не обработала сообщение, настоятельно рекомендуется вызвать CallNextHookEx и возвращает возвращаемое значение; в противном случае другие…


Похожие вопросы:


Пожалуйста, объясните параметр startActivityForResult

Пожалуйста, объясните, что такое PICK_CONTACT. Почему он равен 1 и что это значит? public static final int PICK_CONTACT = 1; Intent intent = new Intent(Intent.ACTION_PICK,…


что такое сервер приложений? Что такое богатые интернет-приложения?

Я из PHP-го прошлого. Все, что я знаю, это то, что веб-сервер обрабатывает запрос http Интерпретатор PHP, встроенный в веб-сервер, компилирует сценарий PHP Результатом вышеизложенного будет HTML,…


Что такое автоматизация проекта ? Пожалуйста, объясните на примере

Не могли бы вы объяснить мне, что такое автоматизация проекта? Как это связано с тестированием? Пожалуйста, объясните на примере.


Что такое контракт данных (класс свойств) и наблюдаемая коллекция

Что такое контракт данных (класс свойств) и наблюдаемая коллекция, когда, где и почему их использовать в контексте silverlight пожалуйста, подробно объясните на примерах ++ Спасибо и с уважением…


пожалуйста, не могли бы вы объяснить мне этот код на примерах

Public static void main(String[] args) пожалуйста, объясните, почему здесь мы делаем массив параметров и почему он статичен, что такое args [].>]*>/ /gp Что такое ГП?


Пожалуйста, объясните концепцию генератора и итератора на хороших примерах

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


Пожалуйста, объясните, что такое Hyperledger

Я не совсем понимаю насчет Hyperledger. Пожалуйста, помогите! Что такое Hyperledger? Что такое Hyperledger Composer? Что такое Hyperledger Fabric? Что такое Hyperledger Fabric SDK GO? Что такое…

html — В чем разница между и ?

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

, с другой стороны, не передает никакого значения , за исключением любых атрибутов class , lang и title .

Итак, нет: использование

не определяет раздел в HTML.

Из спецификации:

<секция>

Элемент

представляет общий раздел документа или приложения. Раздел в данном контексте представляет собой тематическую группировку контента. Каждый раздел должен быть идентифицирован, как правило, путем включения заголовка (элемент h2-h6) в качестве дочернего элемента
.

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

Элемент

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

(https://www.w3.org/TR/html/sections.html#the-section-element)

<дел>

Элемент

вообще не имеет специального значения. Он представляет своих детей. Его можно использовать с атрибутами class , lang и title для разметки семантики, общей для группы последовательных элементов.

Примечание: Авторам настоятельно рекомендуется рассматривать элемент

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

(https://www.w3.org/TR/html/grouping-content.html#the-div-element)

Вопрос: Что такое Div в HTML

Что такое div в HTML?

Тег

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

Вам нужен div в HTML?

Тег Div имеет как открытый (

), так и закрывающий (
) теги, и закрытие тега является обязательным. Div — наиболее удобный тег в веб-разработке, потому что он помогает нам отделять данные на веб-странице, и мы можем создать определенный раздел для определенных данных или функций на веб-страницах.

Что такое div и NAV в HTML?

Div (разделить) является «не семантическим», поскольку он не (настолько) семантически описывает, для чего он предназначен или что делает, кроме как разделяет области в теле страницы.Nav (навигация) описывает себя как предназначенную только для навигации, поэтому она считается семантической.

Что такое оболочка в HTML?

Что такое оболочка HTML? HTML-оболочка позволяет центрировать содержимое веб-страницы. Эта простая стратегия требует наличия CSS (либо в заголовке документа в теге ., либо, в идеале, в отдельной таблице стилей), чтобы оболочка работала.

В чем разница между span и div?

Span и div — это общие элементы HTML, которые группируют связанные части веб-страницы.Элемент div используется для блочной организации и оформления элементов страницы, тогда как элемент span используется для встроенной организации и оформления.

Когда следует использовать div?

Вы должны использовать

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

DIVS плох?

Итак, мы можем использовать элементы div для определения блоков контента; похоже, что использование вложенных элементов div для структурирования контента вполне допустимо.Пока вы не используете элементы div вместо более подходящих элементов, таких как заголовки, абзацы, цитаты, списки и, конечно же, таблицы для табличных данных, у вас все в порядке.

DIVS устарели?

Следует помнить, что тег div по-прежнему является частью HTML5 и еще не устарел. Тем не менее, элемент div часто подвергался злоупотреблениям в HTML4, и это справедливо, поскольку ему никогда не было альтернатив.

Является ли заголовок элементом div?

HTML5 представил три новых тега:

,