<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

更重要的意义是在网页的动态实现过程中,对划分的区域统一处理,例如换背景色、字体等。

<div> 是一个块级元素。它的内容自动地开始一个新行。实际上,换行是 <div> 唯一格式上的表现。

<br>就是一个纯粹的换行,通常可以写作<br/>

<p>代表一个段落,对于在<p>与</p>之间的内容,当作一个段落统一处理,同样具有格式上的换行效果。通常用于文章分段。

选用这三个标签时,可以按写文章的方式考虑,如果你在考虑文章的整体构架,就先<div>;写各其中一个小节的每段时,就<p>;如果一段内容中有部分内容需要另起一行(换行的内容与前一行内容仍属于一段),就<br>。

<span>是一个行内标签,用来组合行内的多个元素。

div与span区别

div占用的位置是一行。
span占用的是内容有多宽就占用多宽的空间距离。

<div> <p> <span>的用法和区别的更多相关文章

  1. DIV与SPAN之间有什么区别

    DIV与SPAN之间有什么区别 DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元 ...

  2. CSS选择器div和p的用法和区别

    div,p.div p.div>p.div+p.div~p.div.a的用法和区别 div,p:选择所有<div>元素和<p>元素 <style> p,spa ...

  3. [转]div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  4. DIV与SPAN的区别

    DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...

  5. DIV 和 SPAN 区别

    DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素). 详解:1 ...

  6. div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  7. div和span元素的区别

    2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素,可以与其他元素位于同一行. DIV 和 SPAN 元素最大的特点是默认都没有对元素内的 ...

  8. HTML中Div、span、label标签的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  9. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

随机推荐

  1. MySQL数据库入门到高薪培训教程(从MySQL 5.7 到 MySQL 8.0)

    一.MySQL数据库入门到高薪培训视频教程(从MySQL5.7到MySQL8.0) 本套MySQL学习教程地址: https://edu.51cto.com/course/18034.html 为满足 ...

  2. 用cmake构建gtk程序

    情况说明 先前已经在windows下基于GDI实现了一个简陋的imshow:基于GDI的imshow:使用stb_image读取图像并修正绘制.考虑跨平台,也考虑万一某天M$不让我们用盗版系统了,还是 ...

  3. Spring 重定向(Redirect)指南

    原文:Hacking the IntegerCache in Java 9? 链接:https://dzone.com/articles/hacking-the-integercache-in-jav ...

  4. Rendering in UE4

    Intro Thinking performance. Identify the target framerate, aim your approach on hitting that target ...

  5. springboot的第一节课

    快速开始spring boot应用 官方向导搭建boot应用 地址:http://start.spring.io/ 设置项目属性: 3.解压,拷贝到工作空间,导入maven项目 4.写Controll ...

  6. 使用selenium谷歌浏览器驱动配置:

    from selenium import webdriver#导入谷歌浏览器的chrome_driverchrome_driver = r"C:\python36\Lib\site-pack ...

  7. 如何用okr做好目标规划

    有朋友和我吐槽公司总是规划一个个振奋人心的目标,让大家对工作充满了热情.然而好的开头却缺少追踪反馈没有好的结尾,那些大家所渴望达成的目标随着时间的流逝便逐渐没有了音信,不再有人主动提起,团队成员迎来的 ...

  8. 【后缀数组】【LuoguP2408】 不同子串个数

    题目链接 题目描述 给你一个长为N的字符串,求不同的子串的个数 我们定义两个子串不同,当且仅当有这两个子串长度不一样 或者长度一样且有任意一位不一样. 子串的定义:原字符串中连续的一段字符组成的字符串 ...

  9. [xms]西软xms试算平衡报表-穿透明细报表-增加储值卡卡号列

    只能呵呵哒 [xms]西软xms试算平衡报表-穿透明细报表-增加储值卡卡号列 pospay ' and hotelid='${hotelid}'; hhaccount ' and hotelid='$ ...

  10. node.js切换多个版本

    开言 试用场景就是我们开发项目的时候,有可能一个项目需要v10版本,另一个项目需要v8版本,遇到这种问题,我们不能卸载再重新安装对应的版本去开发,遇到这样的问题的时候,那我们就可以去用另一种方式去切换 ...