Java-Web程序设计任务教程全书电子教案整本书教学教程讲义.pptx

2021/9/6,#,单击此处编辑标题,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑正文,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/9/6,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2021/9/6,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2021/9/6,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,2021/9/6,#,第,1,章 网页开发基础,Java,Web,程序设计任务教程（第,2,版）,学习目标,/,Target,熟悉,HTML,标签的使用,掌握,CSS,样式的引用方式,掌握,CSS,选择器的常用属性,熟悉,DOM,与,BOM,的相关知识,学习目标,/,Target,掌握,JavaScript,的使用,熟悉,Bootstrap,框架的下载与使用,掌握,BootStrap,框架的常用组件,章节概述,/,Summary,在学习,Java Web,开发之前，读者首先需要了解一些,网页开发,的基础知识。说到网页，其实大家并不陌生，我们上网查询信息时就是在浏览网页。,网页,可以看作是承载各种网站应用和信息的容器，网站的所有可视化内容都会通过网页展示给用户。本章将围绕,HTML,技术,、,CSS,技术,以及,JavaScript,技术,对网页开发基础知识进行讲解。,目录,/,Contents,01,02,03,HTML,基础,常用的,HTML,标签,CSS,技术,目录,/,Contents,06,Bootstrap,框架的常用组件,04,05,JavaScript,基础,Bootstrap,框架基础,HTML,基础,1.1,1.1.1 HTML,简介,先定一个,小目标！,先定一个,小目标！,了解,HTML,的,概念,，能够知道,HTML,用于做什么,熟悉,HTML,的,基本格式,，为后期,HTML,开发奠定基础,1.1.1 HTML,简介,HTML,是英文,Hyper Text Markup Language,的缩写，中文译为“超文本标记语言”。,HTML,主要作用是通过,HTML,标签,对网页中的文本、图片、声音等内容进行描述。,HTML,网页就是一个后缀名为“,.html,”或“,.htm,”的文件，它可以用记事本打开，因此简单的,html,代码可以在记事本中编写。编写完成后，将文件后缀名修改为“,.html,”或“,.htm,”即可生成一个,HTML,网页,。,HTML,1.1.1 HTML,简介,HTML,htmlDemo01,HTML,语言的基本格式,！,DOCTYPE,声明,html,标签,head,标签,body,标签,文件,1-1,：,htmDemo01.html,1.1.1 HTML,简介,声明必须是,HTML,文档的,第一行,，位于,标签之前。,声明不是,HTML,标签，是一条,指令,，它用于向浏览器说明当前文档使用哪种,HTML,标准规范,，网页在开头处使用,声明为所有的,HTML,文档指定,HTML,版本和类型，这样浏览器将该网页作为有效的,HTML,文档,，并按指定的文档类型进行解析。,声明和浏览器的,兼容性相关,，,声明被删除后，如何展示,HTML,页面的权利就交给了,浏览器,，即页面的显示效果由浏览器决定。,声明,1.1.1 HTML,简介,标签位于,声明之后，被称为,根标签,。根标签主要用于告知浏览器该文档是一个,HTML,文档。其中，,标签,标志着,HTML,文档的,开始,，,标签,则标志着,HTML,文档的,结束,，它们之间是文档的,头部,和,主体,内容。,标签,1.1.1 HTML,简介,标签用于定义,HTML,文档的,头部信息,，也被称为,头部标签,。,标签紧跟在,之后，主要用于,封装其他位于文档头部,的标签，如,、,、,及,等标签。,标签,1.1.1 HTML,简介,标签用于定义,HTML,文档所要显示的内容,，也被称为,主体标签,。浏览器中显示的所有文本、图像、音频和视频等信息都,必须,位于,标签内，才能最终展示给用户。需要注意的是，一个,HTML,文档,只能含有,一对,标签，且,标签,必须,在,标签内，位于,标签之后，与,标签是并列关系。,标签,1.1.1 HTML,简介,STEP 01,创建一个名称为,chapter01,的文件夹，然后在该文件夹中新建一个文本文件（,.txt,后缀）,，,将文件的名称更改为,htmlDemo01,，后缀名改为,.html,。,htmlDemo01,文件,1.1.1 HTML,简介,STEP 02,在,htmlDemo01.html,文件中编写代码。,htmlDemo01,这是我的第一个,HTML,在,body,文件中添加页面内容,1.1.1 HTML,简介,STEP 03,运行程序，使用浏览器打开,htmlDemo01.html,文件。,标签中的内容,1.1.1 HTML,简介,读者在编写,HTML,文件时，可以使用系统自带的记事本编写，也可以使用,EditPlus,、,UltraEdit,或,IDEA,等工具编写,HTML,文件，当使用工具创建,HTML,文件时，文件中的基本标签会被自动创建，编辑工具还会有代码颜色和代码提示功能，开发者只需根据需求完善功能代码即可，工具的使用有助于,提高编码效率,，减少出错率。,关于编写,HTML,文件的工具,1.1.2 HTML,标签概述,先定一个,小目标！,先定一个,小目标！,熟悉,单标签,、,双标签,和,注释标签,。,1.1.2 HTML,标签概述,单标签也被称为“,空标签,”，是指用一个标签符号就可以完整地描述某个功能的标签。,单标签基本语法格式如下,:,单标签,注意,：,在标签名与“,/,”之间有一个,空格,，虽然在显示效果上有无空格都一样，但是按照规范的要求，建议加上空格。,1.1.2 HTML,标签概述,双标签也称,体标签,，是指由,开始,和,结束,两个标签符组成的标签。,双标签基本语法格式如下：,双标签,内容,1.1.2 HTML,标签概述,在,HTML,中还有一种特殊的标签,注释标签,，如果需要在,HTML,文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。,注释标签的基本语法格式如下：,注释标签,注意,：,注释内容不会显示在浏览器窗口中，但是作为,HTML,文档内容的一部分，,注释标签,可以被下载到用户的计算机上，或者用户查看源代码时也可以看到,注释标签,。,多学一招,为什么要有单标签？,HTML,标签的作用原理是,选择网页内容进行描述,，也就是说需要描述谁，就选择谁，所以才会有双标签的出现，双标签有开始和结束标签。而单标签本身就可以,描述一个功能,，不需要选择谁，例如水平线标签,按照双标签的语法，它应该写成“,”，但是水平线标签不需要选择谁，它本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以单标签的语法格式就是在标签名称后面加一个关闭符，即为,。,常用的,HTML,标签,1.2,1.2.1,段落、行内和换行标签,先定一个,小目标！,先定一个,小目标！,熟悉,HTML,的段落、行内和换行标签,1.2.1,段落、行内和换行标签,STEP 01,在,chapter01,文件夹中新建,HTML,文件,htmlDemo02.html,文件,1-2,：,htmDemo02.html,使用,HTML,制作网页时，,通过,br,标签,可以实现,换行效果,1.2.1,段落、行内和换行标签,STEP 02,运行程序，使用浏览器打开,htmlDemo02.html,文件。,标签中的内容,1.2.2,文本样式标签,先定一个,小目标！,先定一个,小目标！,熟悉,文本样式标签,1.2.2,文本样式标签,在,HTML,中，使用,标签控制网页中文本的样式，如字体、字号和颜色。,标签的基本语法格式如下：,文本内容,1.2.2,文本样式标签,STEP 01,在,chapter01,文件夹中新建,HTML,文件,htmlDemo03.html,文件,1-3,：,htmDemo03.html,我是默认样式的文本,我是,7,号绿色文本，我的字体是微软雅黑哦,1.2.2,文本样式标签,STEP 02,运行程序，使用浏览器打开,htmlDemo03.html,文件。,标签改变文本格式,1.2.3,表格标签,先定一个,小目标！,先定一个,小目标！,熟悉,表格标签,，学会使用,border,属性改变表格的边框,1.2.3,表格标签,在,HTML,网页中要想创建表格，需要使用相关的表格标签才能创建表格。,在,HTML,网页中创建表格的基本语法格式如下所示：,单元格内的文字,注意,：,、,和,是创建表格的,基本标签,，缺一不可。,用于定义一个,表格,，,用于定义表格中的,行,，必须嵌套在,标签中，,用于定义表格中的,单元格，也可称为表格中的列,，必须嵌套在,标签中。,1.2.3,表格标签,STEP 01,在,chapter01,文件夹中创建一个,HTML,文件,htmlDemo04.html,文件,1-4,：,htmDemo04.html,姓名,语文,数学,英语,itcast,95,80,90,1.2.3,表格标签,STEP 02,运行程序，使用浏览器打开,htmlDemo04.html,文件,注意,：,如果,border,属性的值,发生改变,，那么只有围绕表格的边框尺寸会发生变化，表格内部的边框还是,1,像素宽。如果将,border,的属性值设置为,0,或者,删除,border,属性,，将显示没有边框的表格。,1.2.4,表单标签,先定一个,小目标！,先定一个,小目标！,熟悉,表单标签,，学会使用表单标签收集数据信息。,1.2.4,表单标签,表单就是在网页上,用于输入信息的区域,，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。,1.2.4,表单标签,包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框提交按钮等。,表单控件,一个表单中通常还需要包含一些说明性的文字即表单控件前的文字说明，用于提示用户进行填写和操作,。,提示信息,它相当于一个容器，用来容纳所有的表单控件和提示信息。,表单域,表单的,3,个部分,1.2.4,表单标签,在,HTML,中，,标签用于定义表单域，即创建一个表单。,标签基本语法如下所示：,表单域,各种表单控件,action,属性,：,用于指定表单提交的地址,。,method,属性,：,用于设置表单数据的提交方式,，,它有,GET,和,POST,两个值,，,其中，,GET,为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且,有数据量限制,；,而使用,POST,提交方式不但,保密性好,，还可以提交大量的数据，因此开发中通常使用,POST,方式提交表单。,1.2.4,表单标签,浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用,控件,可以在表单中定义这些元素。,控件基本语法格式如下：,表单控件,type,属性,为,控件最基本的属性，用来指定不同的,控件类型,。,控件还可以定义很多其他属性，其中，比较常用的有,id,、,name,、,value,、,size,，它们分别用来指定,控件的,ID,值,、,名称,、,控件中的默认值,和,控件在页面中的显示宽度,。,1.2.4,表单标签,STEP 01,在,chapter01,文件夹中创建一个,HTML,文件,htmlDemo05.html,，添加表单，并设置提交方式为,POST,，再定义一个,2,列的表格。,文件,1-5,：,htmDemo05.html,1.2.4,表单标签,STEP 02,在,htmlDemo05.html,中添加用户名输入控件和密码输入框控件。,用户名,:,密码,:,1.2.4,表单标签,STEP 03,在,htmlDemo05.html,中添加性别选择控件和复选框控件。,性别,:,男,女,兴趣,:,看电影,敲代码,玩游戏,1.2.4,表单标签,STEP 04,在,htmlDemo05.html,中添加文件上传控件、提交按钮控件和重置按钮。,头像,:,1.2.4,表单标签,STEP 05,运行程序，使用浏览器打开,htmlDemo05.html,文件。,1.2.4,表单标签,STEP 06,在上图中填写表单数据，页面效果如下所示。,注意,：,密码输入框中内容为,不可见状态,，单选按钮只能选择一个值，而复选框可以选择多个值。,多学一招,多行文本标签,HTML,提供了,标签。通过此标签可以创建多行文本框，,标签基本语法格式如下。,文本内容,1.2.4,表单标签,评论：,评论时，请注意文明用语。,STEP 01,在,chapter01,文件夹中创建一个名称为,htmlDemo06,的,HTML,文件,文件,1-6,：,htmDemo06.html,cols,属性用于设置文本框每行的字符数,。,rows,属性用于设置文本框的行数。,1.2.4,表单标签,STEP 02,运行程序，使用浏览器打开,htmlDemo06.html,文件。,1.2.5,列表标签,先定一个,小目标！,先定一个,小目标！,熟悉网页中的,3,种列表，,无序列表,、,有序列表,和,定义列表,1.2.5,列表标签,无序列表是一种,不分排序的列表,，各个列表项之间,没有顺序级别之分,，通常是,并列,的。定义无序列表的基本语法格式如下所示。,无序列表,列表项,1,列表项,2,列表项,3,.,注意,：,标签用于定义无序列表，,标签嵌套在,标签中，用于描述具体的列表项，每对,中至少应包含一对,。,1.2.5,列表标签,传智播客学科,web,前端,JAVA,PHP,.NET,STEP 01,在,chapter01,文件夹中创建一个名称为,htmlDemo07,的,HTML,文件,文件,1-7,：,htmDemo07.html,标签的,type,属性用来指定列表项目符号,。,type,常用的属性值,disc,、,square,和,circle,，它们的显示效果分别是、和,1.2.5,列表标签,STEP 02,运行程序，使用浏览器打开,htmlDemo07.html,文件,1.2.5,列表标签,有序列表是一种,强调排列顺序,的列表，使用,标签,定义，内部可以嵌套多个,标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下,:,有序列表,列表项,1,列表项,2,列表项,3,.,注意,：,标签用于定义有序列表，,为具体的列表项，和无序列表类似，每对,中也至少应包含一对,。,1.2.5,列表标签,定义列表与有序列表、无序列表的使用不同，它包含了,3,个标签，即,dl,、,dt,、,dd,。定义列表的基本语法格式如下：,定义列表,名词,1,dd,是名词,1,的描述信息,1,dd,是名词,1,的描述信息,2,名词,2,dd,是名词,2,的描述信息,1,dd,是名词,2,的描述信息,2,注意,：,标签,用于指定定义列表，,和,并列嵌套于,中。其中，,标签用于指定,术语名词,，,标签用于对,名词进行解释和描述,。,一对,可以对应多对,也就是说可以对一个名词进行多项解释。,1.2.5,列表标签,红色,是光谱的三原色和心理四色之一,代表着吉祥、喜庆、火热、幸福、豪放、,斗志、革命、轰轰烈烈、激情澎湃等,绿色,是自然界中常见的颜色,绿色有无公害，健康的意思,STEP 01,在,chapter01,文件夹中创建一个名称为,htmlDemo08,的,HTML,文件,文件,1-8,：,htmDemo08.html,1.2.5,列表标签,STEP 02,运行程序，使用浏览器打开,htmlDemo08.html,文件,1.2.6,超链接标签,先定一个,小目标！,先定一个,小目标！,熟悉,超链接标签,的使用，可以使用超链接完成,页面的跳转,1.2.6,超链接标签,超链接是网页中,最常用的元素,，一个网站通常由多个页面构成，进入网站时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在,HTML,中创建超链接非常简单，只需用,标签,环绕需要被链接的对象即可。,使用,标签创建超链接的基本语法格式如下所示。,文本或图像,1.2.6,超链接标签,标签是一个行内标签，用于定义,超链接,，,href,和,target,是,标签的常用属性，具体含义如下：,href,：,href,属性用于指定链接指向的页面的,URL,，当在,标签中使用,href,属性时，该标签就具有了超链接的功能,。,target,：,target,属性用于指定页面的打开方式，其值有,_self,、,_blank,、,_parent,和,_top,（,_self,和,_blank,较为常用）。其中，,_self,为默认值，意为在,原窗口,打开，,_blank,为在,新窗口,打开，,_parent,是在父框架集中打开被链接文档，,_top,是在整个窗口中打开被链接文档。,1.2.6,超链接标签,在新窗口打开：,传智播客,在原窗口打开：,百度,STEP 01,在,chapter01,文件夹中创建一个名称为,htmlDemo09,的,HTML,文件,文件,1-9,：,htmDemo09.html,1.2.6,超链接标签,STEP 02,运行程序，使用浏览器打开,htmlDemo09.html,文件,1.2.6,超链接标签,STEP 03,当单击“传智播客”后，浏览器的效果如下。,1.2.6,超链接标签,STEP 03,当单击“百度”后，浏览器的效果如下。,在原窗口中打开,1.2.7,图像标签,先定一个,小目标！,先定一个,小目标！,熟悉,图像标签,，学会使用图像标签显示图像,1.2.7,图像标签,要想在,HTML,网页中显示图像就需要使用图像标签,。,标签基本语法格式如下：,上述的语法中，,src,属性用于指定,图像文件的路径,，属性值可以是,绝对路径,，也可以是,相对路径,，它是,标签的必需属性。,1.2.7,图像标签,显示图片：,STEP 01,在,chapter01,文件夹中添加一个名称为,itcast.png,的图片文件，然后创建一个,HTML,文件,htmlDemo10,。,文件,1-10,：,htmDemo10.html,注意：,width,和,height,属性分别用来设置图像的宽度和高度，单位为,像素,，,border,属性用来设置图像的边框，,border=0,表示无边框。,1.2.6,超链接标签,STEP 02,运行程序，使用浏览器打开,htmlDemo10.html,文件,CSS,技术,1.3,1.3.1,初识,CSS,先定一个,小目标！,先定一个,小目标！,了解,CSS,的,概念,，能够知道,CSS,用于做什么,熟悉,CSS,的,基本格式,，为后期网页开发奠定基础,1.3.1,初识,CSS,使用,HTML,标签属性对网页进行修饰的方式存在很大的局限和不足，因为我们所有的样式都是写在标签中，这样既不利于代码阅读，将来维护代码也非常困难。如果希望页面美观、大方、维护方便，就需要使用,CSS,实现结构与表现的分离。,结构与表现相分离,是指在页面设计中，,HTML,标签只用于搭建网页的基础结构，不适用标签属性设置显示样式，所有的样式,交由,CSS,来设置,。,CSS,的作用是什么？,1.3.1,初识,CSS,CSS,是,Cascading Style Sheet,的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种,标签性语言,。在实际开发中，,CSS,主要用于设置,HTML,页面中的,文本内容,（字体、大小、对齐方式等）、,图片的外形,（宽高、边框样式、边距等）以及,版面的布局,等外观显示样式。,CSS,定义的规则具体如下：,选择器,属性,1:,属性值,1;,属性,2:,属性值,2;,属性,3:,属性值,3;,在上述的样式规则中，选择器用于指定,CSS,样式作用的,HTML,对象，花括号内的属性是对该对象设置的,具体样式,。其中，属性和属性值以键值对,“属性,:,属性值,”,的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“,:,”（英文冒号）连接，多个“键值对”之间用“,;,”（英文分号）进行分隔。,1.3.1,初识,CSS,通过,CSS,样式对,标签进行设置，具体示例如下：,div,border,:1px solid red;,width,:600px;,height,:400px;,div,为选择器，表示,CSS,样式作用的,HTML,对象，,border,、,width,和,height,为,CSS,属性，分别表示边框、宽度和高度，其中,border,属性有,3,个值“,1px solid red;,”分别表示该边框为,1,像素、实心边框线、红色。,1.3.1,初识,CSS,在,CSS,中，通常使用像素单位,px,作为计量文本、边框等元素的标准量，,px,是相对于显示器屏幕分辨率而言的。而百分比（,%,）是相对于父对象而言的，例如一个元素呈现的宽度是,400px,，子元素设置为,50%,，那么子元素所呈现的宽度为,200px,。,CSS,的计量单位,1.3.1,初识,CSS,如,red,、,green,、,blue,等。,预定义的颜色值,如,#FF0000,、,#FF6600,、,#29D794,等。实际工作中，十六进制是最常用的定义颜色的方式。,十六进制,如红色可以用,rgb(255,0,0),或,rgb(100%,0%,0%),来表示。如果使用,RGB,代码百分比方式取颜色值时，即使值为,0,，也不能省略百分号，必须写为,0%,。,RGB,代码,CSS,中颜色的取值,1.3.2 CSS,样式的引用方式,先定一个,小目标！,先定一个,小目标！,熟悉,CSS,样式,4,种的引用方式，,分别为,行内式、内嵌式、链入式,和,导入式,1.3.2 CSS,样式的引用方式,行内式也被称为内联式，是通过标签的,style,属性,设置标签的样式。行内式基本语法格式如下：,内容,行内式,style,是标签的属性，实际上任何,HTML,标签都拥有,style,属性,，用来设置行内式。属性和属性值的书写规范与,CSS,样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。,1.3.2 CSS,样式的引用方式,行内式是写在,根标签中,，,例如下面的示例代码即为行内式,CSS,样式的写法：,使用,CSS,行内式修饰一级标题的字体大小和颜色,使用,标签的,style,属性设置行内式,CSS,样式，用来修饰一级标题的字体和颜色,。,1.3.2 CSS,样式的引用方式,行内式效果,展示,需要注意的是,：,行内式是通过标签的属性来控制样式的，这样并没有做到结构域样式分离，所以不推荐使用。,1.3.2 CSS,样式的引用方式,内嵌式是将,CSS,代码集中写在,HTML,文档的,头部标签,中，并用,标签,定义，其基本语法格式如下：,选择器,属性,1:,属性值,1;,属性,2:,属性值,2;,属性,3:,属性值,3;,内嵌式,标签一般位于,标签中的,标签之后,，因为浏览器是,从上到下,解析代码的，把,CSS,代码放在头部便于提前被加载和解析，以避免网页内容加载后没有样式修饰带来的问题。在,标签中，只有设置,type,的属性值为“,text/css,”，这样浏览器才知道,标签包含的是,CSS,代码。,1.3.2 CSS,样式的引用方式,使用,CSS,内嵌式,h2 text-align:center;,div border:1px solid#CCC;width:300px;height:80px;color:purplr;,text-align:center;,内嵌式,CSS,样式,使用,style,标签可定义内嵌式,CSS,样式表，,style,标签一般位于,head,头部标签中，,title,标签之后。,STEP 01,在,chapter01,文件夹中创建一个,HTML,文件,cssDemo01,文件,1-11,：,cssDemo01.html,定义了,和,标签的样式,1.2.6,超链接标签,STEP 02,运行程序，使用浏览器打开,cssDemo01.html,文件,注意,：,内嵌式引入,CSS,只对其所在的,HTML,页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥,CSS,代码的重用优势。,1.3.2 CSS,样式的引用方式,外链式也叫,链入式,，外链式是将所有的样式放在一个或多个以,.css,为扩展名的外部样式表文件中，通过,标签将外部样式表文件链接到,HTML,文件中。外链式引用,CSS,的基本语法格式如下：,外链式,href,：定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。,type,：定义所链接文档的类型，这里需要指定为“,text/css,”，表示链接的外部文件为,CSS,。,rel,：定义当前文档与被链接文档之间的关系，这里需要指定为“,stylesheet,”，表示被链接的文档是一个样式表文件。,1.3.2 CSS,样式的引用方式,/*,定义标题标签居中对齐,*/,h2 text-align:center;,/*,定义,div,标签样式,*/,div border:1px solid#CCC;width:300px;height:80px;color:purplr;,text-align:center;,STEP 01,接下来通过修改文件,cssDemo01,演示链入式,CSS,的引用方式,，,在,chapter01,文件夹中创建一个名称为,style.css,的文件,。,1.3.2 CSS,样式的引用方式,使用,CSS,外链式,外链式,CSS,样式,外链式也叫链入式，外链式是将所有的样式放在一个或多个以,.css,为扩展名的外部样式,表文件中。,STEP 02,在,chapter01,文件夹中创建一个名为,cssDemo02,的,HTML,文件,。,使用,标签链入了,style.css,文件,1.3.2 CSS,样式的引用方式,STEP 03,运行程序，,使用浏览器打开文件,cssDemo02,。,注意,：,在实际开发中，链入式是使用,频率最高,、,最实用,的引入方式，它将,HTML,代码与,CSS,代码分离为两个或多个文件，实现了结,构和表现的完全分离,，同一个,CSS,文件可以被不同的,HTML,页面链接使用，同时一个,HTML,页面也可以通过多个,标签,链接多个,CSS,样式表，大大提高了网页开发的工作效率。,1.3.2 CSS,样式的引用方式,导入式与链入式相同，都是针对外部样式表文件的。对,HTML,头部文档应用,标签，并在,标签内的开头处使用,import,语句，即可导入外部样式表文件。导入式引用,CSS,的基本语法格式如下：,import url(CSS,文件路径,);,或,import CSS,文件路径,;,/*,在此还可以存放其他,CSS,样式,*/,导入式,标签内还可以存放其他的内嵌样式，,import,语句需要位于其他内嵌样式的上面。,1.3.2 CSS,样式的引用方式,对文件,1-12,应用导入式,CSS,样式，只需把,HTML,文档中的,语句,替换成以下代码即可,:,import style.css;,注意,：,虽然导入式和链入式功能基本相同，但是大多数网站都是采用链入式引入外部样式表的，主要原因是两者的加载时间和顺序不同。当一个页面被加载时，,标签引用的,CSS,样式表将,同时被加载,，而,import,引用的,CSS,样式表会等到,页面全部下载完后才被加载,。因此，当用户的网速比较慢时，会先显示没有,CSS,修饰的网页，这样会造成不好的用户体验，所以大多数网站采用链入式。,或,import url(style.css);,1.3.3 CSS,选择器和常用属性,先定一个,小目标！,先定一个,小目标！,熟悉,CSS,选择器,和常用属性,1.3.3 CSS,选择器和常用属性,标签选择器是指用,HTML,标签名称作为选择器，按,标签名,称分类，为页面中某一类标签指定,统一的样式,。标签选择器的基本语法格式如下：,标签名属性1:属性值1;属性2:属性值2;属性3:属性值3;,标签选择器,所有的,HTML,标签都可以作为,标签选择器的标签名,，例如,标签、,标签、,标签等。用标签选择器定义的样式对页面中该类型的所有标签都有效，这是它的优点，但同时这也是其缺点，因为这样不能设计差异化样式。,1.3.3 CSS,选择器和常用属性,类选择器使用“,.,”（英文点号）进行标识，后面紧跟,类名,，其基本语法格式如下：,.,类名,属性,1:,属性值,1;,属性,2:,属性值,2;,属性,3:,属性值,3;,类选择器,类名即为,HTML,页面中元素的,class,属性值，大多数,HTML,元素都可以定义,class,属性,。类选择器最大的优势是可以为元素对象定义,单独或相同的样式,。,1.3.3 CSS,选择器和常用属性,id,选择器使用“,#,”进行标识，后面紧跟,id,名,，其基本语法格式如下：,.,类名,属性,1:,属性值,1;,属性,2:,属性值,2;,属性,3:,属性值,3;,id,选择器,id,名即为,HTML,页面中元素的,id,属性值，大多数,HTML,元素都可以定义,id,属性,，元素的,id,值是,唯一,的，只能对应于文档中某一个具体的元素。,1.3.3 CSS,选择器和常用属性,通配符选择器用“,*,”号表示，它是所有选择器中作用,范围最广,的，能匹配页面中所有的元素。通配符选择器的基本语法格式如下：,.,类名,属性,1:,属性值,1;,属性,2:,属性值,2;,属性,3:,属性值,3;,通配符选择器,在实际网页开发中，不建议使用通配符选择器，因为它设置的样式对所有的,HTML,标签都生效，这是其优点也是其缺点，因为这样不能设计差异化样式。,1.3.3 CSS,选择器和常用属性,STEP 01,在,chapter01,文件夹中创建一个名称为,cssDemo03,的,HTML,文件,，在,标签下编写如下代码。,标题一：,class=red,，设置文字为红色。,段落一,:class=green font18,设置文字为绿色，字号为,18px,。,段落二,:class=red font18,设置文字为红色，字号为,18px,。,段落,1,：,id=bold,，设置粗体文字。,段落,2,：,id=font24,，设置字号为,24px,。,段落,3,：,id=font24,，设置字号为,24px,。,段落,4,：,id=bold font24,，同时设置粗体和字号,24px,。,1.3.3 CSS,选择器和常用属性,STEP 02,在,cssDemo03,的,HTML,文件,中使用选择器修改样式。在,标签中编写如下代码。,.red,color:red;,.green,color:green;,.font18,font-size:18px;,#bold,font-weight:bold;,#font24,font-size:24px;,类选择器的定义,id选择器的定义,1.3.3 CSS,选择器和常用属性,STEP 03,运行程序，,使用浏览器打开文件,cssDemo03,“段落2”和“段落3”的字号均为24像素，这是由于他们引用了相同的id选择器，虽然浏览器并没有报错，但是这种做法是不被允许的，因为在JavaScript等脚本语言中id值是唯一的。,显示任何,CSS,样式，这意味着同一个标签对象不能同时引用多个,id,选择器，,1.3.3 CSS,选择器和常用属性,CSS,常用属性,属性,名称,功能描述,margin,用于指定对象的外边距，也就是对象与对象之间的距离。该属性可指定,14,个属性值，各属性值以空格分隔,padding,用于指定对象的内边距，也就是对象的内容与对象边框之间的距离。该属性可指定,14,个属性值，各属性值以空格分隔,background,用于设置背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该属性可指定多个属性值，各属性值以空格分隔，没有先后顺序,font-family,规定元素的字体系列,border,用于设置边框的宽度、边框的样式和边框的颜色。该属性可以指定多个属性值，各属性值以空格分隔，没有先后顺序,font,用于设置字体样式、小型的大写字体、字体粗细、文字的大小、行高和文字的字体,height,用于指定对象的高度,1.3.3 CSS,选择器和常用属性,CSS,常用属性,属性,名称,功能描述,line-height,用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高,color,用于指定文本的颜色,text-align,用于指定文本的对齐方式,text-decoration,用于指定文本的显示样式，其属性值包括,line-through,（删除线）、,overline,（上划线）、,underline,（下划线）、,blink,（闪烁效果，,Firefox,和,Opera,可以看到效果）和,none,（无效果）等,vertical-align,用于设置元素的垂直对齐方式,display,用于指定对象的显示形式,JavaScript,基础,1.4,1.4.1 JavaScript,概述,先定一个,小目标！,先定一个,小目标！,了解,JavaScript,的,概念,，能够知道,JavaScript,的组成,熟悉,JavaScript,的代码,引入方式,1.4.1 JavaScript,概述,JavaScript,是,Web,中一种功能强大的,脚本语言,，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接,嵌入在,HTML,页面中,，就可以把静态的页面转变成支持用户交互并响应事件的,动态页面,。,什么是,JavaScript,？,1.4.1 JavaScript,概述,是,JavaScript,的核心。,ECMAScript,规定了,JavaScript,的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套,JavaScript,语法工业标准。,ECMAScript,文档对象模型，是,W3C,组织推荐的处理可扩展标签语言的标准编程接口，通过,DOM,提供的接口，可以对页面上的各种元素进行操作（如大小、位置、颜色等）。,DOM,浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过,BOM,，可以对浏览器窗口进行操作（如弹出框、控制浏览器导航跳转等）。,BOM,JavaScript,的组成,1.4.1 JavaScript,概述,行内式是指将单行或少量的,JavaScript,代码写在,HTML,标签的事件属性中。,行内式,在,HTML,文档中，可以通过,标签及其相关属性引入,JavaScript,代码。当浏览器读取到,标签时，就会解释执行其中的脚本。,内嵌式,外链式是指将,JavaScript,代码写在一个单独的文件中，一般使用“,js,”作为文件的扩展名，在,HTML,文件中使用,标签进行引入,JavaScript,文件。外链式适合,JavaScript,代码量比较多的情况。,外链式,JavaScript,的引入方式,1.4.1 JavaScript,概述,STEP 01,行内式案例演示：,在,chapter01,文件夹中创建一个名称为,JavaScriptDemo01,的,HTML,文件,。,JavaScript,行内式,1.4.1 JavaScript,概述,STEP 02,运行程序，,使用浏览器打开文件,Java