Web网站设计与开发教程（HTML5、JSP版）（第二版)配套教材课件完整版电子教案.pptx

1、Web网站设计与开发教程（HTML5、JSP版）（第二版)347页完整版课件正版可修改PPT商务网站设计与开发第1章 Web技术概述内容Web系统简介1.1B/S结构和Web应用程序1.2HTML简介1.3HTML文档结构1.4思考题1.51.1 Web系统简介HTML的产生瑞士日内瓦的欧洲核子研究中心的软件工程师Tim Berners-Lee编写一个软件程序，利用一系列标签描述出信息的内容和表现形式，再通过链接把这些文件串起来，让世界各地的人能够轻松共享信息。Tim Berners-Lee给这种系统命名为“World Wide Web”，1990年11月，第一个Web服务器nxoc01.ce

2、rn.ch开始运行。浏览器的产生1993年美国伊利诺州的伊利诺大学的Marc Andreessen及其同事开发出了第一个支持图文并茂展示网页的Web浏览器Mosaic浏览器，并成立了网景公司（Netscape Communication Corp.）。W3C组织1994年10月Tim Berners-Lee联合CERN、DARPA和欧盟成立了Web的核心技术机构W3C（World Wide Web Consortium，万维网联盟）。1.1 Web系统简介HTMLWeb通过超文本标记语言（Hyper Text Markup Language，简称HTML）实现信息与信息的连接；URI通过统一资

3、源标识符（Uniform Resource Identifier,简称URI）实现全球信息的精确定位；HTTP通过超文本传输协议（HyperText Transfer Protocol，简称HTTP）实现信息在互联网中的传输。1.2 B/S结构和Web应用程序1.2 B/S结构和Web应用程序B/S的系统结构图1.2 B/S结构和Web应用程序传统的C/S 建立在小范围里的网络环境；B/S 适合建立在广域网之上的。（1）硬件环境不同传统的C/S 一般面向相对固定的用户群，对信息安全的控制能力很强；B/S 通常建立在广域网之上，对安全的控制能力相对弱。（2）对安全要求不同传统的C/S 结构可以更

4、加注重流程，可以对权限多层次校验；B/S系统所依托的HTTP协议缺少对流程、状态等方面的管理。（3）系统架构不同传统的C/S 结构意味着在用户的计算机中必须安装特定的客户端软件；B/S 结构的维护和升级都发生在服务器端。（4）系统维护不同传统的C/S结构适合对大量数据进行批量的增、删、改操作；B/S 结构适合面向不同的用户群。（5）处理问题不同传统的C/S结构客户端软件对操作系统有特定的要求，跨平台性较差；B/S 的前台建立在浏览器上。（6）用户接口不同传统的C/S结构的软件随着应用范围的扩大，投资会连绵不绝；B/S结构软件一般只有初期一次性投入成本，系统总拥有成本（TCO）较低。（7）投入成

5、本构成不同传统的C/S结构软件来讲无法适应企业快速扩张的特点；而B/S结构软件通过一次安装，以后只 需设立账号、培训即可。（8）系统规模的扩展性不同1.3 HTML简介HTML是使用SGML定义的一个描述性语言，或可说HTML是SGML的一个应用。与SGML的关系HTML的语法简单 XHTML与DHTML广义的HTML技术HTML的格式和语法非常简单，只是由文字及标签组合而成，任何文字编辑器都可以编辑HTML文件，只要能将文件另存成ASCII纯文字格式即可。在开发技术的选型中，通常会选择传统HTML的扩展技术，包括可扩展超文本标记语言（eXtensible HyperText Markup L

6、anguage，简称为XHTML）和动态 HTML（Dynamic HTML，简称为DHTML）。一是HTML（或XHTML），其中定义了各种页面元素对象；二是CSS，CSS中的属性也可被动态操纵从而获得动态的效果；三是客户端脚本（包括Javascript等），用以编写程序操纵Web页上的HTML对象和CSS。1.4 HTML文档结构网页制作教学Hello World!1.4 HTML文档结构在HTML中任何标签皆由”所围住，如，标签名与小于号之间不能留有空白字符。在起始标签之标签名前加上符号”/”便是其终结标签，如。标签字母大小写皆可。由开始标签和终结标签所构成的对象可以称为HTML元素（或

7、 HTML对象）。元素带有参数，也称为元素的属性。参数只可加于起始标签中。熟悉面向对象程序设计的开发人员更习惯将它们称为“HTML对象和属性”。通常在一个完整的HTML文件中，html元素是HTML文档的根元素，其中包含二个部份：头部元素和体部元素，它们分别被包含在标签和标签中。DEMOHTML Hello1.5 思考题（1）HTML与W3C组织分别是如何产生的？（2）C/S体系结构和B/S体系结构有何不同之处？商务网站设计与开发第2章 HTML元素内容文本元素群组元素超链接元素表格元素内嵌元素结构元素编辑元素表单元素头部元素HTML中的颜色设置绝对路径与相对路径思考题2.12.22.32.4

8、2.52.62.72.82.92.102.112.122.1 文本元素在HTML中，文本元素（Text-level semantics）用来定义网页中文本内容和语义，增加文字的易读性。文本元素主要包括、等。虽然文本的显示样式通常是由CSS来定义，但文本元素的语义也会影响文本的显示风格，比如上标（sup）、下标（sub）等文本。2.1 文本元素em定义强调文本，显示为斜体字strong定义强调文本，显示为粗体small定义小号文本s定义加删除线的文本sub定义下标文本，比如a2 sup定义上标文本，比如a2i定义斜体文本b定义粗体文本u定义下划线文本mark定义有加亮记号的文本2.1 文本元素中

9、 zhong 文 wen DEMO文本元素2.2 群组元素在HTML中，群组元素（Grouping content）用来定义网页中具有关联性的内容和语义。群组元素主要包括、等。与文本元素一样，群组元素的语义也会影响显示风格，比如多个列表项元素在显示时通常会在前面加上数字序号或图形符号。2.2 群组元素这是段落。hr 标签定义水平线：pre 标签很适合显示计算机代码：for i=1 to 10print inext i段落前面有缩进DEMO群组元素12.2 群组元素咖啡咖啡茶牛奶茶红茶牛奶绿茶2.2 群组元素一个定义列表：计算机用来计算的仪器.显示器以视觉方式显示信息的装置.2.2 群组元素di

10、v元素o元素用来将页面内容分割成各个独立的部分。o在每个元素中，不仅可以 包含文本内容，也可以包含图片、表单等其他内容。在默认的情况 下，元素所包含的内容，将在新的一行显示。属性描述dir设置文本显示方向lang设置语言class类属性style设置级联样式title标题属性nowrap取消自动换行id标记属性2.2 群组元素.DEMO群组元素22.3 超链接元素网页之间的链接（Links）能使浏览者从一个页面跳转到另一个页面，实现文档互联、网站互联。超链接就像整个网站的神经细胞，把各种信息有机地结合在一起。在HTML中，超链接可以通过元素和嵌套在元素内部的元素来实现。关于元素将在嵌入式元素中

11、展开描述，本节将主要讨论元素。2.3 超链接元素属性描述href链接的目标 URL。hreflang规定目标 URL 的基准语言。仅在 href 属性存在时使用。media规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。rel规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。target在何处打开目标 URL。仅在 href 属性存在时使用。type规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME=Multipurpose Internet Mail Extensions。2.3 超链接元素文本链接是最常见的

12、一种超链接，它通过网页中的文件和其他文件进行链接，语法如下：链接元素链接元素可以是文字，也可以是图片或其他页面元素。href属性是元素最常用的属性，用来指定链接目标的 URL地址。链接地址可以是绝对地址，也可以是相对地址。例如链接到W3C官方网站，并打开新的浏览器显示该网 站，实现代码如下：W3C2.3 超链接元素target属性的取值及功能说明target值目标窗口的打开方式_parent在上一级窗口打开，常在分帧的框架页面中使用。_blank新建一个窗口打开。_self在同一窗口打开，与默认设置相同。_top在浏览器的整个窗口打开，将会忽略所有的框架结构。2.3 超链接元素书签链接也是常用

13、的一种超链接，用来在创建的网页内容特别多时对内容进行链接。书签可以与所链接文字在同一页面，也可以在不同的页面。建立书签的语法如下：文字在代码的前面增加链接文字和链接地址就能够实现同页面的书签链接。语法如下：链接的文字其中，#代表这是书签的链接地址，书签的名称则是上面定义的书签名。如果想链接到不同的页面需要在链接的地址前增加文件所在的位置。语法如下：链接的文字DEMO超链接元素2.4 表格元素在HTML5中使用、等表格元素构建和展示表格式数据（Tabular data）。元素可以用来定义表格，包括表格的标题、表头及单元格内容等。作为元素的子元素，表格行用定义，表头元素用元素定义（表头通常显示成黑

14、体），单元格内容用元素定义。一个 元素可包含一个或多个元素，一个元素又可以包含一个或多个、元素。2.4 表格元素标签语义table定义表格caption定义表格标题tr定义表格中的行td定义表格中的单元th定义表格中的表头单元格colgroup定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。col为表格中的一个或多个列定义属性值。tbody定义表格主体。thead定义表格的表头。tfoot定义表格的页脚。2.4 表格元素a1b1c1a2b2c22.4 表格元素跨两列的单元格姓名电话张小明13999912345325330425DEMO表格元素2.5 内嵌元素除了文字信息，网页中还可

15、以呈现图形、图像、音频、视频等多媒体信息。为了丰富网页的表现方式，HTML5允许以内嵌元素(Embedded content)的方式在网页中嵌入图形、图像、视频、音频以及其他可操作的对象。相关的元素包括、系列和系列。2.5 内嵌元素元素语义img定义 HTML 页面中的图像。iframe定义包含另一个文档的行内框架。embed定义嵌入的内容，比如插件，元素必须有 src 属性。object定义一个嵌入的对象。param为包含它的object元素提供参数。video定义视频，如电影片段或其他视频流。audio定义声音，如音乐或其他音频流。source为媒介元素（如 和）定义媒介资源。track为

16、video等媒介指定外部字幕。map定义客户端的图像映射，图像映射是带有可点击区域的图像。area定义图像映射内部的区域。MathML在文档内使用.标签应用各种MathML元素。SVG在文档中定义可缩放矢量图形。2.5 内嵌元素HTML提供了元素用来描述图像信息的内容和表现形式，但图像的数据并不会直接插入HTML文档中，元素的作 用是让HTML文档在展示时给图像留出一个位置。图像文件的 地址由元素的src属性指定，当浏览器无法下载图像文 件时，则在相应的位置显示一些文字，文字的内容由alt属性指定。图像的大小可以在元素中使用width和height属性给出，如果不设置这两个属性，则将默认为按照

17、图像的实际尺寸显示。2.5 内嵌元素支持最多256色的图像。虽然GIF的颜色不够丰富，但它支持动画和透明色，在网页中常常被用来设计按钮、菜单等较小的图像。GIF可以支持高分辨率、颜色丰富的图像。由于JPG具有很好的压缩比，非常适合在网页中展现照片。当然，在使用JPG格式处理图像时，压缩比越大，图片的质量就越差。JPG可以支持颜色丰富的图像，同时还可支持alpha滤镜的透明方式。虽然PNG不支持动画效果，但与GIF一样适合作为较小的图像的显示方式。PNG2.5 内嵌元素元素的usemap属性可以指定可点击区域的图像映射元素，而图像映射元素本身的设置是在元素中，其中的元素则给出了具体的区域和超链接

18、的位置，功能类似于元素。下列代码给出了图像映射的方式，即在一个图像中设置了三个不同形状的区域，当用户点击这些区域时会产生如同超链接的效果。2.5 内嵌元素DEMO嵌入图片2.5 内嵌元素在早期的网页设计中，开发者经常使用框架标记把浏览器窗口划分成几个大小不同的子窗口，每个子窗口显示不同的页面，也可以在同一时间浏览不同的页面。定义子窗口使用元素。HTML5已经不再支持与元素，但仍然支持创建包含文档的内联框架的元素。元素语义HTML支持版本定义框架集4定义框架集的子窗口4创建包含另一个文档的内联（inline）框架4、52.5 内嵌元素元素可以构成“浮动”的框架，可以在一个 HTML文档的一个特定

19、区域中展示另一个HTML文档。属性功能height定义内联框架的高度name定义内联框架的名称sandbox使内联框架可以包含其他的一些内容，例如表格，脚本等seamless布尔型属性，使内联框架看起来像包含它的文件的一部分（没有边框和滚动条等）src设置内联框架所引用的地址srcdoc定义在内联框架中显示的HTML内容，与sandbox 和seamless一起使用width定义内联框架的宽度2.5 内嵌元素百度注意：因为超链接的目标表明为iframe，因此当点击超链接时会在iframe中显示百度页面DEMO嵌入框架2.5 内嵌元素根据HTML5的规范，在网页上呈现的视频和音频需要符合一定的标

20、准，否则就通过插件（如 activeX）来呈现。元素用来定义声音，如音乐或其他音频流。与之间插入的内容是供不支持 audio 元素的浏览器显示的。属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的音频的 URL。2.5 内嵌元素你的浏览器不支持音频元素。2.5 内嵌元素元素用来定

21、义视频，如电影片段或其他视频流。与之间插入的内容是供不支持 video元素的浏览器显示的。属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。2.5 内嵌元素你的浏览器不

22、支持视频元素。DEMO嵌入媒体2.5 内嵌元素A=xyMathML中的一系列元素可以帮助在HTML文档内显示数学公式，并且这些元 素本身也具有相应的语义。注意：并不是所有的浏览器都能显示MathML标签，因此在网站中使用这个系列的元素时需要告知所支持的浏览器及版本情况。2.5 内嵌元素根据HTML5的规范，和元素都可以完成在网页中的绘图功能。与元素不同的是，SVG是一种使用XML描述2D图形的语言，SVG中所描述的2D图形元素是以矢量图形对象的方式存在，不依赖分辨率，可以附加Javascript事件处理器。可以通过Javascript来修改图形对象的属性，浏览器会自动重绘图形。注意，一些浏览器

23、需要插件才能支持SVG。2.5 内嵌元素2.5 内嵌元素HTML本身的元素是有限的，特别是在HTML5之前的版本，开发者为了在HTML页面中实现多媒体应用和更复杂的客户端操作，就需要在HTML文档中增加各种插件对象以扩展文档的表现能力。自从1996年Netscape Navigator 2.0引入了对 QuickTime插件的支持，插件这种开发方式为其它厂商扩展 Web客户端的信息展现方式开辟了一条自由之路。微软公司迅速在IE 3.0浏览器中增加了对ActiveX的插件对象支持，Real Networks公司的Realplayer插件也很快在Netscape和IE浏览器中取得了成功。然而，随着

24、HTML5标准的制定与应用，通过使用新技术（包括音频元素、视频元素、矢量图形元素、应用缓存）让浏览器直接支持相关的多媒体或交互应用，这种技术趋势必然导致 Flash等很多传统的插件技术被新的技术标准取代。2.5 内嵌元素Java小应用程序（Java Applet）凭借Java本身的跨平台性、安全性 等优点，可以实现图形绘制、字体和颜色控制、动画和声音的播放、人机交互及远程数据访问等功能。Java小应用程序ActiveX是Microsoft对于一系列面向对象程序技术和工具的称呼，其中主要的技术是组件对象模型（Component Object Model，简称为COM）。ActiveX只能在Win

25、dows环境下运行。ActiveXFlash是一种基于矢量图像的交互式多媒体技术。矢量图像也称为面向对象的图像，它使用称为矢量的直线和曲线来描述图像。Flash2.6 结构元素、HTML5中支持的多种结构元素来呈现文档中的各节（Sections）内容，包括HTML4中已经定义的、和元素，以及 HTML5中新定义的、和元素。元素语义body定义文档的主体。h1到h6定义标题1到标题6。address定义文档作者或拥有者的联系信息。article定义外部的内容。section定义文档中的节。如章节、页眉、页脚或文档中的其他部分。nav定义导航链接的部分。aside定义article以外的内容，且与

26、article的内容相关。header定义文档的页眉。footer定义文档的页脚。2.6 结构元素这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.6 结构元素在HTML5中新增了、等新元素，而这些元素的作用主要体现在语义上，主要目的是增加文档的可读性和搜索引擎优化，在内容展示方面并没有特别的改变。为了方便理解，这里将这些结构元素和 word文档结构进行类比：相当于页眉，相当于页脚，相当于正文，是正文中包含的各个部分（可以理解为段落或章节），是正文的注解，而则是网站中经常使用的导航栏。2.7 编辑元素HTML5中的编辑元素（Edits）包括和，它们配合可以描述对文档的更新和修正。

27、元素语义HTML支持版本ins定义文档的其余部分之外的插入文本。4、5del定义文档中已删除的文本。4、52.7 编辑元素我喜欢吃苹果。我喜欢吃梨。2.8 表单元素元素在页面中产生表单，表单提供了用户与Web服务器的信息交互功能，是Web技术的要素之一。表单接受用户信息后，把信息提供给服务器，然后由服务器端的应用程序处理信息，把处理结果返给用户并向用户显示。表单的定义元素是。表单中可以包含、等子元素。2.8 表单元素元素语义HTML支持版本form定义供用户输入的 HTML 表单。4、5input定义输入控件4、5label为input元素定义元素，响应鼠标点击。5button定义按钮。4、5

28、select定义选择列表（下拉列表）。4、5datalist与input元素配合使用，定义input可能的值。5optgroup定义选择列表中相关选项的组合4、5option定义选择列表中的选项4、5textarea定义多行的文本输入控件4、5keygen定义用于表单的密钥对生成器字段。5output定义不同类型的输出，比如脚本的输出。5progress定义运行中的进度。5meter定义度量衡。5fieldset将表单内的相关元素分组。4、5legend定义fieldset 元素的其余内容的标题。4、52.8 表单元素元素的4个主要属性分别是action、method、enctype、targ

29、et。例如下面的代码：该属性值指定了提交表单时对应的服务器程序地址。action属性method属性指定表单中的输入数据的传输方法，它的取值是get或post。method属性enctype属性指定表单中输入数据的编码方法。enctype属性target属性用来指定目标窗口的打开方式。target属性2.8 表单元素input元素定义输入控件，用来搜集用户信息。属性功能name定义输入控件的名称type指定控件的类型，默认值是textmaxlength规定控件允许输入的字符的最大长度minlength规定控件允许输入的字符的最小长度size规定控件输入域的大小readonly规定用户是否可以修

30、改其中的值。required规定是否是必填信息multiple规定是否可以填写多个值pattern定义用户输入的字符串模板max规定可填写的最大值min规定可填写的最小值step规定数据的步长list列出输入的选项placeholder给出文本框的占位字符串，可实现文本框水印效果checked提供复选框和单选按钮的初始状态value提供控件输入域的初始值src定义以提交按钮形式显示的图像的URL2.8 表单元素元素的属性type的取值及意义值功能hidden隐藏的输入字段，把表单中的一个或多个组件隐藏起来text单行的输入文本框，接受任何形式的输入，默认宽度为 20 个字符tel电话号码输入u

31、rl网络地址URL输入email电子邮件地址输入password密码字段，该字段中的字符用*替代date日期输入time时间输入number数字输入range范围输入color颜色输入checkbox复选框，提供多项选择radio单选按钮，提供单项选择file文件上传submit提交按钮，单击提交按钮会把表单数据发送到服务器image图像形式的提交按钮，单击图像，发送表单信息提交服务器reset重置按钮，把表单中的所有数据恢复为默认值button可点击按钮，可用于创建提交按钮、复位按钮和普通按钮2.8 表单元素请输入姓名：请输入密码：上传的文件：请选择旅游城市，可多选北京 请选择付款方式信用卡

32、出发日期出发时间DEMO表单元素12.8 表单元素元素可以将表单中的一部分内容组合起来，生成一组相关表单的字段。当一组表单元素作为子元素放到元素内时，浏览器通常会以加上边框的方式进行显示。作为元素的第一个子元素，元素可以为元素加上标题。2.8 表单元素健康信息：身高：体重：2.8 表单元素元素定义下拉式列表框和滚动式列表框。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表。在将表单数据提交给服务器时，同时还包括了元素的name属性值。属性功能disabled规定禁用该下拉列表，被禁用的下拉列表既不可用，也不可点击。可以使用 Javascript 来

33、清除 disabled 属性，以使下拉列表变为可用状态multiple规定可选择多个选项name规定下拉列表的名称size规定下拉列表中可见选项的数目2.8 表单元素元素的语法如下所示:选项描述选项描述使用元素定义下拉列表框时，由元素定义列表框的各个选项。元素位于元素内部。一个元素可以包含多个元素。元素要与元素一起使用，否则元素是无意的。2.8 表单元素DEMO表单元素22.8 表单元素和是在HTML5中新增的元素。元素可以用来显示正在执行的状态或进度情况，配合Javascript程序，可以控制元素中的 value属性，以精确地显示进展情况。元素可以以直方图的形式显示值的大小。为了实现直方图的显示，除了需要通过value属性给出具体的数值，还需要通过min和max属性给出该直方图的最小和最大值，以便可以按比例进行显示。min和max属性的缺省值为0和1。2.8 表单元素下载进度：显示度量值