和的区别是什么???

fty9527 2009-03-17 07:55:33
如题
...全文
7309 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
hc2828997 2010-11-30
  • 打赏
  • 举报
回复
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。

  下面以一个实例来说明这两个属性的区别。

  代码:

  <span>SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,</span>标识符允许你将一个段落分成不同的部分。

  还有一个标识符具有类似的功能,<div>DIV也被用来在HTML文件中建立逻辑部分。但与</div>SPAN不同,<div>工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

  效果:

  SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。

  还有一个标识符具有类似的功能,DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同,工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

代码:+ P& \1 P, Q* ^/ J% p/ `
% l5 Z9 h+ }( N) O4 v' j: l
  SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。3 D, o2 h9 F& m) g; Z' ?
8 J. L+ v; S% P
  还有一个标识符具有类似的功能,
4 }0 M6 P% \5 |+ J3 O- k+ m. \9 s2 v! o b
DIV也被用来在HTML文件中建立逻辑部分。但与 9 y3 T4 Y4 `- G& J: U2 u0 d7 ?: Q
SPAN不同, S: I6 S* b; h( {3 m' e2 r
工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。 + g5 q4 t9 M5 W/ D6 q j, ]. o% b
: w- O% `% D/ F" z e Q9 n7 q b
  效果:
, ^6 P0 h" E4 S: Z% {( d9 \
: U7 t J2 Z F- {( h, I  SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。
; h* G0 E5 C- ~- [
: ^& ~, {, w, R9 k/ w* M  还有一个标识符具有类似的功能,
$ f1 F/ U9 S8 b* W( y g% j6 G# O. c
6 B% ^' u/ }3 q% E  DIV也被用来在HTML文件中建立逻辑部分。但与+ t- s# z% Q5 J9 R& P
. r6 s. F4 |; M) f. }
  SPAN不同,

看了很多,发现大家的这个文章,不吃从哪里拷贝的,由于网页的原因,代码和效果,都没有表现出来,放了两种摘抄的,我想下边的那段更接近原文些,只是它的代码里,没有了<span>和<div>


HTML只是赋予内容的手段,大部分HTML标签都有其意义(标签p创建段落,h1标签创建标题等等)的,然而span和div标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。

  它们被用来组合一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来,见CSS中级指南的类和id选择符。

  span和div的不同之处在于span是内联的,用在一小块的内联HTML中,而div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码。

huangminyanghe 2010-03-27
  • 打赏
  • 举报
回复
html/css是所有web开发都飞常重要的知识了
zjc308882936 2009-05-20
  • 打赏
  • 举报
回复
div 可实现自动换行 SPAN不换行
lclzf 2009-03-18
  • 打赏
  • 举报
回复
回帖是一种美德!
zzxap 2009-03-18
  • 打赏
  • 举报
回复
[code=HTML]
代码示例:

<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>
<span>SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,<span>标识符允许你将一个段落分成不同的部分。

   还有一个标识符具有类似的功能,<div>DIV也被用来在HTML文件中建立逻辑部分。但与<div>SPAN不同,<div>工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。

技巧:有些朋友会说DIV是层标签,其实HTML里是没有层这个说法的,只不过是为了易于理解,Dreamweaver里才这样写的,每个对象都可以成为“层”,只需要给对象定义position属性(值为absolute或relavite)。例如,要让图片成为“层”,可以这样写代码:

<img src="demo.gif" style="posibion:absolute;left:20;top:20">

2.

span和div
来源:互联网
html4规范的一大突破就是引入了一大空元素<span>和<div>。所谓空元素,就是说如果单独在页面上插入这两个元素,不会对页面产生影响,但是这两个属性专门为样式表定义而生,如果对<span>和<div>定义样式表以后,其中内容的样式旧会随之变化。

<span>和<div>元素都能处理任意大小的片断,他们之间的异同可以用一个例子来说明。

示例如下
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 .myspan1 { color: #FFFFFF; background-color: #800000; }
07 .myspan2 { color: #000000; background-color: #CCFFCC; }
08 .myspan3 { color: #FFFFFF; background-color: #000080; }
09 .myspan4 { color: #000000; background-color: #FFCCCC; }
10 .mydiv1 { color: #FFFFFF; background-color: #008000; }
11 .mydiv2 { color: #000000; background-color: #CCCCFF; }
12 .mydiv3 { color: #FFFFFF; background-color: #000000; }
13 .mydiv4 { color: #000000; background-color: #FFFFAA; }
14 </style>
15 </head>
16 <body>
17 <h2>生命必须元素</h2>
18 <span class="myspan1">水</span>
19 <span class="myspan2">维生素</span>
20 <span class="myspan3">蛋白质</span>
21 <span class="myspan4">矿物质</span>
22 <hr>
23 <div class="mydiv1">水</div>
24 <div class="mydiv2">维生素</div>
25 <div class="mydiv3">蛋白质</div>
26 <div class="mydiv4">矿物质</div>
27 </body>
28 </html>

文件说明

设计者在代码中输入了4个单词,单词之间没有换行,也没有空格。然后为每一个单词嵌套上<span></span>和<div></div>元素,两种元素产生了不同的显示效果。

<span>元素包含的内容,在显示格式上没有任何变化,没有因为插入<span>元素而产生换行或者其他排版效果。这样的显示效果称为“行内元素”,设计者可以在一段文本中插入任意多对<span>元素,然后添加字体、颜色、背景、边框和边距等各种格式。

<div>元素所包含的内容,在格式上有所变化,每一个<div>元素所包含的内容都另起一行,浏览器为他们分配了一个独立区域,形成一个一个“块”,因此<div>也被称作“块级元素”。不过除了这个区别,在其他方面<span>和<div>基本相同,它们都可以为其中内容添加各种样式。

正是有了<span>和<div>两个元素的出现,使得HTML4的样式定义变得更为灵活和规范。

1、行内样式定义<span>元素

<span>属于行内样式定义元素,它的插入不会使原有结构产生任何变化,直到设计者为它提供了属性为止。

基本语法

<span 属性=“属性值></span>

<span>元素的首尾标记必须同时成对出现,且<span>元素允许多重嵌套,也就是说,一个<span>元素中可以嵌套任意多个<span>元素。

文件范例
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 p { line-height: 1.5em;
07 font-family: Tahoma; }
08 .toolname { color: #FFFFFF;
09 background-color: #AA0000;
10 cursor: hand; }
11 .helpfile { cursor: help;
12 text-decoration: underline; }
13 </style>
14 </head>
15 <body>
16 <p><span class="toolname" title="HyperText Markup Language 超文本标记语言" lang="en">HTML</span> 和 <span class="toolname" title="Cascading Style Sheet 层叠样式表" lang="en">CSS</span>都是网页制作必不可少的工具,详情请参阅<span class="helpfile" title="点击查看帮助文件" lang="zh-cn" onclick='javascript:window.open("helpfile.html");'>帮助文件</span>。
17 </body>
18 </html>

文件说明

设计者对“HTML”和“CSS”两个单词使用了<span>元素,其中style元素用前景色、背景色和鼠标样式定义,同时还对于语言编码、鼠标跟踪文字提醒进行了lang和title属性定义。对于“帮助文件”4个字,设计者利用<span>元素的style属性对它定义了下划线和鼠标样式,同时也对语言解码、鼠标跟踪文字提醒进行了lang和title属性定义,onclick属性可以插入脚本,设置用户鼠标单击后的浏览器动作。

<span>除了进行文本行内定义,还可以对HTML元素和属性无法定义的地方进行样式设置。

文件范例
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTMLê?ày</title>
05 <style type="text/css">
06 li { line-height: 3em;
07 font-family: courier new;
08 font-size: 18pt; }
09 .bordered_text { border: solid 1px black;
10 padding: .5em;
11 font-weight: bold; }
12 </style>
13 </head>
14 <body>
15 <ul>
16 <li>13<span class="bordered_text">5</span>79
17 <li>02<span class="bordered_text">4</span>68
18 </ul>
19 </body>
20 </html>

文件说明

利用<span>,可以在任意位置对特定字符进行样式格式化,即使字符包含在<li>中也一样。这些功能都是仅靠HTML元素本身属性无法达到的,而行内样式元素<span>可以达到这样的效果。

2、块级样式定义<div>元素

<div>属于块级样式定义元素,它的插入会使原有结构产生变化,所有<div>元素都会在新的一行产生一个文档模型定义容器,等待设计者为它 提供属性。

基本语法

<div 属性=“属性值”></div>

<div>元素的首尾标记必须同时成对出现,且<div>元素允许多重嵌套,也就是说,一个<div>元素中可以嵌套任意多个<div>元素。

文件范例

由于<div>元素是块级元素,因此可以用CSS的position属性对其进行相对或者绝对定位,一旦进行了绝对定位,一个<div>矩形区域就可以出现在一个HTML文档的任何地方。
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTMLê?ày</title>
05 <style type="text/css">
06 body { background-color: black; }
.dig1,.dig2,.dig4,.dig6,.dig7 { background-color: lime; }
.dig3,.dig5 { background-color: #003300; }
07 </style>
08 </head>
09 <body>
10 <div class="dig1" style="position:absolute; left:10; top:10; width:20; height:100;"></div>
11 <div class="dig2" style="position:absolute; left:35; top:10; width:70; height:20;"></div>
12 <div class="dig3" style="position:absolute; left:110; top:10; width:20; height:100;"></div>
14 <div class="dig4" style="position:absolute; left:35; top:102; width:70; height:20;"></div>
15 <div class="dig5" style="position:absolute; left:10; top:115; width:20; height:100;"></div>
16 <div class="dig6" style="position:absolute; left:35; top:195; width:70; height:20;"></div>
17 <div class="dig7" style="position:absolute; left:110; top:115; width:20; height:100;"></div>
18 </body>
19 </html>

文件说明

该文档没有使用任何的表格和图片,但是却能模拟一个屏幕数字“5”,依靠的就是<div>元素的定位属性和样式属性。一个数字中包含7个矩形块,利用绝对定位放置在相应位置,然后用背景色属性模拟发光和变暗的效果。设计者可以修改<style>元素中的类编组,定义哪些块处于“发光”状态,哪些块处于“暗淡”状态。

如果将这些类编组防入一个脚本中,就可以在页面上模拟动态计数效果。它的优点非常明显,设计者在变化数字的时候,无需修改<body>中的具体内容,只要用样式表归类不同背景色的<div>块即可


[/CODE]
hhxxcj 2009-03-18
  • 打赏
  • 举报
回复
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
xfreyes 2009-03-18
  • 打赏
  • 举报
回复
看书。
yijianxiangde100 2009-03-18
  • 打赏
  • 举报
回复
up lz,
div 是一行一行的,二span是一列。
szldk 2009-03-17
  • 打赏
  • 举报
回复
DIV可以包含SPAN
SPAN不能包含DIV
小_虎 2009-03-17
  • 打赏
  • 举报
回复
呵呵,这个问题不求甚解。。用到就知道了
稀饭小哥 2009-03-17
  • 打赏
  • 举报
回复
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
  • 打赏
  • 举报
回复
这类问题最好到到html/css论坛学习。

html/javascript是asp.net开发的基础,学习asp.net之前应该先花几个月时间使用html/javascript做几个简单的网站。
erytbc 2009-03-17
  • 打赏
  • 举报
回复
o
hooyes 2009-03-17
  • 打赏
  • 举报
回复
div 块级元素
span 普通元素
区别如此
wuyq11 2009-03-17
  • 打赏
  • 举报
回复
DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN
在 HTML 视图中工作时,可以在 <DIV> 内编辑文本,将某些字包含在 <SPAN> 元素内,以强调那些字。与 <DIV> 不同,<SPAN> 和它周围的文本一起移动。

liuyeede 2009-03-17
  • 打赏
  • 举报
回复
div换行,span不换行
ysw830 2009-03-17
  • 打赏
  • 举报
回复
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。

<span>SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,<span>标识符允许你将一个段落分成不同的部分。   还有一个标识符具有类似的功能,<div>DIV也被用来在HTML文件中建立逻辑部分。但与<div>SPAN不同,<div>工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。
它通过读取 Excel 表格中的业务数据,结合 Word 模板,自动生成多个独立的合同文件,并自动处理了表格中“合计”行的合并与中文大写金额转换。 资源名称:合同文档自动化生成脚本 (1.py) 名字真是乱起 核心功能:Excel 数据读取 → Word 模板渲染 → 表格单元格合并与金额处理 → 批量导出 Word 文档。 适用场景:财务、销售或行政部门需要根据订单或业务明细,批量制作格式统一的合同、报价单或结算单。 1. 自动把“钱”变成“大写” 它干了啥:它内置了一个翻译功能,专门把阿拉伯数字(比如 100.50)自动转换成财务专用的中文大写(比如 壹佰元伍角)。 为什么有用:写合同最怕手滑写错金额,或者大写格式不对。这个功能全自动搞定,既标准又不会出错。 2. 自动“装修”表格底部 它干了啥:生成文档后,它会自动找到表格的最后一行,把前几列合并成一个大格子,写上“合计:XXX(大写金额)”,并在最右边填上具体的数字总额。 为什么有用:平时我们做完表格,还得手动去合并单元格、算总数、填大写,非常繁琐。这个脚本直接一步到位,把表格收尾工作做得漂漂亮亮。 3. 像“发传单”一样批量做合同 它干了啥:它会看你的 Excel 表格,按照“编号”把数据归类。 如果是同一个编号的货物,它会把它们塞进同一个合同里(比如一个客户买了三样东西,会自动列三行)。 如果是不同的编号,它就生成不同的合同文件。 为什么有用:不管你有一百个还是一千个订单,它都能自动拆分,给每个客户生成一份独立的、内容准确的合同,完全不用人工去复制粘贴。

62,271

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧