Web系统与技术.docVIP

1.1.2企业应用开发架构多层设计在构建企业级应用的时候，通常需要大量的代码，而且这些代码一般分布在不同的计算机上，根据代码运行在不同计算机上的进行划分的理论就是多层设计企业级应用系统两层三层N层两层架构传统的两层应用包括用户接口和后台程序，后台程序通常是一个数据库，用户接口直接同数据库进行对话实现上，通常使用ASP、ASP.NET、JSP或者VB等技术编写这类软件三层架构在两层应用中，应用程序直接同数据库进行对话。三层结构在用户接口代码和数据库中间加入了一个附加的逻辑层，通常这个层叫做“业务逻辑层”在“业务逻辑层”，如果第一层和第二层在不同的计算机上，通常该层利用的技术是EJB技术、CORBA技术和DCOM技术在Java企业应用领域中，表示逻辑层通常可以是HTML、Applet、JSP，业务逻辑层一般利用EJB来实现通过加入业务逻辑层，可是把常用的一些操作进行封装，这样有利于重用，也有利于系统维护N层架构如果某个应用超过三个独立的代码层，那么这个应用叫做N应用，就不再叫四层或者五层等名称，而是统称为N层开发架构比较两层架构优点：开发过程比较简单，利用服务器端的程序直接访问数据库，部署起来比较方便缺点：程序代码维护起来比较困难，程序执行的效率比较低，用户容量比较少三层架构基本解决了两层架构的缺点，将显示部分和逻辑流程控制分开，利用服务器应用程序实现显示部分，利用业务逻辑层实现程序的流程控制优点：分层使维护变的方便一些，而且执行效率也会有所提高缺点：相对而言，部署起来就比较困难一些多层架构根据实际的需要，会进一步细化每一层，或者添加一些层，就形成了N层架构，和三层架构一样，组件化的设计使维护相对容易，但是部署相对困难任何事物都是两面的。三层架构是目前用的最多的一种我们刚开始的先开发两层架构，但是会告诉大家如何划分多层架构，之后就会基于三层架构来设计根据实际的需要，会进一步细化每一层，或者添加一些层，就形成了N层架构，和三层架构一样，组件化的设计使维护相对容易，但是部署相对困难。1.2主流web技术介绍CGI（Common Gateway Interface）程序PHPASPASP.NETJSPLinux +PHP+ MySql 三架马车1.2.1 ASP网页编程技术ASP（Active Server Pages）Microsoft推出的一种低端B-S结构软件系统解决方案存在会话状态、应用程序状态、浏览器状态跟踪技术能够产生动态HTML页面能够操作数据库、实现数据的动态存取ASP是一种基于脚本的解释性程序Java Script和VBScriptASP是一种脚本和HTML混杂编排生成动态网页的技术ASP脚本程序负责应用逻辑HTML程序负责样式显示会话 session 聊天室应用程序 application 计数器浏览器状态跟踪技术：cookieASP技术特征ASP作为解释性程序针对每个页面的每次请求，都需要服务器对代码重新解释，重新运行网站执行效率差ASP是一种半过程，半对象化的语言环境，不支持面向对象的多数概念和观点和主流的面向对象语言与开发方法不兼容ASP技术简单易学结构化的编程语言比较流行1.2.2 ASP.NET网页编程技术一种全新的开发平台和技术,支持完全的面向对象开发技术ASP.NET 4.0 支持多种面向对象的开发语言VB.net, c#支持完全的面向对象设计技术强大的工具支持Visual S简单性和易学性强大的工具支持：ASP.net使运行一些很平常的任务如表单的提交客户端的身份验证、分布系统和网站配置变得非常简单。例如ASP.net页面构架允许你建立你自己的用户分界面，使其不同于常见的VB-Like界面。1.2.3 Java Web编程技术Java Web开发技术是基于特定标准的JSP标准和Servlet标准具有平台和服务器独立性，能够在所有兼容这些标准的服务器中运行Tomcat,Weblogic,WebsphereJava Web技术是构建在开放过程和源码基础上的开发效率和方法方面，Java既提倡基于记事本的纯手工式开发，也支持象JBuilder、Eclipse等大型软件开发环境前者十分适合Java Web技术学习者大型软件开发工具的开发方法适合于软件公司的高效率开发学校的教务系统，工商银行的网上银行都是基于JSP的相关技术来构建的。 开发工具方面，由于主要是为了演示功能，因此，我们主要是使用记事本来演示相应的功能。下一步会使用eclipse等这些集成开发环境1.3 Java web技术介绍1.JSP技术2.Servlet技术3.JavaBean4.Java Filter5.XML6.HTML和JavaScriptXML是一种有着广泛意义的技术，和Java特别是Java Web技术有着完美的结合 HTML和JavaScript是针对浏览器进行程序设计的技术1.JSP技术语法构成HTML标记JavaScript脚本Java构成的服务器端脚本JSP内置标记简单易学编译性程序首次执行慢，以后的执行速度比较快2.Servlet技术Servlet是一种服务器端的Java应用程序，具有独立于平台和协议的特性,可以生成动态的Web页面。 它担当客户请求（Web浏览器或其他HTTP客户程序）与服务器响应（HTTP服务器上的数据库或应用程序）的中间层。 Servlet是位于Web 服务器内部的服务器端的Java应用程序，与传统的从命令行启动的Java应用程序不同，Servlet由Web服务器进行加载，该Web服务器必须包含支持Servlet的Java虚拟机JSP本身就是就是一种Servlet程序是一个普通的Java类3.JavaBean技术Java中的组件对象模型满足JavaBean规范的一个普通Java类可以有UI界面，也可以没有UI界面用于封装固有的算法，例如数据库操作算法、数据类型转换算法4.Java Filter技术是Java技术对切面编程技术的支持Java Filter组件通过对流经数据进行处理而允许用户对系统整体行为进行操作用途非业务性功能、系统性功能安全验证、系统日志、请求逻辑进行编码5.XML技术XML:(eXtensive Markup Language,可扩展标记语言）应用十分广泛的技术在Java Web中的应用数据展现配置文件保存数据存储和传输6.HTML和JavaScript技术针对浏览器进行程序设计的技术是Java Web开发的基础1.4 Java Web程序环境配置Java Web运行环境对应一个支持Java Web标准的服务器Tomcat、WebLogic、WebSphere等Tomcat6.0编译部署，需要用到JDK Tomcat安装和配置首先安装Java SE6，安装完后配置相应JAVA_HOME，CLASSPATH，PATH我的电脑-右键属性-高级-环境变量JAVA_HOME C:Program FilesJavajdk1.6.0_21采用下面语法配置CLASSPATH语法.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar主要将当前路径、dt.jar和tools.jar的路径添加到CLASSPATH中即可另外需要将JDK的bin路径加载到PATH环境变量中启动Tomcat6.0安装程序Tomcat6.0的管理界面1.4.2 Java应用程序开发环境配置在本课程的整个程序演示中需要使用如下类包javaee.jar，用于提供对JSP和Servlet的编译支持Activation、mail两个类包，用于提供对邮件收发的支持commons-io-1.3.1.jar、commons-fileupload-1.2.jar用于提供对文件上载的功能支持请保证上面的类包被设置到了计算机的CLASSPATH环境变量中1.4.3 Java应用程序体验Tomcat6.0应用程序配置方法1.直接在webapp目录下建立文件夹即可（推荐使用这种方式）2.修改conf/server.xml文件在节点中增加 需要重新启动tomcat服务器演示程序内容新建一个JSP文件分别使用html、javascript、jsp服务器端脚本输出一段文字内容提要1.1软件编程体系及应用开发架构1.1.1软件编程体系架构1.1.2企业应用开发架构1.2主流web技术介绍1.2.1 ASP网页编程技术1.2.2 ASP.NET网页编程技术1.2.3 Java Web编程技术1.3 Java web技术介绍1.4 Java Web应用程序环境配置1.4.1 Tomcat安装和配置1.4.2 Java应用程序开发环境配置1.4.3 Java应用程序体验目录结构和教材上的不完全一致作业1.熟练掌握Java Web运行环境的配置方法2.参考教材1.3.3节的内容，练习Web应用程序的创建方法。目标：掌握Tomcat上Web应用程序的创建方法3.自学HTML规范第2章HTML编程技术本章主要对HTML应用程序开发方法进行讨论内容提要2.1 HTML文件执行过程2.2 HTML文件结构2.3 HTML常用标记2.4 HTML中的表格2.5 HTML表单2.6 HTML窗口切分2.1 HTML文件执行过程-概述HTML（HyperText Markup Language,超文本置标语言）是SGML（Standard Generalized Markup Language）语言的一个应用，是WWW“世界”的通用“语言”。WWW“世界”诸服务器与浏览器之间通过它互相沟通。WWW“世界”中的信息可以通过它来“表现”。没有HTML就没有WWW“世界” 。目前的版本是HTML4.0，下一个版本是HTML5.0HTML 不是程序设计语言，而是一种结构语言。HTML 与平台无关，只要是相同的浏览器。HTML有许多元素，文档通过元素置标就形成了所谓的HTML文档。HTML 也是文本文件，所以可以用纯文本编辑器来编辑（如Windows 的记事本、写字板)其后缀名必须是 .html 或 .htm 只有通过浏览器才可以对HTML文档进行相应的解释。Word文件只能有office来打开是一样的。如果用其它软件来打开，可能就是乱码HTML文件执行过程HTML程序需要在浏览器上执行HTML文件的存放地址Web服务器上首先将HTML文件从服务器下载到本地缓冲区，然后再通过浏览器来显示本地系统中直接使用浏览器读取本地的HTML文件HTML是一种通过标记定义浏览器显示格式的数据。HTML标记控制了文本在浏览器上的显示效果和位置HTML标记个数有限(100个左右)浏览器访问远程HTML文件HTML文件被提取到客户浏览器上后才会进行第5步所刻画的处理过程，该过程中浏览器解释HTML文件中的程序语句，并将解释结果显示在浏览器界面上，就是浏览器上网页的显示效果。服务器在HTML网页显示的过程中没有任何特殊作用具体客户浏览器服务器浏览器访问本地HTML文件HTML文件被保存在本地磁盘上，浏览器直接从本地磁盘读取HTML文件，并将文件内容解析成为浏览器的显示效果。2.2 HTML文件结构HTML中的标记被分程了头标记和体标记头标记只能出现在HTML文件头部，体标记则出现在HTML文件体部HTML头部HTML体部HTML的基本语法HTML 的主要语法是标记、标记属性和内容注释。标记 用于描述功能的符号。如： 一个HTML实例 标记属性 HTML语言的的标记具有一定的属性，如： 内容注释 基本格式： 网页的标题 网页的内容，很多标记都作用于此。 HTML文档的基本架构整份文件处于标记与之间用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。文件分两部分由至称为开头，至称本文。基本上两者各有适用的标记，如只可出现于开头部分。 开头部分用以存载重要信息，而只有本文部分会被显示。所以大部分标记会运用于本文部分。所标示的是文件的标题，会出现于浏览器顶部，所以每页有不同而明确的标题是需要的。 特点2-1文本体中可以规定整个文档的一些属性：Bgcolor - 背景色Background - 背景文件Bgproperties -背景图片是否跟着卷动text - 文本色Link - 超级链接对象的颜色Alink - 连接中对象的颜色Vlink - 连接后对象的颜色标记 - 2-2.htmHTML标记的执行过程HTML文件中，头部分标记首先被加载执行，然后体中的内容才能被加载执行。HTML体中的标记，按照标记出现的先后次序被加载和执行。HTML头部标记标记用于对整个HTML文档进行说明属性名称种类描述Generator 描述性（name）描述产生网页的工具，例如“Microsoft FrontPage”keywords 描述性（name） 网页内容关键字，通常会被网页搜索引擎获取Description 描述性（name） 对网页主要内容进行简单刻画Author描述性（name） 网页作者，例如是“比特塞威斯”Robots描述性（name）对搜索引擎的配置信息，其值可以是如下几种：1）all，文件内容被检索，文件上的超链接被查询；2）none，文件内容不被检索，文件上的超链接不被查询；3）index，文件将被检索；4）follow，页面上的超链接可以被查询；5）noindex，文件不被检索，但上面的超链接被索引；Content-Type /Content-Languagehttp-equiv 网页内容所使用的文字和语言Refreshhttp-equiv指定网页在指定时间内跳转到特定网页Expireshttp-equiv指定网页过期时间，一旦网页过期就必须到服务器上重新提取，设定时间的格式为“Mon,12 May 2007 00:20:00 GMT”Pragmahttp-equiv通常是“no-cache”，用于禁止浏览器从本地缓存中加载网页，该网页没有办法离线访问。网页的自动跳转功能-2-3.htmlMeta标记的refresh属性能够定义页面的自动跳转标记只有开始标记没有结束标记，这种标记称为孤标记。孤标记建议写法提问：如果body元素不全会怎么样？2.3 HTML常用标记2.3.1 HTML图形标记2.3.2 HTML超链接2.3.3 HTML换行、分段与字体标记2.3.4 HTML列表标记2.3.5 span、div和pre标记20/80法则(20/80 rule) 又名帕累托法则、二八定律、帕累托定律、最省力法则、不平衡原则。此法则是由意大利经济学家帕累托提出的。80/20的法则认为：原因和结果、投入和产出、努力和报酬之间本来存在着无法解释的不平衡。一般来说，投入和努力可以分为两种不同的类型：多数，它们只能造成少许的影响； 少数，它们造成主要的、重大的影响。 2.3.1 HTML图形标记HTML语言通过标记在网页上显示图片是image的缩写具有如下4个常用属性：1）src，该属性用于指定图片路径（相对路径和绝对路径）；2）height和width，分别用于指定图片的长和宽；3）border用于指定图片边宽 例子2-4建议使用相对路径2.3.2 HTML超链接提供了在不同网页之间进行跳转的功能基本上链接分成外部链接 链接至网络的某个URL网址或文件内部链接 链接本HTML文件的某个区段格式显示文本. 链接指令， 相关属性：HREF 链接的URL位址或文件TARGET 指定链接到的URL位址或文件显示于那一个窗口 _blank 在新窗口显示链接目标网页_self 在当前窗口显示链接目标网页_parent 在父窗口显示链接目标网页_top 在浏览器窗口显示链接目标网页_search在搜索窗口显示链接目标网页例子：自身窗口北建工 新窗口北建工 2.3.3 HTML换行、分段与字体标记标记单独出现，用于使网页文本另起一行标记实现文字分段。用于在网页内插入新的段落，可以成对也可以不成对标记用于指定文字所使用的字体特征，Color:设置字体的颜色Size:设置字体的大小Face：设置字体风格（字体的风格通常形式有：宋体、隶书等）例子2-6.html 北建工 高兴 今个高兴 今个真高兴 2.3.4 HTML列表标记实现有序列表,条列前面是数字，类似：苹果香蕉桃子实现无序列表,条列前面是符号，类似：苹果香蕉桃子列表中的列表项通过实现2-7.html标题标记 (i=1,2,3,4,5,6)标题按照级别被分成了6级：、6个标记成对出现，用于设置标题，隐含换行的作用，H1 最大，H6最小。2.3.5 span、div和pre标记span和div都没有特定样式特点span是行元素，用于实现行数据的选定div是块元素（非常重要的一个元素）div对应了通常所说“层”的概念例如：任何一段话仅在html中使用，是没有任何意义的。标记，用于将源代码中的排版格式保留输出到浏览器由于在第三章和第四章都会再用到div，所以这里就不再举例子。功能创建一个滚动的文本字幕，使文字或图片产生移动效果。格式 显示的数据例子：2-9.htm “跑马灯”标记marquee参数direction 表示滚动的方向，值可以是left，right，up，down，默认为left behavior 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动） loop 表示循环的次数，值是正整数，默认为无限循环 scrollamount 表示运动速度，值是正整数，默认为6 scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒 valign 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle align 表示元素的水平对齐方式，值可以是left，center，right，默认为left bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色 height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度 hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。 2.4 HTML中的表格2.4.1表格基本结构2.4.2表格常用属性2.4.3特殊表格的构造2.4.1表格基本结构表格由、构成表示一个表格；对应表格中的一行，是的子标记代表表格中的一个单元格，是的子标记2.4.2表格常用属性Background属性用于设置表格或行的背景图片；Bgcolor属性用于设置表格或行的背景色；valign属性用于设置行或单元格的垂直对齐方式该属性有三种取值：top、middle、bottom，分别对应上对齐、居中对齐、居下对齐；align属性用于设置行或单元格的水平对起属性该属性有三种取值：left、center、right，分别对应左对齐、中对齐、右对齐。例子：2-10.htm2.4.3特殊表格的构造通过的colspan和rowspan属性可以构造不规则表格clospan属性用于指定当前单元格横跨的单元格个数，rowspan用于刻画单元格所跨越的行数例子：2-11.htm2.5 HTML表单(form)表单是客户浏览器向服务器程序提交数据的一种途径是一种数据标记，该标记没有格式通过控件实现用户数据的接收。中可以包含、等标记。Action属性设定数据提交的方法Post方式，post一次提交的数据量可以很大Get方式，以url编码方式传递，数据和url之间通过？符号间隔开不同的变量通过&符号分割开；同一个变量的变量名和变量值通过=符号分割开 2-3.html?name=aa&pwd=123&sex=male如果没有指定action属性，将把数据提交给本程序1）两个本地HTML文件之间能够通过表单提交数据吗？例子2-12.htmHtml中空格用 来表示2.6 HTML窗口切分前面我们学习的HTML文件，当用户用浏览器阅读时，都是在单一窗口中显示。即如果用户正在阅读某个网页，再调用另一个网页时，则前一个网页自动关闭。这里介绍几个新的标记，用它们书写的HTML文件，可以对屏幕进行横向或纵向的分割，在同一屏幕上出现多个窗口，每个窗口上显示不同的网页内容，并且可以独立变化。使用多窗口技术，可以使屏幕的信息量增大，使Web网页更加吸引读者。多窗口（FRAMESET）HTML书写并不复杂，只是多了几个标记。窗口切分的例子:2-13.html HTML窗口切分标记HTML标记语言为浏览器窗口切分提供了、标记、要配对使用，前者是父标记，后者是子标记，对应具体的浏览器子窗口有两个属性ColsrowsCols和rows属性通过cols属性进行左右划分；例如通过cols=”20,30%,*”可以实现将窗口分成左、中、右三个窗口，其中左边窗口为20个象素宽；中中间窗口的宽度是被分割窗口宽度的30%；而右边窗口的宽度则是浏览器中剩余的空间。通过rows属性实现浏览器窗口的上下划分；例如通过rows=”50,30%,*” 可以将窗口划分成上、中、下三个子窗口，其中上面窗口的高度是50个象素；中间窗口高度是被切分窗口高度的30%，下面窗口高度为被切分窗口的剩余部分窗口的修饰用分割窗口后，需要在窗口中加入内容以及对窗口加以修饰，这里采用可以完成这两个功能。是一个单向标记，它有六个属性：SRC 用于连接一个HTML文件NAME 为窗口取名字SCROLLING 是否有滚动条NOSIZE 窗口是否可以调整大小MARGINWIDTH 窗口内容与左右边界的距离MARGINHEIGHT 窗口内容与上下边界的距离窗口划分案例演示2-13.htm内容提要2.1 HTML文件执行过程2.2 HTML文件结构2.3 HTML常用标记2.4 HTML中的表格2.5 HTML表单2.6 HTML窗口切分作业题目：设计自己的个人主页基本要求：至少包含如下元素标题图片超链接表格滚动字幕内容要求：美观大方，内容丰富，积极向上文件命名规则：以自己的名字的中文拼音命名，比如张三，那么文件就命名为zhangsan.html关于作业要求1.使用相对路径，尽量不要使用绝对路径，除非是网络地址。 如果是网络地址要写全称：2.文件名称不要使用中文3.网页的第一个页面使用名字：index.html4.文件命名规则计082-12-张三第3章 CSS编程技术本章重点讨论使用CSS格式化HTML标记的方法内容提要3.1 CSS技术简介3.2 CSS样式选择符3.3 CSS和HTML的结合方法3.4常用的CSS属性3.5定位相关属性3.6 CSS继承特性3.7使用import合并样式文件什么是css为什么要使用css如何定义和调用cssCss有哪些具体的属性3.1 CSS技术简介例子:无CSS 3-1.htm应该先举一个例子，然后再介绍其它的知识style中的是为了避免某些浏览器不支持一些CSS而准备的，加上这个以后，就算不支持也不会被显示出来，被视为注释了，如果支持的话，那么就实现了CSS效果 什么是CSSCSS(Cascading Style Sheet,层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式用来为HTML 中的标记定义在浏览器中的显示样式,包括颜色、字体、大小和位置。优点：在于把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。应该先举一个例子，然后再介绍其它的知识style中的是为了避免某些浏览器不支持一些CSS而准备的，加上这个以后，就算不支持也不会被显示出来，被视为注释了，如果支持的话，那么就实现了CSS效果 层叠的含义“层叠”的含义是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级，优先级越高，在显示时就被越后采用。允许样式层叠定义允许相同标记样式的重复定义重复定义的标记样式中，距离标记近的样式起作用。下面的样式优先级依次降低。 标记Style属性的优先级 标记中定义的样式外部样式文件定义的样式CSS标记格式化原理类比过程课堂思考题： 1）将标记的样式独立定义成文件，对HTML程序设计有什么意义？ 2）能够多个标记共用同一个样式吗？定义样式的方式为：selectorproperty1:vaIue1;property2:value2;其中，selector表示样式作用的对象（选择器）property和value则表示相应CSS属性和值。每一对属性和值用“分号”隔开。如：h1font-size:12;text-align:center其中h1是选择符font- size:12;text-align:center”是声明。在声明中，font-size和text-align是属性，12和center是相应的属性值。3.2 CSS样式选择符CSS样式选择符3.2.1组选择符3.2.2 CLASS选择符3.2.3 ID选择符3.2.1组选择符把一组属性同时应用于多个元素，可以用”,”将选择符中的所有元素分开，然后再定义属性具体值span, p, h1 color:red; Font-size:17pt上面的样式能够适用于HTML文件中的,和标记例子3-3.htm这种样式定义的方法可以对整个文档中的同名标记指定特定的样式。如果同一个标记在文档中不同地方使用不同的样式，就要使用class/ID选择符3.2.2 CLASS选择符用于定义命名样式,该种样式可以被所有的标记通过属性class引用.listclass color: red; font-size:26pt.listsmall color:blue; font-size:15pt欢迎学习Java Web2007-03-03此刻打盹，你将做梦；而此刻学习，你将圆梦对命名样式的调用所有调用了命名样式的标记,都将具备其样式例子3-7.htm3.2.3 ID选择符ID样式也是一种命名样式，用于定义命名样式,该种样式可以被标记通过属性id引用.#list font-size:28pt; color:red; display: block#list1 font-size:14pt; color:blue display: block 欢迎学习Java Web 2007-03-03此刻打盹，你将做梦；而此刻学习，你将圆梦ID样式的调用例子3-9.htm前面讨论了几种样式定义方法，在程序设计时该如何在这几种方法中做出选择。ID和Class样式的区别ID和class样式的区别ID定义时要用“#”，但在CLASS的定义中则需要用“.”提示：使用class和使用ID这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。推荐使用class样式，因为有些标记，比如input是有id属性的，通常此时的id属性是作为该标记的唯一标识符来使用的。3.3 CSS和HTML的结合方法(CSS分类)CSS和HTML是两种不同程序语言，前者用于定义网页样式；后者用于定义网页内容HTML文件可以通过多种方式调用CSS样式定义语句（CSS分类）3.3.1 STYLE属性使用（内联式样式表）3.3.2独立样式文件（外部样式表）3.3.3 Style样式块定义样式（ 嵌入样式表）3.3.1 STYLE属性使用（内联式样式表）是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中 欢迎光临这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。特点样式无法重用样式定义方式灵活例子3-10.htm3.3.2独立样式文件（外部样式表）将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。HTML文件通过语句调用独立CSS样式文件能够在不同HTML文件间共享样式，适合于对整个网站风格进行样式刻画可以同时加载多个CSS文件，后加载的样式的优先级高例子3-13.htm3.3.3 Style样式块定义样式（嵌入样式表）语句块通常位于标记中，在网页显示时先于所有的内容加载语句块定义的样式没有办法在不同HTML文件间进行共享课堂讨论：前面讨论了几种样式定义方法，在程序设计时该如何在这几种方法中做出选择。就近原则与!important就近原则同样的一个标记可以被多个样式定义近处的样式优先级高于远处的样式优先级!important关键字可以改变默认的优先级如果标记使用!important，样式将不被覆盖3.4常用的CSS属性3.4.1文字相关属性3.4.2 display属性3.4.3背景属性设置3.4.1与文字相关的属性color属性author color:redauthor color:#ff0000表示字型的属性font-family决定字体大小的属性font-sizeauthor font-family:arialauthor font-size:17pt决定字体粗细的属性font-weightauthor font-weight:bold字体对齐方式的属性text-align字体大小写转换的属性text-transformAuthor text-decoration: overlineAuthor text-transform:capitalize决定字型风格的属性font-styleauthor font-style:italicAuthor text-align: center字体装饰特色的属性text-decorationCss所设置的字体属性列表类型CSS属性值字体属性 font-familyArial，serif，宋体font-sizeSmall，medium，large或直接指定字体大小font-stylenormal, italicfont-weightnormal, bold, lighter, 100, 200文本属性 text-alignleft, right, center, justify text-indent度量或% text-decorationnone,blink,underline,overline,line-through text-transform none,capitalize,uppercase,lowercase vertical-alignBaseline,super,sub,top,text-top, middle-bottom, text-bottomword-spacing度量 letter-spacing度量 例子3-15.htm3.4.2 display属性1display属性None表示隐藏不显示任何信息。Inline表示所要显示的信息，在一行内依次排列，不会独占一行。Block 表示所要显示的信息要独占一行（即成为一个段落）2. display:none和visibility：hidden 的差异visibility：hidden：内容虽然不可见，但是所占用的网页空间仍然保存例子3-18.htm3.4.3背景属性设置CSS可以设定任一个HTML标记的背景色或背景图片.paragraph background-image: url(suzh1.jpg); background-repeat: no-repeat; background-position: center例子3-20.htm展示一下背景重复的情况。修改： background-repeat: no-repeat;为 background-repeat: repeat;3.5定位相关属性Position属性:absolute,relativeCSS定位的坐标架absolute坐标原点：父标记左上角relative坐标原点：标记的默认位置，具体位置不重要。元素的默认位置指不使用任何定位法时元素出现在屏幕上的位置定位位置和大小属性1Height,weight属性表示标记的高和宽，对应标记大小。2、Left和top对应标记左上角的位置，对应了标记的位置。3.6 CSS继承特性如果没有指定元素的具体样式规则，该元素就会继承其父元素对应样式属性。例外不被继承的属性就是背景和边框属性3.2.7 使用import结合样式表单提供了一种将多个CSS文件集成一个CSS文件的途径import url(“3-13.css”);规则import指令必须出现在样式单的开头，并出现在任何规则之前导入样式单中的规则总要覆盖被导入样式单中的规则禁止循环导入例子3-30.htm第四章 JavaScript编程技术我们都在网上某个论坛或者购物网站注册过用户，在点击提交的时候，都会进行输入的有效性检查，比如检查我们的用户名称是否为空。这种检查也是客户端的检查，那么这个时候如果只使用我们前面所学习的html，css就不够了，它们不能够使网页的内容动态变化，这个时候就该使用java脚本语言这种工具了。因此，我们这一章重点讨论在HTML网页中使用JavaScript的方法内容提要4.1 JavaScript基本语法4.2网页事件处理4.3网页DOM模型4.4浏览器对象模型4.1 JavaScript基本语法JavaScript是由Netscape公司开发了的一种可以嵌入在Web主页中的编程语言。在早期这种语言叫做LiveScript，后来为了利用Sun公司开发的Java语言的功能并借用它的流行性，把它改名为JavaScript。是在浏览器中执行的脚本语言嵌套在HTML程序中通过控制网页中各种标记的样式变化增加网页动态效果；或对页面数据进行合法性验证本节的主要内容4.1.1 JavaScript程序结构4.1.2 JavaScript中变量4.1.3 JavaScript流程控制4.1.4 JavaScript函数4.1.5 JavaScript中常用对象Netscape公司为了进一步扩充它的浏览器的功能，开发了一种可以嵌入在Web主页中的编程语言。在早期这种语言叫做LiveScript，后来为了利用Sun公司开发的Java语言的功能并借用它的流行性，把它改名为JavaScript。4.1.1 JavaScript程序结构JavaScript是脚本语言，单条JavaScript语句就能构成一个完整程序，程序结构十分简单JavaScript程序需要结合到具体HTML文件才能正确执行独立js脚本文件形式标记块形式具体的事件属性方式独立js脚本文件形式（例子4-1.js 4-1.htm）通过标记将Java Script文件引入HTML文件中标记有两个重要属性：language和src，language表示脚本程序使用的语言，这里是javascript语言；src表示javascript脚本文件路径通过独立的文件定义Java Script程序，适合于创建在网站中重用的脚本功能。通过标记和HTML结合（例子4-2）通过语句块将其直接嵌入HTML文件语句块中的JavaScript程序在整个页面中可以被重用。 重用度没有独立的JavaScript文件