第2章块级标签汇总.pptVIP

第2章 块级标签 基本块级标签包括标题标签、段落标签和水平线标签。 2.1.1 标题标签h#…/h# 在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，增加文章的条理性。标题文字标签的格式为： h# align=left|center|right 标题文字 /h# 【演练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 【演练2-6】制作网络鞋城支付方式的无序列表。 2.2 用于布局的块级标签 2.2.2 有序列表 有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用ol标签可以建立有序列表，表项的标签仍为li。 格式为： ol type=符号类型 li type=符号类型1 表项1 li type=符号类型2 表项2 … /ol 【例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 td表项n/td/tr /table 【演练2-9】在页面中添加一个3行2列的表格。 2.2 用于布局的块级标签 3. 跨行跨列的表格 （1）跨行 跨行是指单元格在垂直方向上合并，语法如下： table tr td rowspan=所跨的行数单元格内容/td /tr /table 其中，rowspan表示跨行的意思。 【演练2-10】制作一个跨行展示的不同鞋类的库存表格。 2.2 用于布局的块级标签 （2）跨列 跨列是指单元格在水平方向上合并，语