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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 79.5 0 тем, 53 сообщения, 1 балл репутации

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

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

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

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

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

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

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

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

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

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

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

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

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

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография алексс
    #9

    алексс
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

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

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

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


Тег div

#1 Юлианна

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

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

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


 

 

  • 0

#2 Евгений

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

Отправлено 23 July 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
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 23 July 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 July 2009 - 13:27

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

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

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

#5 yury

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

Отправлено 23 July 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 July 2009 - 13:49

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

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

#7 yury

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

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

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

Легко ;)

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

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

#8 Евгений

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

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

Легко :)

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

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

#9 yury

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

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

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

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

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

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

#10 Евгений

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

Отправлено 23 July 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
  • Пользователь
  • 642 сообщений
  • Репутация: 188

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

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

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

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

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

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

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

#12 Евгений

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

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

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

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

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

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

#13 Dengere_Ash

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

Отправлено 25 July 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
  • Заблокированные
  • 1956 сообщений
  • Репутация: 71

Отправлено 01 August 2009 - 08:58

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

robot

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

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