摘自:JavaScript基础教程(第6版)
因为将使用JavaScript操纵文档中的对象,所以希望以适当的方式编写HTML,使脚本能够轻松地处理HTML。这基本上意味着要编写现代的符合标准的XHTML,并使用CSS将文档的结构与它的表示分隔开。
我们说“现代的XHTML”的意思不仅仅指使用validator.w3.org上的Web工具进行W3C检验。还应该提前考虑可能对页面进行什么操作,并添加适当的标签和属性,使JavaScript能够轻松地访问对象。需要哪些标记呢?很高兴你这么问。

1  结构、表示和行为
CSS是一种用于Web的标准布局语言,可以控制版面、颜色以及元素和图像的大小和位置。你的XHTML文档应该利用外部样式表来定义文档中使用的样式。JavaScript也应该放在外部文档中,这个文档应该只包含JavaScript代码。
按照这种方式进行分隔,站点将包含三种文本文件:
XHTML:包含页面的内容和结构;
CSS:控制页面的外观和表示;
JavaScript:控制页面的行为。
如果这么做,对站点进行修改就会很容易,甚至修改全站点范围的效果也很容易。

2  div和span
如果你习惯于传统的HTML风格,比如将所有东西都放在表格中并使用分隔线GIF来形成想要的布局,那么一些概念对于你是新的——所以这里快速地概述一下。
XHTML有两个只用来标出范围的标签:<div>和<span>。它们用来将内容划分成语义性(semantic)的块,也就是具有相似含义(meaning)的块。单一表格单元格或段落中的内容可能具有共同点,也可能没有,但是每个<div>和<span>中的内容应该具有相似的含义。
那么,<div>和<span>有什么区别呢?<div>是一个块级(block-level)元素,也就是说,在它与前后的元素之间有物理换行。但<span>不是块级的;它是行内的(inline),所以可以将它应用于句子中的短语。
你不需要抛弃原来掌握的HTML知识!但是要掌握这两个标签,你会吃惊地发现经常需要使用它们。

3  class和id
在XHTML文档中,将内容分隔为这些有意义的块。但是在此之后,仍然需要标识出那些需要修改其表示或行为的内容片段。为此,主要使用两个属性:class和id。CSS和JavaScript都可以利用这些属性;CSS样式表在规则中使用这些属性定义页面的外观,而JavaScript文件在代码中使用这些属性来影响页面上元素的行为。
类(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>
id标识出元素对于文档是唯一的。例如,如果在页面上电影院的名称只出现一次,那么可以使用id创建一个样式规则,定义电影院名称的外观是什么样的,如下所示:
#theaterName {
font: bold 28px;
color: #FF0000;
}
在要显示电影院名称时,只需在受影响的标签中添加这个id属性:
<h1 id="theaterName">The Raven Theater Presents:</h1>
上面示例中用于CSS的手段也可以应用于JavaScript。在给div和span(或任何其他元素)分配了类和id之后,就可以修改这些元素:不但可以用CSS修改它们的外观,还可以用JavaScript修改它们的行为。

Back