1.11 编写对JavaScript友好的HTML

因为将使用JavaScript操纵文档中的对象，所以希望以适当的方式编写HTML，使脚本能够轻松地处理HTML。这基本上意味着要编写现代的符合标准的XHTML，并使用CSS将文档的结构与它的表示分隔开。

我们说“现代的XHTML”的意思不仅仅指使用validator.w3.org上的Web工具进行W3C检验。还应该提前考虑可能对页面进行什么操作，并添加适当的标签和属性，使JavaScript能够轻松地访问对象。需要哪些标记呢？很高兴你这么问。

1.11.1 结构、表示和行为

CSS是一种用于Web的标准布局语言，可以控制版面、颜色以及元素和图像的大小和位置。你的XHTML文档应该利用外部样式表来定义文档中使用的样式。JavaScript也应该放在外部文档中，这个文档应该只包含JavaScript代码。

按照这种方式进行分隔，站点将包含三种文本文件：

q XHTML：包含页面的内容和结构；

q CSS：控制页面的外观和表示；

q JavaScript：控制页面的行为。

如果这么做，对站点进行修改就会很容易，甚至修改全站点范围的效果也很容易。

1.11.2 div和span

如果你习惯于传统的HTML风格，比如将所有东西都放在表格中并使用分隔线GIF来形成想要的布局，那么一些概念对于你是新的——所以这里快速地概述一下。

XHTML有两个只用来标出范围的标签：<div>和<span>。它们用来将内容划分成语义性（semantic）的块，也就是具有相似含义（meaning）的块。单一表格单元格或段落中的内容可能具有共同点，也可能没有，但是每个<div>和<span>中的内容应该具有相似的含义。

那么，<div>和<span>有什么区别呢？<div>是一个块级（block-level）元素，也就是说，在它与前后的元素之间有物理换行。但<span>不是块级的；它是行内的（inline），所以可以将它应用于句子中的短语。

你不需要抛弃原来掌握的HTML知识！但是要掌握这两个标签，你会吃惊地发现经常需要使用它们。

1.11.3 class和id

在XHTML文档中，将内容分隔为这些有意义的块。但是在此之后，仍然需要标识出那些需要修改其表示或行为的内容片段。为此，主要使用两个属性：class和id。CSS和JavaScript都可以利用这些属性；CSS样式表在规则中使用这些属性定义页面的外观，而JavaScript文件在代码中使用这些属性来影响页面上元素的行为。

q 类（class）标识出可能会多次使用的元素。例如，假设你要为电影院编写一个页面。可以为电影标题定义一个类，然后通过这个类指定标题应该是14像素、粗体和深蓝色的。

.movieTitle {

font: bold 14px;

color: #000099;

}

应该将页面上的每个电影标题包围在一个标签中，并指定这个标题类型的class属性，如下所示：

<p>We're currently showing <span class="movieTitle"> The Aviator</span> and

→<span class="movieTitle"> The Outlaw</span>.</p>

q id标识出元素对于文档是唯一的。例如，如果在页面上电影院的名称只出现一次，那么可以使用id创建一个样式规则，定义电影院名称的外观是什么样的，如下所示：

#theaterName {

font: bold 28px;

color: #FF0000;