第二章商务表达层与静态网页和专题HTML

资源描述

《第二章商务表达层与静态网页和专题HTML》由会员分享，可在线阅读，更多相关《第二章商务表达层与静态网页和专题HTML（107页珍藏版）》请在金锄头文库上搜索。

1、第2章商务表达层与静态网页设计技术表达层应用/逻辑层数据层Web服务核心商务服务数据库InternetIE商务表达层的功能商务表达层的功能商务表达层的功能商务表达层的功能静态网页的表达及其技术静态网页的表达及其技术静态网页的表达及其技术静态网页的表达及其技术（HTTP/HTMLHTTP/HTML）网页的制作和发布网页的制作和发布网页的制作和发布网页的制作和发布2.1 商务表达层的功能n商务表达层功能：表现数据p客户端：表现数据客户端：表现数据pWeb服务器：发布信息，与客户端和应用服务服务器：发布信息，与客户端和应用服务端进行交互端进行交互“客户独立的客户独立的”：只为用户提供界面

2、和接受请求，并返回结果：只为用户提供界面和接受请求，并返回结果页面和风格等变化，不会影响应用和数页面和风格等变化，不会影响应用和数据层据层2.2 静态页面的表达及其技术 2.2.1静态页面的体系结构Client(浏览器)WebServer硬盘HTML页面从硬盘获取文件文件通过HTTP返回页面请求HTTP协议完成消息传递、HTML语言用来管理文本内容的显示和格式等2.2.2置标语言p标准通用置标语言SGML (Standard Generalized Markup Language) SGML(Standard Generalized Markup Language) ISO组织在198

3、6年推出的一种用标记来描述文档资料的通用语言。十分庞大，不易学习和使用，在计算机实现上比较困难。HTML和XML都是在此基础上派生出来的： HTMLHTML只使用了SGML中很小一部分标记，简单，适用于Web页面的显示。 XMLXML用来定义数据结构，适合于电子商务中的大规模数据传输。nHTTP简简介介 nHTML简简介介nHTML的常用的常用标记标记n用用HTML提高网页设计水平提高网页设计水平HTTP 与与 HTML第一节第一节 HTTP简介简介 HTTP（超文本传输协议）（超文本传输协议）p是一种基本的客户机/服务器的访问协议，用于支持WWW应用。p使用HTTP协议，客户端（比如浏览器）

4、向WWW服务器发送HTTP命令请求，而服务器回应相应的网页(或者数据)。Client(浏览器)WebServer硬盘HTML页面从硬盘获取文件文件通过HTTP返回页面请求HTTP消息的三个组成部分消息的三个组成部分 n一个单独的请求或响应行一个单独的请求或响应行 nHTTP头头 nHTTP主体主体一个单独的请求或响应行一个单独的请求或响应行 p用户请求行：用户请求行：p一个一个方法方法（通常是（通常是GET或或POST）p其后跟着一个其后跟着一个文档地址文档地址以及所以及所使用的版本号使用的版本号GET / contents.html HTTP/1.1 表示浏览器使用表示浏览器使用GE

5、T方法从方法从Web服务器获取所需的服务器获取所需的网页网页contents.html 文档，文档，HTTP协议版本号是协议版本号是1.1。一个单独的请求或响应行一个单独的请求或响应行 p响应行响应行：pHTTP协议版本号协议版本号p一个用来指示请求是否成功的一个用来指示请求是否成功的HTTP状态码状态码（understood或或satisfied）、以及请求不成功的）、以及请求不成功的原因原因。HTTP/1.1 404 Not Found 当服务器无法找到请求的当服务器无法找到请求的URL时，发送给浏览器的状时，发送给浏览器的状态码就是态码就是 404（描述为（描述为Not Found）。）

6、。Status Codes 及描述及描述n1xx: Informational n2xx: Successn3xx: Redirectionn4xx: Client Errorn5xx: Server Error nGET通过在通过在URL地址后面附加参数的形式来向后台递交数据地址后面附加参数的形式来向后台递交数据，此时，此时URL一般包含一个询问字符串（跟在一般包含一个询问字符串（跟在？号之后），如：号之后），如：http:/localhost:8000/j2ee?day=12；http:/?name=liudong&mobile=123456 nPOST方法会单独将数据组织在方法会单独将

7、数据组织在HTTP消息主体里发给服务器消息主体里发给服务器一个浏览器客户在与服务器进行交互时使用的最典型的方法的是一个浏览器客户在与服务器进行交互时使用的最典型的方法的是 GET或或POST，客户端向服务器递交请求的方法。，客户端向服务器递交请求的方法。两种方法都可以传递一些参数给服务器，区别在于：两种方法都可以传递一些参数给服务器，区别在于：nGET方法在使用时，传递的数据量有限，仅用于少量数方法在使用时，传递的数据量有限，仅用于少量数据传递；而据传递；而POST方法可以传输大量数据。方法可以传输大量数据。nGET方法使用时，很多时候浏览器地址栏可以看到实际方法使用时，很多时候浏览器地址栏

8、可以看到实际的的URL（含参数），一般不用于发送敏感信息，而使用（含参数），一般不用于发送敏感信息，而使用POST方法发送敏感消息更为安全。方法发送敏感消息更为安全。n不管是不管是GET还是还是POST，对于服务器端来说，其接收从客，对于服务器端来说，其接收从客户端传递过来的参数的过程都是完全一样的。户端传递过来的参数的过程都是完全一样的。 HTTP头和体头和体 HTTP头是一个域集合，作用是服务器和浏览器交互配置信息。头是一个域集合，作用是服务器和浏览器交互配置信息。例子例子: 请求行和请求行和HTTP头头。l1: GET /some/url.html HTTP/1.1l2: Accept

9、: /浏览器可接受的邮件类型ll4: Accept-Language: en-gb /浏览器希望的语言种类l5：Content-Type: /所发送的数据类型l6: Accept-Encoding: l7: User-Agent: /浏览器类型l8: Host: localhost:8000l9: Content-Length: 7 /发送的数据比特数l10: HTTP统统资源定位器资源定位器URL 统统资源定位器资源定位器的简写是的简写是URL (Universal Resource Locator)，是一种特殊类型的统，是一种特殊类型的统资源描述符资源描述符(Universal Resou

10、rce Identifier，URI)，包含了用于，包含了用于查找查找某个资源的足够的信息某个资源的足够的信息。 URL用来在用来在识别识别网上的资源，如文档、图象、可网上的资源，如文档、图象、可下载文件、应用程序、电子邮箱以及其他的资源。下载文件、应用程序、电子邮箱以及其他的资源。浏览器或者应有程序可以通过浏览器或者应有程序可以通过URL去访问服务器上去访问服务器上的各种资源。的各种资源。 HTTP URL 的语法为：的语法为：http_URL=“http:/”host“:”port path resourcename其中：其中：nhost是一个合法的是一个合法的Internet主机域名或

11、主机域名或IP地址地址nport是连接到主机的端口号（也被叫做是连接到主机的端口号（也被叫做socket或服务号），默认端口或服务号），默认端口号是号是80-TCP/IP端口。端口。npath代表在服务器上的路径代表在服务器上的路径nresourcename代表访问的资源名代表访问的资源名如如URL http:/www.bankgroup.org:8080/customer/1.htmlnhost为为www.bankgroup.orgnport为为8080npath为为customernresourcename为为1.htm 第二节第二节 HTML 简介简介nHTML的基本概念 n一个简单例子

12、 nHTML文档的基本结构 HTML的基本概念的基本概念 HTML语言的英文全名是语言的英文全名是Hyper Text Markup Language，即，即超文本标记语言超文本标记语言的简称（也有叫的简称（也有叫超文本标识语言）。超文本标识语言）。超文本超文本: 是因为它不仅能够处理文本，而且对网页中是因为它不仅能够处理文本，而且对网页中的图象、声音等各种元素都可以处理。的图象、声音等各种元素都可以处理。标记语言标记语言: 因为它是通过标记因为它是通过标记(tag)来指明网页中的文来指明网页中的文档、图象、声音等各种元素如何显示的，所以被称为档、图象、声音等各种元素如何显示的，所以被称为

13、标记语言。标记语言。一个简单例子一个简单例子 n程序程序2.1 HTML的简单实例的简单实例nnn HTML的标题的标题nnnHTML的简单实例的简单实例nn n用浏览器观察它的效果时，在浏览器的左上角出现一行用浏览器观察它的效果时，在浏览器的左上角出现一行“HTML的简单实的简单实例例”。这就是我们写在。这就是我们写在和和之间的内容。之间的内容。浏览器的标题栏，标题成为浏览器的标题栏，标题成为“HTML的标题的标题”，说明，说明和和之之间的内容就是浏览器间的内容就是浏览器“标题标题”内容。内容。 HTML文档的基本结构文档的基本结构第三节第三节 HTML的标记的标记 HTML标记标记：

14、在：在HTML文档中用文档中用括括起来的部分。起来的部分。作用：作用：它告诉浏览器应该如何呈现它告诉浏览器应该如何呈现文本、图像以及链接点等。文本、图像以及链接点等。标记的属性标记的属性n标记的属性标记的属性：以英文表示，为标记增添附加的特性、功能：以英文表示，为标记增添附加的特性、功能或作用。或作用。n. 例如：例如： . 标记的标记的ALIGN属性有属性有left、center和和right三个参数，三个参数，分别控制段落位置靠左、居中和靠右。分别控制段落位置靠左、居中和靠右。标记的归属、层次关系标记的归属、层次关系 n有些标记在层次上总是在另外的标记的里面，是后者的元素。有些标记在

15、层次上总是在另外的标记的里面，是后者的元素。n比如，如果存在比如，如果存在和和标记，则标记，则和和应应该放在该放在和和标记里面，它们是标记里面，它们是和和标标记的元素，叫做标题元素。记的元素，叫做标题元素。n掌握标记之间的掌握标记之间的归属关系归属关系有助于把握有助于把握HTML标记的层次逻辑关系。标记的层次逻辑关系。 HTML的常用标记的常用标记 nHTML的文件的文件结构结构标记标记 nHTML的文字的文字布局布局标记标记 nHTML的文字的文字格式格式标记标记 HTML的文件结构标记的文件结构标记文档标记文档标记. n作用：作用：的作用是通知浏览器的作用是通知浏览器：该文件含有：该文

16、件含有 HTML 标记标记码，并且从此开始。在观察网页时，浏览器是从码，并且从此开始。在观察网页时，浏览器是从开始进开始进行解释该网页如何呈现信息的。行解释该网页如何呈现信息的。的作用是通知浏览器的作用是通知浏览器：该文件的该文件的 HTML 标记码结束，其后的内容不再是浏览器处理的标记码结束，其后的内容不再是浏览器处理的合法合法HTML 文档文档n特点：特点：它们必须成对出现，无属性。它们必须成对出现，无属性。文件头标记文件头标记. n作用：作用：这对标记之间的内容包含了这对标记之间的内容包含了说明文档内容的信息行说明文档内容的信息行，使用它可以为使用它可以为HTML 文档提供文档提供标题标

17、题，提高其可读性提高其可读性；安排多；安排多文档间的关系；为浏览器创建一个搜索格式等。文档间的关系；为浏览器创建一个搜索格式等。n特点：特点：它们必须成对出现，无属性它们必须成对出现，无属性。存在层次关系，其。存在层次关系，其下层下层标记元素标记元素为为, , , , n说明：说明：文件头标记文件头标记.可以不写可以不写，这不会影，这不会影响页面的效果。但是响页面的效果。但是一般都不要省略它一般都不要省略它。这对标记与。这对标记与和和是在同一个层次级别上的。是在同一个层次级别上的。标题标记标题标记. n作用：作用：在在和和中间的文字为中间的文字为HTML 文档提供一个名文档提供一个名称称，

18、这个名称会在浏览器窗口的标题栏出现，作为该页面的标，这个名称会在浏览器窗口的标题栏出现，作为该页面的标题；如果将该页面收藏起来，或把它最小化为图标，这个名称题；如果将该页面收藏起来，或把它最小化为图标，这个名称前几个字也会成为它们的名称。这样就增加了页面的可读性。前几个字也会成为它们的名称。这样就增加了页面的可读性。n特点：它们必须成对出现，无属性。存在层次关系，是特点：它们必须成对出现，无属性。存在层次关系，是文件头文件头标记标记.的标题元素的标题元素，即应该写在，即应该写在和和之间。之间。n说明：在说明：在和和中间的文字不能太长。有些浏览器中间的文字不能太长。有些浏览器规定标题文字不能超过

19、规定标题文字不能超过64个字符，否则其后部分不能显示，搜个字符，否则其后部分不能显示，搜索引擎和滚动浏览器也不对其索引。索引擎和滚动浏览器也不对其索引。文档体标记文档体标记 n作用：作用： HTML文档要在文档要在网页上所呈现的的内容网页上所呈现的的内容是写在这一对标是写在这一对标记之间的；同时通过对其属性进行设置，可以控制整个页面的记之间的；同时通过对其属性进行设置，可以控制整个页面的显示效果。显示效果。n特点：特点：它们必须成对出现，它们必须成对出现，标记有属性，如标记有属性，如BGCOLOR、TEXT、BACKGROUND等。下面分别介绍它们的用法。等。下面分别介绍它们的用法。 TEX

20、T 属性：标记的TEXT属性的作用是通过为其参数赋值来控制文档本身的颜色文档本身的颜色。 BGCOLOR属性：该属性的作用是通过为其参数赋值来控制文档背景的颜色文档背景的颜色。 BACKGROUND属性：该属性的作用是通过为其参数赋值来为整个页面添加背景图案整个页面添加背景图案。 ThisisaheadingThisisaparagraph.lllThisisaheadinglThisisaparagraph.lTheoldbgcolorattributeonlyworksonthebodyelement.lForfutureproofHTML,usestylesinstead:llHTML

21、的文字布局标记的文字布局标记 n以下标记都只能加入到以下标记都只能加入到与与之间之间：u线段标记线段标记 u换行标记换行标记 u段落分隔标记段落分隔标记. u分级标题标记分级标题标记 n线段标记线段标记作用：作用：在页面中在页面中加入横线段加入横线段，可以用这种方，可以用这种方法将不同内容的文字分隔开，增加文档的层法将不同内容的文字分隔开，增加文档的层次感。次感。特点：特点：不成对出现不成对出现，加入到，加入到与与之间；之间；标记有属性，包括标记有属性，包括SIZE、WIDTH、ALIGH、NOSHADE、COLOR。 nnnThis is header 1 n nThis is s

22、ome text n nnThis is header 1 nnThis is some text n换行标记换行标记 n作用：作用：浏览器每次遇到该标记就浏览器每次遇到该标记就换行换行，其后的内容在下一行出现。其后的内容在下一行出现。n特点：特点：不成对使用不成对使用，无属性。，无属性。 nnnnTo breaklinesin aparagraph,use the br tag.nnnn段落分隔标记段落分隔标记. n作用：作用：浏览器在遇到浏览器在遇到后，把后，把后面的内容在新的一后面的内容在新的一行开始显示行开始显示，成为一个，成为一个新段落新段落，在遇到，在遇到后结束后结束该段落，并且使

23、该段落，并且使该段落后面增加一个空行该段落后面增加一个空行。n特点：特点：成对使用，成对使用，标记有属性标记有属性ALIGH。n说明：说明：和大多数的文字处理器不同，在和大多数的文字处理器不同，在HTML文档里，文档里，用硬回车用硬回车造成的换行符来产生段落是无效的造成的换行符来产生段落是无效的。如果在源文件里句子间有。如果在源文件里句子间有换行，但是浏览器中会忽略这些换行符，使本来应该用段落分换行，但是浏览器中会忽略这些换行符，使本来应该用段落分隔的内容仍然在一起。隔的内容仍然在一起。用用来产生段落效果需要来产生段落效果需要两个两个，而且不能控制段，而且不能控制段落的显示方式。而落的显示方

24、式。而标记可以开始新的一段，并且用标记可以开始新的一段，并且用ALIGN参参数来控制该段落的位置。数来控制该段落的位置。因此，在因此，在需要用段落来把不同内容需要用段落来把不同内容分开时，分开时，是较好的选择是较好的选择。 nnn春晓春晓nn 春眠不觉晓，春眠不觉晓，n 处处闻啼鸟。处处闻啼鸟。n 夜来风雨声，夜来风雨声，n 花落知多少。花落知多少。nn注意，浏览器忽略了源代码中的排版（省略了多余的空格和注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。换行）。nn这是段落。这是段落。这是段落。段落元素由p标签定义。这是段落。这是段落。这是段落。段落元素由p标签定义。标签只是简单地

25、开始新的一行，而当浏览器遇到标签时，通常会在相邻的段落之间插入一些垂直的距离分级标题标记分级标题标记 n作用：作用：使使HTML页面上的页面上的标题按层次结构标题按层次结构区别于普通文档，区别于普通文档，标题文字比其它文字大些和粗些标题文字比其它文字大些和粗些，不同级次标题的大小，不同级次标题的大小和粗细也有区别。这样可以使文档的层次分明。和粗细也有区别。这样可以使文档的层次分明。n特点：特点：成对，成对，标记有属性，控制分级标题位置的属性标记有属性，控制分级标题位置的属性为为ALIGN。n说明：说明：.标记的格式为标记的格式为-，其中，其中，n的的取值在取值在1、2、6，对应标题文字的大小，

26、对应标题文字的大小，n越大则字越小越大则字越小。n.和和.是不同的。在浏览器观是不同的。在浏览器观看时，后者不会在网页内容中出现，而只作为浏览器窗看时，后者不会在网页内容中出现，而只作为浏览器窗口的口的标题标题出现，或在最小化图标上出现；而前者可以在出现，或在最小化图标上出现；而前者可以在网页的正文里面出现网页的正文里面出现，作为正文的大标题以及各级标题。，作为正文的大标题以及各级标题。 nnnThis is heading 1nThis is heading 2n上面的标题在页面中进行了居中排列。nnHTML的文字格式标记的文字格式标记 n字体标记字体标记 n字体的物理类型标记字体的物理类型

27、标记 n字体的逻辑类型标记字体的逻辑类型标记字体标记字体标记 n作用：作用：控制在浏览器中控制在浏览器中页面文字的大小、颜色页面文字的大小、颜色等，等，使文档的表现力更生动。使文档的表现力更生动。n特点：特点：成对，成对，标记有属性。包括标记有属性。包括SIZE、COLOR、FACE、WEIGHT等。等。nSIZE属性属性： nCOLOR属性属性： nFACE属性属性：字体的：字体的类型类型，如，如汉字的宋体、楷体、英文的汉字的宋体、楷体、英文的Times New Roman等，这时，等，这时，应该写成如下格式：应该写成如下格式： This is some text! This is som

28、e text! This is some text! 字体的物理类型标记字体的物理类型标记 n作用：作用：这里所谓的这里所谓的物理类型物理类型是指把文字设为是指把文字设为黑体、黑体、斜体等特殊形状，或为它们加下划线、删除线斜体等特殊形状，或为它们加下划线、删除线等等n特点：特点：成对，无属性。成对，无属性。：使浏览器以：使浏览器以粗体粗体字显示文本。字显示文本。：使浏览器以：使浏览器以斜体斜体字显示文本。字显示文本。：使浏览器显示文本时在它们下面加：使浏览器显示文本时在它们下面加下划线下划线。：使浏览器显示文本时加：使浏览器显示文本时加删除线删除线。This is some text! Th

29、is is some text! This is some text! 字体的逻辑类型标记字体的逻辑类型标记 n作用：作用：其作用与其作用与物理类型类似物理类型类似，也是使文字产生，也是使文字产生不同一般的不同一般的效果效果，以适应人们的书写习惯和各种业务的特定要求。逻辑，以适应人们的书写习惯和各种业务的特定要求。逻辑类型标记比物理类型的种类稍多一些，但是其中多数与对应类型标记比物理类型的种类稍多一些，但是其中多数与对应的物理类型效果是相似的。的物理类型效果是相似的。n特点：特点：成对，无属性。成对，无属性。：使文本具有强调效果，一般是斜体字。：使文本具有强调效果，一般是斜体字。：使文本有着重

30、强调效果：使文本有着重强调效果粗体字。粗体字。：表示代码的文字。：表示代码的文字。：用计算机常用字体显示文字，即宽度相：用计算机常用字体显示文字，即宽度相等等的文字。的文字。：较粗的黑体字，一般是用户输入的文字。：较粗的黑体字，一般是用户输入的文字。：小字。：小字。：大字。：大字。 This is some text! This is some text! This is some text! 第四节第四节用用HTMLHTML提高网页设计水平提高网页设计水平 n列表标记列表标记 n图像标记图像标记 n链接标记链接标记 n表格标记表格标记 n表单标记表单标记列表标记列表标记 n作用：创建

31、作用：创建(不不)带项目符号或编号的列表带项目符号或编号的列表n创建不带项目符号的列表创建不带项目符号的列表例：某大学有多个下属的学院，各个学院又有下属例：某大学有多个下属的学院，各个学院又有下属的学系。可以像下面的格式来表示其层次关系：的学系。可以像下面的格式来表示其层次关系：工商学院工商学院会计系会计系管理系管理系市场营销系市场营销系计算机科学与工程学院计算机科学与工程学院计算机科学系计算机科学系计算机工程系计算机工程系通信与电子工程系通信与电子工程系n特点：特点：成对和嵌套使用。成对和嵌套使用。n其嵌套结构为：其嵌套结构为：n definition listsn 希望表示

32、成上层项目的文字希望表示成上层项目的文字 definition termn 希望表示下层项目的文字希望表示下层项目的文字 definition descriptionn nnn一个定义列表：一个定义列表：nn 计算机计算机n 用来计算的仪器用来计算的仪器 . .n 显示器显示器n 以视觉方式显示信息的装置以视觉方式显示信息的装置 . .nnnnnn一个定义列表：一个定义列表：nn 工商学院工商学院会计系会计系n 计算机科学与工程学院计算机科学与工程学院n 计算机科学系计算机科学系nnn创建带项目符号或编号的列表创建带项目符号或编号的列表 n作用：作用：创建带项目符号或编号的列表，用圆点或序创

33、建带项目符号或编号的列表，用圆点或序号表示其层次关系。号表示其层次关系。n特点：特点：成对和嵌套使用。成对和嵌套使用。如果希望表示成如果希望表示成顺序编号顺序编号的列表，其嵌套结构为：的列表，其嵌套结构为： ordered lists 希望表示成带顺序编号的列表项希望表示成带顺序编号的列表项 list item 如果希望表示成标有如果希望表示成标有圆点的列表圆点的列表，其嵌套结构为：，其嵌套结构为： unordered lists 希望表示成标有圆点的列表项希望表示成标有圆点的列表项 nn数字列表：数字列表：nn 苹果苹果n 香蕉香蕉n 柠檬柠檬n n字母列表：字母列表：nn 苹果苹果n

34、香蕉香蕉n 柠檬柠檬n n圆点列表：圆点列表： n /n 苹果苹果n 香蕉香蕉n 柠檬柠檬n n图像标记图像标记 n作用作用: 该标记的作用是通过为其参数赋值来按照要求该标记的作用是通过为其参数赋值来按照要求把把图像输出到网页图像输出到网页上。上。n特点特点: 标记标记不成对不成对使用，有属性使用，有属性SRC、ALT、ALIGN、BORDER、WIDTH和和HEIGHT等。等。nSRC属性：对于属性：对于标记，其标记，其SRC属性是属性是必选必选属性，属性，其中，参数值为图像的文件名全称及其路径。其中，参数值为图像的文件名全称及其路径。 nnnnnn好好nnnnnn链接标记链接标记 n作用

35、作用: 和和这一对标记可指定这一对标记可指定面向外部网络的面向外部网络的超级链接超级链接的位置或方式，还可以创建面向的位置或方式，还可以创建面向HTML文档文档的的内部链接内部链接。n特点特点:成对使用，成对使用，标记有属性，其属性有标记有属性，其属性有HREF、NAME和和TARGET等。等。n使用使用和和标记对创建一个标记对创建一个超文本链接超文本链接：， HREF属性的参数是属性的参数是URL形式，即网址或相对路径。语法：形式，即网址或相对路径。语法：n例如：例如：nnnn东北大学东北大学 nnn创建面向创建面向HTML文档的内部链接文档的内部链接n为了提高浏览速度，有时需要在为了提高

36、浏览速度，有时需要在HTML文档的内部文档的内部从某个位置从某个位置直接直接跳跳转转到到同一个文档的比较远的其他位置同一个文档的比较远的其他位置，可以在前者位置上加上标签，可以在前者位置上加上标签，即做一个记号，它指向后者，点击标签就可以实现跳转，这就是所谓即做一个记号，它指向后者，点击标签就可以实现跳转，这就是所谓面向面向HTML文档的内部链接。文档的内部链接。n为了实现跳转到指定的位置，需要两个步骤：为了实现跳转到指定的位置，需要两个步骤：创建标签创建标签和和跳转到该标跳转到该标签指定的位置签指定的位置。n步骤步骤1：创建标签：创建标签创建标签是通过创建标签是通过和和的属性的属性NAME

37、实现的。它的作用是在实现的。它的作用是在需要添加标签的地方加上指定的标签名。需要添加标签的地方加上指定的标签名。n n例如：例如：此处创建了一个标签此处创建了一个标签n 这就在指定的位置创建了一个标签名即这就在指定的位置创建了一个标签名即“标签标签1”。 n步骤步骤2：跳转到标签的位置：跳转到标签的位置要找到标签所在地，就必须使用要找到标签所在地，就必须使用例如要找到例如要找到“标签标签1”这个标签，就要编写如下代码：这个标签，就要编写如下代码：点击此处将使浏览器跳到点击此处将使浏览器跳到“标标签签1”处处注意：注意：HREF属性赋的值若是标签的名字，必须在标属性赋的值若是标签的名字，

38、必须在标签名前边加一个签名前边加一个“#”号。号。 nnnn查看查看 Chapter 4。nnChapter 1nThis chapter explains ba bla blanChapter 2nThis chapter explains ba bla blanChapter 3nThis chapter explains ba bla blanChapter 4nThis chapter explains ba bla blanChapter 5nThis chapter explains ba bla blann创建面向图像的超级链接创建面向图像的超级链接超级链接不仅包括对文本、网址

39、和电子邮件的链接，超级链接不仅包括对文本、网址和电子邮件的链接，也包括对多媒体资源的链接。也包括对多媒体资源的链接。创建创建面向图像面向图像的超级链接的语法是：的超级链接的语法是： nnnn可以使用图片来链接东北大学：可以使用图片来链接东北大学：nnn nnn表格标记表格标记n作用作用：在网页中用表格组织文本或图像。：在网页中用表格组织文本或图像。n特点特点：它需要依靠多个标记对的彼此配合：它需要依靠多个标记对的彼此配合使用才能达到目标。有使用才能达到目标。有四套标记对和创建四套标记对和创建表格有关表格有关，它们各自要成对使用，注意其，它们各自要成对使用，注意其属性的规定。要将这四套标记嵌套

40、使用才属性的规定。要将这四套标记嵌套使用才能正确地制作出预期的表格。能正确地制作出预期的表格。 n表格标记的嵌套使用表格标记的嵌套使用表格标记依靠四套标记对的嵌套使用来创建表格标记依靠四套标记对的嵌套使用来创建表表格格: 1. 创建表格的其他命令（即标记）必须放在这两个标创建表格的其他命令（即标记）必须放在这两个标记之间。记之间。 2. Table Row 表格的表格的每一行每一行要由要由一对一对标记对来创建。标记对来创建。比如学生登记表的标题行及其之下有比如学生登记表的标题行及其之下有2行，需行，需要分别用三对要分别用三对来创建。来创建。 3. Table Header 表格的表格

41、的第一行是标题行第一行是标题行，这一行上有，这一行上有若干个标题名称若干个标题名称，其中每一个标题名称要由一对其中每一个标题名称要由一对/TH标记对来创建。标记对来创建。比如学生登记表的标题行上的姓名、性别和年龄，比如学生登记表的标题行上的姓名、性别和年龄，它们要分别用三个它们要分别用三个来创建。来创建。标记标记对必须放在一对对必须放在一对之间之间。 4. Table Data 表格的表格的标题行之下标题行之下的每一行上有的每一行上有若干个数据项若干个数据项，其中每，其中每一个数据项要由一对一个数据项要由一对标记对来创建。标记对来创建。比如学生登记表的标题行之下第一行有比如学生登记表的标题

42、行之下第一行有“张三张三”、“男男”、“18”，要分别用三个，要分别用三个来创建。来创建。标记对必须放在一对标记对必须放在一对之间之间。 nnn表头：表头：nnn 姓名姓名n 电话电话n QQnnn ZFn 555 77 854 555 77 854n 555 77 855 555 77 855nnnn表单标记表单标记 nHTML的的表单表单(Form)提供文本框、复选框、下拉列表等提供文本框、复选框、下拉列表等界面，以便用户输入不同类型的数据。界面，以便用户输入不同类型的数据。n将表单设计在一个将表单设计在一个HTML文档中，当用户填写完信息后文档中，当用户填写完信息后做提交做提交(subm

43、it)操作，操作，表单的内容就从客户端的浏览器表单的内容就从客户端的浏览器传送到服务器传送到服务器，经过服务器上的，经过服务器上的Servlet、JSP、ASP 或或 CGI 等处理程序处理，再将用户所需信息传送回客户端等处理程序处理，再将用户所需信息传送回客户端的浏览器上。的浏览器上。n表单的使用相对要复杂许多。设计表单，通过表单和表单的使用相对要复杂许多。设计表单，通过表单和服务器端交互式服务器端交互式Web应用设计的应用设计的最重要的工作之一最重要的工作之一多数情况下被用到的表单标签是输入标签（多数情况下被用到的表单标签是输入标签（）。输入）。输入类型是由类型属性（类型是由类型属性（ty

44、pe）定义的。）定义的。名：名：姓：姓：文本域文本域调节文本域框大小：调节文本域框大小：style、size、textarea、名：名：姓：姓：用户：用户：密码：密码：请注意，当您在密码域中键入字符时，浏览器将使用项目请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。符号来代替这些字符。密码框密码框我喜欢自行车：我喜欢自行车：我喜欢汽车：我喜欢汽车：复选框复选框英雄联盟英雄联盟继承者们继承者们下拉列表下拉列表创建按钮创建按钮健康信息：健康信息：身高：身高：体重：体重：如果表单周围没有边框，说明您的浏览器太老了。如果表单周围没有边框，说明您的浏览器太老了。创建创建围绕数据围

45、绕数据的的Fieldset按钮按钮This is a headerThis is a paragraph. This is a header This is a paragraph.divdiv#containerwidth:500pxdiv#headerbackground-color:#99bbbb;div#menubackground-color:#ffff99;height:200px;width:100px;float:left;div#contentbackground-color:#EEEEEE;height:200px;width:400px;float:left;div#fo

46、oterbackground-color:#99bbbb;clear:both;text-align:center;h1margin-bottom:0;h2margin-bottom:0;font-size:14px;ulmargin:0;lilist-style:none;Main Title of Web PageMenuHTMLCSSJavaScriptContent goes hereCopyright W3SHTML样式样式style CSS定义定义CSSCascade Style Sheet层叠样式表CSS 成为W3C标准用来装饰HTML/XML的标记集合字体属性属性属性含义含义属

47、性值属性值font-family字体各种字体font-style字体样式italic、obliquefont-variant小体大写small-capsfont-weight字体粗细bold、bolder、lighterfont-size字体大小absolute、relative、%color字体颜色颜色值h2 font-family : helvetica, impact, sans-serif颜色与背景属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repea

54、lur模糊Light灯光投影Chroma指定颜色透明Mask透明膜Dropshadow投射阴影Shadow阴影Fliph水平翻转Wave波纹Flipv垂直翻转XrayX射线Glow光效Grayscale灰度样式样式 HTML样式、内嵌的样式、内嵌的CSS样式、外接的样式、外接的CSS样式样式h1color:red;pcolor:blue;header1Aparagraph.ThisisaheadingThisisaparagraph.外接的外接的CSS样式样式我通过外部样式表进行格式化。我也一样！mystyle.cssh1color:bluepcolor:redHTML和和CSS入门示例入门示

55、例1Step 1: 新建记事本，代码如下，文件名为新建记事本，代码如下，文件名为dreamdu.html 欢迎来到梦之都欢迎来到梦之都这是我的第一个网页,在这里尽情学习CSS 吧! Step 2: 新建记事本，代码如下，文件名为新建记事本，代码如下，文件名为dreamdu.css/*段落样式*/pcolor:purple;font-size:12px;/*标题样式*/h1color:olive;text-decoration:underline;/*链接样式*/a:linkcolor:#006486;a:visitedcolor:#464646;a:hovercolor:#fff;bac

56、kground:#3080CB;/*a:hover指的是鼠标经过它时候的效果*/a:activecolor:white;background:#3080CB;HTML和和CSS入门示例入门示例2见网络编程技术见网络编程技术_程序程序-HTML-Example-1-CSSnHTTPHTTP消息的三个组成部分消息的三个组成部分统统资源定位器资源定位器(URL) HTTP的的 GET和和POST方法方法请求和响应消息示例请求和响应消息示例nHTMLnHTML的常用的常用标记标记nHTML的常用的常用标记标记、CSSHTML的文件结构标记的文件结构标记 HTML的文字布局标记的文字布局标记 HTML的文字格式标记的文字格式标记列表标记列表标记图像标记图像标记链接标记链接标记表格标记表格标记表单标记表单标记 http:/

展开阅读全文

第二章 商务表达层与静态网页和专题HTML

最新文档

第二章商务表达层与静态网页和专题HTML