HTML5 CSS3 JavaScript第3章ppt课件.pptx

《HTML5 CSS3 JavaScript第3章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第3章ppt课件.pptx（40页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、HTML5 CSS3 JavaScript 第3 章教学课件第3 章使用列表与表格布局 3.1 添加列表 3.2 添加表格了解列表与表格的特点掌握列表与表格的相关标签掌握列表与表格的使用引言在一个网页中经常能看到列表与表格的应用，网页中漂亮的导航、整齐规范的文章标题列表和图片列表等都是利用列表实现的。列表是指容器里面装载着结构、样式一致的文字或图表的一种形式。列表可分为有序列表、无序列表和自定义列表3种类型，它最大的特点就是整齐、规范、有序。表格是由行和列组成的结构化数据集（表格数据），用于呈现数据或统计信息，可以让数据的显示变得十分规整有条理，可读性好。列表与表格的应用可以使图片和文字变得整

2、洁有序，数据也变得“有模有样”，整个网页更加规整。本章将重点学习列表与表格的制作，走进一个“整齐有序”的世界。3.1添加列表有序列表案例新闻列表自定义列表无序列表3.1 添加列表3.1.1 有序列表有序列表（ordered-list）是有排列顺序的列表，其各个列表项按照一定的顺序排列。列表项目1 列表项目2.语法格式有序列表使用标签定义，包含一个或多个列表项目，其语法格式如下。有序列表标签常用属性的具体说明如表所示。标签属性属性 说明type 定义列表中使用的标记类型，属性值有1（默认值）、A、a、I、istart 定义有序列表的起始值，属性值为数值，表示自第N个数开始reversed 定义列

3、表顺序为降序3.1 添加列表3.1.1 有序列表3.1 添加列表3.1.1 有序列表利用有序列表将诗句降序排列显示。演示说明空山新雨后，天气晚来秋。明月松间照，清泉石上流。竹喧归浣女，莲动下渔舟。随意春芳歇，王孙自可留。代码 例3.1运行效果3.1 添加列表3.1.2 无序列表无序列表（unordered-listt）各个列表项之间没有顺序级别之分，是并列的。列表项目1 列表项目2.语法格式无序列表使用标签定义，包含一个或多个列表项目，其语法格式如下。无序列表标签通常使用type属性修改其显示效果type属性属性取 值 显示效果disc（默 认值）实心小黑圆点circle 空心小圆点squar

4、e 实心小黑方块3.1 添加列表3.1.2 无序列表3.1 添加列表3.1.2 无序列表利用无序列表列举本章学习目标。演示说明本章学习目标认识和了解列表与表格的用法掌握利用列表制作彩色导航栏掌握利用表格语义化制作成绩表掌握制作简单个人简历表代码 例3.2运行效果3.1 添加列表3.1.3 自定义列表自定义列表（definition-list）常用于对术语或名词进行解释和描述，列表项的前面没有任何项目符号。名词1 名词1描述一 名词1描述二语法格式自定义列表使用标签定义，列表中并列嵌套标签和标签，标签用于定义名词，标签用于定义名词的解释和描述。一对里可以对应多对，即一个名词可有多个解释和描述。自

5、定义列表的语法格式如下。名词2 名词2描述一 名词2描述二3.1 添加列表3.1.3 自定义列表利用自定义列表定义HTML、CSS和JavaScript这三个名词，并对其进行解释和描述。演示说明!-标签定义自定义列表-!-在标签里定义名词-HTML超文本标记语言!-在标签里对名词进行解释和描述-超文本：页面内可以包含图片，链接，甚至音乐，程序等非文字元素。标记：与之相对是的编译型语言，标记型语音无需编译，直接可以被解析展示。代码 例3.3运行效果3.1 添加列表3.1.4 案例新闻列表本实例是制作一个新闻列表，主要由块元素、有序列表、无序列表和图像标签构成。新闻列表的页面结构简图如图所示。3.

6、1 添加列表3.1.4 案例新闻列表代码实现!-在有序列表的每个列表项目li里嵌套超链接标签，并为第一个添加类名，在CSS中设置特定样式-头条主体代码 例3.43.1 添加列表3.1.4 案例新闻列表代码实现在上述主体代码中，利用有序列表在头部制作一个简单的新闻导航条，点击导航条可跳转到百度新闻搜索网页。块元素里嵌入一张图片，用于修饰网页内容，并合理设置适应于页面结构的宽高。而无序列表用于添加新闻文本，通过这3个块元素来实现整个页面结构。3.1 添加列表3.1.4 案例新闻列表代码实现/*为父容器整个新闻块设置宽高，清除浮动带来的影响*/#newswidth:560px;height:800p

7、x;.navwidth:520px;height:30px;list-style:none;/*取消列表项目标记*/olliwidth:130px;height:30px;float:left;/*中的列表项目li左浮动*/CSS代码 例3.4olliatext-decoration:none;/*取消超链接标签文本修饰下划线*/font-size:18px;/*超链接标签中的文本设置字体大小*/color:#aaa;olli.presentcolor:#6495ef;/*为中当前浏览的导航条设置颜色*/ulliline-height:35px;/*为中的项目列表li设置行高*/3.1 添加列

8、表3.1.4 案例新闻列表代码实现在上述CSS代码中，首先为父容器整个新闻块设置宽高，清除浮动带来的影响，接着使用list-style属性取消有序列表项目标记，再为有序列表中的列表项目设置向左浮动，关于元素浮动在第4章第2节内容中有详细讲解。然后为有序列表中的超链接取消下划线，并设置文本字体大小与颜色，且为特定的第一个超链接，即当前浏览的导航条设置颜色，最后为无序列表中的项目列表设置行高。本节小结本节内容讲解了有序列表、无序列表和自定义列表的使用，并利用列表制作新闻列表页面，对其进行网页布局，让整个网页显得更规整。通过本节的学习，希望读者可以了解这3种列表的使用以及它们之间的区别。3.2添加表

9、格表格基本标签案例个人简历表合并行与列语义化标签单元格边距与间距表格其他属性3.2 添加表格3.2.1 表格基本标签标签用于定义一个表格，标签用于定义表格中的行，可以有一行或多行，嵌套在标签中，标签用于定义表格中的单元格（列），一行里可以有一个或多个单元格（列），嵌套在标签中。单元格内容1 单元格内容2.语法格式一个最基本的表格由、和这3个标签构成，其语法格式如下。3.2 添加表格3.2.1 表格基本标签除了、和这3个主要标签之外，表格的基本标签有、等。标签用于定义表格的标题，标签必须紧随标签之后，每个表格只能定义一个标题，通常这个标题会被居中于表格之上。标签用于定义表格内的表头单元格，在标签

10、内部使用。和是两种类型的单元格，是表头单元格，里面包含表头信息，元素内部的文本通常为居中的粗体文本。是标准单元格，里面包含数据，元素内部的文本通常为左对齐的普通文本。为了更深地对表格进行语义化，使网页内容更好地被搜索引擎理解，在使用表格进行布局时，HTML中引入了、和这3个语义化标签，将表格划分为头部、主体和页脚3部分。用这3个部分来定义网页中不同的内容，让表格语义更加良好，结构更加清晰，代码更加有逻辑性，也更具有可读性和可维护性。概述标签 说明 用于定义表格的头部，一般包含网页的logo和导航等头部信息 用于定义表格的主体。位于标签之后，一般包含网页中除头部和底部以外的其他内容 用于定义表格

11、的页脚。位于标签之后，一般包含网页底部的企业信息等3.2 添加表格3.2.2 语义化标签班级成绩表序号1演示说明3.2 添加表格3.2.2 语义化标签主体代码 例3.5利用表格标签和语义化标签制作一个班级成绩表。李华124语文、数学和英文三科分数均为150分/*设置整个表格*/tablewidth:520px;/*设置宽度和高度*/height:320px;text-align:center;/*文本居中*/border:1pxsolid#cccccc;/*设置表格边框大小、样式和颜色*/border-collapse:collapse;/*合并边框*/td,thborder:1pxsolid

12、#cccccc;/*为单元格添加边框*/演示说明3.2 添加表格3.2.2 语义化标签CSS代码 例3.5利用表格标签和语义化标签制作一个班级成绩表。/*设置表头*/thheight:40px;background-color:#0099cc;color:white;/*设置单数行*/.odd/*设置指定的背景颜色*/background-color:#C0C0C0;/*设置双数行*/.evenbackground-color:#FFFFE0;利用表格标签和语义化标签制作一个班级成绩表，运行效果如图所示。演示说明3.2 添加表格3.2.2 语义化标签利用表格标签和语义化标签制作一个班级成绩表，

13、表格标签定义表格的基本结构，语义化标签本身不会改变表格的内容与结构，而在表格中添加语义化标签的目的是使表格结构更清晰易懂。使用CSS属性为表格添加边框以及合并边框，为单数行和双数行表格分别设置不同的背景颜色以进行区分，设计表格样式，使其更美观。演示说明3.2 添加表格3.2.2 语义化标签在制作一个表格时，有时需要对表格的单元格进行合并行或列的操作，把两个或多个相邻单元格合并成一个单元格，这就需要使用到rowspan属性和colspan属性。标签 语法格式 说明rowspan 规定单元格可横跨的行数，即合并表格的列。colspan属性通常使用在和标签中，其属性值为数值，这个数值代表所要合并的单

14、元格行数colspan 规定单元格可横跨的列数，即合并表格的行。colspan属性通常使用在和标签中，其属性值为数值，这个数值代表所要合并的单元格列数3.2 添加表格3.2.3 合并行与列在制作一个表格时，有时需要设计表格的单元格内容与单元格边框之间的空白间距，以及单元格与单元格边框之间的空白间距，使表格更美观，这就需要使用到cellpadding属性和cellspacing属性。3.2 添加表格3.2.4 单元格边距与间距1.cellpadding属性cellpadding属性规定单元边沿与其内容之间的空白，即控制单元格的边距。cellpadding属性通常使用在标签中，其属性值为数值，常用

15、单位是像素（px），这个数值代表单元格内容与单元格边框之间的空白间距，即内边距，默认值为1px。cellpadding属性的语法格式如下所示。3.2 添加表格3.2.4 单元格边距与间距2.cellspacing属性值得注意的是，请勿将cellpadding属性与cellspacing属性相混淆，注意分清它们的用途。从实用角度出发，最好不要规定cellpadding属性，而是使用CSS来添加内边距。cellspacing属性规定单元格之间的空间，即控制单元格的间距。cellspacing属性通常使用在标签中，其属性值为数值，常用单位是像素（px），这个数值代表单元格与单元格边框之间的空白间距，

16、即外边距，默认值为2px。cellspacing属性的语法格式如下所示。3.2 添加表格3.2.4 单元格边距与间距在表格标签中，设置cellspacing的值为0，表示单元格与单元格边框之间的空白间距为0，即表格变为单线框，但不推荐使用。在实际开发中，通常使用CSS中的border-collapse属性来决定表格的边框是分开还是合并，它的属性值有separate（默认值）和collapse。当属性值为separate时，在分隔模式下，相邻的单元格都拥有独立的边框；当属性值为collapse时，在合并模式下，相邻单元格共享边框。border-collapse属性合并边框的代码如下。table

17、border-collapse:collapse;3.2 添加表格3.2.5 表格其他属性HTML为表格提供了一系列的属性用于控制表格的样式，例如border属性、bordercolor属性、align属性、width属性、bgcolor属性、background属性等。属性 说明border 表示是否设置边框，可以取值为1和0，1代表有边框，0代表没有边框（通常省略不写）bordercolor 用于设置边框颜色。在标签中，需配合border属性使用，可对表格的整体边框进行颜色的设置align 设置单元格内容的水平对齐方式。在和标签中，align属性默认值为左对齐（left），在标签中，ali

18、gn属性默认值为居中对齐（center）。而在标签中，align属性用于设置表格在网页中的水平对齐方式。valign设置单元格内容的垂直对齐方式，默认值为居中对齐（center）width 设置单元格的宽度，当一列单元格中有不同width属性值时，取最大值作为这一列的宽度3.2 添加表格3.2.5 表格其他属性续表属性 说明bgcolor 规定表格的背景颜色。在HTML4.01中，表格的bgcolor属性已废弃，HTML5已不支持表格的bgcolor属性，但在浏览器中仍能识别出来。当需要设置表格背景颜色时，一般在CSS样式中设置background 设置表格的背景图片，属性值为一个有效的图片地

19、址，不推荐使用。在实际开发中，通常使用CSS属性设置表格的背景图片border属性不会控制边框的样式，若需要设置边框样式，通常使用CSS样式设计表格边框，即通过border属性的连写设置边框。CSS样式设计边框的示例代码如下。table border:1px solid#aaa;3.2 添加表格3.2.6 案例个人简历表本实例是使用HTML表格标签制作一份个人简历表。该页面主要由表格的基本标签标签、标签、标签以及标签构成，个人简历表格页面结构简图如图所示。3.2 添加表格3.2.6 案例个人简历表代码实现个人简历姓名 照片个人特长与爱好 主体代码 例3.63.2 添加表格3.2.6 案例个人简

20、历表代码实现/*为整个表格和单元格设置边框宽度、框线样式和边框颜色*/table,tdborder:1pxsolid#aaa;tablewidth:702px;/*设置表格宽度*/border-collapse:collapse;/*为表格设置合并边框*/background-image:url(./image/ye.jpg);/*为表格添加背景图片*/CSS代码 例3.6/*为每个单元格设置宽度和高度*/tdwidth:90px;height:60px;trtext-align:center;/*表格每行设置文本居中对齐*/.stuffbackground-color:#c0c0c0;/*为

21、指定的单元填充背景颜色*/3.2 添加表格3.2.6 案例个人简历表代码实现在上述的CSS代码中，首先使用border属性为整个表格和单元格设置边框宽度、框线样式和边框颜色，再使用border-collapse属性将表格的边框合并，并为表格添加背景图片。然后为每个单元格设置宽度和高度，使用text-align属性设置表格每行文本居中对齐，最后为指定的单元填充背景颜色，完成个人简历表。本代码利用CSS属性进行了代码优化，统一设置表格样式，可以减少代码的冗余，提升代码可读性，而标签中部分标签以行内样式的方式设置宽度与高度，是为了适应个人简历表格的需求。CSS样式表不仅可以使用较少的代码，实现更多的

22、功能，还可以轻松地维护相同标记的不同样式，代码的定义风格也更灵活，要优于使用表格属性。本节小结本节内容讲解了表格的相关标签和属性，并使用这些标签和属性制作一份个人简历表，对个人简历表进行设计与优化。通过本节的学习，希望读者可以更加深入地了解表格的使用，设计出更美观的表格。课后小结本章重点介绍列表与表格的相关标签与属性，不同类型的列表有不同的使用场景，无序列表常被应用于制作导航栏，有序列表可被应用于排列有序的信息，自定义列表则被应用于图文结合的内容，而表格不仅可以制作常规表格，还可用于对网页进行布局。如何让代码更简洁，维护性更好，对开发者而言是一种挑战，也是一种突破。希望通过对本章内容的分析和讲解，读者能够熟悉列表与表格的相关标签与属性，掌握列表与表格的制作，可以编写出适应于网页页面需求的列表与表格，为后面的深入学习奠定基础。