fbpx
维基百科

Span与div

九月 25, 2023

在HTML中，span与div元素被用来表达一个逻辑区块。div在Dreamweaver也叫“层”，用于标示块级元素，而span标示行内元素。

绝大多数HTML元素具有语义上的意义 - 也就是说，这个元素表示了它的作用。例如，一个p元素应该包含一段文本，而一个h1元素应该包含页面的最高层级标题，可据此区分它们。但span和div没有天生的语义含义，它们可以被用于指定特定的区块或行列。

div就像一个段落，在视觉上于页面隔离出了文档的一部分，它可以包含段落、标题、表格等。span元素的作用是选择特定文本，以便于指定特殊样式。这些特性由层叠样式表（CSS）控制。

实际使用 编辑

span和div

当它们被标记为具有class或id属性时，span和div元素可以表示通过HTML无法描述的信息的类型。例如，<div id="byline">Fred Smith</div>可能被用于指示一个文档中作者的名称，而<span class="date">10th Feb 2010</span>可能被用于具体指示一个日期。

有三个主要的理由使用具有class或id属性的span或div标签：

用CSS指定样式 编辑

参见：层叠样式表和呈现与内容分离

也许span和div元素的最常见用法就是用以携带class或id属性，结合CSS以应用布局，排版，颜色和其它表现性的属性于部分内容。CSS不只是应用于视觉上的样式：当由语音浏览器（英語：voice browser）说出时，CSS样式可以影响语速，重音，丰富度甚至于立体声。

任何HTML内的元素的属性，应该描述它们语义上的目的，而不仅仅是它们在某个特定介质中所想要的表现属性。例如，<span class="red small">password too short</span>在语义上毫无意义，然而<span class="warning">password too short</span>会有用的多。[1]通过对CSS的正确使用，「warnings」可能被渲染为一个红色，小字体，但当被打印出时，它们可能被省略，因为此时对它们做任何事情都为时已晚。也许被说出时它们可以 被给与额外的重音，而且在语速上有一个较小的减少。第二个例子是语义化的标记，而不仅是表现上的，但当结合CSS时满足了这两种目的。

语义清晰度 编辑

这种对部分页面内容进行的分组和标签被引进可能仅仅为了使页面语义上更有意义。

万维网联盟（W3C）已在运行一个主要的语义网项目，旨在使整个web对今天和未来的信息系统越来越有用。

在页面设计过程中，设计者对内容中每一个元素和子元素的确切目的和意义，有一个清晰的想法。如果表达该含义的标准的HTML元素存在，它们就应该被使用。如果没有，就封装一个恰当class或id，span或div。至少，这样做将帮助未来的编辑者维护这个标记。

微格式运动是建立于语义化class的想法之上的一次尝试。例如，微格式敏感软件可能会自动发现如<span class="tel">123-456-7890</span>的元素且允许对该电话号码的自动拨号。

对代码的访问 编辑

一旦HTML或者XHTML的标记被送达网页访问者的客户端浏览器，就会有客户端代码将需要导航于网页的内部结构（或者文档对象模型）的机会。最常见的原因是页面随着产生动态行为的JavaScript。例如，如果把鼠标移至"Buy now"的超链接上，它就意味价格，JavaScript代码可以做到这个，但无论它在标记中的哪里，JavaScript需要标识价格元素。如下的标记将足够：<div id="price">$45.99</div>。

另一个例子是Ajax编程技术，其中，例如，点击一个超链接也许会引发JavaScript代码检索文本寻找新的报价，以代替页面中现有的那个，而不用重新加载整个网页。当新的文本从服务器端返回，JavaScript必须标识页面上的准确的区域，用新的信息代替。

不那么常见，但作为改进对网页的访问，以及必须使用span与div元素的class或id属性以在页面内导航的代码的重要例子包括自动测试工具的使用。在动态产生HTML（Dynamic web page）上，这也许包括自动页面测试工具如HttpUnit（英语：HttpUnit），xUnit（英语：XUnit）家族成员之一，的使用，以及应用于表单驱动的网站时的负载或压力测试工具如Apache JMeter（英语：Apache JMeter）。

滥用 编辑

明智的使用div和span是HTML和XHTML标记中的一个重要部分。

例如，当结构上和语义上一系列项目需要一个外部的包围元素，和进一步为每一个项目提供的容器时，则在HTML中有多种多样可用的列表结构，其中之一可能比一个自制的div和span元素的混合更加可取。[2]

示例：

【優】 

<ul class="menu"> <li>Main page</li> <li>Contents</li> <li>Help</li> </ul>

【劣】 

<div class="menu"> <span>Main page</span> <span>Contents</span> <span>Help</span> </div>

参考资料 编辑

  1. ^ Harold, Elliotte Rusty. Refactoring HTML. Addison Wesley. 2008: 133. ISBN 0-321-50363-5. HTML does not have individual elements representing these uses. Instead they should be indicated by a span or div element whose class attribute indicates the reason for formatting the text as italic: [example ...] <span class="species">... 
  2. ^ Harold, Elliotte Rusty. Refactoring HTML. Addison Wesley. 2008: 184. ISBN 0-321-50363-5. There is no simple way to find all the unidentified lists in a site. [...] They can be marked up in dozens of different ways: as paragraphs, divs, tables, [etc]. Once you've found a list, marking up the individual items is easy. Just use ul, ol, or dl instead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...] 

九月 25, 2023
span与div, 本條目存在以下問題, 請協助改善本條目或在討論頁針對議題發表看法, 此條目需要精通或熟悉相关主题的编者参与及协助编辑, 2014年11月21日, 請邀請適合的人士改善本条目, 更多的細節與詳情請參见討論頁, 此條目翻譯品質不佳, 翻譯者可能不熟悉中文或原文語言, 也可能使用了機器翻譯, 請協助翻譯本條目或重新編寫, 并注意避免翻译腔的问题, 明顯拙劣的翻譯請改掛, href, template, html, class, redirect, title, template, href, wiki. 本條目存在以下問題 請協助改善本條目或在討論頁針對議題發表看法 此條目需要精通或熟悉相关主题的编者参与及协助编辑 2014年11月21日 請邀請適合的人士改善本条目 更多的細節與詳情請參见討論頁 此條目翻譯品質不佳 翻譯者可能不熟悉中文或原文語言 也可能使用了機器翻譯 請協助翻譯本條目或重新編寫 并注意避免翻译腔的问题 明顯拙劣的翻譯請改掛 a href Template D html class mw redirect title Template D d a a href Wikipedia CSD html G13 class mw redirect title Wikipedia CSD G13 a 提交刪除 在HTML中 span与div元素被用来表达一个逻辑区块 div在Dreamweaver也叫 层 用于标示块级元素 而span标示行内元素 绝大多数HTML元素具有语义上的意义 也就是说 这个元素表示了它的作用 例如 一个p元素应该包含一段文本 而一个h1元素应该包含页面的最高层级标题 可据此区分它们 但span和div没有天生的语义含义 它们可以被用于指定特定的区块或行列 div就像一个段落 在视觉上于页面隔离出了文档的一部分 它可以包含段落 标题 表格等 span元素的作用是选择特定文本 以便于指定特殊样式 这些特性由层叠样式表 CSS 控制 目录 1 实际使用 1 1 用CSS指定样式 1 2 语义清晰度 1 3 对代码的访问 2 滥用 3 参考资料实际使用 编辑span和div当它们被标记为具有class或id属性时 span和div元素可以表示通过HTML无法描述的信息的类型 例如 lt div id byline gt Fred Smith lt div gt 可能被用于指示一个文档中作者的名称 而 lt span class date gt 10th Feb 2010 lt span gt 可能被用于具体指示一个日期 有三个主要的理由使用具有class或id属性的span或div标签 用CSS指定样式 编辑 参见 层叠样式表和呈现与内容分离 也许span和div元素的最常见用法就是用以携带class或id属性 结合CSS以应用布局 排版 颜色和其它表现性的属性于部分内容 CSS不只是应用于视觉上的样式 当由语音浏览器 英語 voice browser 说出时 CSS样式可以影响语速 重音 丰富度甚至于立体声 任何HTML内的元素的属性 应该描述它们语义上的目的 而不仅仅是它们在某个特定介质中所想要的表现属性 例如 lt span class red small gt password too short lt span gt 在语义上毫无意义 然而 lt span class warning gt password too short lt span gt 会有用的多 1 通过对CSS的正确使用 warnings 可能被渲染为一个红色 小字体 但当被打印出时 它们可能被省略 因为此时对它们做任何事情都为时已晚 也许被说出时它们可以 被给与额外的重音 而且在语速上有一个较小的减少 第二个例子是语义化的标记 而不仅是表现上的 但当结合CSS时满足了这两种目的 语义清晰度 编辑 这种对部分页面内容进行的分组和标签被引进可能仅仅为了使页面语义上更有意义 万维网联盟 W3C 已在运行一个主要的语义网项目 旨在使整个web对今天和未来的信息系统越来越有用 在页面设计过程中 设计者对内容中每一个元素和子元素的确切目的和意义 有一个清晰的想法 如果表达该含义的标准的HTML元素存在 它们就应该被使用 如果没有 就封装一个恰当class或id span或div 至少 这样做将帮助未来的编辑者维护这个标记 微格式运动是建立于语义化class的想法之上的一次尝试 例如 微格式敏感软件可能会自动发现如 lt span class tel gt 123 456 7890 lt span gt 的元素且允许对该电话号码的自动拨号 对代码的访问 编辑 一旦HTML或者XHTML的标记被送达网页访问者的客户端浏览器 就会有客户端代码将需要导航于网页的内部结构 或者文档对象模型 的机会 最常见的原因是页面随着产生动态行为的JavaScript 例如 如果把鼠标移至 Buy now 的超链接上 它就意味价格 JavaScript代码可以做到这个 但无论它在标记中的哪里 JavaScript需要标识价格元素 如下的标记将足够 lt div id price gt 45 99 lt div gt 另一个例子是Ajax编程技术 其中 例如 点击一个超链接也许会引发JavaScript代码检索文本寻找新的报价 以代替页面中现有的那个 而不用重新加载整个网页 当新的文本从服务器端返回 JavaScript必须标识页面上的准确的区域 用新的信息代替 不那么常见 但作为改进对网页的访问 以及必须使用span与div元素的class或id属性以在页面内导航的代码的重要例子包括自动测试工具的使用 在动态产生HTML Dynamic web page 上 这也许包括自动页面测试工具如HttpUnit 英语 HttpUnit xUnit 英语 XUnit 家族成员之一 的使用 以及应用于表单驱动的网站时的负载或压力测试工具如Apache JMeter 英语 Apache JMeter 滥用 编辑明智的使用div和span是HTML和XHTML标记中的一个重要部分 例如 当结构上和语义上一系列项目需要一个外部的包围元素 和进一步为每一个项目提供的容器时 则在HTML中有多种多样可用的列表结构 其中之一可能比一个自制的div和span元素的混合更加可取 2 示例 優 lt ul class menu gt lt li gt Main page lt li gt lt li gt Contents lt li gt lt li gt Help lt li gt lt ul gt 劣 lt div class menu gt lt span gt Main page lt span gt lt span gt Contents lt span gt lt span gt Help lt span gt lt div gt 参考资料 编辑 Harold Elliotte Rusty Refactoring HTML Addison Wesley 2008 133 ISBN 0 321 50363 5 HTML does not have individual elements representing these uses Instead they should be indicated by a span or div element whose class attribute indicates the reason for formatting the text as italic example lt span class species gt Harold Elliotte Rusty Refactoring HTML Addison Wesley 2008 184 ISBN 0 321 50363 5 There is no simple way to find all the unidentified lists in a site They can be marked up in dozens of different ways as paragraphs divs tables etc Once you ve found a list marking up the individual items is easy Just use ul ol or dl instead of the current wrapper element For example to remove the bullets add this rule to the page s CSS stylesheet 取自 https zh wikipedia org w index php title Span与div amp oldid 73865082, 维基百科，wiki，书籍，书籍，图书馆，

文章

，阅读，下载，免费，免费下载，mp3，视频，mp4，3gp， jpg，jpeg，gif，png，图片，音乐，歌曲，电影，书籍，游戏，游戏。