计算机软件及应用HTML-XHTML-XML课件

1、第2章 HTML/XHTML/XML主讲教师:赵丹丹主要内容 2.1 HTML2.2 XHTML2.3 XML上述是排版语言，不是编程语言。为什么要学HTML？1.HTML是所有网页的基础，对于一个想成为Web高手的人来说，学习HTML是必不可少的。就像有了计算器，学数学时还要从学1+1开始一样。网页里那些精确控制页面排版的功能必须靠HTML源代码2.网页要瘦身:网页制作工具生成的网页都含有大量的冗余代码，如FrontPage生成的冗余代码在文件中占20%50%， Dreamweaver生成的占5%-10%。冗余代码降低访问速度、浪费存储空间。3.学会HTML可以读懂优秀网页的HTML源代码，

2、学习别人设计网页的方法和技巧。2.1 HTML1990年，HTML语言和WWW（万维网）一起诞生，它是众多标记语言的一种。 1993年，IETF（因特网工程部）起草了HTML的第1个版本，采用SGML。1995年，IETF推出了和浏览器相适应的HTML2.0作为正式的Internet标准。 1996年由W3C联合几大公司共同开发的HTML3.2建议标准 。1997年1月被发布为正式标准。 1999年12月，W3C又推出HTML4.01。2.1.1 HTML简单例子 我的主页标题 欢迎访问我的个人主页 2.1.1 HTML简单例子HTML文件基本结构 文件开始 标头区开始 标题区内容标题区结束

3、标头区结束 主体区开始主体区内容 主体区结束 文件结束命令一般采用“”和“”的形式配对出现 有些标记也可以单个出现 标记符不区分大小写 2.1.2 HTML常用标记标 记 格 式功 能标 记 格 式功 能首部标记符，不包含网页的内容，仅提供一些与网页相关的信息设置网页的标题，一般在浏览器的顶部标题栏中显示主体标记符，包含网页内的所有内容：文字、图片及超链接等标题标记符，x=16，定义了从1级到6级标题换行并绘制一条水平直线，直线的上下两端都会留出一定的空白定义一个块，块内可以有文本、图像等，目的是为了控制该块的样式控制字符的样式，size是它的一个常用属性，用来控制字符大小强行中断当前行，多个

4、标记可以创建多个空行，新行与原行属性相同插入图片，常用alt属性设置图片简单文字说明，用src属性指明图片所在位置在网页中分段，遇到另起一个新的段落，两个段落的性质可相同也可不同定义一个超链接，用href属性可创建多种形式的超链接注释标记，注释之间的内容不在浏览器中显示包含预先格式化的文本，即包含在和之间的内容完全按照所设置的格式显示提供联系信息（联系电话、电子邮箱等），一般用斜体显示其中的内容定义一个无序列表，列表项的条目用标记符li创建，ul中可包含一个或多个li标记定义一个有序列表，列表项的条目用标记符li创建，ol中可包含一个或多个li标记2.2 XHTML2.2.1 XHTML的基本

5、格式2.2.2 XHTML与HTML的区别2.2.3 XHTML标记2.2 XHTMLHTML从出现到现在，标准在不断完善、功能也越来越强大，但是它的规范化要求依然不是很严格，仍有很多缺陷和不足。为此，W3C开发了XML标准。XML是用来对信息进行自我描述而设计的一种新语言XML也是一种基于文本的标记语言，但是XML可以让用户根据要表现的文档，自由地定义标记来表现具有实际意义的内容。XML不像HTML那样具有固定的标记集合，它实际上是一种定义语言的语言，也就是说使用XML的用户可以自己定义各种标记来描述文档中的任何数据元素，将文档的内容组织成丰富的、完整的信息体系。 2.2 XHTMLXML具

6、有便于存储的数据格式、可扩展、高度结构化以及方便的网络传输等特点。XML是Web设计的发展趋势。在XML 1.0标准推出时，仍然有大量的人员采用HTML，而且在万维网中已存在数以百万计的页面是采用HTML编写的，所以不能直接抛弃HTML，因此，HTML的后继者XHTML就出现了。 2.2 XHTMLXHTML是为了适应XML而重新改造的HTML。它是一种独立的语言，以HTML 4.01作为基础，又以XML的应用为目的，是从HTML到XML的过渡。2000年1月，W3C推出XHTML 1.0标准。该标准与HTML 4.01具有相同的特性，也是一种标记语言，但是做了一些限制，要求在网页中出现的任何

7、元素都要被标记出来。2001年5月，W3C又推出XHTML 1.1标准，它以XHTML 1.0的严谨为基础，并做了一些改进，同时对XHTML的模块化重新定义。XHTML非常严密，兼容性强，交互性好，能够解决制约HTML发展的问题，比如多种显示设备的支持，多样的数据表示等。 2.2 XHTMLW3C已经确定了4个XHTML标准： XHTML1.0 Transitional XHTML1.0 Frameset XHTML1.0 Strict XHTML1.1 XHTML1.1规范是这些级别中最严格的 XHTML1.0 Frameset和Transitional规范定义了基于XML的HTML标记，允

8、许某些常用的构造。 2.2.1 XHTML的基本格式一个符合标准的XHTML网页，必须包含一个DOCTYPE声明 该声明用来将网页标识为XHTML页，并说明网页所遵循的XHTML规范。 这个网页还必须声明XHTML命名空间xmlns ，网页内的所有标记都是属于这个命名空间的。例如： 2.2.1 XHTML的基本格式XHTML中的标记符区分大小写，它的基本格式为： 文档标题 XHTML文档的主体部分 2.2.2 XHTML与HTML的区别XHTML与HTML的区别标记的嵌套使用(严格/不严格）大小写的使用（区分/不区分）引号的使用 （属性必须加引号/随意）结束标记（不许省略/可以省略） 样式的使

9、用 （type/ style)id和name 具体方法参看课本例2-2 。2.2.3 XHTML标记为网页加入标题 网页标题总是加在部分，浏览该网页时它会出现在浏览器窗口的标题栏中。 表示标题的语法是： 标题字符串主体标记符body与样式style属性 XHTML的主体标记和HTML是一样的，在两标记之间定义了网页的所有显示内容。默认背景色为白色，字体是12像素黑色Times New Roman。 在XHTML中，对样式的所有设置都必须放在【style】属性中来完成。 使用【style】属性中的样式，可以对该标记所作用的区域进行一种或多种设置，例如，字体的大小、颜色，页面的背景色和背景图等。2

10、.2.3 XHTML标记style属性一般格式为： style中常用的样式有：background-color：设置网页的背景颜色；color：设置网页中字体的颜色；颜色值: blue/red/green/black/white等 或#FFFFFF/#00FF00格式font-family：设置网页中字体的名称，例如宋体、黑体等；font-size：设置网页中字体的大小（长度|百分比|标准字号）text-align：设置文本的对齐方式，常有3种不同的取值，分别为“left（左对齐）”、“right（右对齐）”和“center（居中对齐）”，在默认情况下使用左对齐方式。例如：2.2.3 XHTM

11、L标记注释标记 在XHTML中以标记为结束，其间就是被注释的内容。 浏览器在解读XHTML文档时不会显示注释的内容。 在设计页面时，适当的给出注释，可以增强文档的可读性和可维护性。2.2.3 XHTML标记标题标记符hx 标记符hx（其中x=16）用于设置文件中的标题，在浏览器中显示的是黑体 标记表示最大标题，标记表示最小标题 与必须配对使用，且在后文字自动换行。 标题的样式不能像HTML中通过align属性进行设置，在XHTML中需要使用【style】属性中的【text-align】样式进行设置。例如：这是1号标题这是2号标题这是6号标题2.2.3 XHTML标记文字样式标记符 XHTML使

12、用【style】属性中的样式【color】、【font-family】和【font-size】 XHTML也保留了HTML所提供的一些字体样式标记符： b标记设置文字为粗体bold i标记为斜体italic big标记和small标记分别表示大字体和小字体 sub标记和sup标记使文字成为下标或上标例如：加粗 斜体 大字号 公式:x=a2+b1 2.2.3 XHTML标记空格标记 在XHTML语言中，显示多个空格，XHTML保留了HTML提供的空格标记“ ”。 一个“”表示一个空格，多个“”表示多个空格。 “ ”表示5个空格。 将空格和空格标记“”联合使用。 “ ”表示5个空格。 2.2.3

13、XHTML标记段落标记符p、br、pre和hr 和是配对使用的，用来划分段落。在换行的时候另起了一个新的段落。 单独使用，表示强制换行。中断当前行而另起一行，但是新行与上一行是属于同一段落的，与上一行保持了相同的属性。 预格式化标记和之间输入的内容将在浏览器中按照原格式毫无变化的显示出来 单独使用可以实现段落的换行，并绘制一条水平直线，在直线的上下两段留出一定的空白 2.2.3 XHTML标记有序列表标记符ol和列表项标记符li 使用标记和在XHTML中定义了一个有序列表。 两个标记之间不允许有文本信息。列表中的每一项都必须使用列表项标记开始，标记作为结尾表示一个条目的结束。 有序列表项1 有

14、序列表项2 有序列表项3 li是list的缩写。ol是order list的缩写。 li有自动换行的作用，每个条目自动为一行。 有序列表在显示时，会在每个条目前面加上一定形式的有规律的项目序号。例如，1、2、3、a、b、c等之类。2.2.3 XHTML标记在XHTML中，标记符ol建立的有序列表默认的项目序号是十进制数字 通过【style】属性的【list-style-type】样式设置整个列表的项目序号 【list-style-type】样式的取值： decimal（十进制） lower-alpha（小写英文字母） upper-alpha（大写英文字母） lower-roman（小写罗马数字

15、） upper-roman（大写罗马数字） 每一个li创建的项目也可以用【list-style-type】单独指定项目序号2.2.3 XHTML标记无序列表标记符ul 标记和设置了一个无序列表。列表项中间同样不允许有文本出现。每一个条目也必须用标记创建，结尾。 一个ul标记的无序列表中可包含一个或多个li标记，用于创建一项或多项条目。 ul同样可以使用【style】属性的【list-style-type】样式设置整个无序列表的项目符号。 三种取值：“disc”，“circle”和“square”，分别表示实心圆，空心圆，小方块。 每一个li创建的项目同样可以用【list-style-type】

16、单独指定项目符号。 无序列表项1 无序列表项2 无序列表项3 2.2.3 XHTML标记图像标记符img img src=图形文件URL alt=说明 / src属性：指明网页中所引用图像的位置； alt属性：用简单的文字说明所引用的图像。当图像不能显示或鼠标停在图片上时，可以通过它来描述图片。 可以利用style属性的width和height两个样式分别设置图片的宽度和高度，单位可以是像素，也可以是相对于父标记大小的百分比。例如： 2.2.3 XHTML标记超链接标记符a 标记包含了【href】、【id】和【target】等常用属性。 （1）id属性：用来定义文档内创建的锚点，在实现页面内链

17、接的时候使用。 （2）href属性：用来指定超链所连接的目标文档的URL。它提供了多种链接方式，可以在页面内创建超链接，也可以在页面间创建超链接。 （3）target属性：目标窗口，指定如何显示链接的文件。默认设置为“_blank”，表示在新的浏览器窗口中显示相应的文件内容；也可以设置为“_self”，表示在本窗口内显示相应内容。 2.2.3 XHTML标记提供了多种链接方式，可以在页面内创建超链接，也可以在页面间创建超链接。 链接到本页面内的某个锚点（有的叫书签）实现一个页面内的链接时，需要先使用id属性定义一个锚点，再使用a标记的href属性指向该锚点 在网页中这两部分没有先后之分 一般形

18、式为： “#”号表示链接目标与a标记属于同一个文档，被链接的目标则用id标示。2.2.3 XHTML标记链接到另一个页面可以使用相对或绝对URL（一般都使用相对URL）指向某一个特定的页面 一般形式：信息描述链接到另一个页面内的某个锚点 将前两种链接方式结合即可实现从一个页面转向另一个页面内的某一处 首先要在目标页面内定义一个锚点，然后在源页面内建立超链接指向该锚点 一般形式为： 描述信息文件名后加#号表示链接到目标文件中所定义的锚点处 2.2.3 XHTML标记链接到另一个网站 在页面内创建超链接，直接指向另一个网站在此只要给目标网站的网址即可 网易163链接到电子信箱 【href】属性中需

19、要使用“mailto”协议 在该协议的后面给出一个具体的电子邮箱地址 一般形式为： 联系人链接到FTP站点FTP演示2.2.3 XHTML标记链接到某一个图像文件 使用href还可以指向图像文件，浏览器将在窗口中显示相应的图片 感恩的心链接到浏览器不支持的文件 浏览器自动弹出提示下载文件的对话框，由用户选择是否下载 文件下载如何实现创建页面内的超链接请参见例2-3 。2.2.3 XHTML标记图像地图 2.2.3 XHTML标记图像地图【1】定义形状 - shaperect：矩形 circle：圆形 poly：多边形 【2】定义区域 - coordsa.矩形：必须使用四个数字，前两个数字为左上

20、角座标，后两个数字为右下角座标例： b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例：c.任意图形（多边形）：将图形之每一转折点座标依序填入例：2.2.3 XHTML标记meta标记meta不成对标记，只在head区 10秒后自动更新一次页面 欢迎进入聊天室2.2.3 XHTML标记:表格table标记 定义表头 定义表的行 定义单元格border: 表格边框的粗细，单位是像素width: 表格的宽度，单位像素或百分比2.2.3 XHTML标记:跨多行、多列的单元格 跨x行的单元格 跨y列的单元格 跨x行y列2.2.3 XHTML标记:基本语法*: get 传送数据

21、速度快 但能传输的字节少 post传送数据速度慢 但能传输的字节不限2.2.3 XHTML标记:标记#:text 单行文本框 password 密码框checkbox 复选框 radio单选按钮image 图像按钮 hidden 隐藏字段submit 提交按钮 reset 复位按钮 2.2.3 XHTML标记:单行文本框2.2.3 XHTML标记:复选框和单选按钮Checked : 设置默认选项2.2.3 XHTML标记:文本区域2.2.3 XHTML标记:列表框菜单项1菜单项2n=1 下拉菜单（下拉列表）n1 列表框Multiple 允许选择多行 2.2.3 XHTML标记:列表框菜单项1菜单项2n=1 下拉菜单（下拉列表）n1 列表框Multiple 允许选择多行 2.3 XML 可扩展标记语言XML（eXtensible Markup Language）是为了克服HTML缺乏灵活性和伸缩性的缺点以及SGML( Sta