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

Реферальная программа Мегаплана

Партнерская программа Kredov

Тег 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

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

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

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

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

Легко ;)

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

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

#8 Евгений

Евгений
  • Пользователь
  • 481 сообщений
  • Репутация: 0

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

Легко :)

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

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

#9 yury

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

Отправлено 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

robot

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


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