1、HTML5+CSS3网页设计基础第2章 网页基本元素第1页第第2章章 网页网页基本基本元素元素本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第2章 网页基本元素第2页本章概述本章概述l随着网络技术的发展，网页内容也更加丰富多样。展示网随着网络技术的发展，网页内容也更加丰富多样。展示网页内容的元素包括文本、图像、列表、表格、链接等，本页内容的元素包括文本、图像、列表、表格、链接等，本章将具体介绍页面上常用的各种元素的标签及其属性。章将具体介绍页面上常用的各种元素的标签及其属性。HTML5+CSS3网页设计基础第2章 网页基本元素第3页本章的学习目标本章的学习目标l掌握文本控制标
2、签的功能和使用方法。掌握文本控制标签的功能和使用方法。l掌握图像标签及其各属性的功能和使用方法。掌握图像标签及其各属性的功能和使用方法。l掌握网页上常用超链接的设置方法。掌握网页上常用超链接的设置方法。l掌握列表标签及其属性的功能和使用方法。掌握列表标签及其属性的功能和使用方法。l掌握表格标签及其属性的功能和使用方法。掌握表格标签及其属性的功能和使用方法。l掌握页面交互元表的功能和用法。掌握页面交互元表的功能和用法。l掌握综合应用各种页面元素标签及其属性制作页掌握综合应用各种页面元素标签及其属性制作页面的方法。面的方法。HTML5+CSS3网页设计基础第2章 网页基本元素第4页主要内容主要内容
3、2.1 文本控制标签文本控制标签2.2 图像标签图像标签2.3 超链接标签超链接标签2.4 列表列表2.5 表格表格2.6 页面交互标签页面交互标签2.7 实训实训2.8 本章小结本章小结HTML5+CSS3网页设计基础第2章 网页基本元素第5页2.1 文本控制标签文本控制标签本节主要内容：本节主要内容：l标题标签标题标签l段落标签段落标签l换行标签换行标签l水平线标签水平线标签l文本格式化文本格式化标签标签l范围范围标签标签l注释注释标签标签l特殊符号特殊符号HTML5+CSS3网页设计基础第2章 网页基本元素第6页2.1.1 案例案例分析分析l【案例展示】【案例展示】招商加盟招商加盟-加盟
4、中心局部页面的设计加盟中心局部页面的设计。使用使用标题标签、段落标签、换行标签、水平线标签、文本格式标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等，设计招商加盟控制标签等，设计招商加盟-加盟中心局部页面，加盟中心局部页面，l【知识要点】【知识要点】标题标签、段落标签、换行标签、水平线标标题标签、段落标签、换行标签、水平线标签、文本格式控制标签等网页元素。签、文本格式控制标签等网页元素。l【学习目标】【学习目标】掌握标题标签、掌握标题标签、段落段落标签标签、换行标签、水平线标签、换行标签、水平线标签、文本文本格式控制标签的作用格式控制标签的作用并并灵活灵活应用。应用。参考代码：参考
5、代码：2-1.htmlHTML5+CSS3网页设计基础第2章 网页基本元素第7页2.1.2 标题标签标题标签l语法格式语法格式：标题文字标题文字说明说明：n的取值为的取值为1到到6。align为可选属性，用来设置标题在页面的对齐方式，取值为可选属性，用来设置标题在页面的对齐方式，取值 left（左对齐）、（左对齐）、center（居中对齐）、（居中对齐）、right（右对齐），默（右对齐），默认取值认取值left。l参考示例：参考示例：2-1-1.htmlHTML5+CSS3网页设计基础第2章 网页基本元素第8页2.1.3 段落标签段落标签l语法格式语法格式：段落文字段落文字l说明说明：参数参
6、数align的取值和功能参考标题标签中说明的取值和功能参考标题标签中说明HTML5+CSS3网页设计基础第2章 网页基本元素第9页2.1.4 换行标签换行标签l语法格式语法格式：文字文字 或或 文字文字使用换行标签，可以使页面内容整齐、美观。使用换行标签，可以使页面内容整齐、美观。HTML5+CSS3网页设计基础第2章 网页基本元素第10页2.1.5 水平线水平线标签标签l语法格式语法格式：l属性介绍属性介绍：align：参考标题标签：参考标题标签中中align说明说明。size：设置水平线的粗细，：设置水平线的粗细，n取正整数，默认为取正整数，默认为2像素。像素。width：设置水平线的长度
7、，：设置水平线的长度，n取正整数表示确定的像素值，也可以是浏览器窗取正整数表示确定的像素值，也可以是浏览器窗口的百分比，默认为口的百分比，默认为100%。color：设置水平线的颜色，默认黑色。可以用颜色名称、十六进制：设置水平线的颜色，默认黑色。可以用颜色名称、十六进制#RGB或或rgb(r,g,b)来表示。来表示。noshade：设置水平线是否要阴影，默认有阴影：设置水平线是否要阴影，默认有阴影。l例：定义一条水平线，居中显示、粗例：定义一条水平线，居中显示、粗5px、宽、宽400px、红色、无阴影。代码如、红色、无阴影。代码如下。下。lHTML5+CSS3网页设计基础第2章 网页基本元素
8、第11页2.1.6 文本格式化标签文本格式化标签l参考示例：参考示例：2-1-2.html标签标签显示效果显示效果和和文字以粗体方式显示，b定义文本粗体，strong定义强调文本和和文字以斜体方式显示，i定义斜体字，em定义强调文本和和文字以加删除线方式显示(HTML5不赞成使用s)和和文字以加下划线方式显示(HTML5不赞成使用u)文字高亮显示创建一个引用标记，被标记的文字以斜体的方式显示HTML5+CSS3网页设计基础第2章 网页基本元素第12页2.1.7 范围范围标签标签l语法格式语法格式：区域元素区域元素说明：说明：与与之间只能包含文本和各种行内标签之间只能包含文本和各种行内标签，用来
9、定义网页中某些特殊显示的文本，配合，用来定义网页中某些特殊显示的文本，配合class属性使用属性使用。它本身没有固定的格式表现，只有应用样式时，才会产生。它本身没有固定的格式表现，只有应用样式时，才会产生视觉上的视觉上的变化。变化。HTML5+CSS3网页设计基础第2章 网页基本元素第13页2.1.8 注释注释标签标签l语法格式语法格式：说明：说明：注释内容可以为一行，也可以为多行。并且开始标签注释内容可以为一行，也可以为多行。并且开始标签和结束标签可以不在一行上和结束标签可以不在一行上。HTML5+CSS3网页设计基础第2章 网页基本元素第14页2.1.9 特殊符号特殊符号特殊符号特殊符号描
10、述描述字符的代码字符的代码 空格符 大于号>&和号&￥人民币¥版权©注册商标®摄氏度°正负号±乘号×除号÷HTML5+CSS3网页设计基础第2章 网页基本元素2.1.10 案例制作案例制作l制作完成演示案例制作完成演示案例:加盟中心。加盟中心。l参考代码参考代码 2-1.html第15页HTML5+CSS3网页设计基础第2章 网页基本元素第16页2.2 图像标签图像标签 本节主要内容：本节主要内容：l常用图像格式常用图像格式l图像标签及其属性图像标签及其属性l绝对绝对路路径与相对径与相对路径路径H
11、TML5+CSS3网页设计基础第2章 网页基本元素第17页2.2.1 案例案例分析分析l【案例展示】【案例展示】新闻动态新闻动态-资讯详情局部页面的设计资讯详情局部页面的设计。使用。使用图图像标签，标题标签、段落标签等，设计完成资讯详情局部页像标签，标题标签、段落标签等，设计完成资讯详情局部页面的设计面的设计。l【知识要点】【知识要点】图像标签的定义、图像属性设置、图文混排。图像标签的定义、图像属性设置、图文混排。l【学习目标】掌握图像格式设置和图文混排技术。【学习目标】掌握图像格式设置和图文混排技术。l参考代码：参考代码：2-2.htmlHTML5+CSS3网页设计基础第2章 网页基本元素第
12、18页2.2.2 常用图像格式常用图像格式网页图像有三种常用的格式：网页图像有三种常用的格式：GIF、JPG和和PNG。具体区别如下。具体区别如下。（1）GIF格式格式GIF格式支持格式支持动画，同时动画，同时GIF格式也是一种无损的图像格式。再加上格式也是一种无损的图像格式。再加上GIF格式支持透明格式支持透明(全透明全透明或全不通明或全不通明)，因此很适合在互联网上使用。，因此很适合在互联网上使用。GIF格式文件最多使用格式文件最多使用256种颜色，适合显示色调不连续或具有大面积单一颜色的图像，如种颜色，适合显示色调不连续或具有大面积单一颜色的图像，如Logo、小图标及其他色彩相对单一的图
13、像。、小图标及其他色彩相对单一的图像。（2）PNG格式格式PNG格式是一种替代格式是一种替代GIF格式的无专利权限制的格式格式的无专利权限制的格式。PNG格式最大的优势是体积更小，支格式最大的优势是体积更小，支持持alpha透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但透明（全透明、半透明、全不透明），并且颜色过渡更平滑，但PNG格式不支持动格式不支持动画。它包括对索引色、灰度、真彩色图像以及画。它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。通道透明的支持。（3）JPG格式格式JPG格式所能显示的颜色比格式所能显示的颜色比GIF格式和格式和PNG格式要多得多，可以用来
14、保存超过格式要多得多，可以用来保存超过256种颜色的种颜色的图像。图像。JPG格式主要用于摄影或者连续色调格式主要用于摄影或者连续色调图像图像。HTML5+CSS3网页设计基础第2章 网页基本元素2.2.3 图像标签及其属性图像标签及其属性l语法语法格式：格式：第19页HTML5+CSS3网页设计基础第2章 网页基本元素2.2.3 图像标签及其属性图像标签及其属性l属性介绍属性介绍：src：用于指定图像文件的路径和文件名，是标签的必需属性。：用于指定图像文件的路径和文件名，是标签的必需属性。width：设置图像的显示宽度，单位是像素或百分比。：设置图像的显示宽度，单位是像素或百分比。heigh
15、t：设置图像的显示高度，单位是像素或百分比。：设置图像的显示高度，单位是像素或百分比。alt：图像不能显示时，代替图像的说明文字。：图像不能显示时，代替图像的说明文字。border：设置图像边框的宽度，单位是像素。：设置图像边框的宽度，单位是像素。align：设置图像的对齐方式，取值：设置图像的对齐方式，取值left、center、right。title：鼠标指向图片时，显示的提示文字。：鼠标指向图片时，显示的提示文字。hspace：定义图像左侧和右侧的空白。：定义图像左侧和右侧的空白。vspace：定义图像顶部和底部的空白。：定义图像顶部和底部的空白。第20页HTML5+CSS3网页设计基础
16、第2章 网页基本元素2.2.3 图像标签及其属性图像标签及其属性l指定图像大小：指定图像大小：用用width和和height属性用来定义图片的宽度和高度，其目属性用来定义图片的宽度和高度，其目的是通过指定图像的高度和宽度加快图像的下载速度。的是通过指定图像的高度和宽度加快图像的下载速度。l参考示例：参考示例：2-2-1.html第21页HTML5+CSS3网页设计基础第2章 网页基本元素2.2.3 图像标签及其属性图像标签及其属性l指定图像指定图像的替换文本的替换文本：alt属性指定的替换文本属性指定的替换文本l参考示例：参考示例：2-2-2.html第22页HTML5+CSS3网页设计基础第
17、2章 网页基本元素2.2.3 图像标签及其属性图像标签及其属性l指定图像指定图像的的边框边框：通过通过border属性可以为图像添加边框，设置边框的宽度，属性可以为图像添加边框，设置边框的宽度，添加边框后的图像显得更醒目、美观。边框的颜色默认黑色添加边框后的图像显得更醒目、美观。边框的颜色默认黑色，不可调整。，不可调整。l参考示例：参考示例：2-2-3.html第23页HTML5+CSS3网页设计基础第2章 网页基本元素2.2.3 图像标签及其属性图像标签及其属性l指定图像指定图像的的对齐方式：对齐方式：图图文混排技术是指设置图像与同一行中的文本、图像、插文混排技术是指设置图像与同一行中的文本
18、、图像、插件或其它元素的对齐方式件或其它元素的对齐方式。默认情况下图像的底部会相对于默认情况下图像的底部会相对于于文本的第一行文字对齐。但是在制作网页的过程中，有时于文本的第一行文字对齐。但是在制作网页的过程中，有时需要实现图像和文字的环绕效果，这需要实现图像和文字的环绕效果，这就就需要需要使用使用图像的对齐图像的对齐属性属性align。l参考示例：参考示例：2-2-4.html第24页HTML5+CSS3网页设计基础第2章 网页基本元素2.2.4 绝对绝对路径与相对路径路径与相对路径l网页网页中路径分两种中路径分两种：绝对路径和相对路径。：绝对路径和相对路径。l1.绝对路径绝对路径 绝对绝对
19、路径是包括通信协议名、服务器名、路径及路径是包括通信协议名、服务器名、路径及文件名的完整路径，是网页上的文件或目录在硬盘文件名的完整路径，是网页上的文件或目录在硬盘上的真正路径上的真正路径。l2.相对路径相对路径 相对相对路径就是相对于当前文件的路径，相对路径路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以不带有盘符，通常是以HTML网页文件为起点，通网页文件为起点，通过层级关系描述目标文件的位置。过层级关系描述目标文件的位置。第25页HTML5+CSS3网页设计基础第2章 网页基本元素2.2.5 案例制作案例制作l制作完成演示案例制作完成演示案例:资讯详情局部页面资讯详情局部页面。
20、l参考代码参考代码 2-2.html第26页HTML5+CSS3网页设计基础第2章 网页基本元素第27页2.3 超链接超链接标签标签 本节主要内容：本节主要内容：l超链接简介超链接简介l超链接的超链接的应用应用HTML5+CSS3网页设计基础第2章 网页基本元素第28页2.3.1 案例案例分析分析l【案例展示】【案例展示】链接案例链接案例网站信息页面网站信息页面。使用。使用页面间链接页面间链接、网站间链接、可下载文件链接等知识，制作网站信息、网站间链接、可下载文件链接等知识，制作网站信息页页面面。l【知识要点】【知识要点】超链接的定义、页面间链接、网站间链接、超链接的定义、页面间链接、网站间链
21、接、下载文件链接等。下载文件链接等。l【学习目标】掌握各种超【学习目标】掌握各种超链接链接 的的应用场合和实现应用场合和实现技术技术。l参考代码：参考代码：2-3.htmlHTML5+CSS3网页设计基础第2章 网页基本元素2.3.2 超链接简介超链接简介l语法格式语法格式：超超文本文本说明说明：在在上面的语法中，上面的语法中，标签用于定义超链接，标签用于定义超链接，href和和 target为其常用属性。为其常用属性。href：用于指定链接目标的：用于指定链接目标的url地址。需要创建空链接时，地址。需要创建空链接时，用用“#”代替代替URL。target：用于指定链接页面的打开方式，常用的
22、取值有：用于指定链接页面的打开方式，常用的取值有_self和和_blank两种，两种，_self为默认值，意为在原窗口中打开为默认值，意为在原窗口中打开，_ blank为在新窗口中打开为在新窗口中打开。第29页HTML5+CSS3网页设计基础第2章 网页基本元素2.3.3 超链接的应用超链接的应用l1.站内页面之间的站内页面之间的链接链接 同同一网站域名下的各页面之间可以用超链接实现一网站域名下的各页面之间可以用超链接实现互相链接访问。互相链接访问。例如例如，在首页以外的其他页面上，点击超链接，在首页以外的其他页面上，点击超链接“首页首页”返回网站首页。代码如下。返回网站首页。代码如下。首页首
23、页 l4.下载链接下载链接l5.图像做超链接图像做超链接l6.锚记链接锚记链接第30页HTML5+CSS3网页设计基础第2章 网页基本元素2.3.3 超链接的应用超链接的应用l2.网站之间的链接网站之间的链接不同网站之间通过超链接实现信息和资源共享。不同网站之间通过超链接实现信息和资源共享。例如，在网页上，点击超链接例如，在网页上，点击超链接“163邮箱邮箱”打开打开163网易邮网易邮箱首页。代码如下。箱首页。代码如下。163邮邮箱箱 例如例如，点击超链接，点击超链接“百度百科百度百科超链接超链接”打开百度百科网站打开百度百科网站上关于超链接介绍的页面。代码如下。上关于超链接介绍的页面。代码如
24、下。百度百科百度百科-超链接超链接 第31页HTML5+CSS3网页设计基础第2章 网页基本元素2.3.3 超链接的应用超链接的应用l3.媒体链接媒体链接 超超链接除了可链接文本外，也可链接各种媒体，如声音、链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。多媒体世界。例如例如，点击超链接，点击超链接“MP4视频视频”打开视频文件并开始播放打开视频文件并开始播放。代码如下。代码如下。MP4视视频频 第32页HTML5+CSS3网页设计基础第2章 网页基本元素2.3.3 超链接的应用
25、超链接的应用l4.下载下载链接链接如果如果超链接指向不是一个网页文件，而是其他文件，如超链接指向不是一个网页文件，而是其他文件，如doc、xls、zip、rar文件等，单击链接时就会下载相应的文件。文件等，单击链接时就会下载相应的文件。例如，点击超链接例如，点击超链接“合作协议下载合作协议下载”，开始下载文件。代码，开始下载文件。代码如下。如下。合作协议下载合作协议下载 注意：注意：在在项目文件夹的项目文件夹的datum目录里，有目录里，有“合作协议合作协议.zip”文件，才能点击下载。文件，才能点击下载。第33页HTML5+CSS3网页设计基础第2章 网页基本元素2.3.3 超链接的应用超链
26、接的应用l5.图像做超链接 为了为了增加页面的美观性，有时用图像代替文字做超链接。增加页面的美观性，有时用图像代替文字做超链接。例如，超链接中的例如，超链接中的“首页首页”超文本，用图片替换。代码如下超文本，用图片替换。代码如下。链接链接图像在低版本的图像在低版本的IE浏览器中会添加边框效果，去掉链浏览器中会添加边框效果，去掉链接图像的边框只需将边框定义为接图像的边框只需将边框定义为0即可。即可。第34页HTML5+CSS3网页设计基础第2章 网页基本元素2.3.3 超链接的应用超链接的应用l6.锚记链接锚记链接 创建创建锚记链接，需要两个步骤。锚记链接，需要两个步骤。(1)首先定义锚记名称。
27、首先定义锚记名称。格式格式1：目标附近的文本目标附近的文本 格式格式2：网页内容网页内容，E代表代表html标签标签，如，如p、hn、div等。等。(2)然后，定义锚记链接。点击超文本时，跳转到锚记名或然后，定义锚记链接。点击超文本时，跳转到锚记名或id名开始的位置。名开始的位置。格式格式：超文本超文本第35页HTML5+CSS3网页设计基础第2章 网页基本元素2.3.4 案例制作案例制作l制作完成演示案例制作完成演示案例:网站信息页面网站信息页面。l参考代码参考代码 2-3.html第36页HTML5+CSS3网页设计基础第2章 网页基本元素第37页2.4 列表列表 本节主要内容：本节主要内
28、容：l无序列表无序列表l有序列表有序列表l定义定义列表列表l嵌套嵌套列表列表HTML5+CSS3网页设计基础第2章 网页基本元素第38页2.4.1 案例分析案例分析l【案例展示】【案例展示】招商加盟招商加盟-合作方式局部页面合作方式局部页面。使用。使用多种列多种列表技术设计招商加盟表技术设计招商加盟-合作方式页面合作方式页面。l【知识要点】【知识要点】无序列表、有序列表、定义列表和嵌套无序列表、有序列表、定义列表和嵌套列表列表l【学习目标】掌握各种列表的使用方法和列表嵌套技术【学习目标】掌握各种列表的使用方法和列表嵌套技术。l参考代码：参考代码：2-4.htmlHTML5+CSS3网页设计基础
29、第2章 网页基本元素2.4.2 无序列表无序列表l语法格式语法格式：列表项列表项1列表项列表项2 属性属性type定义无序列表的前导符号。取值定义无序列表的前导符号。取值circle（圆圈）、（圆圈）、disc（圆点）和（圆点）和square（方块），默认（方块），默认disc。l参考参考示例：示例：2-4-1.html第39页HTML5+CSS3网页设计基础第2章 网页基本元素2.4.3 有序列有序列表表l语法格式语法格式：列表项列表项1列表项列表项2 l属性介绍：属性介绍：type：列表项的符号类型，取值：列表项的符号类型，取值1（阿拉伯数字）、（阿拉伯数字）、a（小写英文字母）、（小写英
30、文字母）、A（大写英文字母）、大写英文字母）、i（小写罗马数字）、（小写罗马数字）、I（大写罗马数字），默认符号是阿拉伯（大写罗马数字），默认符号是阿拉伯数字。数字。start：列表项编号的起始值，取值正整数。默认取值：列表项编号的起始值，取值正整数。默认取值1，即编号从，即编号从1开始。开始。reversed：是否对列表项反向排序，当取值为：是否对列表项反向排序，当取值为“reversed”时，反向排序时，反向排序。l参考参考示例：示例：2-4-2.html第40页HTML5+CSS3网页设计基础第2章 网页基本元素2.4.4 定义定义列表列表l语法格式语法格式：标题标题1 标题标题1的描述
31、的描述1 标题标题1的描述的描述2 标题标题2 标题标题2的描述的描述1 标题标题2的描述的描述2 说明：说明：标签指定定义列表，标签指定定义列表，标签指定列表项的标题，标签指定列表项的标题，标标签对标题进行描述签对标题进行描述。参考参考示例：示例：2-4-3.html第41页HTML5+CSS3网页设计基础第2章 网页基本元素2.4.5 嵌套嵌套列表列表l所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。套列表可以把页面分为多个层次，给人以很强的层次感。l参考示例：参考示例：2-4-4.htm
32、l第42页HTML5+CSS3网页设计基础第2章 网页基本元素2.4.6 案例制作案例制作l制作完成演示案例制作完成演示案例:合作方式局部页面合作方式局部页面。l参考代码参考代码 2-4.html第43页HTML5+CSS3网页设计基础第2章 网页基本元素2.5 表格表格 第44页本节主要内容：本节主要内容：l 表格的结构表格的结构l 表格的基本语法表格的基本语法l 表格的修饰表格的修饰l 不规范不规范表格表格HTML5+CSS3网页设计基础第2章 网页基本元素2.5.1 案例案例分析分析l【案例展示】【案例展示】LED射灯介绍局部页面射灯介绍局部页面。使用。使用表格技术，制作表格技术，制作L
33、ED射灯介绍局部页面射灯介绍局部页面。l【知识要点】【知识要点】表格元素表格元素、语法语法、表格修饰表格修饰的的设置。设置。l【学习目标】掌握【学习目标】掌握设置设置表格表格属性属性的方法。的方法。第45页HTML5+CSS3网页设计基础第2章 网页基本元素2.5.2 表格的结构表格的结构l表格是由行和列组成的二维表，而每行又由一个或多个单表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的内容按照元格组成，用于放置数据或其他内容。表格中的内容按照相应的行或列进行分类和相应的行或列进行分类和显示。显示。第46页HTML5+CSS3网页设计基础第2章 网页
34、基本元素2.5.3 表格的基本语法表格的基本语法 表格标题表格标题 表头表头1表头表头2表头表头n 表头表头2-1表头表头2-2表头表头2-n 表头表头m-1表头表头m-2表头表头m-n第47页HTML5+CSS3网页设计基础第2章 网页基本元素2.5.3 表格的基本语法表格的基本语法表格的整体外观由表格的整体外观由标签的属性标签的属性决定决定。lborder：定义表格边框的宽度，单位是像素。默认值：定义表格边框的宽度，单位是像素。默认值“0”，显示为，显示为没有边框的表格。没有边框的表格。lwidth：定义表格的宽度，单位是像素或百分比。：定义表格的宽度，单位是像素或百分比。lheight：
35、定义表格的高度，单位是像素或百分比。：定义表格的高度，单位是像素或百分比。lcellspacing：定义单元格之间的空白，单位是像素，默认：定义单元格之间的空白，单位是像素，默认2px。lcellpadding：定义单元格边框与内容之间的空白：定义单元格边框与内容之间的空白,单位是像素，默认单位是像素，默认1px。参考参考示例：示例：2-5-1.html第48页HTML5+CSS3网页设计基础第2章 网页基本元素2.5.4 表格的修饰表格的修饰l表格是网页布局中的重要元素，可以对其设置进表格是网页布局中的重要元素，可以对其设置进而美化表格。而美化表格。1.设置设置表格大小表格大小2.设置设置表
36、格表格背景背景3.设置设置表格的对齐方式表格的对齐方式4.设置表格设置表格中中数据数据的对齐的对齐方式方式l参考示例：参考示例：2-5-3.html第49页HTML5+CSS3网页设计基础第2章 网页基本元素2.5.5 不规范表格不规范表格1跨行跨行跨行是指单元格在垂直方向上合并，语法如下：跨行是指单元格在垂直方向上合并，语法如下：单元格内容单元格内容2跨列跨列跨列是指单元格在水平方向上合并，语法如下跨列是指单元格在水平方向上合并，语法如下：单元格内容单元格内容3跨行、跨列跨行、跨列l参考参考示例示例：2-5-4.html第50页HTML5+CSS3网页设计基础第2章 网页基本元素2.5.6
37、案例制作案例制作l制作完成演示案例制作完成演示案例:LED射灯介绍局部页面射灯介绍局部页面。l参考代码参考代码 2-5.html第51页HTML5+CSS3网页设计基础第2章 网页基本元素2.6 页面交互标签页面交互标签 第52页本节主要内容：本节主要内容：l details和和summary元素元素表格表格的基本语法的基本语法l progress元素元素l meter元素元素HTML5+CSS3网页设计基础第2章 网页基本元素2.6.1 details和和summary元素元素ldetails元素用于显示或隐藏文档的细节元素用于显示或隐藏文档的细节信息用信息用details和和summary
38、实现信息显示实现信息显示/隐藏功能的代码格式如下：隐藏功能的代码格式如下：标题标题 文档文档详细信息详细信息 属性属性open:取值取值open，定义，定义details是否显示是否显示。默认不显示。默认不显示。l参考参考示例示例：2-6-1.html第53页HTML5+CSS3网页设计基础第2章 网页基本元素2.6.2 progress元素元素lprogress元素用于显示某个特定任务的时间元素用于显示某个特定任务的时间进度进度l语法格式语法格式：l属性属性介绍：介绍：value：定义当前已完成的工作量值。属性值：定义当前已完成的工作量值。属性值value1取值在取值在0.0和和1.0之之间
39、或者是在间或者是在max值以下。值以下。max:定义全部的工作量数值。属性值定义全部的工作量数值。属性值value2默认取值范围是从默认取值范围是从0.0-1.0，或者指定值，默认值是，或者指定值，默认值是1.0。l参考参考示例示例：2-6-2.html第54页HTML5+CSS3网页设计基础第2章 网页基本元素2.6.3 meter元素元素lmeter元素用于表示指定范围内的数值元素用于表示指定范围内的数值。l语法语法格式：格式：l属性介绍：属性介绍：value：定义度量的当前值。必须。：定义度量的当前值。必须。optimum：定义度量的优化值，即什么样的度量值是最：定义度量的优化值，即什么
40、样的度量值是最佳的值。如果该值高于佳的值。如果该值高于high属性，则意味着值越高越好。如属性，则意味着值越高越好。如果该值低于果该值低于low属性的值，则意味着值越低越好。属性的值，则意味着值越低越好。第55页HTML5+CSS3网页设计基础第2章 网页基本元素2.6.3 meter元素元素 low：定义度量的值位于哪个点被界定为低的值的范围。：定义度量的值位于哪个点被界定为低的值的范围。high：定义度量的值位于哪个点被界定为高的值的范围。：定义度量的值位于哪个点被界定为高的值的范围。min：定义范围的最小值，默认值是：定义范围的最小值，默认值是0。max：定义范围的最大值，默认值是：定义
41、范围的最大值，默认值是1。l参考示例：参考示例：2-6-3.html第56页HTML5+CSS3网页设计基础第2章 网页基本元素2.7 实训实训l【实训任务】【实训任务】设计新闻动态设计新闻动态产品资讯局部页面产品资讯局部页面。l【知识要点】【知识要点】文本控制标签、图像标签及图文混排、列表文本控制标签、图像标签及图文混排、列表、超链接。、超链接。l【实训目标】掌握用文本标签、图像标签、列表、超链接【实训目标】掌握用文本标签、图像标签、列表、超链接等设计页面的技术。等设计页面的技术。第57页HTML5+CSS3网页设计基础第2章 网页基本元素第58页2.8 本章小结本章小结 l本章首先介绍了文本控制标签的功能及用法，然后介绍了本章首先介绍了文本控制标签的功能及用法，然后介绍了图像标签、文件的路径知识和图文混排技术，还有超链接图像标签、文件的路径知识和图文混排技术，还有超链接技术、列表和表格的设计技术，页面交互元素的功能，最技术、列表和表格的设计技术，页面交互元素的功能，最后通过实例讲解了文本控制标签、图像标签、列表标签、后通过实例讲解了文本控制标签、图像标签、列表标签、超链接在页面设计中的实际应用技术。超链接在页面设计中的实际应用技术。l通过本章的学习，读者能掌握应用页面元素设计简单网页通过本章的学习，读者能掌握应用页面元素设计简单网页的技术。的技术。
