文档介绍：课前指导
课堂教学
上机练习
课后作业
第3课 HTML语言介绍(二)
课前指导
列表(LIST)通常用于列举相关的信息条目,提供一种有组织的易于浏览的阅览格式,以及用于描述一个分布的过程。
表格(TABLE)将文本和图片按行、列排列,它和列表一样,有利于表达信息。值得注意的是,表格往往在主页中用来建立主页的框架,使整个页面更规则地放置图片和空白,并使条目清晰。
框架(FRAMES)是在同一浏览器窗口中显示多个相互隔离的HTML页的结构,每个区域显示一个HTML文件。利用框架结构可以在页面中同时浏览多个页面。
课堂教学
列表标记
表格
框架
自动刷新页面
列表标记
1. 无序列表标记
2. 菜单列表标记
3. 有序列表标记
4. 定义列表标记
5. 列表的嵌套
1. 无序列表标记
无序列表中每一个表项的前面是项目符号(如●、■等)。建立无序列表使用<UL>标记和<LI>表项标记。格式为:
<UL type=符号类型>
<LI type=符号类型1> 第一个列表项
<LI type=符号类型2> 第二个列表项
…
</UL>
说明:
① type属性指定每个表项左端的符号类型,取值有:disc(实心圆点●)、circle(空心圆点○)、square(方块■)
②在<UL>后指定符号的样式,可设定直到</UL>;在<LI>后指定符号的样式,可以设置从该<LI>起直到</UL>。
③<LI>标记是单标记。即一个表项的开始,就是前一个表项的结束。
从浏览器上看,无序列表的特点是,列表项目作为一个整体,与上下段文本间各有一行空白;表项向右缩进并左对齐,每行前面有项目符号。
【例3-1】无序列表应用示例。
<HTML>
<HEAD><TITLE>无序列表</TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学</B>
</FONT></P>
<UL>中国古典文学
<LI type=circle>红楼梦
<LI type=square>三国演义
<LI type=disc>水浒传
<LI>西游记
</UL>
<UL type=circle>中国近现代文学
<LI>阿Q正传
<LI>围城
<LI>四世同堂
<LI>
<LI type=square>编辑部的故事
</UL>
</BODY>
</HTML>
在浏览器中的显示效果。
2. 菜单列表标记
菜单列表比无序列表更紧凑,它往往用于列出几个相关网页的索引,以便通过超链接来很快选取感兴趣的内容。它用<MENU>标记替代<UL>,并引入<LH>来定义菜单列表的标题。格式为:
<MENU>
<LH> 菜单列表的标题
<LI> 第一个列表项
<LI> 第二个列表项
…
<LH> 菜单列表的标题
<LI> 第一个列表项
<LI> 第二个列表项
…
</MENU>
在浏览器中显示时,除<LH>定义的标题前没有项目符号外,其他与<LI>定义的列表项相同。
【例3-2】在例3-1中使用菜单列表。
<HTML>
<HEAD><TITLE>菜单列表</TITLE></HEAD>
<BODY>
<P align=center><FONT color=blue size=4><B>中国文学</B></FONT></P>
<MENU>
<LH><FONT color=purple>中国古典文学</FONT><LI type=circle>红楼梦
<LI type=square>三国演义
<LI type=disc>水浒传
<LI>西游记
<BR>
<LH><FONT color=purple>中国近现代文学</FONT>
<LI>阿Q正传
<LI>围城
<LI>四世同堂
<LI>
<LI type=square>编辑部的故事
</BODY>
</HTML>
在浏览器中的显示效果。
3. 有序列表标记
通过带序号的列表可以更清楚地表达信息的顺序。使用<OL>标记可以建立有序列表,表项的标记仍为<LI>。格式为:
<OL type=符号类型>
<LI type=符号类型1> 表项1
<LI type=符号类型2> 表项2
…
</OL>
说明:
①属性type指定符号的类型见表3-1。