项目3静态网站开发基础全解课件.ppt

《项目3静态网站开发基础全解课件.ppt》由会员分享，可在线阅读，更多相关《项目3静态网站开发基础全解课件.ppt（53页珍藏版）》请在三一办公上搜索。

1、,静态网站,项目 3,授课教师：姓名,电子商务网站建设与维护,开发基础,实战型电子商务系列“十二五”规划教材,项目三 静态网站开发基础,项目概述,本项目的工作任务主要是让学生在掌握Html代码构成及站点策划的前提下，能够借助Dreamweaver软件完成静态页设计或修改静态页，搭建起完整的静态网站，有助于后续动态网站开发的学习。,学习目标,能力目标能够准确掌握电子商务网站建设的基础工作；能够熟练使用Dreamweaver等建站工具；能够熟练掌握CSS等网页布局技巧；能够独自分析常见的网页Html代码。知识目标了解电子商务网站的一般概念；了解常见网页的制作过程；了解静态网站的建站过程。,Cont

2、ents,案例 库花花店网站,案例 库花花店网站,支持企业及背景,库花网有十余年的线下实体花店的运营经验，在全国数十个大中型城市拥有直营的大型鲜花店近百家。在全国约近5500余家优质的实体花店合作联盟，各地花店均经过精心评估与筛选，确保产品质量与配送服务保障。,案例 库花花店网站,案例详解,作为企业门户网站，网站的创建是否合适，直接关乎到该网站所给更多用户带来的用户体验及对其品牌的认可。真正迎合满足广大消费者传递情感的需求，引导花卉网络消费的生活方式，努力向每一位用户提供最时尚前沿的花艺作品和花意理念、最优异的用户体验、最卓越的产品品质，是库花网服务宗旨之一，为与传统线下门面直销相结合，库花决

3、定建设自己的线上销售门店，库花网。本案例将以库花网静态电子商务企业站建设为原本，详细讲解静态网站建设中需要注意及考虑到的因素。,案例 库花花店网站,案例详解,案例 库花花店网站,任务1 库花网网站策划,网站的整体定位。网站可以是大型商用网站、小型电子商务网站、门户网站、个人主页、科研网站、交流平台、公司和企业介绍性网站以及服务性网站等。首先应该对网站的整体进行一个客观的评估，同时要以发展的眼光看待问题，否则将带来许多升级和更新方面的不便。,1.网站定位,库花网定位于小型电子商务网站，用户通过该网站即可了解库花品牌旗下鲜花库存信息、以及库花资讯及相关鲜花品牌优惠情况等。库花网向用户展示了库花企业

4、形象的同时方便用户，引导花卉网络消费模式。,案例 库花花店网站,任务1 库花网网站策划,2.网站栏目及内容,网站的主要内容。如果是综合性网站，那么对于新闻、邮件、电子商务和论坛等都要有所涉及，这样就要求网页要结构紧凑、美观大方。库花网是以商品展示位重点，其在图片、文字描述方面对网站布局有较大的要求；网站关于我们、联系我们等相关栏目浏览点击相对较少。,案例 库花花店网站,任务1 库花网网站策划,3.网站目录与结构,网站的目录是指在创建网站时建立的目录，要根据网站的主题和内容来分类规划，不同的栏目对应不同的目录，在各个栏目目录下也要根据内容的不同对其划分不同的分目录，企业网站目录结构最好控制在3层

5、，最多4层。另外给目录起名的时候要尽量使用能表达目录内容的英文或汉语拼音，这样会更加方便日后的管理和维护，同时网站布局网站结构应遵守以下三个原则。,可读性。站点中，文件夹、文件、元素的命名要具有一定的意义，通常使用英文或汉语拼音命名；如关于我们文件夹可以是aboutabout_us等；规范性。站点中，文件夹、文件、元素命名要规范，布局要合理；清晰性。站点中，不要包含无用的文件，这样更大程度节约空间。,案例 库花花店网站,任务1 库花网网站策划,4.链接结构,网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象地说：每个页面都是一个固定点，链接则是在两个固

6、定点之间的连线。一般的，建立网站的链接结构有以下两种基本方式:,树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就像蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。规范性。站点中，文件夹、文件、元素命名要规范，布局要合理；,星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自

7、己在什么位置，看了多少内容。,案例 库花花店网站,任务1 库花网网站策划,5.网页布局,层叠样式表的应用。在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。,表格布局。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当使用了过多表格时，页面下载速度受到影响。,框架布局。由于它的兼容性，框架布局并没有被所有人接受。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。

8、,案例 库花花店网站,任务2 库花网网站建设,1.创建站点,在完成网站建设初期的规划与设计后，库花网开始着手于企业网站的制作与建设。本案例将以CSS布局为主，详细讲解静态企业网站页面设计以及网页设计中应注意的问题。,第一步：创建站点站点是一个存储区，它存储了一个网站包含的所有文件。建立站点时，一般在计算机上建一个文件夹，然后把制作的所有网页及图片放在此文件夹中，最后把这个文件夹上传到WEB服务器，供网上的所有用户浏览。,案例 库花花店网站,任务2 库花网网站建设,1.创建站点,制作一个网站，首先需要在本地计算机上制作这个网站，放置在本地磁盘上的网站被称为本地站点，位于WEB服务器的网站被称为远

9、程站点。Dreamweaver CS5提供了对本地站点和远程站点强大的管理功能。,选择菜单【站点】【新建站点】，（或选择【管理站点】【新建】）。如图所示。,案例 库花花店网站,任务2 库花网网站建设,1.创建站点,制作一个网站，首先需要在本地计算机上制作这个网站，放置在本地磁盘上的网站被称为本地站点，位于WEB服务器的网站被称为远程站点。Dreamweaver CS5提供了对本地站点和远程站点强大的管理功能。,在【站点名称】文本框中输入一个站点名，如输入“库花网”。该站点名出现在【站点】窗口和【管理站点】中，站点名称可以是英文或中文字符。,在【本地站点文件夹】需要输入指定本地用于存放所有站点文

10、件的文件夹。当Dreamweaver CS5解析相对根的链接时，就建立相对于此文件夹的链接。单击该文本框右边的文件夹图标，选择想要的文件夹，如“E:mysite”。也可以在文本框中直接输入路径和文件名。,案例 库花花店网站,任务2 库花网网站建设,1.创建站点,建立站点的目录结构。在文件面板的站点目录下单击鼠标右键，从弹出菜单中选择【新建文件夹】项，然后给文件夹命名。这里我们新建3个文件夹，分别命名为：images、css、js用来分别存放图片、样式和js信息。,站点是文件与文件夹的集合，下面我们在前面建立“库花网”站点的基础上，新建站点的目录结构，并进行站点的文件管理。单击【保存】按钮，完成

11、设置。此时，弹出【文件面板】,案例 库花花店网站,任务2 库花网网站建设,2.规划网站,每一个网站在设计前，研发人员都会对网站进行初期的整体规划，可以使用Fireworks或Word等工具对网页框架进行整体规划，库花网研发人员采用Fireworks对网站进行初期规划、首页界面如图所示：,图3-7库花网网站首页及页面栏目分布,服务信息与页尾区,其他栏目,新品推荐栏目,侧边栏,焦点图轮换窗口,主导航区,商品分类区,从页面栏目来看，页面主要分为主导航、焦点图轮换、商品分类、侧边栏、新品推荐、其他栏目、信息服务与页尾等多个模块。,案例 库花花店网站,任务2 库花网网站建设,2.规划网站,在进行网页布局

12、设计时，进行界面网页的宽度尺寸设计都比较迷茫，首先，网页的缺省宽度，确定为满足1024px宽度的显示器。这不仅因为1024x768是目前最常见的分辨率，还因为这个宽度对网页最合适：,图3-7库花网网站首页及页面栏目分布,它放得下足够的内容，足够三栏的布局；单行文字不宜太长，1024px已是极限，否则容易产生阅读疲劳；在当前的互联网带宽条件下，网页难以采用大分辨率所要求的大尺寸图片，对于更大的分辨率，网页内容会自动居中。,案例 库花花店网站,任务2 库花网网站建设,2.规划网站,考虑到如上问题，网页的宽度应控制在760-1280px之间，本案例将网站宽度定为980px。该页面结构划分具体如下：,

13、图3-7库花网网站首页及页面栏目分布,导航条，具有按钮特效。Width:960px Height:50px 焦点图轮换窗口，包含促销推广图片等。Width:960px Height:290px Content 网站的主要内容。Width:960px Height：320px侧边框，一些附加信息。Width:240px Height：280px新品推荐，新上架商品推荐。Width：960px Height:300px其他栏目，其他商品推荐。Width:960px Height:200pxFooter 网站底栏，包含版权信息等。Width:960px Height:60px 在确定了网站整体结构后

14、，便可以开始库花网的建立了,案例 库花花店网站,任务2 库花网网站建设,3.创建HTML模板及文件目录等,1.首页制作2.网站栏目布局3.商品分类栏目结构4.侧边栏栏目结构5.新品推荐栏目结构 布局6.巧克力栏目 构图,图3-7库花网网站首页及页面栏目分布,1,5,4,3,2,7,案例 库花花店网站,任务2 库花网网站建设,3.创建HTML模板及文件目录等,2.关于我们页面制作,图3-7库花网网站首页及页面栏目分布,接下来，研发人员开始着手关于我们页面的制作。从网站结构布局来看，网站主要由五个部分构成，即：Main Navigation 导航条；Header 网站头部图标，包含网站的logo和

15、站名；Content 网站的主要内容；侧边框，一些附加信息；Footer 网站底栏，包含版权信息等。如图3-26所示,案例 库花花店网站,任务3 库花网网站测试与优化,1.功能性测试,链接测试测试所有连接能能否按指示确实链接到了该链接的页面；测试所有链接页面是否存在；保证网站上没有冗余或孤立的页面；,开发者语言测试在静态网站页面建设中，为实现更好的功能，必要的特殊开发语言，如JS，Ajax，VBscript等，这些语言实现的功能在不同浏览器或代码书写不规范下都容易产生问题，如焦点图，导航栏等。；,案例 库花花店网站,任务3 库花网网站测试与优化,2.可用性测试,导航测试导航栏位置是否突出、是否

16、直观反映导航信息、能否链接至主要页面并准确无误。导航最为直观，他的位置也非常突出。导航是否直观网站的主要部分能否通过导航引导过去导航能否将用户快速地引导到各个区域，且准确无误。,图形测试图形测试。图形测试包括网站上所有的可视化效果，如：确保每个图形的大小及可用性，是否会导致压面过慢加载速度；验证页面字体是否统一；背景色与字体颜色搭配后的视觉效果；图片格式是否正确，比如JPG或GIF，别用个PNG或PSD等等；,案例 库花花店网站,任务3 库花网网站测试与优化,2.可用性测试,内容测试内容测试包括网站内容是否存在添加错误，及拆入媒体、文字的效果是否可行。,布局测试布局测试的内容包括首页、频道页、

17、栏目页、内容页的页面整体感用户是否舒适、能否凭直觉找到信息，设计风格是否统一，有无缺失,案例 库花花店网站,任务3 库花网网站测试与优化,3.浏览器兼容性测试,网站在IE 6/7/8、Firefox、Chrome、Opera、World等主流浏览器中页面显示是否正确，插件功能是否完备。,网站在IE Tester下测试,案例 库花花店网站,任务3 库花网网站测试与优化,4.SEO测试,META标签的一个很重要的功能就是设置关键字，来帮助你的主页被各大搜索引擎登录，提高网站的访问量。在这个功能中，最重要的就是对Keywords和description的设置。因为按照搜索引擎的工作原理，搜索引擎首先

18、派出机器人自动检索页面中的keywords和description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。因此，关键字是否设立正确，决定了页面的搜索点击率高低与否。,网站页面META标签的编写：,案例 库花花店网站,任务3 库花网网站测试与优化,4.SEO测试,代码是否混乱：,对于标题，要用系统自带的h1-h6，还有b，u标签，这是从搜索引擎优化的角度来说的，同理还有代码的最优化，对于第一点，就是众观全局，找出相同点，同样的代码多次利用，有一个技巧：就是多用class，而不是id，。对于第二点就是尽量少的运用图片，能用代码，颜色实现的效果就不要用图片，但是一定要用图片时就

19、不要节约了。若整个布局运用table，这个在浏览器的兼容性上非常好，但是更新麻烦，页面很大，下载很慢，并且蜘蛛在爬行时，只提取有用的文字、链接信息。大量的table，tr，td是没有用的，网站代码的冗余将对搜索引擎表现不友好，现在比较流行div+css，就实现了代码与内容的分离。,案例 库花花店网站,任务3 库花网网站测试与优化,4.SEO测试,URL设计合理化：,URL编写应从SEO角度着想，使用拼音或英文且不宜过长。这点跟网站栏目设置有所关联，除去基本的网站栏目设置考虑因素，在命名网页名称时，库花网研发人员多以拼音缩写或英文直接命名。,案例 库花花店网站,案例分析,网站定位库花网既然定位于

20、企业官方网站，但其在进入首页时产品介绍及栏目相关布局划分，使用户无法辨别本站到底是花店网站还是企业品牌网站，作为企业官方网站，商品分类栏目占用过多的首屏，误导用户。,库花网的建立打破了传统线下花店销售局面，实现了从传统零售到电商的一步。,案例 库花花店网站,案例分析,网站不足页面与频道。库花网作为一个企业官方网站，在栏目划分上已经满足企业官网的栏目设置，但作为电子商务网站，其在商品展示上并未单独列出商品展示栏目是其网站栏目设计一大败笔，在一级导航中划分商品栏目突出企业主营产品类别，是帮助用户了解企业的重要窗口之一。支付手段有待加强。支付手段、在线支付环节，由于库花网为静态网站，其在电子商务支付

21、环节中，需借助第三方支付平台。网站更新维护困难。库花网是静态网站，然而库花网的主营业务花卉需要根据季节性相关对产品报价、商品展示等作出对应的更改，静态网站中，大量的内容维护会占用工作人员太多的时间和精力。,模块二,一、什么是HTML,二、HTML常用标记,三、什么是CSS,四、从HTML到XHTML,一、什么是HTML,1HTML的概念,HTML全称是“HyperText Markup Language”，即“超文本标记语言”，是用标记（也可称为标签）来描述网页文档结构和表现形式的语言。HTML是WWW（World Wide Web）上发布信息的语言，也是网页制作的标准语言，且独立于各种操作系

22、统平台，特点是功能强大、易学易用。,文档头部.头信息不会显示在浏览器窗口中 文档主体.主体内容显示在浏览器窗口中,一、什么是HTML,（1）文档头部,电子商务教学网站 该页面用来演示文档头部,【例3-1】和标记的使用。,一、什么是HTML,（2）文档主体,看下面的一行代码：这是一个标记，其中包含了多个属性，说明如下：text：用以设定文字颜色。background：设定背景图片的路径。路径可以是绝对路径或相对路径。bgcolor：设定背景颜色。当己设定背景图片时会失去作用。leftmargin：只适用于IE，设定页面左边距，单位为像素。topmargin：只适用于IE，设定页面上边距，单位为像

23、素。,网页文档主体在是指包含在和之间的所有内容，它们将显示在浏览器窗口内。这里的文档主体可以包含文字、图片、表格等各种标记。,模块二,一、什么是HTML,二、HTML常用标记,三、什么是CSS,四、从HTML到XHTML,二、HTML常用标记,1掌握常用排版标记,【例3-2】常用标记使用示例。,最简单网页示例 HTML语言的学习欢迎光临我的主页。今天我们学习了标记（标签）这是我做的第一个网页。大学之道，在明明德，在亲民，在止于至善。知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始，知所先后，则近道矣。,二、HTML常用标记,1掌握常用排版标记,（1）分段标记。段

24、落标记放在一段文字的末尾，就定义了一个新段落的开始。标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用也可省略结束标记。（2）换行标记。放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。由于浏览器会自动忽略源码中空格和换行的部分，这使成为最常用的标记之一。（3）标题标记和。在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以通过设置不同大小的标题，为文章增加条理。,二、HTML常用标记,1掌握常用排版标记,（4）文字标记。该标记可以用来设置文字的大小、字体、颜

25、色。（5）水平线标记。在页面中插入一条水平线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文件中的标记时，会在此处换行，并加入一条水平线段。（6）图片标记。,二、HTML常用标记,1掌握常用排版标记,（7）列表标记。在Word中，经常使用项目符号或项目编号使文档更有条理，更便于阅读。在HTML中也可以建立列表实现类似的效果。创建无序列表，格式如下：第一个列表项 第二个列表项 创建有序列表。通过带序号的列表可以更清楚地表达信息的顺序。使用标记可以建立有序列表，表项的标记仍为。格式为：第一个列表项 第二个列表项,二、HTML常用标记,1掌握常用排版标记,（8）div与spa

26、n标记。标记用来定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分。它常用作严格的组织工具，并且不使用任何格式与其关联。具体来讲，是一个区块容器标记，即之间相当于一个窗口，可以容纳段落、标题、表格、图片等各种HTML元素。可以把之间的内容视为一个独立的对象，主要用于CSS样式的控制。标记被用来组合文档中的行内元素。span 也没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。,二、HTML常用标记,2制作超级链接,（2）超级链接的用法。链接主体说明:href：用来定义超链接文件的路径，可以是相对路径或绝对路径。target：指定打开超链接的

27、窗口或框架。取值有5种情况。_blank：在新窗口中打开链接。_self：在当前窗口打开链接。默认为_self。_top：在整个浏览器窗口中打开链接。_parent：在当前窗口的父窗口打开链接。框架名称：在指定名字的框架中打开链接。name：创建一个“锚点”的标识，让同页面上的另一个位置引用。相当于在某处加了个书签，需要时直接查找书签即可。,（1）超级链接的概念。所谓的超级链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是同一网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件。而在一个网页中用来超链接的对象，可以是文本也可以是一个图片，甚至可以是图片的一部

28、分。,二、HTML常用标记,3使用表格进行网页布局,（2）语法格式。表格的用法如下：表项1表项2表项n 表项1表项2表项n,（1）表格。是网页设计中常用的元素，它有两个常用功能：一是用来显示文字或图片内容；二是用来进行网页布局，使网页更规范、更美观。表格的标记为，使用标记可将一个表格划分成若干表格行，然后通过标记将每个行划分成若干列（单元格）。数据内容放在与之间。单元格中的数据信息可以文字、图片、列表，还可以嵌套表格。,二、HTML常用标记,4使用框架进行网页布局,基本格式如下：,所谓框架网页，是在同一浏览器窗口中同时显示多个不同的HTML文档。利用框架结构可以在页面中同时浏览多个页面，还可以

29、在一个区域中显示所有页面的总索引，通过单击该区域中的超链接，相关网页就会显示在另一个区域中，非常直观，使用户在浏览局部内容时，仍对整个网站的结构有清晰的认识，不至于进入多层链接后而迷失方向,二、HTML常用标记,5制作表单,基本格式如下：,在上网过程中，经常需要通过表单输入一些信息，如用户注册、用户留言、论坛发帖等。填写完信息后，单击提交按钮，就可以将相关信息提交给网站服务器。这里，用户要填写的文本框、下拉列表框等元素组合在一起就称为表单。（FORM）。在后面的动态网站设计中，表单设计非常重要，因为在很多情况下，客户端都是通过表单将信息提交给服务器端，服务器处理后，再将用户所需信息传送回客户端

30、的浏览器上，从而实现客户端与服务器端的互动与交流。,模块二,一、什么是HTML,二、HTML常用标记,三、什么是CSS,四、从HTML到XHTML,三、什么是CSS,1CSS概述,CSS样式表的特点CSS语言是一种标记语言，不需要编译，可以直接由浏览器解释执行。通过设置CSS样式，可以控制网页中文本的行间距、大小、颜色，统一网站的整体风格；可以方便地为网页中的各个元素设置背景颜色和图片，并进行精确的定位控制；可以为网页中的元素设置各种滤镜，从而产生诸如阴影等效果。CSS文件可以用任何文本工具进行开发，如记事本、Dreamweaver等。CSS不是取代HTML语言，而是HTML语言很好的补充，可

31、以弥补HTML在网页格式化功能上的不足。通过单个CSS样式表可以控制多个文档的布局。,CSS样式表的概念。CSS是Cascading Style Sheets（层叠样式表）的缩写，是一种用于控制网页样式的标记性语言。通过使用CSS样式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器加载网页的时间。CSS文件也可以说是一个文本文件，它包含了一些CSS标记，必须使用.css为文件名后缀。,三、什么是CSS,2C

32、SS样式类型,【例3-8】行内样式 行内样式示例 这个页面是红色的,（1）行内样式表（style属性）,三、什么是CSS,2CSS样式类型,【例3-9】内部样式。内部样式示例 body background-color:#FF0000;这个页面是红色的,（2）内部样式表（style标记）,三、什么是CSS,2CSS样式类型,【例3-10】外部样式。外部样式.,（3）外部样式表,三、什么是CSS,3CSS选择器,标记选择器，即为某个具体标记定义样式。一个HTML页面有很多不同的标记组成，如、等，而CSS标记选择器就是声明哪些标记采用CSS样式。因此，每种HTML标记都可以作为相应的标记选择器名称

33、。例如下面这段代码：h1 color:red;font-size:14px;这行代码的作用是将h1标记内的文字颜色定义为红色，同时将字体大小设置为14像素。,CSS样式表的规则由两个主要的部分构成：选择器以及一条或多条声明。格式如下：选择器声明1;声明2;.声明n选择器，顾名思义，就是选择或指定对哪些网页元素进行设置。,三、什么是CSS,3CSS选择器,类选择器，即为一类标记定义样式。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。在 CSS 中，类选择器以一个点号显示，例如：.center text-align:center此时，所有拥有 c

34、enter 类的 HTML 元素均为居中。,CSS样式表的规则由两个主要的部分构成：选择器以及一条或多条声明。格式如下：选择器声明1;声明2;.声明n选择器，顾名思义，就是选择或指定对哪些网页元素进行设置。,ID选择器，ID选择器的使用方法与类选择器基本相同，不同之处在于ID 选择器前面是一个#号，而且，ID选择器只能在HTML页面中使用一次，因此其针对性更强。,模块二,一、什么是HTML,二、HTML常用标记,三、什么是CSS,四、从HTML到XHTML,四、从HTML到XHTML,1.什么是XHTML,（1）XHTML解决了HTML语言所存在的严重制约其发展的问题。比如手机、PDA、信息家

35、电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。（2）XML是WEB发展的趋势。XHTML是当前替代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。（3）XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作。,XHTML指可扩展超文本标签语言（EXtensible HyperText Markup Language），它是以HTML4.0为范本，然后按照XML的语法规则重新对HTML的规则进行了扩展，语法上更加严格。XHTML 是一个 W3C 标准。,2.XHTML特点,End,