渤海大学信息科学与技术学院第第第第3 3章章章章如何建立如何建立如何建立如何建立结结构化文档构化文档构化文档构化文档www.bhu.edu.cn张树明333fff3f163.com预习检查标签表示什么？无序列表用什么标签表示？列表项用什么标签表示？www.bhu.edu.cn张树明333fff3f163.com简要介绍所谓结构化文档是采用XHTML通用元素标签将页面划分成不同的区域或块，然后在不同的区域或块中填充内容，如报刊杂志版面设计一样。www.bhu.edu.cn张树明333fff3f163.com主要内容3.1 XHTML通用元素3.2 基本的XHTML元素3.3 XHTML文本格式化3.4 XHTML列表3.5 叮叮书店首页结构化文档www.bhu.edu.cn张树明333fff3f163.comXHTML通用元素 标签可定义文档中的分区或节（division/section），简称块，div是division的简写，division意为分割、区域、分组。标签可以把文档分割为独立的、不同的部分，如果用id或class来标记，那么该标签的作用会变得更加有效。是一个块级元素。如下面代码： 这是一个标题块状元素的宽度为100，而且后面隐藏附带有换行符，使块状元素始终占据一行。www.bhu.edu.cn张树明333fff3f163.comXHTML通用元素标签标签被用来组合文档中的行内元素。使用来组合行内元素，如：一些文本一些其它文本行内元素没有高度和宽度，因此也就没有固定的形状。www.bhu.edu.cn张树明333fff3f163.com基本XHTML元素标签标签描述描述 to 定义标题 1 至标题 6。定义段落。插入折行。定义水平线。定义注释。www.bhu.edu.cn张树明333fff3f163.com基本XHTML元素标题标题标题使用 至 标签进行定义。 定义最大的标题。 定义最小的标题。这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题这是一个标题XHTML 会自动在标题前后添加一个额外的换行。www.bhu.edu.cn张树明333fff3f163.com基本XHTML元素段落段落段落使用 标签进行定义。这是一个段落这是另一个段落XHTML 会自动在段落前后添加一个额外的空行。当打算结束一行，而又不想开始一个新段落时， 标签就派上用场了， 标签会产生一个强制的换行。这是一个段落被换行www.bhu.edu.cn张树明333fff3f163.com基本XHTML元素注释注释注释标签用于在 XHTML 源码中插入注释。注释会被浏览器忽略。可以使用注释对代码进行解释。左括号后需要写一个惊叹号，右括号前就不需要了。www.bhu.edu.cn张树明333fff3f163.comXHTML文本格式化文本格式化标签文本格式化标签实例xhtml (format).html标签标签描述描述定义粗体文本。定义大号字。定义着重文字。定义斜体字。定义小号字。定义加重语气。定义下标字。定义上标字。定义插入字。定义删除字。www.bhu.edu.cn张树明333fff3f163.comXHTML文本格式化文本格式化标签文本格式化标签www.bhu.edu.cn张树明333fff3f163.comXHTML文本格式化“计算机输出计算机输出”标签标签实例xhtml(pre).html使用了pre标签对空行和空格进行控制，实例xhtml(code).html列出了不同“计算机输出”标签的显示效果。标签标签描述描述定义计算机代码。定义键盘码。定义计算机代码样本。定义打字机代码。定义变量。定义预格式文本。www.bhu.edu.cn张树明333fff3f163.comXHTML文本格式化“计算机输出计算机输出”标签标签www.bhu.edu.cn张树明333fff3f163.comXHTML文本格式化引用和术语定义引用和术语定义实例xhtml(address).html说明了如何在 HTML 文件中写地址，如何实现缩写或首字母缩写，如何改变文字的方向。标签标签描述描述定义缩写。定义首字母缩写。定义地址。定义文字方向。定义长的引用。定义短的引用语。www.bhu.edu.cn张树明333fff3f163.comXHTML文本格式化引用和术语定义引用和术语定义www.bhu.edu.cn张树明333fff3f163.comXHTML列表XHTML 支持有序、无序和定义列表。标签标签描述描述定义有序列表。定义无序列表。定义列表项。定义定义列表。定义定义项目。定义定义的描述。www.bhu.edu.cn张树明333fff3f163.comXHTML列表无序列表无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（小黑圆圈）进行标记。无序列表始于标签，每个列表项始于，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。实例xhtml(ul).html使用了无序列表。www.bhu.edu.cn张树明333fff3f163.comXHTML列表有序列表有序列表有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于标签，每个列表项始于标签，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。实例xhtml(ol).html使用了不同类型的有序列表。www.bhu.edu.cn张树明333fff3f163.comXHTML列表定义列表定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以标签开始，每个自定义列表项以开始，每个自定义列表项的描述以开始，定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。实例xhtml(dl).html使用了定义列表。www.bhu.edu.cn张树明333fff3f163.com叮叮书店首页结构化文档用用确定文档的结构确定文档的结构整个页面使用一个，分成三个部分页头、页体、页脚，页体又分成左边、右边两部分。 页头 页体 页体左边 页体右边 页脚www.bhu.edu.cn张树明333fff3f163.com叮叮书店首页结构化文档填加文本内容填加文本内容页头显示网站logo和导航菜单。网站logo和导航菜单也分别放在中，导航菜单使用了无序列表。页体左边显示本周推荐和最近新书栏目。页体右边显示促销、分类和关于书店栏目。页脚显示网站联系及版权标志。实例index1.html。www.bhu.edu.cn张树明333fff3f163.com总结XHTML通用元素文本元素列表www.bhu.edu.cn张树明333fff3f163.com预习第4章 正确使用超链接