《Java-Web程序设计任务教程全书电子教案完整版课件最全ppt整本书教学教程最新讲义.pptx》由会员分享，可在线阅读，更多相关《Java-Web程序设计任务教程全书电子教案完整版课件最全ppt整本书教学教程最新讲义.pptx（1069页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第1章 网页开发基础Java Web程序设计任务教程（第2版）学习目标/Target 熟悉HTML标签的使用 掌握CSS样式的引用方式 掌握CSS选择器的常用属性 熟悉DOM与BOM的相关知识学习目标/Target 掌握JavaScript的使用 熟悉Bootstrap框架的下载与使用 掌握BootStrap框架的常用组件章节概述/ Summary 在学习Java Web开发之前，读者首先需要了解一些网页开发的基础知识。说到网页，其实大家并不陌生，我们上网查询信息时就是在浏览网页。网页可以看作是承载各种网站应用和信息的容器，网站的所有可视化内容都会通过网页展示给用户。本章将围绕HTML技术、C
2、SS技术以及JavaScript技术对网页开发基础知识进行讲解。目录/Contents010203HTML基础常用的HTML标签CSS技术目录/Contents06 Bootstrap框架的常用组件0405JavaScript基础Bootstrap框架基础HTML基础1.11.1.1 HTML简介先定一个小目标！ 先定一个小目标！了解HTML的概念，能够知道HTML用于做什么熟悉HTML的基本格式，为后期HTML开发奠定基础1.1.1 HTML简介 HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”。HTML主要作用是通过HTML标签对网页中的
3、文本、图片、声音等内容进行描述。HTML网页就是一个后缀名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的html代码可以在记事本中编写。编写完成后，将文件后缀名修改为“.html”或“.htm”即可生成一个HTML网页。HTML1.1.1 HTML简介HTML htmlDemo01HTML语言的基本格式！DOCTYPE声明html标签head标签body标签文件1-1：htmDemo01.html1.1.1 HTML简介声明必须是 HTML 文档的第一行，位于 标签之前。声明不是 HTML 标签，是一条指令，它用于向浏览器说明当前文档使用哪种HTML标准规范，网页在开头处
4、使用声明为所有的HTML文档指定HTML版本和类型，这样浏览器将该网页作为有效的HTML文档，并按指定的文档类型进行解析。声明和浏览器的兼容性相关，声明被删除后，如何展示HTML页面的权利就交给了浏览器，即页面的显示效果由浏览器决定。声明1.1.1 HTML简介标签位于声明之后，被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中，标签标志着HTML文档的开始，标签则标志着HTML文档的结束，它们之间是文档的头部和主体内容。标签1.1.1 HTML简介标签用于定义HTML文档的头部信息，也被称为头部标签。标签紧跟在之后，主要用于封装其他位于文档头部的标签，如、及等标签。标签1.
5、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 这是我的
6、第一个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标签概述先定一个小目标！ 先定一个小目标！熟悉单标签、双标签和注
7、释标签。1.1.2 HTML标签概述单标签也被称为“空标签”，是指用一个标签符号就可以完整地描述某个功能的标签。单标签基本语法格式如下:单标签注意：在标签名与“/”之间有一个空格，虽然在显示效果上有无空格都一样，但是按照规范的要求，建议加上空格。1.1.2 HTML标签概述双标签也称体标签，是指由开始和结束两个标签符组成的标签。双标签基本语法格式如下：双标签内容1.1.2 HTML标签概述在HTML中还有一种特殊的标签注释标签，如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。注释标签的基本语法格式如下：注释标签注意：注释内容不会显示在浏览器
8、窗口中，但是作为HTML文档内容的一部分，注释标签可以被下载到用户的计算机上，或者用户查看源代码时也可以看到注释标签。多学一招为什么要有单标签？HTML标签的作用原理是选择网页内容进行描述，也就是说需要描述谁，就选择谁，所以才会有双标签的出现，双标签有开始和结束标签。而单标签本身就可以描述一个功能，不需要选择谁，例如水平线标签,按照双标签的语法，它应该写成“”，但是水平线标签不需要选择谁，它本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以单标签的语法格式就是在标签名称后面加一个关闭符，即为。常用的HTML标签1.21.2.1 段落、行内和换行标签先定一个小目标！
9、 先定一个小目标！熟悉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 文本
10、样式标签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网页中创建表格的基本语法格式如下所示： 单元格内的文字 注意：、和是创建表格的基本标签，缺一
11、不可。用于定义一个表格，用于定义表格中的行，必须嵌套在标签中，用于定义表格中的单元格，也可称为表格中的列，必须嵌套在标签中。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属性，将显示没
12、有边框的表格。1.2.4 表单标签先定一个小目标！ 先定一个小目标！熟悉表单标签，学会使用表单标签收集数据信息。1.2.4 表单标签表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入、性别选择、提交按钮等都是用表单中的相关标签定义的。1.2.4 表单标签包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框提交按钮等。表单控件一个表单中通常还需要包含一些说明性的文字即表单控件前的文字说明，用于提示用户进行填写和操作。提示信息它相当于一个容器，用来容纳所有的表单控件和提示信息。表单域表单的3个部分1.2.4
13、 表单标签在HTML中，标签用于定义表单域，即创建一个表单。标签基本语法如下所示：表单域 各种表单控件action属性：用于指定表单提交的地址。method属性：用于设置表单数据的提交方式，它有GET和POST两个值，其中，GET为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差且有数据量限制；而使用POST提交方式不但保密性好，还可以提交大量的数据，因此开发中通常使用POST方式提交表单。1.2.4 表单标签浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用控件可以在表单中定义这些元素。控件基本语法格式如下：表单控件type属性为控件最基本的属性，用来指定不同
14、的控件类型。控件还可以定义很多其他属性，其中，比较常用的有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中添加性别选择控件和复选
15、框控件。 性别: 男 女 兴趣: 看电影 敲代码 玩游戏 1.2.4 表单标签STEP 04在htmlDemo05.html中添加文件上传控件、提交按钮控件和重置按钮。 头像: 1.2.4 表单标签STEP 05运行程序，使用浏览器打开htmlDemo05.html文件。1.2.4 表单标签STEP 06在上图中填写表单数据，页面效果如下所示。注意：密码输入框中内容为不可见状态，单选按钮只能选择一个值，而复选框可以选择多个值。多学一招多行文本标签HTML提供了标签。通过此标签可以创建多行文本框，标签基本语法格式如下。 文本内容 1.2.4 表单标签 评论： 评论时，请注意文明用语。 STEP
16、01在chapter01文件夹中创建一个名称为htmlDemo06的HTML文件文件1-6：htmDemo06.htmlcols属性用于设置文本框每行的字符数。rows属性用于设置文本框的行数。1.2.4 表单标签STEP 02运行程序，使用浏览器打开htmlDemo06.html文件。1.2.5 列表标签先定一个小目标！ 先定一个小目标！熟悉网页中的3种列表，无序列表、有序列表和定义列表1.2.5 列表标签无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分，通常是并列的。定义无序列表的基本语法格式如下所示。无序列表 列表项1 列表项2 列表项3 . 注意：标签用于定义无序列表，标签
17、嵌套在标签中，用于描述具体的列表项，每对中至少应包含一对。1.2.5 列表标签传智播客学科web前端JAVAPHP.NETSTEP 01在chapter01文件夹中创建一个名称为htmlDemo07的HTML文件文件1-7：htmDemo07.html标签的type属性用来指定列表项目符号。type常用的属性值disc、square和circle，它们的显示效果分别是、和1.2.5 列表标签STEP 02运行程序，使用浏览器打开htmlDemo07.html文件1.2.5 列表标签有序列表是一种强调排列顺序的列表，使用标签定义，内部可以嵌套多个标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可
18、以通过有序列表来定义。定义有序列表的基本语法格式如下:有序列表 列表项1 列表项2 列表项3 . 注意：标签用于定义有序列表，为具体的列表项，和无序列表类似，每对中也至少应包含一对。1.2.5 列表标签定义列表与有序列表、无序列表的使用不同，它包含了3个标签，即dl、dt、dd。定义列表的基本语法格式如下：定义列表 名词1 dd是名词1的描述信息1 dd是名词1的描述信息2 名词2 dd是名词2的描述信息1 dd是名词2的描述信息2注意： 标签用于指定定义列表， 和并列嵌套于中。其中， 标签用于指定术语名词， 标签用于对名词进行解释和描述。一对可以对应多对, 也就是说可以对一个名词进行多项解释
19、。1.2.5 列表标签 红色 是光谱的三原色和心理四色之一 代表着吉祥、喜庆、火热、幸福、豪放、 斗志、革命、轰轰烈烈、激情澎湃等 绿色 是自然界中常见的颜色 绿色有无公害，健康的意思 STEP 01在chapter01文件夹中创建一个名称为htmlDemo08的HTML文件文件1-8：htmDemo08.html1.2.5 列表标签STEP 02运行程序，使用浏览器打开htmlDemo08.html文件1.2.6 超链接标签先定一个小目标！ 先定一个小目标！熟悉超链接标签的使用，可以使用超链接完成页面的跳转1.2.6 超链接标签超链接是网页中最常用的元素，一个网站通常由多个页面构成，进入网站
20、时首先看到的是首页面，如果想从首页面跳转到子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。使用标签创建超链接的基本语法格式如下所示。文本或图像1.2.6 超链接标签标签是一个行内标签，用于定义超链接，href和target是标签的常用属性，具体含义如下：href：href属性用于指定链接指向的页面的URL，当在标签中使用href属性时，该标签就具有了超链接的功能。target：target属性用于指定页面的打开方式，其值有_self、_blank、_parent和_top（_self和_blank较为常用）。其中，_self为默认
21、值，意为在原窗口打开，_blank为在新窗口打开，_parent是在父框架集中打开被链接文档，_top是在整个窗口中打开被链接文档。1.2.6 超链接标签在新窗口打开： 传智播客 在原窗口打开： 百度STEP 01在chapter01文件夹中创建一个名称为htmlDemo09的HTML文件文件1-9：htmDemo09.html1.2.6 超链接标签STEP 02运行程序，使用浏览器打开htmlDemo09.html文件1.2.6 超链接标签STEP 03当单击“传智播客”后，浏览器的效果如下。1.2.6 超链接标签STEP 03当单击“百度”后，浏览器的效果如下。在原窗口中打开1.2.7 图
22、像标签先定一个小目标！ 先定一个小目标！熟悉图像标签，学会使用图像标签显示图像1.2.7 图像标签要想在HTML网页中显示图像就需要使用图像标签。标签基本语法格式如下：上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径，它是标签的必需属性。1.2.7 图像标签 显示图片：STEP 01在chapter01文件夹中添加一个名称为itcast.png的图片文件，然后创建一个HTML文件htmlDemo10。文件1-10：htmDemo10.html注意：width和height属性分别用来设置图像的宽度和高度，单位为像素，border属性用来设置图像的边框，bo
23、rder=0表示无边框。1.2.6 超链接标签STEP 02运行程序，使用浏览器打开htmlDemo10.html文件CSS技术1.31.3.1 初识CSS先定一个小目标！ 先定一个小目标！了解CSS的概念，能够知道CSS用于做什么熟悉CSS的基本格式，为后期网页开发奠定基础1.3.1 初识CSS使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为我们所有的样式都是写在标签中，这样既不利于代码阅读，将来维护代码也非常困难。如果希望页面美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不适用标签属性设
24、置显示样式，所有的样式交由CSS来设置。CSS的作用是什么？1.3.1 初识CSSCSS 是 Cascading Style Sheet的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS定义的规则具体如下：选择器属性1:属性值1; 属性2:属性值2; 属性3:属性值3;在上述的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值
25、以键值对“属性:属性值”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。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中，通常使
26、用像素单位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
27、.2 CSS样式的引用方式先定一个小目标！ 先定一个小目标！熟悉CSS样式4种的引用方式，分别为行内式、内嵌式、链入式和导入式1.3.2 CSS样式的引用方式行内式也被称为内联式，是通过标签的style属性设置标签的样式。行内式基本语法格式如下：内容行内式style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。1.3.2 CSS样式的引用方式行内式是写在根标签中，例如下面的示例代码即为行内式CSS样式的写法：使用CSS行内式修饰一级标题的字体大小和颜色使用标签的style属
28、性设置行内式CSS样式，用来修饰一级标题的字体和颜色。1.3.2 CSS样式的引用方式行内式效果展示需要注意的是：行内式是通过标签的属性来控制样式的，这样并没有做到结构域样式分离，所以不推荐使用。1.3.2 CSS样式的引用方式内嵌式是将CSS代码集中写在HTML文档的头部标签中，并用标签定义，其基本语法格式如下： 选择器 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 内嵌式标签一般位于标签中的标签之后，因为浏览器是从上到下解析代码的，把CSS代码放在头部便于提前被加载和解析，以避免网页内容加载后没有样式修饰带来的问题。在标签中，只有设置type的属性值为“text/css”，这
29、样浏览器才知道标签包含的是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 超链接标签
30、STEP 02运行程序，使用浏览器打开cssDemo01.html文件注意：内嵌式引入CSS只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。1.3.2 CSS样式的引用方式外链式也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML文件中。外链式引用CSS的基本语法格式如下： 外链式href：定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。type：定义所链接文档的类型，这里需要指定为“text/cs
31、s”，表示链接的外部文件为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.cs
32、s的文件。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页面
33、也可以通过多个标签链接多个CSS样式表，大大提高了网页开发的工作效率。1.3.2 CSS样式的引用方式导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用标签，并在标签内的开头处使用import语句，即可导入外部样式表文件。导入式引用CSS的基本语法格式如下：import url (CSS文件路径);或import CSS文件路径;/*在此还可以存放其他CSS样式*/导入式 标签内还可以存放其他的内嵌样式，import 语句需要位于其他内嵌样式的上面。1.3.2 CSS样式的引用方式对文件1-12应用导入式CSS样式，只需把HTML文档中的语句替换成以下代码即可:import
34、style.css;注意：虽然导入式和链入式功能基本相同，但是大多数网站都是采用链入式引入外部样式表的，主要原因是两者的加载时间和顺序不同。当一个页面被加载时，标签引用的CSS样式表将同时被加载，而import引用的CSS样式表会等到页面全部下载完后才被加载。因此，当用户的网速比较慢时，会先显示没有CSS修饰的网页，这样会造成不好的用户体验，所以大多数网站采用链入式。或import url (style.css);1.3.3 CSS选择器和常用属性先定一个小目标！ 先定一个小目标！熟悉CSS选择器和常用属性1.3.3 CSS选择器和常用属性标签选择器是指用HTML标签名称作为选择器，按标签名称
35、分类，为页面中某一类标签指定统一的样式。标签选择器的基本语法格式如下：标签名属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 标签选择器所有的HTML标签都可以作为标签选择器的标签名，例如标签、标签、标签等。用标签选择器定义的样式对页面中该类型的所有标签都有效，这是它的优点，但同时这也是其缺点，因为这样不能设计差异化样式。1.3.3 CSS选择器和常用属性类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：.类名属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 类选择器类名即为HTML页面中元素的class属性值，大多数HTML元素都可以定义class
36、属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。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; 通配符选择
37、器在实际网页开发中，不建议使用通配符选择器，因为它设置的样式对所有的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=font
38、24，设置字号为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像素，
39、这是由于他们引用了相同的id选择器，虽然浏览器并没有报错，但是这种做法是不被允许的，因为在JavaScript等脚本语言中id值是唯一的。显示任何CSS样式，这意味着同一个标签对象不能同时引用多个id选择器，1.3.3 CSS选择器和常用属性CSS常用属性属性名称功能描述margin用于指定对象的外边距，也就是对象与对象之间的距离。该属性可指定14个属性值，各属性值以空格分隔padding用于指定对象的内边距，也就是对象的内容与对象边框之间的距离。该属性可指定14个属性值，各属性值以空格分隔background用于设置背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该
40、属性可指定多个属性值，各属性值以空格分隔，没有先后顺序font-family规定元素的字体系列border用于设置边框的宽度、边框的样式和边框的颜色。该属性可以指定多个属性值，各属性值以空格分隔，没有先后顺序font用于设置字体样式、小型的大写字体、字体粗细、文字的大小、行高和文字的字体height用于指定对象的高度1.3.3 CSS选择器和常用属性CSS常用属性属性名称功能描述line-height用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高color用于指定文本的颜色text-align用于指定文本的对齐方式text-decoration用于指定文本的显示
41、样式，其属性值包括line-through（删除线）、overline（上划线）、underline（下划线）、blink（闪烁效果，Firefox和Opera可以看到效果）和none（无效果）等vertical-align用于设置元素的垂直对齐方式display用于指定对象的显示形式JavaScript基础1.41.4.1 JavaScript概述先定一个小目标！ 先定一个小目标！了解JavaScript的概念，能够知道JavaScript的组成熟悉JavaScript的代码引入方式1.4.1 JavaScript概述JavaScript是Web中一种功能强大的脚本语言，常用来为网页添加各式
42、各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。什么是JavaScript？1.4.1 JavaScript概述是JavaScript的核心。ECMAScript 规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。ECMAScript文档对象模型，是W3C组织推荐的处理可扩展标签语言的标准编程接口，通过DOM提供的接口，可以对页面上的各种元素进行操作（如大小、位置、颜色等）。DOM浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过B
43、OM，可以对浏览器窗口进行操作（如弹出框、控制浏览器导航跳转等）。BOMJavaScript的组成1.4.1 JavaScript概述行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中。行内式在HTML文档中，可以通过标签及其相关属性引入JavaScript代码。当浏览器读取到标签时，就会解释执行其中的脚本。内嵌式外链式是指将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML文件中使用标签进行引入JavaScript文件。外链式适合JavaScript代码量比较多的情况。外链式JavaScript的引入方式1.4.1 JavaS
44、cript概述STEP 01行内式案例演示：在chapter01文件夹中创建一个名称为JavaScriptDemo01的HTML文件。 JavaScript行内式 1.4.1 JavaScript概述STEP 02运行程序，使用浏览器打开文件JavaScriptDemo01。1.4.1 JavaScript概述STEP 03单击上图中“点我”按钮，浏览器效果如下。注意： 1. 单引号和双引号的使用。在HTML中推荐使用双引号，而JavaScript推荐使用单引号。 2. 行内式可读性较差，尤其是在HTML中编写大量JavaScript代码时，不方便阅读。 3. 在遇到多层引号嵌套的情况时，非常
45、容易混淆，导致代码出错。 4. 行内式只有临时测试，或者特殊情况下才使用，一般情况下不推荐使用行内式。 1.4.1 JavaScript概述STEP 01内嵌式案例演示：在chapter01文件夹中创建一个名为JavaScriptDemo02的HTML文件 内嵌式 alert(内嵌式); 1.4.1 JavaScript概述STEP 02运行程序，使用浏览器打开文件JavaScriptDemo02。1.4.1 JavaScript概述STEP 01外链式案例演示：在chapter01文件夹中创建一个名为jsDemo.js的文件alert(外链式);1.4.1 JavaScript概述STEP
46、02在chapter01文件夹中创建一个名为JavaScriptDemo03的HTML文件 外链式 1.4.1 JavaScript概述STEP 03运行程序，使用浏览器打开文件JavaScriptDemo03。注意：在实际开发中，如果页面中需要编写的JavaScript代码很少，可以使用内嵌式，但是如果JavaScript代码很多，通常都会使用外链式，使用外链式可以使HTML代码更加整洁。1.4.1 JavaScript概述JavaScript的数据类型类型含义说明Number数值型数值型数据不区分整型和浮点型，数值型数据不要用引号括起来String字符串类型字符串是用单引号或双引号括起来的
47、一个或多个字符Boolean布尔类型只有true或false两个值Object对象类型一组数据和功能的键值对集合Null空类型没有任何值Undefined未定义类型指变量被创建，但未赋值时所具有的值1.4.1 JavaScript概述JavaScript的变量和关键字在JavaScript中，使用关键字var声明变量，由于JavaScript是一种弱类型语言，所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值确定。声明变量的语法格式如下所示。var number=27;var str=传智播客;注意：变量的命名必须遵循命名规则，变量名可以由字母、下划线（_）、美元符号（$）组成
48、，不能有空格、加号、减号等符号，不能使用JavaScript的关键字。1.4.1 JavaScript概述运算符在JavaScript中，运算符也称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号。JavaScript中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种。1.4.1 JavaScript概述算术运算符算术运算符描述算术运算符+加运算符，实现加法运算+-减运算符，实现减法运算-*乘运算符，实现乘法运算*/除运算符，实现除法运算/+自增运算符，该运算符有i+(在使用i之后，使i的值加1)和+i（在使用i之前，先使i的值加1）两种使用方式+-自减运
49、算符，该运算符有i-(在使用i之后，使i的值减1)和-i（在使用i之前，先使i的值减1）两种使用方式-1.4.1 JavaScript概述比较运算符比较运算符描述示例结果5false 大于55false=5true=大于等于5=5true= =等于。只根据表面值进行判断，不涉及数据类型。5=4false!=不等于。只根据表面值进行判断，不涉及数据类型。5!=4true1.4.1 JavaScript概述逻辑运算符逻辑运算符描述&逻辑与，只有当两个操作数a、b的值都为true时，a&b的值才为true；否则为false|逻辑或，只有当两个操作数a、b的值都为false时，a|b的值才为false
50、；否则为true!逻辑非，!true的值为false，而!false的值为true1.4.1 JavaScript概述赋值运算符赋值运算符描述=实现赋值运算，例如，username=”name”+ =实现加等于运算，例如，a+=b，相当于a=a+b- =实现减等于运算，例如，a-=b，相当于a=a-b*=实现乘等于运行，例如，a*=b，相当于a=a*b/ =实现除等于运算，例如，a/=b，相当于a=a/b% =实现模等于运算，例如，a%=b，相当于a=a%b1.4.1 JavaScript概述三元运算符三元运算符又叫三目运算符。三元运算符语法格式如下。条件表达式？表达式1：表达式2如果条件表达