SoberMa

前面的一些文章中，我们了解了什么是Web标准以及使用Web标准的种种好处，你是否已经动心了呢？是的，我动心了，我是一名Web的前端开发人员，或者我想成为一名Web前端开发人员为中国的Web事业做点自己的贡献，但是，前面你介绍的太笼统了，我想动手去学习了，快告诉我都要学些什么具体的知识和技术吧！

是的，这就是我即将要讲到的，Web前端开发过程之中需要遵循的具体的Web标准。而在这之前，我们首先需要了解的一种理念就是，在Web前端的开发制作之中，会分为结构、表现和行为三方面，而依据标准的规范要求，这三个方面应该是相互分离的。

下面我们将按照结构、表现和行为三个层面对Web前端开发过程中需要遵循的Web标准进行一个较为细致的分析和描述。

结构化文本标记语言HTML

结构化标记，这是每个Web文档的基础所在。结构化文本标记语言英文简称HTML或者XHTML，是由一些列包含属性的元素组成的标记语言。这些元素用于标记文档中各种不同类型的内容，并规定每部分的内容在Web浏览器中如何被渲染。

HTML的元素用来定义内容类型，而属性用来定义这些元素的附加信息，例如识别元素的ID，或一个链接指向的位置。必须牢记的一点是，标记应该尽可能地语义化，即应该尽可能精确地去描述内容的功能。下图是一个典型的HTML元素的结构剖析图。

HTML元素结构剖析图

HTML是HyperText Mark-up Language的英文缩写，中文翻译为超文本标记语言。那么XHTML又是哪路大仙呢？XHTML是The Extensible HyperText Markup Language的英文缩写，可以翻译为可扩展超文本标识语言。

HTML是一种基本的Web标记语言，XHTML是一个基于XML的Web标记语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML。本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。

我是该用HTML呢，还是XHTML？两者之间到底有什么差别呢？其实它们的功能是大体一样的，两者最大的差别是在结构上。下面我们用一个表格的形式对比一下两者之间的具体差别。

结构化标记的HTML是Web标准之中的最为基础和核心的内容，它是用来描述Web文档的基本结构骨架的。HTML语法简单，但是用起来并把它用好却也不是一件容易的事情，你不但要深入了解每个结构标签的含义，更要去深入研究各个标签的结构语义和具体的应用语境和环境。同时，HTML是后续学习表现语言CSS和文档对象模型DOM和行为脚本语言JavaScript的基础，因而这一部分的内容需要深入、仔细得去进行学习和掌握。后续我们会按照语义分类的方式对HTML进行深入细致的讲解。

表现类语言CSS

CSS，Cascading Style Sheets的英文缩写，直译过来的汉语意思是层叠样式表，是用来描述Web文档的外观表现的。也就是在HTML搭建好的骨架上面去进行合理的布局和装修施工，以还原Web页面的设计原型。

一开始的时候，CSS主要用来定义一些字体的属性和外观，随着主流浏览器对CSS这一表现类语言的支持，现在CSS开始越来越多地应用到Web前端的设计还开发之中，用来描述Web文档的布局以及视觉外观。

使用CSS，你不但可以为HTML元素改变或添加颜色、背景、字体大小、样式，还可以在网页内不同的位置对元素进行定位。使用CSS来应用样式，主要有三种方式：一、 对元素的默认属性进行重新定义；二、针对一个ID应用一种样式；三、针对一个类（class）应用一种样式。下面我们用具体实例分别讲述一下这三种方式的实现方式和应用方法。

• 1、对元素的默认属性进行重新定义。通过向某一个HTML标签元素设定样式规则，可以改变这个元素标签的默认浏览器渲染规则。例如，通常Web文档中的段落文本默认是现实为黑色的，通过为p标签设置合适的属性就可以改变这一默认属性。
  

  p {color:red;}

  这样，所有在<p>跟</p>之间包含的段落文本的颜色就会变成红色了。

• 2、针对一个ID应用一种样式。定义一个ID，并将这个ID赋予某个HTML元素标签（在一个Web页面中，每一个ID只能使用一次），这样就可以更好地控制这个唯一ID的相关属性了。例如，上面的例子，你不想更改所有段落的文本颜色，而只想改变某一个段落的颜色，那么只需要在这个段落上添加一个唯一ID：
  

  <p id=”important”>这里是一个段落文本</p>

  然后对其添加如下的CSS规则：

  #important {color:red;}

  这样做，该CSS规则只会应用于Web页面中ID属性为important的段落（#是CSS中用于指明ID的符号）。

• 3、针对一个类应用一种样式。类与ID类似，它与ID的区别在于每个Web页面中你可以有多个相同的类。接着上面为段落改变文字颜色的例子讲，如果希望网页中的前两个段落的文字显示红色，你可以分别向这两个段落添加类：
  

  <p class=”important”>这里是第一个段落文本</p>

  <p class=”important”>这里是第二个段落文本</p>

  然后，添加如下的CSS规则：

  .important {color:red;}

  这样，添加了名为important的类的前两个段落文本的颜色就变成红色了。需要指出的是，在这个例子中，important是一个类，而不是一个ID（.是CSS中用于指明“类”的符号）。

这上面的几个例子之中我们可以看到，为了用CSS可以更加高效地去控制页面的细节展现，良好的HTML结构是必不可少的。后期在我们讲到用CSS来控制布局的时候你会发现结构化、语义化的HTML也是必不可少的。当然，良好的HTML和CSS也是DOM和JavaScript的基础，因而，前期HTML和CSS这两个方面的内容我们必须有一个良好的、扎实的基础。

文档对象及行为脚本语言

文档对象模型DOM是Document Object Model的英文缩写，是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。由于它是基于信息层次的，因而
DOM 被认为是基于树或基于对象的。

最后再来看行为脚本语言JavaScript，它是一种用于向网页中添加行为的脚本语言，可以用于检验你输入某一个表单里的数据的有效性，提供拖放功能，改变漂浮广告的样式，使页面元素如菜单等动起来，处理按钮功能等等。最新的JavaScript是这样工作的：找到一个目标HTML元素，然后对该元素进行一些处理。这和应用CSS差不多，不过两者的运行方式、语法等，则有相当大的差别。

JavaScript是比HTML和CSS更为复杂和庞大的主题，因此在这本书里，我们不去学习太复杂高深的主题，而是以把HTML和CSS的基础及高级应用学好为主。如有需要，我们可以后续再出一些关于文档对象模型DOM和行为脚本语言JavaScript的相应文章或者探析方面的书籍。

Web标准层面的主要构成要素HTML,
CSS和JavaScript其实并不神秘，它们都是Web演进的自然产物。如果你已具有一些HTML方面的知识，完全不用丢弃。你所具有的所有HTML知识，依然很有用，你所需要做的只是以一种与过去不同的方式来处理一些事情，并在写HTML标记时更加仔细和认真一些而已。

使用Web标准进行Web前端开发，除可以让你把Web前端开发工作做得更好以外，本身也是很有意义的。一些人不愿意使用Web标准进行Web前端开发，其理由是这样做很耗时，而且必须费很大力气进行跨浏览器显示的页面布局。但是，使用非基于Web标准的方法进行页面布局，对于Web页面的跨设备访问并在未来更高版本的浏览器中正常显示是几乎不可能的事情。