span 元素

Wednesday, 03 March 2010 17:41

<span> 元素的使用方式与 <div> 元素相同。区别是 <div> 用于包含块级元素 (如 <p>，<h1> 到 <h6>，<table>，等等)，而 <span> 元素用于包含某个块级元素中的一部分 (如，一些文本)。

<span> 标签的用法体现在下面两个 XHTML MP/WAP CSS 示例中。两个 XHTML MP/WAP CSS 示例在手机浏览器里的结果相同。两个示例分别用 class 属性和 style 属性演示了 <span> 标签的用法。

(span1.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
  "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      .wcss_class {
        color: blue
      }
    </style>
    <title>WCSS Tutorial</title>
  </head>

  <body>
      <h1><span class="wcss_class">Table of Contents</span></h1>
      <hr/>
      <p>
        <span class="wcss_class">WCSS Tutorial</span> Chapter 1<br/>
        <span class="wcss_class">WCSS Tutorial</span> Chapter 2<br/>
        <span class="wcss_class">WCSS Tutorial</span> Chapter 3<br/>
      </p>
  </body>
</html>

(span2.xhtml)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
    "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WCSS Tutorial</title>
  </head>

  <body>
      <h1><span style="color: blue">Table of Contents</span></h1>
      <hr/>
      <p>
        <span style="color: blue">WCSS Tutorial</span> Chapter 1<br/>
        <span style="color: blue">WCSS Tutorial</span> Chapter 2<br/>
        <span style="color: blue">WCSS Tutorial</span> Chapter 3<br/>
      </p>
  </body>
</html>