《第2章 标记语言与网页制作.doc》由会员分享，可在线阅读，更多相关《第2章 标记语言与网页制作.doc（90页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第二章 标记语言与网页制作（1）互联网中，网页是用户与Web交互的主要界面。用户通过网页进行信息浏览和实现与Web应用的交互。本质上，网页是存储在Web服务器上的一个个符合标记语言规范的html、jsp、asp、php等各种类型的文档在浏览器中的显示。标记语言是Web应用的基础。在Web应用中，所有的Web页面都是以标记语言书写的具有特定格式的文档。因此，无论是Web应用还是开发，都应该对标记语言由一个基本的认识。本章主要内容：n标记语言及其发展n超文本标记语言HTMLn网页设计基础n使用Front Page21 标记语言及其发展n标记语言的概念 l广义上，标记语言可以理解为对文档内容进行描述
2、的规范或标准。u如在出版印刷行业，编辑人员在进行文档内容编辑时，对内容所做的标记。通过这些标记符号来表达对内容的排版信息。本节主要内容：n标准通用标记语言SGMLn超文本标记语言HTMLn可扩展HTML规范XHTMLn可扩展标记语言XMLnDHTML和SHTML技术211 标准通用标记语言SGMLn标准通用标记语言SGMLlSGML（Standard Generalized Markup Language，SGML）是一个用来定义在电子表格中如何对文件的结构和内容进行描述的国际标准（ISO-8879）。1969年，IBM设计l意义uSGML定义了标记语言的基本概念，奠定了标记语言的技术基础。l
3、SGML设计的非常复杂，SGML的正式规范达500多页。u现在，在Web中普遍应用的HTML和XML都是在SGML的基础上开发的。可以说，HTML和XML都是SGML的一个子集。作为互联网信息共享的技术规范，标记语言对互联网的发展起到了巨大的推动作用。212 超文本标记语言HTMLnHTML的诞生l由世界上最大的粒子物理研究实验室欧洲核子研究中心CERN（the European Organization for Nuclear Research）于1991年首先提出。l超文本标记语言HTML起源于通用标准标记语言SGML。nHTML规范lHTML文件包含文档数据和标记两部分：u文档数据（显示
4、内容）是显示在Web浏览器中的数据内容。l标记：规定显示内容在浏览器中如何显示。u即显示样式则以“标记”形式出现，规定了这些内容在浏览器中以何种格式、样子呈现给用户。通过使用统一支持HTML的浏览软件，你可以在任意的异构网络环境中阅读同一个文件，而显示结果相同。并可以对文件进行跳越式阅读。nHTML主要版本和发布时间lHTML 2.0：Internet工程任务组中的HTML工作组开发完成了HTML2.0，于1996年发布。lHTML3.2：W3C于1997年1月14日将其列为推荐版本，在HTML2.0标准中添加了诸如：字体、表格、Java程序、浮动、上标、下标等特征。W3C：中文意思是W3C理
5、事会或万维网联盟，1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners leelHTML4.0，W3C于1997年12月18日将其列为推荐版本，第二个稍作修正的HTML 4.0 版本与1998年12月24日发布。uHTML4.0中最重要特征是引入了样式表CSS技术。lHTML4.01：W3C于1999年12月24日将其列为推荐版本，是HTML4.0升级版本，它对原版本做出了部分修正。213 可扩展HTML规范XHTMLnHTML的缺陷lHTML的标记固定。HTML只是一种表现技术，不能表达语义。l由于HTML代码不规范、臃肿，浏览器需要足够庞大和智能
6、，才能够正确显示HTML。l不能适应现在越来越多的网络设备和应用的需要，比如手机、PDA（掌上电脑）、信息家电都不能直接显示HTML。l数据与表现混杂，页面要改变显示，就必须重新制作HTML。nW3C不再继续开发HTMLn可扩展HTMLlW3C制定，2000年1月20日发布XHTML1.0。lHTML向XML过渡的一个桥梁。l2002年8月5日，发布XHTML2.0的第一个工作草案。XHTML研发过程中，不确定因素很多。作为HTML向XML的一种过渡技术，唯一确定的就是它要更好地表达文档中的语义和结构，将文档内容和表现技术能更好地分离。更好地实现互联网中数据交换和展示。214 可扩展标记语言X
7、MLn可扩展标记语言XMLlXML（eXtensible Markup Language），1998年2月10日，XML工作组正式向W3C提交了XML的最终推荐标准，这就是XML1.0标准。l核心思想u实现数据和显示的分离。从而，XML规范定义了标记语言的主要特征。nXML的构成lDTD、XML架构等基本要素。u在XML中，成功地实现了数据和显示的分离。数据通过XML文档描述外，文档的结构可通过DTD文档描述。架构：一个系统草图。架构描述的对象是直接构成系统的抽象组件，各组件之间的连接则明确、相对细致地描述组件之间的通信。l元规范。XML是一种元标记语言，用来定义标记语言的标记语言。n相应规范
8、l可扩展样式语言XSLlXML路径语言XPathlXML查询语言Xqueryl可扩展连接语言XLL l简单应用程序接口SAX等215 DHTML和SHTML技术在Web中，除标记语言HTML、XML外，还有其它一些技术，它们有与HTML类似的名字。如DHTML、DSHTML等。但它们并不是W3C的标记语言规范。而只是一些与Web开发的技术或者说开发模式。nDHTML技术l与Web开发相关的技术或者说开发模式，不是规范。l涉及的内容uHTML4.0规范u客户端脚本语言CSSL（Clent-Side Scripting Language）u文档对象模型DOM（Document Object Mod
9、el），它将网页中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events)，可以通过上面的客户端脚本语言编程控制。u层叠样式表单CSS技术。nSHTML技术lSHTML不是一种HTML规范，而是一种网站设计、开发与维护技术。l是一种Web服务器API，其指令可以在Web服务端运行，以产生动态的html，是一种类似于ASP的基于服务器的网页制作技术。22 超文本标记语言HTML超文本标记语言HTML是在SGML基础上发展起来的，是互联网中应用最广泛的标记语言。被称为Web的通用出版语言。互联网中，绝大多数的网页是用HTML书写的。所有的Web浏
10、览器都支持HTML规范。即使是XML文档，也通常需要通过XSLT转化为HTML格式进行显示。本节主要内容：nHTML标记语法和文档结构n文件头标记及子标记n文件体标记及其属性n文档内容常用标记n表格（table）n表单（form）n层次块标记n对象和脚本程序标记n层叠样式表CSS技术n帧（frame）221 HTML标记语言和文档结构HTML文档是纯文本文件。由“显示内容”和“控制语句”两部分组成。控制语句描述了显示内容以何种形式在浏览器中显示，并负责客户与服务器之间的信息交换。控制语句以“标记（Tag）”形式出现，以区分于显示内容。1标记语法nHTML标记语法l标记（Tag）u标记由封装在小
11、于号（）构成的一对尖括号之中。l标记的两种类型u单标记u双标记单标记：只需单独使用，就能完整地表达意思的一类标记。这类标记的语法是：u一般形式：常用的单标记有换行标记。水平线标记等。双标记：由首标记和尾标记两部分构成，必须成对使用。首标记用于开启某种形式的显示，尾标记用于关闭首标记开启的功能。这类标记的语法是：u一般形式：文档内容例如：text with underline首标记开启下划线功能，尾标记关闭下划线功能。该语句在浏览器中将把文本串“text with underline”加上下划线显示。再如：link text标记一个文本超链接。l标记属性许多单标记或双标记的首标记内，可以包含一些
12、属性。其语法是：u各属性之间无先后次序，属性之间用空格分开。属性也可省略（即取默认值），属性值两侧的双引号（”）可以省略。例如：单标记表示在文档当前位置画一条水平线，一般是从窗口当前行的最左端一直画到最右端。另外，标记还有size、aligh、width等属性。u例如：其中，size属性定义线的粗细，缺省为1。align属性定义表示对齐方式：可取left（左对齐，缺省值）、center（居中）和right（右对齐）。Width定义线的长度，可取相对值（整个窗口的百分比），也可以取绝对数值（屏幕像素点的个数，如width=”400”），缺省值是”100%”。2文档结构nHTML文档结构HTML文
13、档总是以标记开始，以标记结束。中间部分内容是HTML文档。HTML文档总体结构如下：头部信息文档主体（语句部分）其中：之间部分是文件头，由一系列子标记构成。如定义文档标题的标记等，若不需要头部信息可省略。之间部分是文件体。表示正文的开始，一般不能省略。综上可知：HTML文档是由文件头和文件体两部分组成的。222 文件头标记及子标记n文件头l标记对之间的部分称为文件头n子标记l标记l标记l标记l标记l背景音乐标记1标记n标记l用于标识网页主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内。n举例l计算机基础网络教学平台GSL3.0计算机基础网络教学平台GSL3.02标记n标记l用来显示相关
14、主页的信息，为单标记。n标记属性lhttp-equiv属性lname属性两个属性有不同的参数，以实现不同的网页功能。nhttp-equiv属性lhttp-equiv相当于HTTP的文件头，向浏览器传回有用信息，以帮助其正确显示网页内容。一般形式：l超文本传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的Web文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。nhttp-equiv属性参数lcontent-type（显示字符集），设定页面使用的字符集。ulexpires（期限），用于设定
15、网页的到期时间。u一旦网页过期，必须到服务器上重新下载。lpragma（Cache模式），禁止浏览器从本地计算机的缓存中访问页面内容。u该设定将使访问者无法使用脱机浏览功能。lrefresh（刷新），自动刷新并指向新页面。 u浏览器将在60秒后，自动转到new.htm。利用该功能，可以显示一个封面提示页面。若干时间后，再自动转移到其他页面。如果不设置URL项，浏览器则刷新本页。这就实现了Web聊天室定期自动刷新的特性。lwindow-target（显示窗口的设定），强制页面在当前窗口以独立页面显示。u可以用来防止别人在框架里调用自己的页面。nname属性l主要用于描述网页。u与之对应的属性值为
16、content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。一般形式：lnname属性的参数lkeywords（关键字），用来告诉搜索引擎该网页的关键字是什么。uldescription（网站内容描述），用来告诉搜索引擎网站的主要内容。u lauthor（作者），标注网页的作者。u lrobots（机器人向导），用来告诉搜索机器人需要索引的页面有哪些。参数值有：all、none、index、noindex、follow。默认值为all。u3标记n标记l定义文档的基础URL地址。文档中所有相对地址形式的URL都是相对于这里定义的URL而言的。即该标记为相对URL定义绝对URL
17、，用于确定某个文档在Internet上的标准位置。l文档中的标记不能多于一个，必须放于头部，并且应该在任何包含URL地址的语句之前。n标记属性lhref属性：指定文档的基础URL地址，该属性在标记中必须存在。u将文档的基础地址定义为。ltarget属性：该属性同框架一起使用，它定义了当文档中的链接被点击后，在哪一个框架中展开页面。l常用的target的属性值有：_blank：在新窗口中打开链接指向的页面。_self：在当前文档的框架中打开页面。_parent：在当前文档的父窗口中打开页面。_top：在链接所在的完整窗口中展开页面。u表明页面上所有的链接都在新窗口打开。4标记n标记l定义了文档之
18、间的包含。即用于与其它文档的联系。l在HTML的头部可以包含任意数量的标记。n标记属性ltype：用于指定被包含的文件类型。u例如，属性值“text/css”是指包含一个层叠样式表文件。lhref：指向被包含资源的URL地址。ltitle：一个字符串，用于描述该链接关系。lrel：定义HTML文档和所要包含资源之间的链接关系。u例如，如果文档包含一个外部的CSS文件，在文档头部应该定义如下：rel=stylesheet文档的外部样式表5背景音乐标记标记n标记l用于插入背景音乐。l可插入的音频文件类型有：Wave文件（.wav）、Midi序列文件（.midi）、Real Audio文件（.ram
19、，.ra）、AIFF声音文件（.aif，.aifc，.aiff）、AU声音文件（.au，.snd）。n标记属性lsrc：指定音乐文件的URL。lautostart：设置音乐文件播送结束后的处理。如果为：autostart=true，则自动播放音乐；为false（默认值），则结束不播放。lloop：设置是否自动反复播放。Loop=2表示重复两次，infinite表示重复多次。u例如，为网页提供背景音：上面的代码片断为网页设置了一个MIDI文件作为背景音乐。223 文件体标记及其属性n标记l在标记对之间的部分称为html文档的文件体。文件体中所描述的是浏览器中的显示内容。l在标记对之间可包含：、等
20、标记，它们所定义的文本、图像以及超链接等将会在浏览器中显示。n标记属性l有两类：一般属性和事件属性1标记一般属性：用来改变标记默认的显示样式。颜色的设置可以通过HTML语言所给定的颜色常量名。或者RGB（红、绿、蓝三色的组合）。例如“#ff0000”表示红色。各属性也可以结合使用。u例如：设置网页的背景色为红色，文本为蓝色。2标记事件属性当用户对一个页面进行操作时，比如一个Web文档被加载显示或者退出（关闭），再如当进行移动窗口、或者改变文档窗口大小等操作时，会发生相应的事件。而事件的发生，一般将触发一个相应事件程序（事件行为函数）的执行。这些事件在标记中通过事件属性来表达。标记常见的事件属性
21、见下表。l上述事件中，有些事件是标记特有的，有些事件可能存在于多个不同的标记中。l事件属性的值往往是一个JavaScript函数（事件行为函数），来完成Web编程任务。在FrontPage等工具软件中，可以通过行为面板，显示一个标记支持的行为事件，并且可自动生成简单的行为JavaScript代码，从而减少用户书写程序的工作量。具体应用参考后面章节。用来激活相应的事件行为函数。u例如： 例2-1一个简单得HTML文档示例。用“记事本”编写一个简单得HTML文件。A Example of HTMLHTML文档示例 HTML文档为文本标记语言，用户可以使用下述方法创建和编辑HTML文档：1.文本编辑
22、器，如：Windows的“记事本”、“留言板”程序。2.网页制作工具，如FrontPage，Dreamweaver等。存盘，文档的扩展名为htm。然后，再双击该文档，该文档将在浏览器中打开。P52图2-2。也可以使用FrontPage编辑。在浏览器中打开。224 文档内容常用标记HTML文档是由一系列的标记语句组成，标记语句标记了文档内容的显示形式。也就是说，它们是标记的子标记。n文档内容常用标记：l标题、段落标记l文本格式标记u字体标记 u粗体、斜体和下划线标记l图像标记l超链接标记l影像地图标记 l走马灯标记l注释标记对于大多数标记，都可以设置相应的一般属性和事件属性，用来改变标记默认的显
23、示样式或激活事件行为函数。1标题、段落标记指定显示内容的格式，是通过标题、段落等标记来定义的。常用的格式标记有：标题标记n标题标记l有一级到六级标题标记，对应字体逐渐减小。n标记属性lAlign段落标记n段落标记l，标记一个段落，输出位置转到下一行开始，并增加一个空行。n标记属性（同上）换行标记n换行标记l将输出位置转到下一行的开始。水平线标记n水平线标记l水平线标记插入一条水平线。 单标记。n标记属性lwidthu例如：其中每一个标记都可以设置相应的属性。除一般属性外，还可以设置事件属性。u例如，对于段落标记，除了具有align等一般属性外，还具有onClick、onDbClick等事件属性
24、。此处不作详细介绍。2文本格式标记用来定义文本输出的字体和格式。n字体标记l常用的属性有face、size和color，分别设置字体、文字大小和颜色。n粗体、斜体和下划线标记 l、n字体放大、缩小、上标和下标显示标记l、 n、 l标记和标记类似，都是字体加粗标记。 l标记和标记类似，是斜体强调标记。l为打字字体Courier字体，呈现类似打字机或者等宽的文本效果。l为传记引述斜体效果标记。通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。上述标记可以联合使用n标记的联合使用举例3图像标记n图像标记l单标记，用以插入图像。n标记属性lalign：设置图像的对齐方式。lid：指定
25、的图片id号，用于对图像的程序访问。lclass：指定图像所属的类型（样式类）。lname：用于设定图像的名称，用于对图像的程序访问。lsrc：设置插入图像的url地址，即插入图像的路径和文件名。ltitle：属性值为一字符串，鼠标指向图片时，鼠标右下角显示标题文本。lalt：设置图像替代文字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，此图像的显示信息。lborder：设置图片边框。不推荐使用。lheight和width：分别用于设置图像的高度和宽度lhspace和vspace：分别用于设置图像的左右边框大小和上下边框大小。即定义图像左右侧和上下侧的空白。不推荐使用。lismap
26、和usemap：在应用图像地图（map）时使用。ismap表示图像地图的数据存放在服务器中，当鼠标在图像地图上的某个区域上时，可以将此区域的坐标传送给服务器处理。Usemap则用于设定图像地图的名称。n事件属性标记还有大量的鼠标和键盘事件属性。例如：onLoad、onClick、onDbClick|、onMouseOver等。注意：标记并不是真正把图像加入到HTML文档中，而是将标记的src属性赋值为图形文件所在的路径和文件名。例2-2图像标记的应用示例下面代码显示一幅泰山图片，当鼠标指向该图片上时，显示另一幅图片，鼠标移走后恢复原图片。Taishan Introduction注意：nonmo
27、useover：当鼠标指针悬停于某元素之上时执行脚本。onmouseout：当鼠标指针移出某元素时执行脚本。nTitle属性如果在提示信息中，需要换行，可以使用“
”或“
”来完成换行输出。u例如：title=提示：
泰山日出使用标记还可以启动媒体播放机播放影视短片。代码如下：其效果是：当鼠标移到影像片段上上时开始启动媒体播放其播放影像一次。并且还设定了显示播放器控制面板，以便对播放过程进行控制。在网页中加入影像片断与加入普通图片基本相同，如它们都要指定来源、设定大小和替代文字等。但需要说明的是：假如影像片断是要使用“dynsrc”属性，且不能再在同一个标记中使用“sr
28、c”属性。4超连接标记可以定义文本超链接和图像超链接。n超链接的分类l文本超链接u字符串其中：href属性的值是被链接文档的URL地址。字符串为超链接显示的文字，一般显示为蓝色。当鼠标指向这个字符串时，鼠标变成手形，表示当前位置是一个超链接。#name是文档内的书签名，如果指定书签，则进入超链接文档后，将定位到书签所在的文档位置。如果href=”，则定义一个空超链接，即不指向任何超链接位置。如果href=”#name”，则定位到当前文档的name书签位置。l图片超链接u就是将一个图片定义为一个超链接。当鼠标移到图片上时，鼠标变成手形，表示该图片对应一个超链接。n定义书签一个文件，可以用它的UR
29、L来唯一标识。而对于同一个文件的不同部分，可以用书签来标识。在文档内部可以定义书签，书签是通过标记的name属性定义的。l书签文本name属性将放置该标记位置标记为一个名为bookmarkname的书签，书签必须是一个全文唯一的标记串。书签文本可以为空。同一网页内书签不能重名。有书签后，href属性除了指向一个网址外，还可以定位到网页内一个具体的书签（href=”url#bookmarkname”）。n标记其它常用属性ltarget属性：定义超链接打开的目标窗口。一般形式：target=”windows-name”还可以取下面的常量值：u_self（相同框架），_blank（新建窗口），_to
30、p（整页），_parent（父窗口）。ltitle属性：属性值为一字符串，鼠标指向超链接时，鼠标右下角显示标题文本。通过title和href=”空超链接属性结合，可以产生特定的效果。对尚未完成的超链接显示一个提示信息，当超链接页面完成后，再给href属性赋具体URL值。lonclick事件属性n举例用“记事本”编写一个简单得HTML文件。该网页在浏览器中显示如下：Shandong Travel美丽的山东济南青岛 曲阜 泰山 烟台 威海 日照济南 青岛主要旅游网返回关闭窗口在浏览器中的显示5.影像地图标记n什么是影像地图l所谓影像地图，就是在一个图片上定义一系列区域，每个区域对应一个超链接。设置
31、影像地图，首先要通过标记插入一幅图片，并设置的ismap属性（ismap表示图像地图的数据存放在服务器中，当鼠标在图像地图上的某个区域上时，可以将此区域的坐标传送给服务器处理）、usemap属性（usemap则用于设定图像地图的名称），然后再定义相应的热点区域。使用影像地图的一般形式是：n标记形式l其中，为影像地图标记，name属性指定影像地图的名称。中间包含一系列area标记。标记是影像地图标记的子标记，为单标记形式。通过该标记可以在影像地图中设定作用区域（又称“热点”）。当用户鼠标移到某作用区域点击时，执行对应的事件处理函数。n热点标记（）属性lhref属性，用于设定该热点所链接的url地
32、址。lalt属性，用于设定该热点的替代文字。lshape和coords属性，shape和coords是两个主要的参数，用于设定热点的形状和大小。ushape=“rect”，shape=“circle”，shape=poligonshape=”rect”coords=”x1,y1x2,y2表示设定热点形状为矩形，左上角顶点坐标为（x1,y1），右下角顶点坐标为（x2,y2）。shape=”circle”coords=x1,y1,r”表示设定热点形状为圆形，原心坐标为（x1,y1），半径为r。shape=”poligon”coords=”x1,y1,x2,y2”表示设定热点形状为多边形，各定点坐标
33、依次为（x1,y1）、（x2,y2）。标记是在图像地图中划分作用区域的，其划分的作用区域必须在图像地图的区域内，所以在用标记划分区域前，必须用标记来设定图像地图的作用区域，并为指定图像地图设定名称。在Frontpage 2003中设置影像地图标记n首先插入一幅图片，然后在图片上右单击，执行“显示图片工具栏”命令，即可定义热点区域。6走马灯标记n“走马灯”标记l用于标记一行或多行滚动的文本，文本中也可以带有超链接，以增加网页的动态效果。l现在的主流浏览器，如IE，Maxthon，Firefox等均支持标记。n标记常用属性lalign属性：设定活动字幕位置，取值可以是left、center、rig
34、ht、top或bottom。lbgcolor属性：设定活动字幕的背景颜色，一般是十六进制数。ldirection属性：设定活动字幕的滚动方向，取值可以是left、right、up或down。lbehavior属性：设定滚动的方式，主要有三种方式：ubehavior=“scroll”，表示由一端滚动到另一端；ubehavior=“slide”，表示由一端快速滑动到另一端，且不再重复；ubehavior=“alternate” 表示在两端之间来回滚动。lheight和width属性：设定滚动字幕的高度和宽度。lhspace和vspace属性：设定滚动字幕的左右边框和上下边框的宽度。lscrollamount属性：设定活动字幕的滚动距离。lscrolldelay属性：用于设定滚动两次之间的延迟时间。lloop属性：用于设定滚动的次数，当loop=-1，