第2章--块级标签.pptxVIP

2.1基本块级标签

2.2用于布局的块级标签

2.3实训——制作什锦果园关于页面;基本块级标签包括标题标签、段落标签和水平线标签。

2.1.1标题标签h#…/h#

在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，增加文章的条理性。标题文字标签的格式为：

h#align=left|center|right标题文字/h#

【演练2-1】列出HTML中的各级标题。

;2.1.2段落标签p…/p

段落标签放在段落的头部和尾部，用于定义一个段落。p…/p标签不但能使后面的文字换到下一行，还可以使两段之间多加一空行，相当于br/br/标签。段落标签的格式为：

palign=left|center|right文字/p

其中，属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。

【演练2-2】列出包含p标签的多种属性。;2.1.3水平线标签hr/

在页面中插入一条水平标尺线（horizontalrules），可以将不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的hr/标签时，会在此处换行，并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为：

hralign=left|center|rightsize=横线粗细width=横线长度color=横线色彩noshade=noshade/

其中，属性size设定线条粗细，以像素为单位，默认值为2。

【演练2-3】hr/标签的基本用法。;2.1.4案例——制作网络鞋城常见问题解答页面

【演练2-5】使用文字与段落的基本排版知识制作网络鞋城常见问题解答页面，本例文件2-6.html在浏览器中显示的效果如图2-6所示。;常用于布局的块级标签包括无序列表、有序列表、表格、表单、分区div。

2.2.1无序列表

无序列表中每一个表项的前面是项目符号（如●、■等符号）。建立无序列表可使用ul标签和li表项标签。格式为：

ultype=符号类型

litype=符号类型1第一个列表项

litype=符号类型2第二个列表项

…

/ul

【演练2-6】制作网络鞋城支付方式的无序列表。;2.2.2有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用ol标签可以建立有序列表，表项的标签仍为li。

格式为：

oltype=符号类型

litype=符号类型1表项1

litype=符号类型2表项2

…

/ol

【例2-7】制作网络鞋城网银在线支付步骤的有序列表。;2.2.3表格

1．使用表格的优点

表格是由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示如图所示。;2.表格的基本语法

表格主要通过3个标签来构成：table、tr和td。表格的语法格式为：

tableborder=nwidth=x|x%height=y|y%cellspacing=icellpadding=j

captionalign=left|right|top|bottomvalign=top|bottom标题/caption

trth表头1/thth表头2/thth…/thth表头n/th/tr

trtd表项1/tdtd表项2/tdtd…/tdtd表项n/td/tr

…

trtd表项1/tdtd表项2/tdtd…/tdtd表项n/td/tr

/table

【演练2-9】在页面中添加一个3行2列的表格。;3.跨行跨列的表格

（1）跨行

跨行是指单元格在垂直方向上合并，语法如下：

table

tr

tdrowspan=所跨的行数单元格内容/td

/tr

/table

其中，rowspan表示跨行的意思。

【演练2-10】制作一个跨行展示的不同鞋类的库存表格。;（2）跨列

跨列是指单元格在水平方向上合并，语法如下：

table

tr

tdcolspan=所跨的行数单元格内容/td

/tr

/table

其中，colspan表示跨列的意思。

【演练2-11】制作一个跨列展示的