模块三 HTML基础.ppt

任务三 HTML常用标记及属性介绍 2．序号列表 序号列表和无序号列表的使用方法基本相同，它使用标签ol/ol，每一个列表项前使用li。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示： ol 　　li第一项 　　li第二项 　　li第三项 /ol 任务三 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常用标记及属性介绍 3．表格的大小 一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，直接固定表格的大小，可以使用下列方式： table width=n1 height=n2 width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。注意当width和height的值n1与n2为数字像素时，像素值要用双引号（””）括起来，百分比直接写。 4．边框尺寸设置 边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。 任务三 HTML常用标记及属性介绍 5．格间线宽度 格与格之间的线为格间线，它的宽度可以使用table中的cellspacing属性加以调节。格式是： table cellspacing=#　　　#表示要取用的像素值 6．内容与格线之间的宽度 我们还可以在table中设置cellpadding属性，用来规定内容与格线之间的宽度。格式为： table cellpadding=#　　　#表示要取用的像素值 7．表格内文字的对齐/布局表格中数据的排列方式 左右排列是以align属性来设置，而上下排列则由valign属性来设置。 左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)； 上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。 任务三 HTML常用标记及属性介绍 实例3-7：插入表格的HTML代码及效果图 代码： html head title 表格插入 /title body caption align=top 2008级计算机网络班学生名单 /caption table width=100% height=50% table border=2　width=1000 trth width=10%序号/th th width=40%姓名/t