HTML+JAVASCRIPT+CSS 02第二章

1、主编：徐照兴、谭鸿健、郑宁健主编：徐照兴、谭鸿健、郑宁健HTML+CSS+JavaScript网页制作网页制作三合一案例教程三合一案例教程HTML+CSS+JavaScript网页制作三合一案例网页制作三合一案例教程教程 1 2 目录页Contents Page 4 案例一 制作鲜花导购网页的结构HTML标签现在的网页主要由结构、表现和行为3部分组成，其中结构是指网页的内容部分，主要通过HTML语言实现，我们可以直接编写HTML代码或在Dreamweaver中进行可视化设计，来制作网页的结构部分。HTML语言的核心是标签。也就是说，我们在浏览网页时看到的文字、图像、动画等在HTML语言中都是用

2、标签来描述的。本案例中，我们将通过制作图2-1所示的鲜花导购网页的效果（网页结构部分），来学习插入网页元素的方法及各HTML标签的使用。案例说明案例说明 5 案例一 制作鲜花导购网页的结构HTML标签下面，我们就来制作鲜花导购网页的结构部分，主要包括输入文本、设置段落、设置标题、设置超链接、插入水平线、设置列表和插入图片等操作。要注意的是，这些效果大部分可通过两种方式实现，一种是在Dreamweaver的设计视图中进行可视化操作，Dreamweaver会自动将设置的网页结构“翻译”为HTML代码；一种是直接在Dreamweaver的代码视图中编写HTML代码。这里我们主要在Dreamweave

3、r的设计视图中进行操作，然后在代码视图中学习相关的HTML代码。案例步骤案例步骤 支撑知识点 6 一、一、HTML标题、水平线、段落和换行标题、水平线、段落和换行标题的作用是让用户快速了解文档的结构与大致信息，它是通过标题的作用是让用户快速了解文档的结构与大致信息，它是通过 等标签对进行定义的。等标签对进行定义的。标签对定义最大的一号标题；标签对定义最大的一号标题；标签标签对定义最小的六号标题。当为文字添加标题标签后，它会独立成一行显对定义最小的六号标题。当为文字添加标题标签后，它会独立成一行显示。例如：示。例如：1HTML标题 7 水平线主要是用来分隔网页中的内容。水平线标签水平线主要是用来

4、分隔网页中的内容。水平线标签是一个单标签，是一个单标签，其作用是在其作用是在HTMLHTML页面中创建水平线。例如：页面中创建水平线。例如：2HTML水平线 8 HTMLHTML段落是通过段落是通过标签对进行定义的。例如：标签对进行定义的。例如：3HTML段落 9 HTMLHTML段落是通过段落是通过标签对进行定义的。例如：标签对进行定义的。例如：3HTML段落 10 要在不产生一个新段落的情况下进行换行，需使用要在不产生一个新段落的情况下进行换行，需使用标签。例如：标签。例如：4HTML换行 支撑知识点 11 二、二、HTML列表列表无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部

5、分网无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页中的列表均采用无序列表，使用页中的列表均采用无序列表，使用标签对定义，包含的列表项标签对定义，包含的列表项使用使用标签对定义。列表项的默认符号为小圆点，要改变符号类标签对定义。列表项的默认符号为小圆点，要改变符号类型或去除符号，可使用型或去除符号，可使用CSS属性进行控制。例如：属性进行控制。例如：1无序列表 12 有序列表在列表项前都有编号，因此，浏览者可以清晰地了解每项的顺有序列表在列表项前都有编号，因此，浏览者可以清晰地了解每项的顺序。其中序。其中标签对用来定义有序列表，包含的列表项用标签对用来定义有序列表，包含的列表项

6、用标签对定义，默认序号为标签对定义，默认序号为1 1、2 2、3 3。例如：。例如：2有序列表 13 定义列表是项目及其注释的组合。其中定义列表是项目及其注释的组合。其中标签对表示定义列表；标签对表示定义列表；标签对表示每个定义的名称（项目名）；标签对表示每个定义的名称（项目名）；标签对表标签对表示每个定义名称的详细内容（注释）。例如：示每个定义名称的详细内容（注释）。例如：3定义列表 支撑知识点 14 三、三、HTML图像图像图像可以使网页更加生动、美观，常见的网页图像格式有图像可以使网页更加生动、美观，常见的网页图像格式有“.gif”和和“.jpg”两种：两种：1认识网页中的图像.gif格

7、式最多只能包含格式最多只能包含256种颜色，因而适合表现色调不连续或具有种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标和徽标等。大面积单一颜色的图像，如卡通画、按钮、图标和徽标等。.jpg格式适于表现色彩丰富，具有连续色调的图像，如各种照片。格式适于表现色彩丰富，具有连续色调的图像，如各种照片。 15 HTMLHTML图像分为两类，插入图像和背景图像。插入图像作为图像分为两类，插入图像和背景图像。插入图像作为HTMLHTML实体标签实体标签存在；而背景图像则是存在；而背景图像则是CSSCSS的修饰内容。背景图像将放在的修饰内容。背景图像将放在CSSCSS中讲解。

8、中讲解。HTMLHTML插入图像是通过插入图像是通过标签进行定义的。它是一个单标签。由图像标签进行定义的。它是一个单标签。由图像标签标签和其属性构成。其中和其属性构成。其中srcsrc属性用来表示图片的源地址，是必属性用来表示图片的源地址，是必不可少的。例如：不可少的。例如：2HTML图像标签 16 绝对路径是书写完整的路径，系统按照整个路径查找文件。绝对路径中绝对路径是书写完整的路径，系统按照整个路径查找文件。绝对路径中的盘符后面用的盘符后面用:或或:/:/分隔，各目录名之间以及目录名与文件名之间用分隔，各目录名之间以及目录名与文件名之间用 或或/ /分隔。绝对路径可分为如下两类：分隔。绝对

9、路径可分为如下两类：3图像路径1）绝对路径u文件在电脑中的物理路径。文件在电脑中的物理路径。u文件为发布在文件为发布在InternetInternet上的文件时，需要该文件的网络路径，即网址。上的文件时，需要该文件的网络路径，即网址。绝对路径示例含义图片在域名为的服务器中的img目录里图片在E盘my web目录下的image子目录里 17 相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后

10、，产生找不到图片或其他文件等的现象。相对路径的写法及整体移动后，产生找不到图片或其他文件等的现象。相对路径的写法及含义如表含义如表2-32-3所示。所示。3图像路径2）相对路径HTML文档位置图像位置和名称相对路径描述d:demod:demotad.gif图像和网页在同一目录d:demod:demoimagetad.gif图像在网页下一层目录d:demod:tad.gif图像在网页上一层目录d:demod:imagetad.gif图像和网页在同一层但不在同一目录 支撑知识点 18 四、四、HTML超链接超链接超链接由源端点和目标端点两部分组成，其中设置了链接的超链接由源端点和目标端点两部分组成

11、，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点，源端一端称为源端点，跳转到的页面或对象称为目标端点，源端点可以是文字或图像等。点可以是文字或图像等。HTML超链接主要由标签对超链接主要由标签对和属性和属性href构成。要实现链接的跳转，必须要使用属性构成。要实现链接的跳转，必须要使用属性href。 19 1超链接的基本格式a href=源端点（如链接源端点（如链接文字）文字）文件位置相对路径在d:demo文件夹中，即在同一目录href=exm.html在d:demoaaa中，即在子目录中href=aaa/exm.html在d:中，即在上一级目录中href=./exm.html

12、在d:bbb中，即在上一级子目录中href=./bbb/exm.html类型描述target=_blank保留当前窗口，在新窗口中打开链接的网页target=_parent在当前窗口打开链接的网页，如果是框架网页，则在父框架中显示打开的链接网页target=_self在当前窗口打开链接的网页，如果是框架网页，则在当前框架中显示打开的链接网页。target=_top在当前窗口打开链接的网页，如果是框架网页，则删除所有框架，显示打开的网页 20 超链接分为文字超链接、图片超链接、锚点超链接和邮件超链接几种类超链接分为文字超链接、图片超链接、锚点超链接和邮件超链接几种类型。型。1 1）文字超链接）文

13、字超链接a href=链接文字链接文字2 2）图片超链接）图片超链接a href=3 3）锚点超链接（同一页面跳转）锚点超链接（同一页面跳转）锚点的地方采用：锚点的地方采用：a name=目标位置目标位置；标题的链接表；标题的链接表示为：示为：a href=# 标题名标题名。4 4）邮件超链接）邮件超链接a href=mailto:链接文字链接文字2超链接的分类 21 案例二 修饰鲜花导购网页CSS样式基础在案例一中，我们使用HTML完成了鲜花导购网主体结构的制作。本案例中我们将学习如何使用层叠样式表CSS来修饰该页面，即制作该网页的表现部分，效果如图2-13所示。案例说明案例说明 22 案例

14、一 制作鲜花导购网页的结构HTML标签下面，我们就来制作鲜花导购网页的表现部分，主要包括CSS各种选择器的使用以及具体样式的写法等。案例步骤案例步骤 支撑知识点 23 一、在一、在HTML页面中引入页面中引入CSS样式表的方法样式表的方法HTML与与CSS是两个作用不同的语言，要让它们同时对一个网页产生作用，是两个作用不同的语言，要让它们同时对一个网页产生作用，必须确定在必须确定在HTML中引入中引入CSS的方法，主要有以下几种。的方法，主要有以下几种。将将CSS样式表放置在样式表放置在HTML文件头部：内部样式表。文件头部：内部样式表。将将CSS样式表放置在样式表放置在HTML文件主体：行内

15、样式表。文件主体：行内样式表。将将CSS样式表放置在样式表放置在HTML文件外部：链接样式表与导入样式表。文件外部：链接样式表与导入样式表。 24 内部样式表也称嵌入式样式表，是指把对页面各元素的样式设置集中写内部样式表也称嵌入式样式表，是指把对页面各元素的样式设置集中写在在标签对中，并且用标签对中，并且用标签对进行声明，标签对进行声明，其格式如下。其格式如下。1内部样式表style type= !- 25 行内样式表是直接对行内样式表是直接对HTMLHTML标签使用标签使用stylestyle属性，然后将属性，然后将CSSCSS代码作为属性代码作为属性值写在其中，其格式如下。值写在其中，其格

16、式如下。2行内样式表HTML 26 这种方式是将一个独立的样式表文件引入到这种方式是将一个独立的样式表文件引入到HTMLHTML文件中，样式表文件就文件中，样式表文件就是我们常说的是我们常说的CSSCSS文件，扩展名为文件，扩展名为.css.css。CSSCSS文件要和文件要和HTMLHTML文件一起发布文件一起发布到服务器上，这样在用浏览器打开网页时，浏览器会按照到服务器上，这样在用浏览器打开网页时，浏览器会按照HTMLHTML网页所链网页所链接的外部样式表来显示其风格。接的外部样式表来显示其风格。要在要在HTMLHTML中链接外部样式表文件，需要在中链接外部样式表文件，需要在标签对之间添标

17、签对之间添加加标签对，具体格式如下。标签对，具体格式如下。3链接样式表link rel=stylesheet type=text/css href= 27 导入样式表与链接样式表的功能基本相同，只是引入和运作方式上有区导入样式表与链接样式表的功能基本相同，只是引入和运作方式上有区别。采用导入方式引入的样式表在别。采用导入方式引入的样式表在HTMLHTML文件初始化时，会被全部导入到文件初始化时，会被全部导入到HTMLHTML文件内，作为文件的一部分，类似嵌入式的效果；而链接样式表则文件内，作为文件的一部分，类似嵌入式的效果；而链接样式表则是在是在HTMLHTML的标签需要格式时才以链接的方式引

18、入。的标签需要格式时才以链接的方式引入。要在要在HTMLHTML文件中导入样式表，需要使用文件中导入样式表，需要使用style type=text/css标签对进行声明，并在该标签对中加入标签对进行声明，并在该标签对中加入import urlimport url（外部样式表文件地址）（外部样式表文件地址）; ;语句，具体格式如下。语句，具体格式如下。4导入样式表import url(import url(外部样式表文件地址外部样式表文件地址);); 支撑知识点 28 二、选择器的类型二、选择器的类型在前面的案例步骤中，我们对在前面的案例步骤中，我们对CSS的选择器已经有了一定的了解，它用来的选

19、择器已经有了一定的了解，它用来对对HTML文件的不同标签进行控制，从而使文件的不同标签进行控制，从而使CSS可以对不同的网页元素进可以对不同的网页元素进行修饰。行修饰。CSS的语法结构由的语法结构由3部分组成：选择器名、属性和属性值，具体部分组成：选择器名、属性和属性值，具体为以下形式。为以下形式。selector property: value; property: value property: selector property: value; property: value property: value value CSS的选择器常用的有的选择器常用的有3种类型，分别是标签选择器、种

20、类型，分别是标签选择器、id选择器和类选择选择器和类选择器，如表器，如表2-7所示。所示。类型用法说明标签选择器p使同一标签的元素拥有相同的样式类选择器.class使不同的网页元素拥有相同的样式id选择器#id精确控制某个元素的具体样式 29 一个一个HTMLHTML文件由很多不同的标签组成，利用标签选择器可以统一设置使文件由很多不同的标签组成，利用标签选择器可以统一设置使用某类标签定义的元素的外观。例如：若希望用某类标签定义的元素的外观。例如：若希望1 1号标题标签号标题标签的文本的文本有以下效果。有以下效果。1标签选择器h1h1text-align:center;text-align:ce

21、nter;font-size:42px;font-size:42px;color:#FF6600;color:#FF6600; 标题文字居中对齐。标题文字居中对齐。字体大小为字体大小为42像素。像素。字体颜色为橙色。字体颜色为橙色。 30 当使用标签选择器设置了某个标签的样式后，当使用标签选择器设置了某个标签的样式后，HTMLHTML文档中所有使用该标文档中所有使用该标签定义的元素都会相应地发生变化。例如，当设置了签定义的元素都会相应地发生变化。例如，当设置了标签的文本颜标签的文本颜色为红色时，那么页面中所有色为红色时，那么页面中所有标签中文本的颜色都将变为红色。如标签中文本的颜色都将变为红色

22、。如果希望其中的某个或几个果希望其中的某个或几个标签不是红色，就需要使用标签不是红色，就需要使用CSSCSS的类选择器的类选择器或或idid选择器来实现。选择器来实现。2类选择器和id选择器 31 使用类（使用类（classclass）选择器可以为相同或不同的标签分类设置不同的样式。）选择器可以为相同或不同的标签分类设置不同的样式。使用该选择器时，需要在使用该选择器时，需要在HTMLHTML中为希望设置同一样式的标签定义相同的中为希望设置同一样式的标签定义相同的类名，即设置标签的类名，即设置标签的classclass属性，然后在属性，然后在CSSCSS中定义类选择器。定义类选中定义类选择器。定

23、义类选择器时，需要在类名称前面加一个点择器时，需要在类名称前面加一个点“.”.”，语法如下。，语法如下。1）类选择器. .类名类名 样式属性样式属性: :取值取值; ;样式属性样式属性: :取值取值; 32 idid选择器用来对单个元素设置单独的样式，在同一选择器用来对单个元素设置单独的样式，在同一HTMLHTML文件中，文件中，idid名不名不能重复。能重复。idid选择器的使用方法与类选择器相似，先在选择器的使用方法与类选择器相似，先在HTMLHTML中为希望单独中为希望单独设置样式的标签定义设置样式的标签定义idid名（使用标签的名（使用标签的idid属性），然后在属性），然后在CSSC

24、SS中定义中定义idid选择器。定义选择器。定义idid选择器时，需要在选择器时，需要在idid名称的前面加一个名称的前面加一个# #号，语法如下。号，语法如下。2）id选择器#id#id名名 样式属性样式属性: :取值取值; ;样式属性样式属性: :取值取值; ; 33 伪类选择器不属于选择器，它是让元素呈现动态效果的特殊属性。之所伪类选择器不属于选择器，它是让元素呈现动态效果的特殊属性。之所以称为以称为“伪伪”，是因为它指定的对象在文档中并不存在，它指定的是元，是因为它指定的对象在文档中并不存在，它指定的是元素的某种状态，如表素的某种状态，如表2-82-8所示。所示。3伪类选择器伪类名用

25、途a:link设置超链接未被访问时的样式a:active设置超链接被用户激活（在鼠标点击与释放之间）时的样式a:visited设置超链接被访问后的样式a:hover设置将鼠标指针移到超链接上时的样式 34 通用选择器是一种特殊类型的选择器，它用星号通用选择器是一种特殊类型的选择器，它用星号* *来表示选择器的名称，来表示选择器的名称，可以定义所有网页元素的显示格式。通用选择器因为涉及范围较广，一可以定义所有网页元素的显示格式。通用选择器因为涉及范围较广，一般常用于清除页面中元素的边距。如：般常用于清除页面中元素的边距。如：4通用选择器* *margin:0;margin:0;padding:0

26、;padding:0; 支撑知识点 35 三、选择器的集体声明、嵌套与优先级三、选择器的集体声明、嵌套与优先级如果多个选择器声明的样式风格完全相同，这时可以将声明相同的选择如果多个选择器声明的样式风格完全相同，这时可以将声明相同的选择器归类为一组（各选择器之间用英文逗号器归类为一组（各选择器之间用英文逗号“,”分开）以进行集体声明，分开）以进行集体声明，从而提高代码的效率和速度，同时也可以降低代码的冗余。从而提高代码的效率和速度，同时也可以降低代码的冗余。h1,h2,h3,h4,h5text-align:center; font-size:42px; h1,h2,h3,h4,h5text-al

27、ign:center; font-size:42px; color:#FF6600;color:#FF6600;#one,.text,p text-align:center; background-color:red;#one,.text,p text-align:center; background-color:red;1选择器集体声明 36 在在CSSCSS选择器中，还可以通过嵌套的方式，对特殊位置的选择器中，还可以通过嵌套的方式，对特殊位置的HTMLHTML标签进行标签进行声明。例如，当要为声明。例如，当要为标签对中包含的标签对中包含的标签对设置标签对设置样式时，就可以使用嵌套选择器来进行相应的控制（父子选择器之间加样式时，就可以使用嵌套选择器来进行相应的控制（父子选择器之间加一个空格）。一个空格）。2选择器的嵌套p span color:red; /p span color:red; /* *设置设置p p标签里包含的标签里包含的spanspan标签的样式标签的样式* */ /#one li padding-bottom:10px;#one li padding-bottom:10px;/ /* *设置设置idid名为名为oneone的标的标签里包含的签里包含的lili标签样式标签样式* */ /.two p color:#F00;.two p color: