第2课HTML语言〔二〕.ppt

第2课 HTML语言介绍（二） 2.1 课前指导 2.2 课堂教学 2.3 上机练习 2.4 课后作业 2.1 课前指导 列表（LIST）通常用于列举相关的信息条目，提供一种有组织的易于浏览的阅览格式，以及用于描述一个分布的过程。 表格（TABLE）将文本和图片按行、列排列，它和列表一样，有利于表达信息。值得注意的是，表格往往在主页中用来建立主页的框架，使整个页面更规则地放置图片和空白，并使条目清晰。 框架（FRAMES）是在同一浏览器窗口中显示多个相互隔离的HTML页的结构，每个区域显示一个HTML文件。利用框架结构可以在页面中同时浏览多个页面。 表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。 一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交”按钮，所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。 2.2 课堂教学 2.2.1 列表标记 2.2.2 表格 2.2.3 框架 2.2.4 表单 2.2.5 特技 2.2.6 自动刷新页面 2.2.6 网页设计基本原则 2.2.1 列表标记 1. 无序列表标记 2. 有序列表标记 3. 定义列表标记 4. 列表的嵌套 1. 无序列表标记 无序列表中每一个表项的前面是项目符号（如●、■等）。建立无序列表使用UL标记和LI表项标记。格式为： UL type=符号类型 LI type=符号类型1 第一个列表项 LI type=符号类型2 第二个列表项 … /UL 说明： ① type属性指定每个表项左端的符号类型，取值有：disc（实心圆点●）、circle（空心圆点○）、square（方块■） ② 在UL后指定符号的样式，可设定直到/UL；在LI后指定符号的样式，可以设置从该LI起直到/UL。 ③ LI标记是单标记。即一个表项的开始，就是前一个表项的结束。 从浏览器上看，无序列表的特点是，列表项目作为一个整体，与上下段文本间各有一行空白；表项向右缩进并左对齐，每行前面有项目符号。 【例2-1】无序列表应用示例。 HTML HEADTITLE无序列表/TITLE/HEAD BODY P align=centerFONT color=blue size=4B中国文学/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. 有序列表标记 通过带序号的列表可以更清楚地表达信息的顺序。使用OL标记可以建立有序列表，表项的标记仍为LI。格式为： OL type=符号类型 LI type=符号类型1 表项1 LI type=符号类型2 表项2 … /OL 说明： ① 属性type指定符号的类型见表2-1。 ② 在OL后指定符号的样式，可设定到/OL表项指定新的符号。 ③ 在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。 【例2-3】有序列表应用示例。 HTML HEADTITLE有序列表/TITLE/HEAD BODY P align=centerFONT color=blue size=4B中国文学/B/FONT/P OL FONT color=purple中国古典文学/FONT LI红楼梦 LI三国演义 LI水浒传 LI西游记 BR /OL OL type=I FONT color=purple 中国近现代文学 /FONT LI阿Q正传 LI围城 LI四世同堂 LI家.春.秋