4.17　创建span

同div一样，span元素是没有任何语义的。不同的是，span只适合包围字词短语，而div适合包含块级内容（参见3.13节）。

如果你想将下面列出的项目应用到某一小块内容，而HTML又没有提供合适的语义化元素，就可以使用span。

  • 属性，如class、dir、id、lang、title等（参见图4.17.1和图4.17.2）。

  • CSS样式。

  • JavaScript行为。

由于span没有任何语义，因此应将它作为最后的选择，仅在没有其他合适的元素时才使用它。

  1. ...
  2. <body>
  3.  
  4. <h1 lang="es">La Casa Milà</h1>
  5.  
  6. <p>Gaudí's work was essentially useful. <span lang="es">La Casa Milà</span> is an apartment building and <em>real people </em> live there.</p>
  7.  
  8. </body>
  9. </html>

图4.17.1　在这个例子中，我想对一小块文字指定不同的语言，但从句子的上下文看，没有一个语义上适合La Casa Milà的HTML元素。段落之前的h1包含La Casa Milà，它在语义上是合适的，因为这些文字就是后面内容的标题。因此对标题来说，直接在h1中添加lang属性就可以了，不必为了指定语言而包一个span

4.17　创建span - 图1

图4.17.2　span元素没有任何默认样式

添加span的步骤

  • 输入。

  • 如果愿意，输入id="name"，其中name用于唯一地标识span包含的内容。

  • 如果愿意，输入class="name"，其中name是span所属类的名称。

  • 如果愿意，输入其他的属性（如dir、lang、title等）及其值。

  • 输入>结束开始标记。

  • 创建希望包含在span里的内容。

  • 输入。

提示　span没有任何默认格式，参见图4.17.2，但就像其他HTML元素一样，可以用CSS添加你自己的样式（参见第10章和第11章）。

　

提示　可以对一个span元素同时添加class和id属性，但通常只应用这两个中的一个（如果真要添加的话）。主要区别在于，class用于一组元素，而id用于标识页面中单独的、唯一的元素。

　

提示　在HTML没有提供合适的语义化元素时，微格式经常使用span为内容添加语义化类名，以填补语义上的空白。要了解更多信息，参见http://microformats.org。