网页设计模块三 HTML基础.ppt

任务三 HTML常用标记及属性介绍 3．定义性列表 定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签dt标明，说明性文字使用dd表示（用dd标记定义的说明文字自动向右缩进）。在定义性列表中，还有一个属性是compact,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示： dl dt第一项 dd叙述第一项的定义 dt第二项 dd叙述第二项的定义 dt第三项 dd叙述第三项的定义 /dl 任务三 HTML常用标记及属性介绍 实例3-7：插入列表的HTML代码及效果图 代码： html head title 列表插入 /title body 1．无序号列表 ul 　　 li玉不琢，不成器； 　　 li人不学，不知义。 　　 li为人子，方少时， li亲师友，习礼仪。 /ul hr size=5 noshade 任务三 HTML常用标记及属性介绍 2．序号列表 ol 　　li玉不琢，不成器； 　　li人不学，不知义。 　　li为人子，方少时， li亲师友，习礼仪。 /ol hr size=5 noshade 任务三 HTML常用标记及属性介绍 3．定义列表 dl dt玉不琢，不成器； dd玉不经过雕琢就不能成为精美的玉器； dt人不学，不知义。 dd人如果不学习也不会懂得礼仪。 dt为人子，方少时， dd做子女的从小 dt亲师友，习礼仪。dd 就知道亲近老师和朋友，从他们那里学习礼仪知识。 /dl /body /html 效果：如图3-10所示 任务三 HTML常用标记及属性介绍 3-10 插入列表练习显示 任务三 HTML常用标记及属性介绍 1．表格的基本结构 table.../table 　定义表格 caption.../caption　定义标题 tr 　定义表行 th 　定义表头 td 　定义表元(表格的具体数据) 2．表格的标题 表格标题的位置，可由align属性来设置，其位置分别由表格上方和表格下方。 设置标题位于表格上方：caption align=top ... /caption 设置标题位于表格下方：caption align=bottom ... /caption 子任务4 表格 模块三 HTML基础 任务二 HTML文档的基本结构 任务三 HTML常用标记及属性介绍 任务一 认识HTML 任务一 认识HTML HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 子任务1 HTML简介 任务一 认识HTML 步骤1 单击【开始】→【程序】→【附件】→【记事本】，打开记事本。输入代码如下，并将当前文件保存为lx1.html（文件名可自己定，扩展名一定为.html），如图3-1所示。 子任务2 HTML制作简单网页 3-1 HTML编辑 任务一 认识HTML 步骤2 单击【开始】→【程序】→【Internet Explorer】，打开网页浏览器。单击【文件】→【打开】，弹出如图3-2所示对话框。 3-2 IE打开网页对话框 任务一 认识HTML 步骤3 单击〖浏览〗按钮，找到刚才建立的lx1.html文件，单击〖确定〗，网页显示如图3-3所示。 3-3 浏览器显示网页 任务二 HTML文档的基本结构 HTML文档是纯文本文档，由显示在窗口中的文字和HTML标记（TAG）组成。标记总是封装在由“”和“”组成的一对尖括号之中。标记只改变网页的显示方式，本身不会显示在窗口中。标记有单标记和双标记。 1．双标记 双标记由始标记和尾标记两部分构成，必须成对使用，如“title”和“/title”，在始标记和尾标记之间放入要修饰或说明的内容。 始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。 双标记的语法是： 标记内容/标记 其中“内容”部分就是要被这对标记施加作用的部分。 子任务1 HTML语法 任务二 HTML文档的基本结构 2．单标记 单标记只需单独使用就能完整地表达意思，这类标记的语法是： 标记 最常用的单标记是BR，表示在一个段落未结