第2章--块级标签.pptVIP

网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案 * * 2.1 基本块级标签 2.2 用于布局的块级标签 2.3 实训——制作什锦果园关于页面 第2章 块级标签 基本块级标签包括标题标签、段落标签和水平线标签。 2.1.1 标题标签h#…/h# 在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，增加文章的条理性。标题文字标签的格式为： h# align=left|center|right 标题文字 /h# #用来指定标题文字的大小，取1-6之间的值，取1时文字最大。 【演练2-1】列出HTML中的各级标题。 2.1 基本块级标签 2.1.2 段落标签p…/p 段落标签放在段落的头部和尾部，用于定义一个段落。p…/p标签不但能使后面的文字换到下一行，还可以使两段之间多加一空行，相当于br/br/标签。段落标签的格式为： p align=left|center|right 文字 /p 其中，属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。 【演练2-2】列出包含p标签的多种属性。 2.1 基本块级标签 2.1.3 水平线标签hr/ 在页面中插入一条水平标尺线（horizontal rules），可以将不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的hr /标签时，会在此处换行，并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为： hr align=left|center|right size=横线粗细 width=横线长度 color=横线色彩 noshade= noshade / 其中，属性size设定线条粗细，以像素为单位，默认值为2。 【演练2-3】hr/标签的基本用法。 2.1 基本块级标签 2.1.4 案例——制作网络鞋城常见问题解答页面 【演练2-5】使用文字与段落的基本排版知识制作网络鞋城常见问题解答页面，本例文件2-6.html在浏览器中显示的效果如图2-6所示。 2.1 基本块级标签 常用于布局的块级标签包括无序列表、有序列表、表格、表单、分区div。 2.2.1 无序列表 无序列表中每一个表项的前面是项目符号（如●、■等符号）。建立无序列表可使用ul标签和li表项标签。格式为： ul type=符号类型 li type=符号类型1 第一个列表项 li type=符号类型2 第二个列表项 … /ul type指定每个表项左端的项目类型，可为disc、circle、square。 【演练2-6】制作网络鞋城支付方式的无序列表。 2.2 用于布局的块级标签 2.2.2 有序列表 有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用ol标签可以建立有序列表，表项的标签仍为li。格式为： ol type=符号类型 li type=符号类型1 表项1 li type=符号类型2 表项2 … /ol type属性可设定5种序号：数字、大小写英文字母、大小写罗马字母，序号标签默认为数字。 【例2-7】制作网络鞋城网银在线支付步骤的有序列表。 有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套，给人层次感。 2.2 用于布局的块级标签 2.2.3 表格 1．使用表格的优点 表格是由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示如图所示。 行 列 单元格 2.2 用于布局的块级标签 2.表格的基本语法 表格主要通过3个标签来构成：table、tr和td。 表格的语法格式为： table border=n width=x|x% height=y|y% cellspacing=i cellpadding=j caption align=left|right|top|bottom valign=top|bottom标题/caption tr th表头1/th th表头2/th th…/th th表头n/th/tr tr td表项1/td td表项2/td td…/td td表项n/td/tr … tr td表项1/td td表项2/td td…/td