chap02XHMTL语言基础.ppt

,第2章 XHMTL语言基础,主要内容,2.1 从HTML到XHTML,2.2 网页文本及标记,2.3 使用页面列表,2.4 超链接,东方学院信息分院电子商务教研室,2.5 插入多媒体和表格,2.6 表单和框架,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,HTML：应用广泛，使用简单，应用成熟。着重于将文件数据显示在浏览器中。 XML：着重于将文件数据以结构化的形式展示。 RSS订阅的基础 XHMTL：以HTML为范本，依XHMTL的语法重新规范HTML语言，W3C希望最终能够以XHTML取代HTML。,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.1.1 初识HTML标记 实例： 主要规则： 以“”表示标记的开始，以“”表示标记的结束 。 成对标记又称之为容器，一对标记中还可以嵌套其他的标记。 单独标记不需要与之配对的结束标签标记，又称之为空标记，例如 属性设置的一般格式为：属性名属性值，属性值部分可以用英文的双引号（ “ ）或单引号（ ）引起来，也可以不使用任何引号。, ,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.1.2 HTML文档的基本结构,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.1.3 XHTML文档的新增规范 （1） XHTML文档的基本结构,增加了声明文档类型部分,增加了命名空间的声明部分,在文档头部分强制要求声明所用的语言编码,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.1.3 XHTML文档的新增规范 （2） 代码规范 所有的标记都必须要有一个相应的结束标记。 所有标记的名称和属性的名字都必须使用小写。 所有的标记都必须合理嵌套。 所有的属性值必须用双引号括起来。 把所有的“”和“&”特殊符号用编码表示。 给所有的属性赋一个值。 不要在注释中使用“-”。,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.1.4 声明文档类型 DOCTYPE声明必须放在每一个XHTML文档的顶部，在所有代码和标记之前。其格式为： XHTML 1.0提供了三种DTD声明可供选择，这三种DTD的名称分别是 ： 过渡的（Transitional） ：“-/W3C/DTD XHTML 1.0 Transitional/EN“ 严格的（Strict） ：“-/W3C/DTD XHTML 1.0 Strict/EN“ 框架的（Frameset） ：“-/W3C/DTD XHTML 1.0 Frameset/EN“,指定DTD的根元素名称。在HTML文件中所有的控制标记必须以HTML为根控制标记，所以在DTD声明中elment-name必须是html。,指定DTD是属于标准公用的或是私人制定的，若设为PUBLIC，则表示该DTD是标准公用的，若设为SYSTEM，则表示是私人制定的。,指定DTD的文件名称。其中的DTD叫做文档类型定义，里面包含了文档的规则 。,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.1.5 XHTML文档根标记与声明命名空间 （1）XHTML文档根标记 （2）声明命名空间 xmls是XHTML namespace的缩写，叫做“命名空间”声明。 XML允许设计者定义自己的标记，避免同一标记多人定义的混淆发生，XML采用声明命名空间，以通过不同的网址指向来识别。 因为XHTML1.0不能自定义标记，所以它的命名空间都相同，就是/1999/xhtml。, 文档的内容 ,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.1.6 XHTML的文档头和文档主体 （1）文档头和文档标题标记 （2）文档主体标记, 网页的标题 , 网页的内容 ,所有要显示在页面中的内容必须放置在主体标记内！,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,（3）文档主体标记（body）的属性,东方学院信息分院电子商务教研室,2.2 网页文本及标记,2.2.1 注释标记 2.2.2 段落和换行标记 2.2.3 标题标记 2.2.4 特殊字符 2.2.5 水平线标记 2.2.6 文本格式和字体标记 2.2.7 滚动字幕及设置,可以实现对网页文本内容的常规编辑。,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.2.1 注释标记 浏览器会忽略注释标记中的文字而不作显示，注释标记的使用目的是为文中的不同部分加以说明，以方便以后的阅读和修改，注释标记的格式为 结束标记与开始标记可以不在一行上，长度不受限制。,东方学院信息分院电子商务教研室,1.1 从HTML到XHTML,2.2.2 段落和换行标记 段落： 段落标记放在一个段落的头尾，用于定义一个段落。段落标记除了具有标识段落的作用外，还能使本段的前后多一个空行，以区别不同段落。 格式：文字 换行标记： 由于浏览器会忽略XHTML文档中由键所产生的换行符，若要强制换行可在该位置使用标记。 强制换行标记的格式为：文字 使用分隔的内容之间是换行不换段，,东方学院信息分院电子商务教研室,1.1 从HTML到XHTML,2.2.2 段落和换行标记 段落的属性： 标记有一个属性align， 用来设置段落文字在网页上的对齐方式。 left（左对齐）、center（居中）、或right（右对齐）。默认为left。,东方学院信息分院电子商务教研室,1.1 从HTML到XHTML,2.2.3 标题标记 标题文字 一般文章都有标题、副标题、章和节等结构，而网页中的信息可以分为主要点和次要点，可以通过设置不同大小的标题为文章增加条理。 标题文字标记的基本格式为： 标题文字 #用来指定标题文字的大小，#取16的整数值，取1时文字最大，取6时文字最小。 通过align属性来设置标题在页面中的对齐方式：left（左对齐）、center（居中）、或right（右对齐）。默认为left。,东方学院信息分院电子商务教研室,1.1 从HTML到XHTML,2.2.4 特殊字符 在XHTML文档中，有些符号有特殊含义，例如，“”是用来识别标记的，若要在网页中显示“”，就要将其作为特殊字符。,东方学院信息分院电子商务教研室,1.1 从HTML到XHTML,2.2.5 水平线标记 在页面中插入一条水平标尺线（Horizontal Rules），可以把不同功能的文字分隔开。基本格式为 。 常见属性 ：,东方学院信息分院电子商务教研室,1.1 从HTML到XHTML,2.2.6 文本格式及字体标记 （1）特定文字样式,东方学院信息分院电子商务教研室,1.1 从HTML到XHTML,2.2.6 文本格式及字体标记 （2）字体标记 虽然字体标记被W3C列为不建议使用的标记，但在非标准网页仍大量使用。字体标记的格式为 被设置的文字 size用来设置文字的大小。取值范围从17，取1时最小，7最大。 face用来设置字体。当字体为汉字时，属性face中的“字体名”可以是Word中的“字体”工具栏中显示的字体名。 color用来设置文字颜色。颜色可以用相应英文单词或以“#”引导的一个十六进制代码来表示。,部分颜色说明 black | 黑色 | Red | 红色 Line | 石灰色 | Maroon | 栗色 Gray | 灰色 | Silver | 银白色 Navy | 海军蓝 | Olive | 橄榄绿 Purple | 紫色 | Yellow | 黄色 Aqua | 浅绿色 | Blue | 蓝色 Green | 绿色 | Fuchsia | 紫红色 White | 白色 | Teal | 暗蓝绿,东方学院信息分院电子商务教研室,2.1 从HTML到XHTML,2.2.7 滚动字幕 滚动字幕的基本格式为 滚动文字或（和）图片 标记中可以设置的属性包括：direction（方向）、behavior（方式）、loop（次数）等 。,其余属性,2.2 网页文本及标记练习题 搜索关于中秋节的文字素材，并根据本节所学的各种标记来编辑一张中秋节网页，使得页面条理清晰，重点突出，易于阅读。,东方学院信息分院电子商务教研室,2.3 使用页面列表,2.3.1 无序列表 2.3.2 有序列表 2.3.3 定义列表 2.3.4 列表嵌套,东方学院信息分院电子商务教研室,2.3 使用页面列表,2.3.1 无序列表 当网页内容出现并列选项时，可采用无序列表（Unordered List，也称项目列表）。无序列表的每一个表项的前面是项目符号（如、等符号）。无序列表始于标记。每个列表项始于标记。 无序列表的使用格式为：, 第一个列表项 第二个列表项 . ,2.3.1 无序列表 在默认情况下，无序列表的项目符号是圆点，可以通过设置或标记的type属性来更换项目符号的形式。 “disc”（实心圆点） “circle”（空心圆点） “squre”（方块） 将type属性添加到标记内，所有的项目列表都采用相同的项目符号。 将type属性添加到li标记内，它只能改变当前列表项的项目符号，通过这种方法可为列表内的项目设置不同的项目符号。, 第一个列表项 第二个列表项 . ,东方学院信息分院电子商务教研室,2.3 使用页面列表,2.3.2 有序列表 当网页中的某些内容存在排序关系时，可采用有序列表（Ordered List，也称编号列表）。有序列表的每一个表项的前面带顺序号。 有序列表的使用格式为：, 第一个列表项 第二个列表项 . ,东方学院信息分院电子商务教研室,2.3 使用页面列表,2.3.3 定义列表（自学）,2.3.4 列表嵌套 当网页中需要复合层次的列表效果时，就可以通过对已有的列表标记进行适当的嵌套使用来实现 。, 第一个列表项 第一个列表项 第二个列表项 . 第二个列表项 . ,2.3 练习 在1.2节关于中秋节的网页基础上，在网页的适当内容处添加有序和无序列表或者2者的嵌套。,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.1 超链接基本格式 2.4.2 URL链接 2.4.3 本地链接 2.4.4 书签链接 2.4.5 下载文件链接 2.4.6 邮件链接,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.1 超链接基本格式 基本的超链接包括两个部分：链接源和链接目标。XHTML 使用（锚）标记来创建超链接，其最基本的格式为： 链接源 target属性：标记还具有target属性，用来设置单击超链接后在浏览器中打开链接目标的方式。 如在同一个窗口中打开目标页面（默认） 在新窗口中打开目标页面（_blank）等。 根据链接目标，超链接可以分为URL链接、本地链接和一些特殊功能的链接。,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.2 URL链接 指的是本地站点以外文档的链接 。 创建URL链接时，需要给出URL链接完整的网址。例如： 关于URL地址的概念,XHTML教程 ,URL地址,统一资源定位器，又叫做URL(Uniform Resource Locator)，是专为标识Internet网上资源位置而设置的一种编址方式，是互联网的文件命名系统。 只要给出文件的URL地址，就能在Internet信息海洋中准确无误地定位该文件，就象是一个全球定位器。 URL的一般语法格式为: 协议名称:/机器地址：端口号/路径名/文件名,协议名称:/机器地址：端口号/路径名/文件名 协议名称是属于TCP/IP的具体协议，可用http、ftp、telnet、file等 http:/表示用HTTP(HyperText Transfer Protocol)协议连通WWW服务器 ftp:/表示用FTP(File Transfer Protocol)协议来连通FTP服务器，此时，hostdnorip项前还可以加上用户名(userid)和密码(passwd)，即URL的具体格式形如 ftp:/userid:passwdhostDNorIP:port/path/file 载入本机文件，其URL为：file:/driver:/path/file （绝对地址）,例如：/chn/index.htm,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.3 本地链接 在一台机器上对不同文件进行链接叫本地链接。 为了便于网站的发布及维护，要养成将所有本地的链接目标都放置在站点指定目录下的习惯，学会文件管理。例如：,采用相对路径（或相对地址）的方式实现各种本地链接 链接和当前页面同级的文件地址只要用“文件名”即可； 链接当前页面下级子目录下的文件用“目录名/文件名”； 链接当前页面上一级目录下的文件用“/文件名”；链接同级但在另外一个子目录中的文件用“/目录名/文件名”；,实例,绝对路径：file:/f:/ykz/web/music/music_index.htm,相对路径：music/music_index.htm,采用相对地址，即使web这个文件夹移到其他路径，文件之间的位置不会改变，则相对地址也不会改变。,2.4 建立超链接,2.4.3 本地链接 在网站中提倡用相对地址，为什么？ 例如，若有一个index.htm，其间引用了images目录的一些图片。 如果使用相对地址，搬家的时候只需把原来这些文件全部上传到新的空间即可，因为文件彼此之间的相对位置关系没有改变，所以这些地址仍然是有效的。 但如果插入图片的时候使用了绝对地址，那空间地址一变，引用处的图片路径也要随之改变。当然，有时也会用到绝对地址，例如友情链接别人的主页等等。,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.4 书签链接 （1）书签：在内容较多的网页内建立内部链接时，它的链接目标不是其他文档，而是网页内的其他位置，也叫做书签。 定义书签的格式为 书签内容 或 书签内容,为了能够兼容更多的浏览器，一般建议在书签的定义中同时使用name和id属性，并且设为相同的属性值，即同一个书签名称。,养成低碳生活习惯,在默认情况下，它将跳转到页面的顶部,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.4 书签链接 （2）链向书签的超链接： 同一个网页中书签链接的格式为 链接源 如果链接指向其他文件的某一部分，格式为 链接源,绝对路径 ：/mxm/index.html#part1 相对路径：/index.html#part1,这里的目标文件的地址，可以是相对的，也可以是绝对的。例如：,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.4 书签链接 （3）空链接特殊的书签链接： 格式为 链接源 在默认情况下，它将跳转到页面的顶部 。 在页面设计初期，当链接目标不确定时可以使用空链接；或者链接的目标本身就是当前网页，也用空链接。,东方学院信息分院电子商务教研室,2.4 建立超链接,2.4.5 下载文件链接 如果链接到的文件不是XHTML文件，而是作为下载的文件，其格式为 链接源 2.4.6 邮件链接 指向电子邮件链接的格式为 链接源 也可以增加设置邮件主题的subject属性，其格式为 超链接显示文本,2.4 建立超链接链习 （1）建立新页面，新页面为中秋网页内容的目录 （2）在上面建立的新页面各个条目上建立超链接，使之转向中秋网页对应位置的内容。 （3）在网页下方建立电子邮件链接，单击链接后用户可以给自己发送邮件。,东方学院信息分院电子商务教研室,2.5 插入多媒体,2.5.1 插入图像 2.5.2 音频、视频及动画 2.5.3 背景音乐,东方学院信息分院电子商务教研室,2.5 插入多媒体,2.5.1 插入图像 在网页中使用的图像格式一般为GIF、JPEG和PNG。XHTML使用标记在网页中插入图像，其基本格式为： 图像也可以做成超链接的链接源，方法与文本超链接类似，只要将特定图像的标记放置在超链接标记之间，并在标记中指明链接目标就可以了，其格式为 ,东方学院信息分院电子商务教研室,2.5 插入多媒体,2.5.1 插入图像 属性：,东方学院信息分院电子商务教研室,2.5 插入多媒体,2.5.2 插入音频、视频及动画 使用标记嵌入音视频文件的基本格式为 ,东方学院信息分院电子商务教研室,2.5 插入多媒体,2.5.3 背景音乐 对于IE浏览器，有一个专用的背景音乐标记，其基本格式为 还有一个属性为loop，用来设置播放的次数，取值为数字，而不再有true或false的取值。如需要无限制的重复播放，只需将loop设置为-1即可。 用设置的背景音乐有两个特点： （1）只适用于在IE浏览器中播放背景音乐； （2）当页面窗口最小化时，就会暂停播放背景音乐，直到重新还原或最大化窗口时才继续播放。,2.5 练习 为自己的中秋网页选择合适的图片并插入 选择合适的背景音乐并插入（注意，选择midi格式的音乐）,东方学院信息分院电子商务教研室,2.6 使用表格,2.6.1 表格的基本标记和基本结构 2.6.2 表格的基本属性 2.6.3 利用表格来布局,2.6 表格,2.6.1 表格的基本标记和基本结构 (1) 表格标记 、（定义行）、（定义表头单元格）、（定义普通单元格） (2) 表格的基本结构 第1行第1列表头内容 第1行第2列表表头内容 第1行第1列单元格内容 第1行第2列单元格内容 ,2.6.2 表格的基本属性 （1）表格的宽和高 width：指定整个表格表格某一行某个单元格的宽度，单位可以是百分比（）也可以是像素（px）。 Height：指定整个表格表格某一行某个单元格的高度，单位可以是百分比（）也可以是像素（px） 。 （2）边框及其颜色 border：设定边框粗细 Bordercolor：设定边框颜色,2.6 表格,（）背景颜色和背景图像 bgcolor background （）对齐方式 align：left/center/right valign：top/middle/bottom/baseline （仅行和单元格） （）间距（单元格间的距离）和边距 （）单元格跨越的行数和列数 colspan rowspan,2.6 表格,2.6.3 利用表格来布局 可以利用表格很好地来划分内容区域，使各种文字、图片按照要求整齐地摆放在一起，形成一个整体 。,2.6 表格,2.7 表单,用于实现与服务器端的交互。 如上网注册时用于填写个人资料，而后按递交按钮，这样，服务器即可处理递交的信息，这个页面即为表单。 主要包括：、等标记。,2.7 表单,2.7.1 标记 围堵标记，所有其他的表单标记应写作标记包含的范围内。 主要属性： action：值为URL，指向处理表单的程序。 method：设定数据的传送方式。get或post。 name：设定表单