SPAN标签和DIV标签的区别.pdf

转载转载 SPAN SPAN 标签和标签和 DIVDIV 标签的区别标签的区别 2010 06 23 10 38 52 转载原文 标签 转载 原文地址 原文地址 SPAN 标签和 DIV 标签的区别作者 作者 绝世名伶 SPAN 元素和 DIV 元素有什么区别 解决思路 最明显的区别是 DIV 是块元素 SPAN 是内嵌元素 块元素相当于内嵌元素在前后各加一 个换行 其实 块元素和行内元素也不是一成不变的 只要给块元素定义 display inline 块元素就成了内嵌元素 同样地 给内嵌元素定义了 display block 就成了块元素了 具体步骤 代码示例 div span border 1px solid 000 margin 2 div1div2 span1span2 div3 div4 span3 span4 技巧 有些朋友会说 DIV 是层标签 其实 HTML 里是没有层这个说法的 只不过是为了易 于理解 Dreamweaver 里才这样写的 每个对象都可以成为 层 只需要给对象定义 position 属性 值为 absolute 或 relavite 例如 要让图片成为 层 可以这样写代码 特别提示 本例代码运行效果如图 2 1 6 3 所示 为了更能说明问题 这里给块元素和内嵌元素都加了 1 像素宽的黑色实线边框 从图中可以看到 DIV 默认为块元素 定义 display 属性值为 inline 后以内嵌元素显示 而 SPAN 默认为内嵌元素 定义 display 属性值为 block 后则以块元素 显示 div 和的区别 span 允许网页制作者给出一个样式表 但无须加在 HTML 元素之上 也就是说 span 是独立于 HTML 元素的 span 在样式表做是做为一个标识符使用 而且也接受 style class 和 ID 属性如 span 是一个内联元素 它纯粹是为了应用样式表面成立的 所以当样式表无效时 它的存在也 就没有意义了 DIV 基本上与span相似 或者说具有SPAN所有的功能 此外还具有SPAN不及的特色 DIV是 一个块 也就是所谓的 容器 它具有自己独立的段落 独立的标题 独立的表格 就如 一样包括了一切 如 独立的标题 独立的段落 而这些 SPAN 是没有的 SPAN 和 DIV 的区别在于 DIV division 是一个块级元素 可以包含段落 标题 表格 乃至诸如章节 摘要和备注等 而 SPAN 是行内元 素 SPAN 的前后是不会换行的 它没有结构的意义 纯粹是应用样式 当其他行内元素都 不合适时 可以使用 SPAN 下面以一个实例 来说明这两个属性的区别 代码 span SPAN 标记有一个重要而实用的特性 即它什么事也不会做 它的唯一目的就是围绕你的 HTML 代码中的其它元素 这样你就可以为它们指定样式了 在此例中 span 标识符允 许你将一个段落分成不同的部分 还有一个 标识符具有类似的功能 div DIV 也被用来在 HTML 文件中建立逻辑部分 但与 div SPAN 不同 div 工作于文本块一级 它在它所包 含的 HTML 元素的前面及后面都引入了行分隔 效果 SPAN 标记有一个重要而实 用的特性 即它什么事也不会做 它的唯一目的就是 围绕你的 HTML 代码中的其它元素 这样你就可以为它们指定样式了 在此例中 标识符 允许你将一个段落分成不同的部分 还有一个 标识符具有类似的功能 DIV 也被用来在 HTML 文件中建立逻辑部分 但与 SPAN 不同 工作于文本块一级 它在它所包含的 HTML 元素的前面及后面都引入了行分隔 4 楼 我记得版主都回答好多次了 以后记得先搜一下啊 块元素 block element 一般是其他元素的容器元素 块元素一般都从新行开始 它可以容纳 内联元素和其他块元素 常见块元素是段落标签 P form 这个块元素比较特殊 它只能用 来容纳其他块元素 如果没有 css 的作用 块元素会顺序以每次另起一行的方式一直往下排 而有了 css 以后 我们可以改变这种 html 的默认布局模式 把块元素摆放到你想要的位置上去 而不是每次 都愚蠢的另起一行 需要指出的是 table 标签也是块元素的一种 table based layout 和 css based layout 从一般使用者 不包括视力障碍者 盲人等 的角度来看这两种布局 除了页 面载入速度的差别外 没有其他的差别 但是如果普通使用者不经意点了查看页面源代码按 钮后 两者所表现出来的差异就非常大了 基于良好重构理念设计的 css 布局页面源码 至 少也能让没有 web 开发经验的普通使用者把内容快速的读懂 从这个角度来说 css layout code 应该有更好的美学体验吧 你能够把块容器元素 div 想象成一个个 box 或者如果你玩过剪贴文载的话 那就更加容易 理解了 我们先把需要的文章从各种报纸 杂志总剪 下来 每块剪下来的内容就是一个 block 然后我们把这些纸块按照自己的排版意图 用胶水重新贴到一张空白的新纸上 这 样就形成了你自己独特的文摘快报 了 作为一种技术的延伸 网页布局设计也遵循了同样 的模式 内联元素 inline element 一般都是基于语义级 semantic 的基本元素 内联元素只能容纳文本 或者其他内联元素 常见内联元素 a 块元素 block element 和内联元素 inline element 都是 html 规范中的概念 块元素和内联元素 的基本差异是块元素一般都从新行开始 而当加入了 css 控制以后 块元素和内联元素的这 种属性差异就不成为差异了 比如 我们完全可以把内联元素 cite 加上 display block 这样的 属性 让他也有每次都从新行开始的属性 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素 可变元 素还是属于上述两种元素类别 一旦上下文关系确定了他的类别 他就要遵循块元素或者内 联元素的规则限制 大致的元素分类见全文 ps 关于 inline element 的中文叫法 有多种内联元素 内嵌元素 行内元素 直进式元素 基本上没有统一的翻译 爱怎么叫怎么叫吧 块元素 block element address 地址 blockquote 块引用 center 举中对齐块 dir 目录列表 div 常用块级容易 也是 css layout 的主要标签 dl 定义列表 fieldset form 控制组 form 交互表单 h1 大标题 h2 副标题 h3 3 级标题 h4 4 级标题 h5 5 级标题 h6 6 级标题 hr 水平分隔线 isindex input prompt menu 菜单列表 noframes frames 可选内容 对于不支持 frame 的浏览器显示此区块内容 noscript 可选脚本内容 对于不支持 script 的浏览器显示此内容 ol 排序表单 p 段落 pre 格式化文本 table 表格 ul 非排序列表 内联元素 inline element a 锚点 abbr 缩写 acronym 首字 b 粗体 不推荐 bdo bidi override big 大字体 br 换行 cite 引用 code 计算机代码 在引用源码的时候需要 dfn 定义字段 em 强调 font 字体设定 不推荐 i 斜体 img 图片 input 输入框 kbd 定义键盘文本 label 表格标签 q 短引用 s 中划线 不推荐 samp 定义范例计算机代码 select 项目选择 small 小字体文本 span 常用内联容器 定义文本内区块 strike 中划线 strong 粗体强调 sub 下标 sup 上标 textarea 多行文本输入框 tt 电传文本 u 下划线 var 定义变量 可变元素 可变元素为根据上下文语境决定该元素为块元素或者内联元素 applet java applet button 按钮 del 删除文本 iframe inline frame ins 插入的文本 map 图片区块 map object object 对象 script 客户端脚本 SPAN 和 DIV 的区别在于 DIV division 是一个块级元素 可以包含段落 标题 表格 乃至诸如章节 摘要和备注等 而 SPAN 是行内元素 SPAN 的前后是不会换行的 它没 有结构的意义 纯粹是应用样式 当其他行内元素都不合适时 可以使用 SPAN 下面以一个实例来说明这两个属性的区别 代码 span SPAN 标记有一个重要而实用的特性 即它什么事也不会做 它的唯一目的就 是围绕你的 HTML 代码中的其它元素 这样你就可以为它们指定样式了 在此例中 span 标识符允许你将一个段落分成不同的部分 还有一个标识符具有类似的功能 div DIV 也被用来在 HTML文件中建立逻辑部分 但与 div SPAN 不同 div 工作于文本块一级 它在它所包含的 HTML 元素的前面及