Перейти к содержимому


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 1008 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #2

    OlgaGetman
    Очков активности: 564 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 528 4 темы, 32 сообщения, 8 баллов репутации

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 306 10 тем, 21 сообщение, 4 балла репутации

  • Фотография ShowPrint
    #5

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 72 1 тема, 21 сообщение, 2 балла репутации

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 67.5 3 темы, 6 сообщений, 3 балла репутации

  • Фотография Megoydagi
    #8

    Megoydagi (24ho.ru)
    Очков активности: 66 1 тема, 19 сообщений, 2 балла репутации

  • Фотография re-search
    #9

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

  • Фотография Constantine
    #10

    Constantine
    Очков активности: 39 4 темы, 14 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 20.04.2019
  • Яндекс выдача: 24.04.2019
Топ 5 участников по репутации


Тег div

#1 Юлианна

Юлианна
  • Неактивные
  • 9 сообщений
  • Репутация: 0
0

Отправлено 23 Июль 2009 - 01:05

Я запуталась и не могу понять для чего нужен тег div. И если какая-то разница между тегом div и p?


 

 

  • 0

#2 Евгений

Евгений
  • Неактивные
  • 481 сообщений
  • Репутация: 0

Отправлено 23 Июль 2009 - 05:05

Юлианна, вот почитайте
http://www.htmlbook.ru/html/p.html
http://www.htmlbook.ru/html/div.html

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

<span style="display:block">теперь отображается так же как и див</span>


  • 0

#3 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 23 Июль 2009 - 13:00

Евгений,
просьба разъяснить чайнику огромность разницы. ;)
Я в описании на htmlbook.ru не увидел ни одного принципального отличия, кроме терминологического (p - для выделения параграфов в тексте и их форматирования, div - для выделения любых фрагментов документа и их форматирования) и обязательности закрывающего тега для div-a.

Но де факто наблюдается тождественный результат использования p или div (если не забывать закрывающий тег). Потому как и то и другое - блочные элементы. В параграф можно вставлять любые другие фрагменты документа, а в див-ы - любые параграфы.

Например, берем иллюстративный код для div со странички http://www.htmlbook.ru/html/div.html, заменяем в нем div-ы на p и получаем идентичный результат:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег P вместо DIV</title>
<style type="text/css">
.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left;
}
.block2 {
width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px;
}
</style>
</head>
<body>
<p class="block1">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
<p class="block2">Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.</p>
</body>
</html>

  • 0

#4 Евгений

Евгений
  • Неактивные
  • 481 сообщений
  • Репутация: 0

Отправлено 23 Июль 2009 - 13:27

yury, огромность разницы понимается со временем. Если честно я даже не знаю как это объяснить.

так же, например, с помощью дивов можно сделать меню. Но правильней будет использование <ul><li></li></ul> семантика это кажется называется?

DIV - это слои.
а P - это параграф.
  • 0

#5 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 23 Июль 2009 - 13:38

Если честно я даже не знаю как это объяснить.

Лучше конечно, не объяснять, а показать на примере. (объяснение - это что-то из области идеологии, а не практики)

DIV - это слои.
а P - это параграф.

DIV - от англ слова division (часть, раздел документа), ни какие "слои" тут ни при чем.
P - от англ paragraph - a distinct section of a piece of writing, usually dealing with a single theme and indicated by a new line (абзац, обычно, самостоятельная часть текста, отделяемая новой строкой)
честно говоря, разница не сильно очевидная даже идеологически.
  • 0

#6 Евгений

Евгений
  • Неактивные
  • 481 сообщений
  • Репутация: 0

Отправлено 23 Июль 2009 - 13:49

yury, с Вашей точки зрения, можно верстать либо на Таблицах либо на Параграфах? xD)))

получается что вообще почти все теги хтмл "идеологически одинаковые"? Любому тегу задать дисплей:блок и он станет таким же блочным элементом как и див, и как параграф.
  • 0

#7 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 23 Июль 2009 - 13:56

yury, с Вашей точки зрения, можно верстать либо на Таблицах либо на Параграфах? xD)))

Легко ;)

Любому тегу задать дисплей:блок

в данном случае даже этого не требуется. Что сильно меня, как завзятого лентяя, утешает. ;)
  • 0

#8 Евгений

Евгений
  • Неактивные
  • 481 сообщений
  • Репутация: 0

Отправлено 23 Июль 2009 - 15:39

Легко :)

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

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

#9 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 23 Июль 2009 - 16:30

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

Некоторые предпочитают блочные дома кирпичным, как это не покажется смешным. ;)

Просьба таки не сбиваться на оффтоп. Топик не о бутылках, а о разнице между тэгами: "существенная она или не очень?"

Примечание: бутылки - не строительный материал и жить в таком доме нормальному человеку будет неудобно.
Есть подозрение, что сайт на блочных тэгах p и div будет работать и выглядеть совершенно одинаково, так что аналогия с бутылками кривая.
  • 0

#10 Евгений

Евгений
  • Неактивные
  • 481 сообщений
  • Репутация: 0

Отправлено 23 Июль 2009 - 16:52

Примечание: бутылки - не строительный материал

а тег P строительный материал??? div - да. table - да.

У каждого из этих тегов свое предназначение, не надо их менять местами. Если на то пошло, то вообще не нужны теги <p></p>, <ul></ul>,<li></li> и многие другие, т.к. на дивах можно сделать оооочень многое, просто задавая им разные стили.

Можете проверить одинаковые ли теги P и DIV.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<br/>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
<div>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

из примера видно, что у P отступы гораздо больше. Чтобы они были идентичны, нужно задать margin:0; padding:0;

<p style="margin:0; padding:0"></p>
=
<div></div>
=
<span style="display:block"></span>

с этим согласны?
  • 0

#11 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 23 Июль 2009 - 18:02

а тег P строительный материал??? div - да. table - да.

P - абсолютно такой же строительный материал веб-страничек, как и таблицы и дивы. Нет никаких оснований урезать его в правах.
Только не надо нервничать, зачем столько знаков вопроса? ;)

У каждого из этих тегов свое предназначение

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

из примера видно, что у P отступы гораздо больше. Чтобы они были идентичны, нужно задать margin:0; padding:0;
с этим согласны?

Вот это уже конструктивный разговор.
Согласен. Только это не "отступы", а так называемая красная строка, т.е. автоматически добавляемая пустая строчка для разделения параграфов. (Кстати, никогда не нравилась реализация по умолчанию красной строки в html: вместо обычно используемой табуляции в начале строки - вставка пустой строки. Сам всегда ее заменяю или на <br> или стилями правлю).
Действительно, разница обнаружилась. Не знаю, можно ли ее назвать "огромной", но она есть.
  • 0

#12 Евгений

Евгений
  • Неактивные
  • 481 сообщений
  • Репутация: 0

Отправлено 23 Июль 2009 - 20:03

Только это не "отступы", а так называемая красная строка

margin и padding - это отступы.
красная строка задается параметром text-indent

Действительно, разница обнаружилась. Не знаю, можно ли ее назвать "огромной", но она есть.

"Огромная разница" заключается не в отступах, а в том, что эти теги различные, у каждого из них свое предназначение (немного не соглаен с вашим определением, не надо забывать про стандарты).
  • 0

#13 Dengere_Ash

Dengere_Ash
  • Неактивные
  • 27 сообщений
  • Репутация: 0

Отправлено 25 Июль 2009 - 15:15

Между DIV'ами и P'аграфами есть разница, хотя бы в разных свойствах.

И структура:
HTML
<div>
	<div id="left">
	<p> Текст</p>
	</div>
	<div id="right">
	<p>Текст!</p>
	</div>
</div>
CSS
* {
		margin: 0;
		padding: 0;
		}
		div {
		width: 1000px;
		border: 1px solid #111;
		}
		#left {
		float: left;
		width: 500px;
		}
		#right {
		float: right;
		width: 250px;
		}
не будет равна
HTML
<p>
	<p id="left">
	<p> Текст</p>
	</p>
	<p id="right">
	<p>Текст!</p>
	</p>
</p>
CSS
	* {
		margin: 0;
		padding: 0;
		}
		p {
		display: block;
		width: 1000px;
		border: 1px solid #111;
		}
		#left {
		float: left;
		width: 500px;
		}
		#right {
		float: right;
		width: 250px;
		}

И к тому же сайт, построенный на P'шках не пройдет валидацию.
  • 0

#14 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 01 Август 2009 - 08:58

а вы посмотрите что скажет валидатор на такую конструкцию <p><div>Тест</div></p> и будет счастье! возможно и поймете разницу...
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85

Оформление форума – IPBSkins.ru