第2章-块级标签

2.1

基本块级标签2.2

用于布局的块级标签2.3实训——制作什锦果园关于页面第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/>标签。段落标签的格式为：<palign="left|center|right">文字</p>

其中，属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐），默认为left。格式中的“|”表示“或者”，即多项选其一。【演练2-2】列出包含<p>标签的多种属性。2.1

基本块级标签2.1.3水平线标签<hr/>

在页面中插入一条水平标尺线（horizontalrules），可以将不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为：<hralign="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>表项标签。格式为：<ultype="符号类型"><litype="符号类型1">第一个列表项

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

…</ul>【演练2-6】制作网络鞋城支付方式的无序列表。2.2

用于布局的块级标签2.2.2有序列表有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为<li>。格式为：<oltype="符号类型"><litype="符号类型1">表项1<litype="符号类型2">表项2…</ol>【例2-7】制作网络鞋城网银在线支付步骤的有序列表。2.2

用于布局的块级标签2.2.3表格1．使用表格的优点表格是由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示如图所示。行列单元格2.2

用于布局的块级标签2.表格的基本语法表格主要通过3个标签来构成：<table>、<tr>和<td>。表格的语法格式为：<tableborder="n"width="x|x%"height="y|y%"cellspacing="i"cellpadding="j"><captionalign="left|right|top|bottomvalign=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><tdrowspan="所跨的行数">单元格内容</td></tr></table>

其中，rowspan表示跨行的意思。【演练2-10】制作一个跨行展示的不同鞋类的库存表格。2.2

用于布局的块级标签（2）跨列跨列是指单元格在水平方向上合并，语法如下：<table><tr><tdcolspan="所跨的行数">单元格内容</td></tr></table>其中，colspan表示跨列的意思。【演练2-11】制作一个跨列展示的不同鞋类的库存表格。2.2

用于布局的块级标签（3）跨行、跨列【演练2-12】制作一个跨行跨列展示的不同鞋类的库存表格。2.2

用于布局的块级标签4．表格数据的分组标签表格数据的分组标签包括<thead>、<tbody>和<tfooter>，主要用于对报表数据进行逻辑分组。其中，<thead>标签定义表格的头部；<tbody>标签定义表格主体，即报表详细的数据描述；<tfoot>标签定义表格的脚部，即对各分组数据进行汇总的部分。【演练2-13】制作一个鞋城季度销量数据报表。2.2

用于布局的块级标签5．表格内文字的对齐方式（1）水平对齐

align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。（2）垂直对齐

valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。6.表格在页面中的对齐方式设置表格在页面中的位置，格式为：<tablealign="left|center|right">2.2

用于布局的块级标签7.表格的应用（1）使用表格显示数据【演练2-14】制作鞋城季度销量一览表。2.2

用于布局的块级标签7.表格的应用（2）使用表格实现页面局部布局【演练2-15】制作网络鞋城商品分类页面。2.2

用于布局的块级标签2.2.4表单1．表单的工作原理

表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作，表单的工作原理如图2-18所示。

2.2

用于布局的块级标签2.表单标签网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单。表单的基本语法及格式为：<formname="表单名"action="URL"method="get|post">…</form>name属性：表单的名字，在一个网页中用于唯一识别一个表单。action属性：表单处理的方式，往往是E-mail地址或网址。method属性：表单数据的传送方向，是获得（GET）表单还是送出（POST）表单。

2.2

用于布局的块级标签2.2.5分区标签<div>

分区标签<div>常用于页面布局时对区块的划分，它相当于一个大“容器”，可以容纳无序列表、有序列表、表格、表单等块级标签，同时也可以容纳普通的标题、段落、文字、图片等内容。由于<div>标签没有明显的外观效果，所以需要为其添加CSS样式属性，才能看到区块的外观效果。

分区标签的格