第3章 网页的布局与交互

高等学校规划教材Web前端开发实例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第3章网页的布局与交互目录3.1表格元素table3.2使用结构元素构建网页布局3.3页面交互元素3.4分区元素div3.5范围元素span3.6表单3.1表格元素table3.1.1表格的结构3.1.2基本表格3.1.3跨行跨列表格3.1.4表格数据的分组3.1.5调整列的格式3.1.6案例—使用表格布局鲜品园产品展示页面3.1.1表格的结构 表格是由指定数目的行和列组成的。表格将文本和图像按行、列排列，它与列表一样，有利于表达信息。表格中的内容按照相应的行或列进行分类和显示，如图3-1所示。3.1.2基本表格 定义表格元素的格式为：<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>3.1.2基本表格 【例3-1】在页面中添加一个4行3列的表格。3.1.3跨行跨列表格 定义跨行跨列表格的格式为：<table><tr><tdrowspan="所跨的行数"colspan="所跨的列数">单元格内容</td></tr></table>【例3-2】跨行跨列表格示例。3.1.4表格数据的分组 表格数据的分组标签包括<thead>、<tbody>和<tfooter>，主要用于对表格数据进行逻辑分组。【例3-3】表格分组示例。3.1.5调整列的格式1）<colgroup>标签：对表格中的列组合，以便对其进行格式化。2）<col>标签：对表格中一个或多个列定义属性值，通常位于<colgroup>元素内。【例3-4】列格式示例。3.1.6案例—使用表格布局鲜品园产品展示页面 【例3-5】使用表格布局鲜品园产品展示页面。3.2使用结构元素构建网页布局3.2.1section元素3.2.2nav元素3.2.3header元素3.2.4footer元素3.2.5article元素3.2.6aside元素3.2.7分组元素3.2.8案例—制作鲜品园新品发布页面3.2.1section元素 section元素用来定义文件中的节（section、区段），如章节、页眉、页脚或文件中的其他部分。例如，下面的代码定义了文件中的区段，解释了CSS的含义。<section><h1>CSS</h1><p>是CascadingStyleSheets（层叠样式表单）的简称</p></section>3.2.2nav元素

nav元素用来定义导航链接的部分。例如，下面的代码定义了导航条中常见的首页、上一页和下一页链接。<nav><ahref="index.html">首页</a><ahref="prev.html">上一页</a><ahref="next.html">下一页</a></nav>3.2.3header元素 header元素用来定义文件的页眉。例如，下面的代码定义了文件的欢迎信息。<header><h1>欢迎光临我的主页</h1><p>我的名字是王小虎</p></header> 3.2.4footer元素 footer元素用来定义section或document的页脚，通常该标签包含网站的版权、创作者的姓名、文件的创作日期及联系信息。例如，下面的代码定义了网站的版权信息。<footer><p>Copyright©2021鲜品园版权所有</p></footer>3.2.5article元素 article元素用来定义独立的内容，该元素定义的内容可独立于页面中的其他内容使用。article元素经常应用于论坛帖子、新闻文章、博客条目和用户评论等应用中。 section元素可以包含article元素，article元素标签也可以包含section元素。section元素用来分组相类似的信息，article元素则用来放置诸如一篇文章或博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。3.2.5article元素 【例3-6】使用article元素定义新闻内容。3.2.6aside元素 aside元素用来表示当前页面或新闻的附属信息部分。【例3-7】使用aside元素定义了网页的侧边栏信息。3.2.7分组元素 分组元素用于对页面中的内容进行分组。HTML5中包含3个分组元素，分别是figure元素、figcaption元素和hgroup元素。 1．figure元素和figcaption元素 figure元素用于定义独立的流内容（图像、图表、照片、代码等），一般是指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文件流产生影响。3.2.7分组元素 【例3-8】使用figure元素和figcaption元素分组页面内容。3.2.7分组元素 2．hgroup元素 hgroup元素用于将多个标题（主标题和副标题或子标题）组成一个标题组，通常它与h1~h6元素组合使用。【例3-9】使用hgroup元素分组页面内容3.2.8案例—制作鲜品园新品发布页面 【例3-10】使用结构元素构建网页布局，制作鲜品园新品发布页面。3.3页面交互元素3.3.1details元素和summary元素3.3.2progress元素3.3.1details元素和summary元素 details元素用于描述文件或文件某个部分的细节。summary元素经常与details元素配合使用。【例3-11】使用details元素和summary元素描述文件。3.3.2progress元素 progress元素用于表示一个任务的完成进度。【例3-12】使用progress元素显示项目开发进度。3.4分区元素div3.4分区元素div 分区元素div常用于页面布局时对区块的划分，它相当于一个大“容器”。div元素可以容纳无序列表、有序列表、表格、表单块级标签，同时也可以容纳普通的标题、段落、文字、图像内容。 div元素是一个块级元素，通常使用div元素来组合块级元素，这样即可使用样式对它们进行格式化。由于div元素没有明显的外观效果，因此需要为其添加CSS样式属性。div元素的格式为：<divid="控件id"class="类名">文本、图像或表格</div>3.4分区元素div 【例3-13】使用div元素组织网页内容示例。3.5范围元素span3.5范围元素span span元素被用来组合文件中的行内元素。span元素没有固定的格式，当对它应用样式时，才会产生视觉上的变化。其格式为：<span>内容</span> 例如，<p><span>文本内容</span>其他内容</p>。 span元素与div元素的区别在于，span元素是个行内元素，不会换行，而div元素是一个块级元素，它包围的元素会自动换行。3.6表单3.6.1表单元素form3.6.2输入元素input3.6.3标签元素label3.6.4选择栏元素select3.6.5按钮元素button3.6.6多行文本元素textarea3.6.7表单分组3.6.8使用表格布局表单3.6.1表单元素form 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。<form>标签用于创建供用户输入的HTML表单。form元素是块级元素，其前后会产生折行。form元素的基本格式为：<formname="表单名"action="URL"method="get|post"…>…</form>3.6.2输入元素input

input元素用来定义用户输入数据的输入字段，根据不同的type属性值，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、图像、文件等。input元素的基本格式为：

<inputtype="表项类型"name="元素名"size="x"maxlength="y"/>3.6.2输入元素input

【例3-14】制作不同类型的input元素示例。3.6.3标签元素label label元素为表单中的其他控件元素添加说明文字。在浏览器中，当用户单击label元素生成标签时，就会自动将焦点转到与该标签相关的表单控件上。label元素的格式为：<labelfor="id">说明文字</label>【例3-15】label元素的示例。3.6.4选择栏元素select

select元素可创建下拉菜单或列表，实现单选或多选菜单。

1．select元素<selectsize="x"name="控件名"multiple="multiple"><optgroup><option…>…</option><option…>…</option>…</optgroup>…</select>3.6.4选择栏元素select

2．option元素

option元素定义下拉列表中的一个选项。浏览器将<option>标签中的内容作为<select>标签的菜单或是滚动列表中的一个元素显示。

option元素必须位于select元素内部。格式为：<optionvalue="选项值"selected="selected">…</option>3.6.4选择栏元素select

3．optgroup标签如果列表选项有很多，则可以使用<optgroup>标签对相关选项分组。optgroup元素的格式为：<optgroup><option…>…</option><option…>…</option>…</optgroup>3.6.4选择栏元素select【例3-16】制作问卷调查的下拉菜单示例。3.6.5按钮元素button <button>标签定义一个按钮。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的内容，包括文本、图像或多媒体内容。这是该元素与input元素创建的按钮之间的不同之处。button元素与<inputtype="button">相比，前者提供了更强大的功能和更丰富的内容。button元素的格式为：<buttontype="按钮的类型">文本、图像元素</button>3.6.5按钮元素button 【例3-17】按钮元素示例。3.6.6多行文本元素textarea

textarea元素定义多行的文本输入控件。可以输入多个段落的文字，文本区中可容纳无限数量的文本。

textarea元素的格式为：<textareaname="名称"rows="行数"cols="列数">初始文本内容</textarea>3.6.6多行文本元素textarea

【例3-18】多行文本元素示例。3.6.7表单分组 大型表单容易在视觉上产生混淆，可以通过表单分组将表单上的元素在形式上进行组合，以达到一目了然的效果。常见的分组标签有<fieldset>和<legend>。格式为：