基本的Web技术(II)
发布时间：2011-04-14 13:58:14
第三讲 基本的Web技术（II）
本讲包括: 一、HTML介绍分析
二、HTML的弱点及改进的途径、方向
三、CSS，XSL，DHTML，XML
一、HTML介绍分析
1、HTML---Web文档的描述性标记语言
超文本标记语言HTML是Web的信息出版语言，是设计制作Web页面的基础，通过标记和属性对超文本语义进行全面描述。
当Tim Berners-Lee 设想Web的时候，他所设想的是具有一个公共和容易使用的接口，使任何人能够进行信息发布，为了实现这一点，他和CERN的同事们一起开发了HyperText Markup Language,HTML使用SGML（Standdard Generalized Markup Language）作为基础，以确保为Web开发的新标注语言的跨平台无关性。 超文本标记语言HTML是Web的信息出版语言，是设计制作Web页面的基础，通过标记和属性对超文本语义进行全面描述。
最初的HTML的规则，只用到了SGML的重要元素，这样做的好处是，可大大降低最初HTML的复杂性和网络传输超文本文档的负担。另一个使用SGML作为HTML的基础的好处是，SGML的文档类型定义（DTD）可以使扩展HTML标准变得很容易。
2、HTML的发展过程
同其他的Internet标准一样，HTML也在不断变化之中。下面列出了HTML的发展过程：
---1989.3, Tim Berners-Lee’s famous proposal, “mesh”.
---1992, first version of HTML: has anchors, paragraphs, lists, headings; but no table, no image, no form,，这些标记按文档类型定义中规定的结构化格式来表示文档信息。尽管HTML 1.0的标记数量有限，但提供超链接功能和文档基本格式化的核心标记已存在。 ...
---1994, HTML 2.0: a major step, adding primitive image, form, imagemap,...
---1996, HTML 3.2: tables, applets, text flow around images, font, superscript, subscript, frame...
---1998, HTML 4.0: style sheets, better tables and forms, objects, better frame, ...
---HTML+ (1993), HTML 3.0 (1995): too aggressive, not standard.
3、SGML与HTML
SGML(Standard Generalized Markup Language)一种通用标注语言,为了解决不同格式文档在不同平台上交换的兼容性问题，是一种定义标记语言的语言。它1969年起源于IBM，1986年成为国际标准ISO8879：1986
SGML文档包括三个部分：
SGML声明，SGML声明指定应用中可以出现的字符和分隔符；
DTD（文档 TYPE DEFINITION），定义标记结构的语法。
标记了文档（实际上是内容）。
三者之间的关系相当于“词法”、“语法”、“示例”
其中DTD是核心，SGML提供描述DTD的规则。一个DTD规定文档的结构（例如段落之间的距离、表格显示的特征等）元素（例如段落、章节）和类型（例如报告、信件等），有许多用SGML描述的DTD，BUSINESS LETTERS，AIRCRAFT MANUALS，POETRY…。
HTML是SGML的一个应用，它对应SGML的一个DTD。
4．Primitive HTML
An HTML document is an ASCII file with “marks”/tags.
…>
…
anchor: the essence of hypertext (concept not from SGML), links to other files or things within current file.
paragraph: HTML ignors white spaces, use to start a new paragraph.
list: ordered, unordered, definition
…,
…,
….
heading: setting up various headings, ,
…,
例子: a minimum HTML document
, , may be inferred from the context
DOCTYPE给出的是关于DTD的信息，浏览器用来决定如何解释后面的内容。
例子: anchor, paragraph, list, heading
5.Discussion: HTML 3.2的增强
html3.2允许ALIGN取另外两个值(align=left|right)，它们指定的是图像在被显示时出现在浏览器窗口中的位置，从而有可能造成文子信息全部出现在一幅图像的左边或者右边的情形. (例子html-5,6)
结合的扩展, 文字和图像的相对摆放关系能得到更好的控制
This is from China. 1986
Starts a new line from left end.
这时， 标记用于在图像旁边开始新的一行。而 标记的一个扩展属性CLEAR=left|right|all , 用于指定开始一个“全新”的行, 其左边, 右边, 或者两边都没有图像.
6．关于table: HTML 3.2的要点之一
… …
利用rowspan和colspan
ABCDEFG 1234567 xyz a b c 1 2 3
每一个
bgcolor在表中应用可得一种高效、明快的效果
7.HTML4.0介绍
7.1 HTML4.0文档结构
HTML4.0特别强调将文档结构与文档表述分开。W3C在HTML4.0的规范中，将其主要内容划分为文档结构（Structure of documents）、文档表述（Presentation of documents）和交互式文档（Interactive documents）三个部分。
7.2 HTML4.0语言设计原则：
● 互操作性
● 国际化
● 可访问性
● 表格功能
● 合成式文档
● 支持样式表
● 脚本功能
7.3 HTML文档设计原则
我们知道，一般情况下，设计HTML文档，首先应考虑以下几件事情：
● The features you want to include
● The style of the document
● The audience for the document
● The format the material is currently in
那么，在具体设计HTML4.0文档时，还应遵循以下原则：
● 将文档结构和文档表述分开
● 考虑面向Web的通用可访问性
● 提高用户程序（一般指浏览器）页面显示速度
HTML4.0提供了表格等设计的新功能，文档设计者应该帮助应用程序实现逐步显示，以便快速有效地利用Web。
8.HTML4.0文档设计应用
8.1 HTML总体结构
同以前的版本一样，HTML4.0文档的总体结构由版本信息行、HTML头部（header）和文档主体（body）三部分组成。
HTML中用SGML DOCTYPE结构来指定所用的HTML版本。对于HTML4.0, 文档作者应该在每个文档的第一行插入以下形式的版本信息。
对于HTML4.0的规范草案：
“-//W3C/DTD HTML4.0 Draft//EN >
对于HTML4.0的正式规范：
“-//W3C/DTD HTML4.0 Final//EN >
或
“-//W3C/DTD HTML4.0//EN >
对于严格遵守HTML4.0规范的情况：
“-//W3C/DTD HTML4.0 Strict//EN >
对于在W3C Web站点上验证DTD的情况：
“http://www.w3.org/Markup/Cougar/relaxed.dtd” >
对于在W3C Web站点上严格验证DTD的情况：
“http://www.w3.org/Markup/Cougar/strict.dtd” >
8.2 HTML元素
从元素的作用范围来看，元素分为两类：块级元素和行内元素（文本级元素）
这两类元素的区别在于：
● 内容模型不同。一般来说，块级元素可包含行内元素和其它块级元素，而行内元素通常只能包含数据和其它行内元素。块级元素定义较大的文档结构，而行内元素，通常定义涉及较小的文档片段。
● 格式化方式不同。默认情况下，块级元素与行内元素的格式化方式不同。块级元素通常会开始一个新行，而行内元素通常不会。块级元素有能力中断一个未结束的段落元素，因而在很多情况下可删除段落结束标记。简单地讲，块级元素是段落级别的元素，而行内元素的管辖范围不超过自己所在的行。
● 方向性不同。HTML4.0 支持从左至右和从右至左两种文字方向。由于技术原因（UNICODE的双向算法），块级元素和行内元素在继承文字方向性信息时方式不同。
8.3 HTML4.0中的典型元素分析
从应用的角度来看，大体上HTML的元素可以分为以下几类：
● 文档页面结构（排版）元素
● 链接 HTML的链接是从一个Web资源到另一个Web资源的连接。虽然概念简单，它却是Web获得成功的关键因素之一。链接有两个端点和一个方向，即从源端开始，指向目的端。链接可指向某种Web资源，例如HTML文档、图像、视频、声音、程序或当前文档等。链接也可指向一个锚（anchor）。锚是HTML文档内的命名区域，其中可包括文本和其它对象。 HTML中定义链接的元素有两个，它们是LINK和A。 LINK只能出现在HTML文档中的HEAD段中，A只能出现在HTML文档的BODY段中。 由于链接的国际化问题，主要指链接可能指向不同语言、不同书写顺序或不同字符的编码，因此A元素和LINK元素支持lang(语言)、dir(文本方向)和 charset（字符编码）属性。 ◆A元素的用法大致与HTML3.2相同。 定义链接：”http://www.w3.org> w3c的web站点〈/a> 对锚的引用： 假定上述锚所在的文档是one.html,则对锚的链接可以采用相对URL： 详细内容请参阅”./one.html#anchor-one”>锚一。 也可采用绝对URL： 详细内容请参阅”http://www.bh.com/one.html#anchor-one”>锚一 如果链接与锚在同一文档中，则可直接指定： 详细内容请参阅”#anchor-one”>锚一 同以前的HTML一样，仍支持通过mailto URL来使用mailto链接。 如有任何问题和建议，请与“mailto:wangsq@www.cs.pku.edu.cn>我们联系. A元素定义的链接和锚是不允许嵌套的。例如以下示例是错误的。 This text contains “outer-anchor href= “next-outer.html”>an outer anchor and link and ”inner-anchor” href= “next-inner.html”>an inner anchor and link。 ◆LINK元素用于文档的HEAD段中（出现次数不限），定义媒体无关的链接。 LINK与外部样式表 LINK与搜索引擎 可以使用LINK元素向搜索引擎提供不同的信息，包括： （1） 链接到用另一种语言编写的文档版本。 （2） 链接到不同媒体的文档版本，例如可打印版本。 （3） 链接文档集的起始页面。 例1：指引搜索引擎到何处查找文档的日文、法文和阿拉伯文版本，主要说明语言信息、媒体类型和链接类型在改进搜索引擎文档处理中的联合使用： ”ja” title= “日文版本” rel= “alternate” href =”http://www.bh.com/multi-lang/japanese.html> ”fr” title= “法文版本” rel= “alternate” href =”http://www.bh.com/multi-lang/french.html> “ar” title= “阿拉伯文版本” dir=rtl rel= “alternate” href =”http://www.bh.com/multi-lang/arabic.html> 例2：指示搜索引擎使用指南的打印版本： ”print” title=”Postscript guide” rel= “alternate” href =”http://www.bh.com/manual/manual.ps> 例3：将搜索引擎带到文档集中的第一页。 ”start” title=”use the first page of the postcript guide” rel= “alternate” href =”http://www.bh.com/manual/manual.ps> ● 列表（list） 与HTML3.2大致相同，主要支持一些新属性。 ● 表格（table） HTML4.0的表格功能使用户能够按复杂的表格结构来组织数据。表格的表元可以是列表、段落、表单、图形、预定义文本和其他表格。 HTML4.0的表格可按行和列进行分组，分组的目的是为了实现更复杂的表格结构。 HTML4.0的表格功能实际上是接受了Microsoft Internet Explorer 对HTML的扩充。（IE Extension）。 讨论帮助浏览器快速显示表格的实现，主要是归于 ● 表单（form）交互式文档 ● 包容（对象、图象和小应用） HTML4.0提供了将各种资源插入到文档中的不同机制。HTML4.0允许文档中包容对象、图象、小应用、文档和图象映射等。 ◆对象包容 大部分用户程序能够处理一些公共数据类型，例如文本、GIF图像等，如果要处理不支持数据类型，用户程序通常需要支持的外部应用程序（插件技术等）。OBJECT元素可用来控制对象的插入和处理。 通常情况下，插入对象时需要向用户提供三种类型的信息： （1） 处理机制（嵌入对象的泛称）的实现。 （2） 要处理的数据。 （3） 运行处理机制需要的附加值。 某些时候，也可能不需要指定全部信息。某些机制不需要数据（比如进行动画处理的小应用），另一些机制不需要运行初始化参数。 格式 属性有: codebase = url,解析相对URL的基准路径，而相对URL由属性classid指定。 classid= url,给定实现机制所在的位置。 codetype = cdata,指定实现机制期望的MIME类型。 data = url,指定待处理数据所在的位置。 type =cdata,指定data 的MIME类型，此属性可选。 ...... 例.往文档中插入一个显示动画时钟的小应用，它是用假想的语言Phthon写的,不需要任何附加的数据或运行参数值。。 例、指定一个ActiveX Control,URL以协议clsid开始。 data= “http://www.acme.com/ole/clock.stm”> sorry,your browser doesn’t support ActiveX! ◆ 图像包容 用OBJECT元素重写： 黄山照片 ◆ 小应用包容 绘制动画冒泡的小应用 用OBJECT元素重写： 绘制动画冒泡的小应用 ◆ 文档包容 有时，有必要将一个HTML文档的内容插入到另一个HTML文档中，而链接到另一个文档可能并不方便。HTML4推荐使用OBJECT元素及其data属性来实现这一功能。 警告：file-to-include.html的内容不能插入。 ● 窗框（frame） HTML4.0对frame有所增强。 二、HTML的弱点及改进的途径、方向 1．Why only HTML is not enough ●People want to make the browser a desktop. ●HTML can grow, but inherently limited. ●A strategy is to make it a general “container” to encompass various other technologies. Applet, script, object, style sheet 2．改善HTML的描述能力: 多种方向与途径 CSS, DHTML, DOM, XSL, XML, … 大致可从文档结构化程度和表现力两个方面来考虑 (interactive page和dynamic page等问题属另外一个范畴的问题) 3．HTML的固有弱点 。非结构化风格。 ----这体现在源文件中TAGS遍布，不严格，作者的随意性较强； ----EXTREMELY DIFFICULT TO CONVERT ANYTHING FROM HTML 。逻辑的TAGS使网页的表现因平台而台。 。排版表现能力弱。网页为什么不能达到和WORD，LATEX等同样的效果。 4．page designer的理想 存在创作工具(authoring tools), 有如下特性. ●丰富的表现力, 例如Word. ●设计的时候, WYSIWYG, 图形界面; 如果不能WYSIWYG, 手工做不应太复杂. ●转换成web文档后, 在不同的平台上(浏览器中)看起来和设计时一样. ●空间和时间的高效率. SGML能满足上述1, 3两点, 但不满足2, 4. HTML尤其在4上表现极好: 最初的成功所在. 5．改善HTML的描述能力的多种方向与途径 改善HTML的描述能力大致可以从文档结构化程度和表现力两个方面来考虑， 目前出现的技术有CSS、DHTML、DOM、XSL、XML等。下面我们将对其中主要 技术作一简明介绍。 三．CSS，XSL，DHTML，XML 1、 样式表（Style Sheets）----Web文档结构化表现的一种技术 从前，Web仅使用与科学计算环境中，人们对内容的重视远超过其表现。但现在不同了，不同层次和程度的人们正在发现和使用Web，HTML的表现局限性会挫伤他们的积极性。样式表技术就是在这样一种需求下而出现的。它是页面设计的一项重要突破 Style sheets is a formating description for a document. They describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994。. 2．Cascading Style Sheets (CSS) Web文档结构化表现(structured formatting)的一种技术 CSS Level 1规范, 1996年, W3C. http://www.w3.org.TR/REC-CSS1 IE 3.0开始支持 Netscape支持得不好, 但提出了自己的JavaScript Style Sheet, 从4.0开始实现. JSSS在精神上类似于CSS. 例子: Cascading Style Sheet 为什么称“cascading”? 在文档中可定义多个“style sheet”, 它们按“逆序”优先的方式应用于文挡的表现. 例如在上例中加上 表单项的字体将取24点. 自从有了CSS, HTML 3.2中定义的标记将被逐步淘汰. (HTML 4.0定为 “deprecated”, 预计下一个HTML标准将不会再有) CSS引用方式有两种： （1） 出现在…中. “white” text= “black” link = “red” > ... 引入CSS之后，同样效果的使用示例为： hello This is a normal paragraph with an idd Span stuck in the middle of it.how long have you been there and how are you now? first thing is to say how are you! ●在style sheet中能说明什么 ? color: #RGB或者颜色名yellow, red, green等 font-family: 字型, Arial, Helvetica, serif, ... font-size: 字号, 24pt, …, larger; … font-style: 字体, normal, italic, oblique font-variant: normal, small-caps font-weight: normal, bold, lighter white-space: normal, pre (保留空格), nowrap (不自动换行). … …http://www.w3.org.TR/REC-CSS1 （2） 创建单独的风格描述文件, 在HTML文件中用标记引用. “demo.css” rel= “stylesheet” type=”text/css”> 3．Dynamic HTML Dynamic HTML is a term used to describe HTML pages with dynamic content. CSS is one of three components in dynamic HTML; the other two are HTML itself and JavaScript (which is being standardized under the name EcmaScript). The three components are glued together with DOM, the Document Object Model. Dynamic HTML is still in its infancy and current implementations are experimental. 4、eXtensible Style Language(XSL)----Style Sheets技术的一种 Inso, Microsoft, ArborText给W3C的建议, 尚未被标准化, W3C也还没有安排研究. 它的功能强于CSS, 不仅提供风格设计手段, 还提供文档结构化设计的手段(如同XML) 它源于DSSSL (Document Style Semantics and Specification Language), 是SGML文档格式信息的一种描述方式。 5、CSS 与XSL The fact that W3C has started developing XSL in addition to CSS has caused some confusion. Why develop a second style sheet language when implementors haven't even finished the first one? The answer can be found in the table below: CSS XSL Can be used with HTML? yes no Can be used with XML? Yes yes Transformation language? No yes Syntax CSS XML The unique features are that CSS can be used to style HTML documents. XSL, on the other hand, is able to transform documents. For example, XSL can be used to transform XML data into HTML/CSS documents on the Web server. This way, the two languages complement each other and can be used together. Both languages can be used to style XML documents. CSS and XSL will use the same underlying formatting model and designers will therefore have access to the same formatting features in both languages.. 6.XSL: 简单例子 这将导致“红色黑体”应用于文本中的元素 我们注意到设计者可以“自定义”标记 (CSS只是“半自定义”) 7、eXtensible Markup Language----XML XML is an important new standard emerging for structured documents on the Web. XML extends HTML beyond a limited tagset and adapts SGML ,making it easier for developers to write programs that process this markup and providing for a richer, more complex encoding of information. It is not only for web documents, potential to become a standard for virtually all documents in an organization. 元素中增加的属性cols。
http://www.bh.com/huangshan.gif alt= “黄山照片”>
This is a bold demo!
相关推荐
《钴潭西小丘记》原文及翻译
重庆市医疗服务价格一、综合医疗服务类
学生毕业论文工作日志
爱护公物，从我做起
校园欺凌案例分析
《钴潭西小丘记》原文及翻译
关于“轴对称图形”中的两个重要基本图形
最新公司红头文件格式范文6篇
湖南省行政执法人员执法资格考试
大学生互联网加创新创业计划书[范文]
