HTML标签p和div的不同

标签： html 标签 div | 发表时间：2013-06-06 17:30 | 作者：milkcu
出处：http://blog.csdn.net

标题：HTML标签p和div的不同

原文：What is the difference between <p> and <div>?

链接： http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div

作者： Andrew Hare

译者：MilkCu（ http://blog.csdn.net/milkcu）

引言

在用CSDN博客的网页编辑器 xhEditor写文章的时候，发现回车键由原来的生成<p>标签变为<div>标签了。对于<p>、<span>、<div>各标签的区别我还是明白的，但为什么编辑器会用这种变化呢。在我看来，这样在从其它地方粘贴内容的时候更容易保留样式吧，因为<div>比<p>支持的样式更多。在搜索资料的时候，发现 Stack Overflow的一则问答不错的，分享一下。

译文

它们有语义上的不同，<div>标签用来作数据的容器，而<p>标签用来描述内容段落。

语义的不同让所有不同。HTML是一种标记语言，这意味着它要用有意义的方式来标记内容。大多数的开发者认为，语法是被动的，浏览器作用于这些标记，但是事实不是这样。

你选择的标记标签应能描述你的内容。不要在考虑外观的基础上标记你的文档，而是在它是什么的基础上标记你的文档。

如果你标记容器，就用<div>。如果你需要描述你的文章段落，就用<p>。

注意：理解<div>和<p>都是块状元素很重要，这意味着，大多数浏览器都会以相似的形式对待它们。

原文

They have semantic difference - a  <div> element is designed to describe a container of data whereas a  <p> element is designed to describe a paragraph of content.

The semantics make all the difference. HTML is a markup language which means that it is designed to "mark up" content in a way that is meaningful to the consumer of the markup. Most developers believe that the semantics of the document are the default styles and rendering that browsers apply to these elements but that is not the case.

The elements that you choose to mark up your content should describe the content. Don't mark up your document based on how it should look - mark it up based on what it is.

If you need a generic container purely for layout purposes then use a  <div>. If you need an element to describe a paragraph of content then use a  <p>.

Note: It is important to understand that both  <div> and  <p> are  block-level elements which means that most browsers will treat them in a similar fashion.

后记

原文是段很美妙的文字，也许被我翻译的凌乱了许多。怕别人看不懂我写的，特放上原文。这样的翻译就当作自娱自乐吧，在做的时候应该能学到点什么吧，虽然思想无法完全用语言表达。

（全文完）

作者：milkcu 发表于2013-6-6 17:30:54 原文链接
阅读：13 评论：0 查看评论

相关 [html 标签 div] 推荐：

HTML标签p和div的不同

- - CSDN博客Web前端推荐文章
标题：HTML标签p和div的不同. 原文：What is the difference between

and

?. 链接： http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div.

HTML head 头标签

- - IT技术博客大学习
HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性. 移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要. 了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的.

HTML标签自定义属性

- - Web前端 - ITeye博客
HTML标签可以自定义属性，但是我们要考虑其在IE、Firefox以及chrome下的兼容性问题. 这里的“myAttr”就是这个标签的自定义属性了. 如果定义了属性却使用不了，那么这个属性就没有任何意义了，接下来就是如何去调用我们的自定义属性的值了. 在IE浏览器里，我们通过获取对象后直接调用就可以了.

前端开发中最常见的12个HTML标签错误

- - ITeye资讯频道
开发者在写HTML代码的时候一定要仔细，并熟练掌握HTML规则，因为一不留神则可能出现一些微小的错误，但有可能会导致严重的后果. 本文列举了一些在HTML中常见的错误，并且给出了如何避免错误的方法. 相信这些方法会对前端开发者有一些帮助. 正确使用HTML tag的结束标记非常重要，HTML tag的结束标记的顺序要和开始标记一致，而新手往往会忽视这点.

div 添加滚动条

- - CSDN博客推荐文章
style="overflow: hidden; width: 100px; white-space: nowrap; text-overflow: ellipsis" //让所有的table td都展开. overflow-y: hidden; overflow-x: scroll; width: 987px  //设置竖着没有滚动条，横着有滚动条 ，一定要设置宽度.

div在页面中的高

- - Web前端 - ITeye博客
这里是javascript中制作滚动代码的常用属性. 页可见区域宽： document.body.clientWidth;. 网页可见区域高： document.body.clientHeight;. 网页可见区域宽： document.body.offsetWidth   (包括边线的宽);. 网页可见区域高： document.body.offsetHeight (包括边线的宽);.

jQuery拖拽div实现

- - CSDN博客Web前端推荐文章
思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是. 1、组件左上角与屏幕左上角的相对位置. 2、鼠标所在坐标与组件左上角的相对位置. $(document).ready(function(){ var move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了，几乎所有的关于HTML 5 在各种主流浏览器上的安全问题，这些安全问题很有可能将会是黑客攻击你的网上的敲门砖，他们几乎都和Javascript都有关系，你就要好好注意了. IE6，7，8，9，和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中，可以让用户进行XSS（跨站脚本）攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言（ 英文：HyperText Markup Language，HTML）是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全，超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素（inline）. 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：. 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：.