1、第3章 网页结构语言XHTML,3.1 标记语言简介,3.1.1 标准通用标记语言SGML SGML有高稳定性与完整性的优点，这使得SGML可以适用在各类应用领域。由于SGML的高度完整性与稳定性，相对的其复杂性也高，造成其高费用。,3.1.2 超文本标记语言HTML 在HTML中被制定的DTD有3种： Strict DTD。 Transitional DTD。 Frameset DTD。,3.1.3 可扩展标记语言XML XML（eXtensible Markup Language，可扩展标记语言）是W3C组织于1998年2月发布的标准，它的目的是定义一种互联网上交换数据的标准。,3.1.4
2、 可扩展超文本标记语言XHTML XHTML（Extensible Hyper Text Markup Language，可扩展超文本标记语言）的XHTML 1.0规范也于2000年1月通过W3C的审核与推荐。,3.2 XHTML文档基础,3.2.1 XHTML文档的基本结构 现在以一个XHTML文档实例，来介绍XHTML文档的基本结构，并由基本结构认识、等控制标记的使用。 【例3-1】,XHTML文档是一种纯文本格式的文件，XHTML文档由被标记的内容和标记组成，XHTML文档的基本结构为：,3.2.2 标记及XHTML代码规范,1标记及其属性 XHTML文档由标记和被标记的内容组成。标记（
3、tag，在Dreamweaver中文版中，tag被翻译为标签）能产生所需的各种效果。格式为：受标记影响的内容 有些标记不是成对的，称为单标记。其格式为：例如，插入图片标记表示为： ,2XHTML代码规范 (1) 所有的标记都必须要有一个相应的结束标记 (2) 所有标记的名称和属性的名字都必须使用小写 (3) 所有的标记都必须合理嵌套 (4) 所有属性必须用引号括起来 (5) 把所有“”和“&”特殊符号用编码表示 (6) 给所有属性赋一个值 (7) 不要在注释内容中使“-”,3.2.3 声明文档类型 其格式为：XHTML 1.0提供了三种DTD声明可供选择，这三种DTD的名称分别是： 过渡的（T
4、ransitional） 严格的（Strict） 框架的（Frameset）,3.2.4 XHTML文档根标记与声明命名空间 XHTML文档标记的格式为：文档的内容 ,3.2.5 XHTML文档头和文档标题标记 XHTML文档头标记的格式为：网页的标题【例3-2】,3.2.6 XHTML文档主体标记 XHTML文档主体标记的格式为：网页的内容主体位于头部之后，以为开始标记，为结束标记。,3.3 网页文件的创建,3.3.1 编辑和保存网页文件 用任何网页编辑器都能编辑制作XHTML文件。下面用最简单的“记事本”来编辑网页。 打开记事本。 创建新文件，并按XHTML语言规则编辑。 保存网页。 网页
5、文件的扩展名是.html或.htm。首页（主页）文件名设为index.html或index.htm。,3.3.2 预览和修改网页文件 打开.html网页文件最简单的方法是用“Windows资源管理器”或“我的电脑”。,3.4 文本标记,3.4.1 注释标记 注释标记的格式为：结束标记与开始标记可以不在一行上，长度不受限制。,3.4.2 强制换行和不换行标记 强制换行标记的格式为： 文字 不换行标记格式为： 文字 【例3-3】,3.4.3 特殊字符 常用的特殊字符见表3-1。,3.4.4 段落标记 段落标记的格式为： 文字 【例3-4】,3.4.5 标题文字标记 标题文字标记的格式为：标题文字
6、【例3-5】,3.4.6 水平线标记 水平线标记的格式为：color设定线条颜色，默认为黑色。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，见表3-2。,【例3-6】,3.4.7 特定文字样式标记 在显示文字时，有时会对某些短语显示一些特定的字形来产生一定的突出、区别、强调等效果。 .（emphasis）被用来强调文本，显示为斜体字。 .（strong emphasis）是近一步强调，显示为粗体字。 .作为上标样式显示。 .作为下标样式显示。 【例3-7】,3.4.8 原样显示文本标记 其格式为： 文本 中不能包含、等标记。 【例3-8】,3.4.9 设置网页背景和文字的颜色
7、 标记的格式为：网页的内容【例3-9】,3.4.10 字体标记 字体标记的格式为： 被设置的文字 【例3-10】,3.5 超链接,3.5.1 锚点标记 标记的格式为： 超链接显示文本 中不能包含其他，即自己不能嵌套。 URL的格式为： 通信协议:/链接地址/文件位置/文件名称,3.5.2 链接到其他网页,1链接到同一目录中的网页文件 目标文件名是链接所指向的文件。链接到同一目录内的网页文件的格式为： 超链接显示文本 【例3-11】,2链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为： 超链接显示文本,3链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为： 超链接显
8、示文本 其中“/表示退到上一级目录中。,4链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为： 超链接显示文本 表示先退到上一级目录中，然后再进入到目标文件所在的目录。,3.5.3 同一个网页中的链接 同一个网页中超链接标记的格式为： 超链接显示文本 即单击源点超链接名称，将跳转到“锚点名称”开始的位置。 书签就是用标记对该位置作一个记号。如果有多个链接，不同目标位置要设置不同的记号。定义书签的格式为： 目标文本附近的文本 【例3-12】,如果要建立指向其他页面某处的文本，格式为： 超链接显示文本 要在跳转到的位置处加上链接标记： 目标文本附近的文本,3.5.4 链接到其他站点 使用
9、http协议，可以建立链接到其他网站上网页的超链接。其格式为： 超链接显示文本 【例3-13】,3.5.5 链接到下载文件 如果链接到的文件不是HTML文件，而是作为下载的文件，其格式为： 超链接显示文本 【例3-14】,3.5.6 链接到电子邮件 指向电子邮件链接的格式为： 超链接显示文本 例如，E-mail地址是，邮件主题是“新年好”，则建立如下链接： ,3.6 图像,3.6.1 网页的背景,1设置背景色 的bgcolor属性用于设置网页的背景色。格式为： 网页内容 “颜色值”可以为颜色的英文名或相应十六进制值。,2用图片作为背景 使用标记的background属性，可为网页铺上背景图像。
10、格式为： 网页内容 在浏览器中滚动网页内容时，如果希望背景图像固定不动，可在中加入属性bgproperties=“fixed“。 【例3-15】,3.6.2 图像标记 图像标记的格式为：【例3-16】 【例3-17】文本将不再环绕图片。格式为：其中clear的取值可为：left（取消在图片左侧放置的文本）、right（取消在图片右侧放置的文本）或all（取消在图片左、右侧放置的文本）。 【例3-18】,3.6.3 用图像作为超链接 把标记放在和之间，这个图像就可作为超链接，图像被加上蓝色边框，单击图像将跳转到其他地址。格式为：例如，【例3-18】中的代码：,3.7 列表,3.7.1 无序列表标
11、记 无序列表中每一个表项的前面是项目符号（如、等符号）。建立无序列表可使用标记和表项标记。格式为：第一个列表项第二个列表项【例3-19】,3.7.2 有序列表标记 通过带序号的列表可以更清楚地表达信息的顺序。使用标记可以建立有序列表，表项的标记仍为。格式为：表项1表项2【例3-20】 【例3-21】,3.8 表格,3.8.1 简单表格 最简单的表格仅包括行和列。格式为：表头1 表头2 表头n表项1 表项2 表项n表项1 表项2 表项n【例3-22】 【例3-23】,3.8.2 表格内文字的对齐方式,1水平对齐 表项数据的水平对齐用标记、和的align属性。align的属性值分别为：left（左
12、对齐）、center（居中）、right（右对齐）或justify（左右调整）。 【例3-24】,2垂直对齐 表项数据的垂直对齐用标记、和的valign属性。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。 【例3-25】,3.8.3 表格在页面中的对齐方式 使用标记的align属性，格式为： 当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。默认情况下，文本在表格的下面。 【例3-26】,3.8.4 表格的颜色和图片背景 bgcolor=“颜色或颜色值“设置背景
13、颜色。 background=“图片文件名“设置背景图片。 bordercolor=“颜色“设置表格边框的颜色。 bordercolorlight=“颜色“设置表格边框亮部的颜色。 rules=“row,cols或none“ 设置表内线的显示方法，none为无内线。,2内嵌音频播放插件 通过内嵌音频播放插件可以在浏览器中出现控制面板，也可作为背景音乐。其格式为：【例3-28】,3IE中的背景音乐 可以插入背景音乐，只有在IE浏览器中才可以听到。其格式为：播放次数取-1或infinte时，声音将一直播放直到关闭该网页为止。,3.9.3 视频标记 用浏览器可以播放的格式有：MOV、AVI、WMV等
14、格式。,1链接一个视频文件. 与链接音频文件一样，可将视频文件做成一个超链接。其格式为： 超链接显示文本 例如：播放一段视频： 欢迎光临,2内嵌视频播放插件 与播放音频文件一样，通过内嵌视频播放插件可以在浏览器中出现控制面板。其格式为：【例3-29】,3.9 字幕、音频和视频 3.9.1 字幕标记 流动字幕标记的格式为： 流动文字或（和）图片 【例3-27】 3.9.2 音频标记 1点播音乐 将音乐做成一个超链接，只需单击该链接，就可以听到音乐了。其格式为： 超链接显示文本 例如：播放一段MIDI音乐： 我们的爱,3.9.3 视频标记 用浏览器可以播放的格式有：MOV、AVI、WMV等格式。,
15、1链接一个视频文件. 与链接音频文件一样，可将视频文件做成一个超链接。其格式为： 超链接显示文本 例如：播放一段视频： 欢迎光临,2内嵌视频播放插件 与播放音频文件一样，通过内嵌视频播放插件可以在浏览器中出现控制面板。其格式为：【例3-29】,3.10 表单,3.10.1 表单标记 表单的基本语法及格式为：,3.10.2 文字和密码的输入 使用标记的type属性，可以在表单中加入表项，并控制表项的风格。type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“”。 【例3-30】,3.10.3 重置和提交 格式为：默认情况下，重置和提交的按钮
16、分别显示为“重置”和“提交查询内容”。,3.10.4 复选框和单选钮 用标记的type属性可设置选择钮的类型 属性value可设置该选择钮的控制初值，用以告诉表单制作者选择结果。 用checked=“checked“表示是否为默认选项。 name是该控件的惟一标识，同一组复选框或单选钮的名称是一样的。 【例3-31】,3.10.5 选择栏 标记的格式为：选项说明选项说明【例3-32】,3.10.6 多行文本框 格式为：多行文本其中的行数和列数是指不用滚动条就可看到的部分。,3.11 框架（多窗口页面）,3.11.1 建立框架 框架的基本结构为：,1标记 ,2标记【例3-33】 【例3-34】,
17、3.11.2 框架间的链接 超链接显示文本 【例3-35】,3.12 XHTML文档的验证 登录到http:/validator.w3.org/网站显示如图3-42所示。,如果不能通过验证，则显示如图3-43所示，并显示错误代码的位置；如果通过验证，则显示如图3-44所示。,3.13 习题3 1制作如图3-45所示的网页，要求章名为标题h2、居中；节名为标题h3、居左；小节为h4，居左等；整个网页背景色为乳白色，正文为宋体、蓝色。,2按如图3-46所示制作指向其他页面的链接，要求例题使用超链接，在网页中单击例题名，则在新的浏览器窗口显示该例题。 3制作如图3-47所示的网页，单击软件名称，则下载该文件。,4分别制作如图3-48所示的网页，单击小图片，将显示放大的图片。,5练习表格在页面中的应用，分别制作如图3-49所示的网页。其中在右图中单击“详细”则打开新的浏览器窗口，显示详细内容。,6制作如图3-50所示的流动字幕和流动图片。 7制作如图3-51所示的表单。,8制作输入密码的表单，如图3-52。题中用到了表格和图片。,9按如图3-53所示制作表单网页，并把表单数据送到某E-Mail。 10制作如图3-54所示的框架网页。在左框架中单击项目，则右框架中显示相应的内容。,
