HTML及XML基础PPT课件

1,Web开发实用技术基础,第2章HTML及XML基础,-,2,第2章HTML及XML基础,2.1标记语言的发展历程2.2超文本标记语言HTML2.3扩展标记语言XML2.4小结2.5思考题,-,3,2.1标记语言的发展历程,2.1.1SGML2.1.2HTML2.1.3XHTML2.1.4XML2.1.5DHTML2.1.6SHTML,-,4,2.1.1SGML,SGML(StandardGeneralizedMarkupLanguage，标准通用标记语言)，即标准通用标记语言，它是一项强大和灵活的技术，但同时也不可避免地会带来较大的复杂性和处理开销。,-,5,2.1.2HTML,SGML定义了许多不同类型的文档，HTML即超文本标记语言（HypertextMarkupLanguage）是定义了超文本文档的SGML的子集。人们习惯使用术语HTML表示超文本文档本身（属于一种特殊类型的SGML文档）和用以产生超文本文档的标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX、Windows等）。,-,6,2.1.3XHTML,XHTML(ExtensibleHyperTextMarkupLanguage，可扩展超文本标记语言)是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。,-,7,2.1.4XML,XML是ExtensibleMarkupLanguage的缩写，意为可扩展的标记语言。XML并不是一种新语言，它是SGML的一个子集，SGML是一种非常通用的标记语言。,-,8,2.1.5DHTML,动态HTML(DynamicHTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括HTML+CSS+JavaScript（或其他客户端脚本），其中CSS和客户端脚本是直接在页面上写而不是链接上相关文件。,-,9,2.1.6SHTML,SHTML是ServerHTML即服务器端的HTML，当浏览网站时激活服务器上的CGI脚本程序而动态的自动生成。SHTML是一种用于SSI技术的文件。,-,10,2.2超文本标记语言HTML,2.2.1HTML文件的页面结构2.2.2HTML的基本标签2.2.3超链接2.2.4列表2.2.5表格2.2.6表单2.2.7框架2.2.8图像2.2.9文本格式及其他2.2.10修饰字体2.2.11网页设计（HTML）,-,11,2.2.1HTML文件的页面结构,一个HTML文档是由一系列的元素和标签组成，元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头中，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。,-,12,2.2.1HTML文件的页面结构,下面是一个最基本的html文档的代码：用记事本编写如下代码。一个简单的HTML示例欢迎光临我的主页这是我第一次做主页,-,13,2.2.2HTML的基本标签,HTML基本标签包括：（1）（2）（3）和（4）,-,14,2.2.3超链接,建立一个超链接代码如下：这是一个链接河南工业大学信息学院站点链接上面这个示例说明了如何在HTML文件里创建超链接。,-,15,2.2.3超链接,建立一个将一个图片作为一个超链接代码如下：将一张图片作为一个链接，点击图片。这个示例说明了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其他文件。,-,16,2.2.3超链接,下面首先来介绍一下a用法。a是anchor的缩写，可以指向任何一个文件源、一个HTML网页、一个图片、一个影视文件等。用法如下：链接的显示文字点击当中的内容，即可打开一个链接文件。,-,17,2.2.3超链接,其属性包括：href属性：指明链接文件的路径。target属性：可以在一个新窗口里打开链接文件。title属性：可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。name属性：可以跳转到一个文件的指定部位。,-,18,2.2.4列表,HTML有3种列表形式：排序列表(OrderedList)、不排序列表(UnorderedList)、定义列表(DefinitionList)。,-,19,2.2.5表格,HTML中用标记表格。一个表格可以分成很多行(row)，用表示；每行又可以分成很多单元格(cell)，用表示。,-,20,2.2.5表格,例2.8：显示表格表格所用到的标签：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。只有一行(Row)一列(Column)的表格100一行三列的表格,-,21,2.2.5表格,100200300两行三列的表格100200300400500600,-,22,2.2.5表格,不显示边界的表格标记中在border在缺省情况下，表格是没有边界的。或将表格的Border设为0，也不显示边界。显示边界的表格要显示表格的边界，可使用border这个属性。可以将表格的边界值设为1，2，3，。边界将由细往粗变化。,-,23,2.2.5表格,有表头的表格表头用来表示，表头的字是粗体显示的。空的单元格如果表格的单元格之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个空格符。,-,24,2.2.5表格,有标题的表格标题用表格标题来表示。包含多列或多行的单元格用colpsan属性，设置包含多列的单元格这个属性，设置包含多行的单元格,-,25,2.2.5表格,单元格中的内容单元格的内容可以是文字、图片、超链接、Form、表格等。单元格内容与单元格边界之间的距离设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。单元格之间的距离Cellspacing属性表示表格中单元格之间的距离。,-,26,2.2.5表格,设置表格的背景颜色和背景图片用bgcolor属性设置表格的背景颜色，用background属性为表格添加背景图片。设置单元格的背景颜色和背景图片用bgcolor属性设置单元格的背景颜色，用background属性为单元格添加背景图片。单元格内容的对齐方式用align属性设置单元格的对齐方式。,-,27,2.2.6表单,HTML中的Form表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。举个简单的例子，一个让用户输入姓名的表单。,-,28,2.2.6表单,例：请输入你的姓名：,-,29,2.2.6表单,完整代码如下所示：输入用户姓名请输入你的姓名：,-,30,2.2.6表单,学习HTML表单最关键要掌握的有3个要点：（1）表单控件(FormControls)先说表单控件(FormControls)，通过表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。例如上面的例句里，inputtype=text就是一个表单控件，表示一个单行输入框。用户填入表单的信息总是需要程序来进行处理。（2）表单里的action就指明了处理表单信息的文件。例如上面例句里的action=,-,31,2.2.6表单,（3）表单里的method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏中看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。表单常用控件(Controls)如表2-1所示。,-,32,2.2.6表单,表2-1表单(Form)常用控件,-,33,2.2.7框架,使用框架(Frame)，可以在浏览器窗口同时显示多个网页。每个Frame中设定一个网页，每个Frame中的网页相互独立。下面进行详细介绍。,-,34,2.2.7框架,（1）Frameset决定如何划分Frame。有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。,-,35,2.2.7框架,（2）Frame用这个标签设定网页。里有src属性，src值就是网页的路径和文件名。（3）IframeIframe是InlineFrame的意思，用可以将Frame置于一个HTML文件内。,-,36,2.2.8图像,用这个标签可以在HTML里面插入图片。最基本的语法如下：url表示图片的路径和文件名。例如url可以是images/logo/blabla_logo01.gif，也可以是个相对路径./images/logo/blabla_logo01.gif。,-,37,2.2.8图像,图像标签的属性如下：（1）alt属性英文叫alternatetext。例句如下：（2）align属性可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。,-,38,2.2.8图像,（3）height和width属性在默认状况下，图片显示原有的大小。用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会极不美观。,-,39,2.2.9文本格式及其他,1.文本格式HTML定义了一些文本格式的标签，例如可以将字体变成粗体或斜体。从下面的示例，可以了解各种文本格式标签如何改变HTML文本的显示。常用文本格式标签如表2-2所示。,-,40,2.2.9文本格式及其他,表2-2文本格式标签说明,-,41,2.2.10修饰字体,在HTML中，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。,-,42,2.2.11网页设计（HTML）,学习完上面HTML标记的基础知识之后，通过一个实际例子的制作（个人主页），依次掌握标签、字标题标签、文本、链接、图片、表格等各类HTML标记的使用；在学习过程中能够理论与实际相结合，提高教学效果。,-,43,2.3扩展标记语言XML,2.3.1XML基础2.3.2XML文档类型定义2.3.3XML数据的底层结构2.3.4XML文件的设计2.3.5XML与Java2.3.6XML与.NET2.3.7XML应用实例,-,44,2.3.1XML基础,XML概念说明：1.XML并不是标记语言它只是用来创造标记语言（如HTML）的元语言。XML和HTML是不一样的，它的用途比HTML广泛得多，后面章节会仔细介绍。2.XML并不是HTML的替代产品XML不是HTML的升级，它只是HTML的补充，为HTML扩展更多功能。今后将在较长的一段时间里继续使用HTML。3.不能用XML来直接写网页即便是包含了XML数据，依然要转换成HTML格式才能在浏览器上显示。下面是一段XML示例文档，用来表示本文的信息：,-,45,2.3.2XML文档类型定义,XML作为一门标记语言，它就需要一种文档（即文档类型定义DTD）来定义，DTD可以看作是一类XML文档的模板。它定义了文档的逻辑结构，规定了XML文档中所使用的元素，实体，元素的属性，元素与实体之间的关系。它使得数据交流与共享得以正常进行，验证了数据的有效性。,-,46,2.3.3XML数据的底层结构,XML文档用于存储数据，Schema或DTD用于验证数据的，也就是结构化数据，DOM是文档对象模型，作用是向XML文档中插入数据，而XSLT则负责数据的显示。1.XML数据的底层结构DTD2.XML数据的底层结构之Schema3.Schema和DTD的区别,-,47,2.3.4XML文件的设计,XML文档的生成步骤如下：（1）确定各种元素。（2）根据各元素之间的关系生成结构树。（3）根据结构树生成XMLSchema。（4）XML文档的生成。,-,48,2.3.4XML文件的设计,命名空间是W3C推荐标准提供的一种统一命名XML文档中的元素和属性的机制。使用命名空间可以明确标识和组合XML文档中来自不同标记词汇表的元素和属性，避免了名称之间冲突而带来的问题。命名空间声明的一般形式如图2-1所示。,-,49,2.3.4XML文件的设计,图2-1命名空间声明,-,50,2.3.4XML文件的设计,需要注意的是，命名空间的前缀不能称为“xml”，因为在XML中这个字符串是保留作特殊用途的，如xml:space。另外。还可以隐式声明命名空间，即省略掉冒号和命名空间前缀，如图2-2所示。,-,51,2.3.4XML文件的设计,图2-2命名空间声明,-,52,2.3.5XML与Java,XML和Java对Internet都是很友好的，它们内部都对Internet进行了特别的优化。XML在设计之初，就是向着一种能够在Internet上自由传播的优化的，有弹性的，易于阅读的格式这样一个目标设计的。Java中更是内建了与诸多网络相关的类库，能够很好的支持sockets、HTTP、HTML等网络协议。它们两者都支持Unicode，因而开发出来的应用也很容易进行国际化。,-,53,2.3.5XML与Java,Java为程序员提供了表达复杂数据结构以及面向对象的建模方法，而XML在这方面也是一个比较理想的工具。虽然XML出现不是很久，但现在支持XML的工具越来越多，从编写XML到XML的Paser解析器一应俱全，这也为XML的发展奠定的很好的基础。,-,54,2.3.6XML与.NET,要想理解.NET，就需要理解XML。像我们在自己的交流中所说和写的语言一样，XML（EXtensibleMarkupLanguage，可扩展标记语言），是.NET的基础。XML是.NET的灵魂，是所有.NET现在和将来的基础。数据库将通过XML中的纪录集来读写，Web浏览器将接受XML并将其和伴随它的样式表一起显示，VisualStudio甚至会产生XML代码!不理解XML