下载掌阅APP，畅读海量书库
立即打开
本节将详细讲解页面头部、页面公共部分、页面框架和每个页面的XHTML代码的编写。语义和结构良好的XHTML代码不仅在制作网站时省时省力，更有利于提高网站排名，因此XHTML的编写虽然简单但很重要。
编写XHTML代码可以使用的编辑器有三种，第一种是记事本，第二种是notepad++、editPlus等，第三种是Dreamweaver。这三种编辑器各有利弊，第一种快速，在任何情况下只要打开记事本就可以制作网页，不需要下载其他软件，第二种适合对XHTML代码熟练掌握的人员，第三种是所见即所得的软件，直观表现更强，缺点是软件较大。开发人员可以根据自身情况选择运用。
网站所有页面使用相同的XHTML框架。网站所有XHTML代码用一个id为doc的div标签包裹。里面再分为三部分：头部、主体内容和页脚，id分别为hd、bd和ft。页面的XHTML框架编写如下：
代码2-1
01 <div id="doc"> 02 <!--start of hd--> 03 <div id="hd" class="cf"></div> 04 <!--end of hd--> 05 <!--start of bd--> 06 <div id="bd" class="cf"></div> 07 <!--end of bd--> 08 <!--start of ft--> 09 <div id="ft" class="gray font-tahoma"> </div> 10 <!--end of ft--> 11 </div>
第01行和第11行是页面最外层容器#doc，第01行是#doc的开始标签，第11行是#doc的结束标签，每一对标签都要闭合，有开始就要有结束。第03行是页面头部的最外层容器。第06行是页面主体内容的最外层容器。第09行是页脚的最外层容器。第02行和第04行是标识页面头部在哪开始和在哪结束的注释，第05行和第07行是标识页面主体内容在哪开始和在哪结束的注释，第08行和第10行是标识页脚在哪开始和在哪结束的注释。这些注释不是必须的，但是为了将来维护和方便其他人阅读代码，编写适当的注释体现了开发人员良好的职业素质。
XHTML文件的结构包括头部（Head）和主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
页面头部包括两部分，第一部分包括网站标志、日期和邮箱；第二部分包括导航和banner。
第一部分的XHTML代码编写如下：
代码2-2
01 <div class="logo-date-mail cf"> 02 <h1 class="logo"><a href="index.html">Communications</a></h1> 03 <div class="date-mail"> 04 <div class="date">今天是2012年5月9日</div> 05 <div class="mail"><a href="mailto:co-mail@communications.com">mail</a></div> 06 </div> 07 </div>
第02行是网站标志。标志一般都有链接，地址指向网站的首页，更方便用户在网站的首页和各页面之间进行切换。标志是一个网站中最重要的组成部分，用h1有利于搜索引擎抓取，h1标签不易使用过多，一般一个就足够了。h1里面的a标签中填写网站的主体或公司名称Communications，不仅标识了此处代码的含义，而且保证了在不加载CSS文件时页面仍有良好的可读性。
第04行是网站的日期，这里是一段普通的文字，用一个类名为date的div包括。
第05行是网站的邮箱，这里是一个链接，链接里面的文字mail同样是为了保证在不加载CSS文件时页面仍有良好的可读性。
第二部分的XHTML代码编写如下：
代码2-3
01 <div class="nav"> 02 <ul class="cf"> 03 <li class="first"><a href="index.html">公司首页</a></li> 04 <li><a href="#">关于我们</a></li> 05 <li><a href="products.html">公司产品</a></li> 06 <li><a href="services.html">公司服务</a></li> 07 <li><a href="#">联系我们</a></li> 08 </ul> 09 </div> 10 <div class="banner"><img src="images/banner.jpg" /></div>
第02~08行是网站导航中包含的文字链接列表。XHTML中的ul标签表示无序列表，无序列表是一个项目的列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等。所以导航用ul标签，每个li标签中包含a标签，a标签中填写导航文字。
页脚是一段文字，用一个div包含相关的内容。页脚的XHTML代码编写如下：
<div id="ft" class="gray font-tahoma">© 1998~2012. Communications Co.版权所有</div>
页面的公共部分除了页头和页脚外，还包括主体内容各模块的标题。如图2.10所示，灰色阴影覆盖的区域是各页面的公共部分。
图2.10 网站所有页面的公共部分
主体内容各模块的标题的XHTML代码编写如下。
代码2-4
01 <h2><span class="blue">公司</span>简介</h2> 02 <h2><span class="blue">公司</span>新闻</h2> 03 <h2><span class="blue">特色</span>产品</h2> 04 <h2><span class="blue">服务</span>项目</h2>
第01~02行分别是首页的公司简介和公司新闻的标题。第03~04行分别是公司产品页的特色产品和服务项目的标题。
首页主体内容包括公司简介和公司新闻两部分。公司简介包括标题和详细内容，详细内容是3段文字和一张图片。图片和第一段文字是图文环绕的形式，因此图片和文字要包含在一个p标签中。公司新闻包括标题和详细内容，详细内容是一个由日期和文字组成的列表，这个列表可以用dl标签，里面的dt填充日期，dd填充文字。首页主体内容的XHTML代码编写如下：
代码2-5
01 <div class="introduce"> 02 <h2><span class="blue">公司</span>简介</h2> 03 <div class="content"> 04 <p><img src="images/pix1.gif" />Communications通信是全球领先的综合通信解决方案提供商。公司为全球160多个国家和地区的电信运营商和企业网客户提供创新技术与产品解决方案。</p> 05 <p>Communications拥有通信业界最完整的、端到端的产品线和融合解决方案，通过全系列的无线、有线、业务、终端产品和专业通信服务，灵活满足全球不同运营商和企业网客户的差异化需求以及快速创新的追求。</p> 06 <p class="green">未来，公司将继续致力于引领全球通信产业的发展，应对全球通信领域更趋日新月异的挑战。</p> 07 </div> 08 </div> 09 <div class="news"> 10 <h2><span class="blue">公司</span>新闻</h2> 11 <dl> 12 <dt class="deepblue font-tahoma">2012-4~13</dt> 13 <dd class="mt8 mb45"><a href="#" target="_blank">Communications通信业界首次实现400Gb/s信号超5000公里超长距离传输。</a></dd> 14 </dl> 15 <dl> 16 <dt class="deepblue font-tahoma">2012~3~25</dt> 17 <dd class="mt8"><a href="#" target="_blank">Communications通信携手英国电信获GTB创新大奖建设全球最快XG-PON网络。</a></dd> 18 </dl> 19 </div>
第01~08行是公司简介，其中第02行是标题，第03~07行是详细内容。第09~19行是公司新闻，其中第10行是标题，第11~18行是详细内容，第11~14行和第15~18行的结构完全相同，它们共同构成了一个日期和文字的列表。
XHTML用什么标签不是固定的，也不是规定好的，具体要根据标签的语义来决定，比如p标签表示段落，ul表示无序项目列表，ol表示有序项目列表，dl表示自定义项目列表等，明白标签的语义后自然而然就知道该用什么标签来写最好。
公司产品页的主体内容包括特色产品和服务项目两部分。特色产品包括标题和详细内容，详细内容又分为三个部分，每个部分由一张图片、一个小标题及一段文字组成。小标题和文字用dl标签，其中dl中的dt填充小标题，dd填充文字。服务项目包括标题和详细内容，详细内容是一段文字和文字链接组成的列表，这段文字用p标签包含文字，文字链接列表用ul标签，里面的li标签填充文字。公司产品页主体内容的XHTML代码编写如下：
代码2-6
01 <div class="products"> 02 <h2><span class="blue">特色</span>产品</h2> 03 <div class="pro-item"> 04 <div class="photo"><img src="images/pix2.jpg"/></div> 05 <dl> 06 <dt><a href="#" target="_blank" class="green">无线业务</a></dt> 07 <dd>涵盖所有无线制式，倡导融合的单一网络Uni-RAN，即通过一种基站就可以构建包含所有无线制式的接入网。</dd> 08 </dl> 09 </div> 10 <div class="pro-item"> 11 <div class="photo"><img src="images/pix3.jpg"/></div> 12 <dl> 13 <dt><a href="#" target="_blank" class="green">手机产品</a></dt> 14 <dd>提供手机、移动宽带终端、家庭桌面式融合终端等全系列产品的个性化定制服务。</dd> 15 </dl> 16 </div> 17 <div class="pro-item"> 18 <div class="photo"><img src="images/pix4.jpg"/></div> 19 <dl> 20 <dt><a href="#" target="_blank" class="green">核心网络</a></dt> 21 <dd>全球唯一的全制式核心网系统供应商，能够为世界所有移动通信标准提供设备和服务。</dd> 22 </dl> 23 </div> 24 </div> 25 <div class="services-lists"> 26 <h2><span class="blue">服务</span>项目</h2> 27 <p>服务项目包括网络规划和建设、客户支持服务、管理服务、电信专业服务、知识服务在内的端到端综合解决方案。</p> 28 <ul> 29 <li><a href="#" target="_blank" class="green">提供技术支持和快速反应的服务</a></li> 30 <li><a href="#" target="_blank" class="green">提供可定制的通信网络运维和管理服务</a></li> 31 <li><a href="#" target="_blank" class="green">提供多种类型的技术服务</a></li> 32 <li><a href="#" target="_blank" class="green">推出IT服务整体解决方案</a></li> 33 <li class="last"><a href="#" target="_blank" class="green">实力雄厚的兼职讲师队伍</a></li> 34 </ul> 35 </div>
第01~24行是特色产品，其中第02行是标题，第03~09行、第10~16行、第17~23行分别是三个结构相同的XHTML代码模块，它们共同组成了一个由图片、小标题、文字组成的列表。第25~35行是服务项目，其中第26行是标题，第27行是一段话，第28~34行是一个ul列表，里面有5个li标签，即第29~33行共同组成了一个文字链接列表。
前面对网站首页各个模块的XHTML代码进行了逐一编写，如图2.11所示是这些模块组成的首页XHTML框架图，说明了层的嵌套关系。
图2.11 首页XHTML框架图
在这些XHTML代码的基础上增加页面的<!DOCTYPE>声明及html头部元素，就是首页的完整XHTML代码。完整的首页XHTML代码如下：
代码2-7
01 <!DOCTYPE HTML> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <title>公司首页</title> 06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 07 </head> 08 <body> 09 <div id="doc"> 10 <!--start of hd--> 11 <div id="hd" class="cf"> 12 … 18 </div> 19 <div class="nav"> 20 … 27 </div> 28 <div class="banner"><img src="images/banner.jpg" /></div> 29 </div> 30 <!--end of hd--> 31 <!--start of bd--> 32 <div id="bd" class="cf"> 33 <div class="introduce"> 34 … 40 </div> 41 <div class="news"> 42 … 51 </div> 52 </div> 53 <!--end of bd--> 54 <!--start of ft--> 55 <div id="ft" class="gray font-tahoma">© 1998~2012. Communications Co.版权所有</div> 56 <!--end of ft--> 57 </div> 58 </body> 59 </html>
第01行是页面的<!DOCTYPE>声明。第03~07行是html头部元素。第02行和第59行是页面的html标签，对应图2.11中html{}。第08行和第58行是页面的body标签，对应图中body{}。第09行和第57行是页面最外层容器，对应图中#doc。第10~30行是页面头部的XHTML代码，对应图2.11中的#hd{}区域。第31~53行是页面主体内容的XHTML代码，对应图2.11中的#bd{}区域，其中第33~40行是公司简介，对应图2.11中的.introduce{}区域，第41~51行是公司新闻，对应图2.11中的.news{}区域。第54~56是页脚的XHTML代码，对应图2.11中的#ft区域。
前面对公司产品页各个模块的XHTML代码进行了逐一编写，如图2.12所示是这些模块组成的公司产品页的XHTML框架图，说明了层的嵌套关系。
图2.12 公司产品页的XHTML框架图
在这些XHTML代码的基础上增加页面的<!DOCTYPE>声明及html头部元素，就是公司产品页的完整XHTML代码。完整的公司产品页的XHTML代码如下：
代码2-8
01 <!DOCTYPE HTML> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <title>公司产品</title> 06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 07 </head> 08 <body> 09 <div id="doc"> 10 <!--start of hd--> 11 <div id="hd" class="cf"> 12 … 18 </div> 19 <div class="nav"> 20 … 27 </div> 28 <div class="banner"><img src="images/banner.jpg" /></div> 29 </div> 30 <!--end of hd--> 31 <!--start of bd--> 32 <div id="bd" class="cf"> 33 <div class="products"> 34 … 56 </div> 57 <div class="services-lists"> 58 … 67 </div> 68 </div> 69 <!--end of bd--> 70 <!--start of ft--> 71 <div id="ft" class="gray font-tahoma">© 1998~2012. Communications Co.版权所有</div> 72 <!--end of ft--> 73 </div> 74 </body> 75 </html>
第01行是页面的<!DOCTYPE>声明。第03~07行是html头部元素。第02行和第75行是页面的html标签，对应图中html{}。第08行和第74行是页面的body标签，对应图中body{}。第09行和第73行是页面最外层容器，对应图中#doc。第10~30行是页面头部的XHTML代码，对应图2.12中的#hd{}区域。第31~69行是页面主体内容的XHTML代码，对应图2.12中的#bd{}区域，其中第33~56行是特色产品，对应图2.12中的.products{}区域，第57~67行是服务项目，对应图2.12中的.services-lists{}区域。第70~72是页脚的XHTML代码，对应图2.12中的#ft区域。