Span与div
 |
本条目翻譯品質不佳。 |
| HTML |
|---|
 |
在 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 不只是应用于视觉上的样式: 当由语音浏览器 (en: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 (en:Dynamic web page) 上，这也许包括自动页面测试工具如 HttpUnit，xUnit 家族成员之一，的使用，以及应用于表单驱动的网站时的负载或压力测试工具如 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>
参考资料 [编辑]
- ^ 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
spanordivelement whoseclassattribute indicates the reason for formatting the text as italic: [example ...]<span class="species">..." - ^ 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 useul,ol, ordlinstead of the current wrapper element. [...] For example to remove the bullets add this rule to the page's CSS stylesheet: [...]"
