Web编程技术-编程基础.ppt

,Web编程技术-Web编程基础(1),潘 冰,Web编程基础,HTTP协议HTML语言CSSJavaScript语言DHTML,HTTP,1 HTTP概述HTTP的定义、功能、特点等。2 HTTP中的有关术语请求、响应、代理、缓存等3 HTTP原理4 HTTP格式,教学要求,了解HTTP的定义，功能和特点。熟悉HTTP相关术语。理解HTTP工作原理。了解HTTP消息的类型与一般格式。了解HTTP请求消息的格式，理解一些重要的HTTP请求方法和请求头字段。了解HTTP响应消息的格式，理解一些重要的HTTP响应状态码和响应头字段。了解HTTP消息中实体的定义，理解一些重要的HTTP实体头字段。,1 HTTP概述,HTTP的全称是HyperText Transfer Protocol，即超文本传输协议。一种应用层协议，基于TCP协议。规定了客户与服务器之间交互的各种消息。,1 HTTP概述,Web上的文件传输通过使用HTTP协议，客户可以从Web服务器上下载几乎所有类型的文件，包括HTML文件，图像/视频/音频等多媒体文件，Java Applet等对象，甚至应用程序等。同样，客户也可以向Web服务器上传几乎所有类型的文件。,HTTP,1 HTTP概述,基于Web的动态、交互应用通过使用HTTP协议，可以将用户在客户端输入的各种信息（例如，购物时需要的姓名、信用卡号等）提交给Web服务器，从而实现基于Web的动态、交互式应用。,1 HTTP概述,客户/服务器模式简单快速HTTP使用单个的连接来发送请求和传输文件。每个客户的请求指出了请求的方法以及该方法所作用的资源的地址或路径。,1 HTTP概述,无持久性连接HTTP 1.0协议在每次连接时只处理一个请求，服务器处理完客户的请求，并收到客户的应答后，即断开连接。HTTP 1.1中引入了永久连接，即每次连接可以处理多个请求。,1 HTTP概述,无状态HTTP协议是无状态协议，无状态是指协议对于事务处理没有记忆能力。对于开发基于Web的动态、交互应用而言，HTTP协议的无状态性则带来了不便。这些应用往往需要保留客户的状态。此时，应用程序的开发人员必须使用一些特别的方法来克服这一困难。,1 HTTP概述,不同目的的用户，掌握的程度不同:最终的浏览者：不需要了解Web应用开发人员：理解并熟练地利用Web客户端浏览软件和Web服务器的开发人员：熟练掌握并能付诸于实现,2 HTTP协议工作原理,HTTP协议是基于请求响应模式的。客户机向服务器发送请求。HTTP请求报文包含以下内容：请求方法（method），例如：get。统一资源标识符URI。协议版本号（version），通常为HTTP/1.0或HTTP/1.1。MIME类型,2 HTTP协议工作原理,服务器向客户发送响应。服务器在收到客户的请求后，按照客户的要求对指定资源进行适当处理（例如检索到客户所需的文件），并给予相应的响应。HTTP响应报文包含以下内容：一个状态行，包括：消息的协议版本号（version）一个成功或错误的状态码（success or error code）还可能会有实体的正文内容（body content）,2 HTTP协议工作原理,2 HTTP协议工作原理,2 HTTP协议工作原理,3 HTTP请求,3 HTTP请求,请求行包含以下内容：请求方法URIHTTP版本号请求行结束的回车换行（CRLF）,3 HTTP请求,请求方法(Method)描述对于指定的资源应该执行的动作。方法字符串是大小写敏感的。,3 HTTP请求,1.1.1 请求方法(Method)在HTTP/1.0中给出了3种请求方法：GETHEADPOST在HTTP/1.1中又引入了5种新的请求方法：PUTDELETETRACECONNECTOPTIONS,3 HTTP请求,1 GET方法GET方法的含义是获取由Request-URI指定的任意资源。如果Request-URI指向一个输出数据的过程（例：位于Web服务器上的CGI程序），那么该过程输出的数据将被作为响应消息的实体而返回，而不是返回过程的源程序。GET方法的响应有时可以被缓存系统保存。,有条件的GET方法当请求消息中包含“If-Modified-Since”等头字段时，GET方法的语义则转变为“有条件地获取”。“有条件的GET方法”意味着只有当指定的资源满足头字段的要求时才会被返回。可以使客户仅通过单个请求就更新缓存中的内容，或者避免重复下载缓存中已有的内容，从而减少不必要的网络流量。,3 HTTP请求,3 HTTP请求,捕获HTTP数据,部分的GET方法当请求消息中包含“Range”头字段时，GET方法的语义则转变为“部分地获取”。“部分的GET方法”意味着只传输指定资源的某些特定部分。可以使客户避免下载指定资源的已有部分，从而减少不必要的网络流量。,3 HTTP请求,3 HTTP请求,2 HEAD方法HEAD方法的响应消息中不包含消息体，即服务器并不返回客户所请求的资源，而是仅在响应消息的消息头中包含关于指定资源的一些元信息。这些元信息对资源属性作了描述，例如：最后修改时间、大小等。该方法常常用于测试服务器上资源的有效性（是否存在）、可访问性以及最近是否被修改过等特征。,3 HTTP请求,3 POST方法POST方法的作用是要求服务器将请求中包含的实体作为Request-URI指定资源的一部分。如果指定的资源是服务器上的一个数据处理过程（例如CGI程序），则服务器应将请求消息中包含的实体（通常是用户在HTML页面的FORM中提交的内容）作为数据块提交给该过程。如果指定的资源是新闻组（newsgroup）、BBS等，则服务器应该将请求消息中包含的实体作为一篇新的文章张贴到其上。如果指定的资源是数据库，则服务器应该将请求消息中包含的实体作为一条新记录添加到其中。,3 HTTP请求,GET方法和POST方法GET：当客户端要从服务器中读取文档时，使用GET方法。GET方法要求服务器将URL定位的资源放在响应报文的数据部分，回送给客户端。使用GET方法时，请求参数和对应的值附 加在URL后面，利用一个问号（“?”）代表URL的结尾与请求参数的开始，传递参数长度受限制。例如，/index.jsp?id=100&op=bind。POST：当客户端给服务器提供信息 较多时可以使用POST方法。POST方法将请求参数封装在HTTP请求数据中，以名称/值的形式出现，可以传输大量数据。,3 HTTP请求,4 PUT方法PUT方法的作用是将请求消息中包含的实体存储到由Request-URI所标识的服务器上的特定位置。如果Request-URI指向一个已有的资源，请求消息中包含的实体将被作为源服务器上资源的修改版本；如果Request-URI指向的资源并不存在，那么源服务器将创建该资源，并将请求消息中所包含的实体作为资源的内容。,3 HTTP请求,PUT方法与POST方法的区别使用POST方法的请求消息中的Request-URI标识着客户希望服务器使用哪个资源来处理请求消息中包含的实体。该资源可以是一个数据处理过程，或者是其它协议的网关。（新增数据用）使用PUT方法的请求消息中的RequestURI标识着客户希望将请求消息中包含的实体存储到服务器上的具体位置。(资源是存在的)（修改数据用）,3 HTTP请求,5 DELETE方法DELETE方法的作用是请求服务器删除Request-URI所指定的资源。当服务器成功地执行了操作后，向客户返回成功的状态码。,3 HTTP请求,1.1.2 请求URI请求URI用于指明请求方法所作用的资源。请求URI可以有四种形式，即：Request-URI=*|absoluteURI|abs_path|authority其中，absoluteURI和abs_path最为常用。AbsoluteURI：请求URI给出了绝对URI的形式表示，例如：GET http:/HTTP/1.0abs_path：请求URI给出的是资源的绝对路径，而资源所在的宿主机位置由请求头中的“Host”字段表示，例如：GET/pub/WWW/TheProject.html HTTP/1.1,3 HTTP请求,请求头中的各个字段使得客户可以向服务器传送有关请求的附加信息以及有关客户本身的信息。请求头的常见字段：Accept|Accept-Charset|Accept-Encoding|Accept-Language|Authorization|connection|content-length|From|Host|cookie|If-Modified-Since|If-Unmodified-Since|If-Match|If-None-Match|If-Range|Max-Forwards|Proxy-Authorization|Range|Referer|TE|User-Agent,3 HTTP请求,Accept该字段表示客户在接收响应时所能接受的特定媒体类型。MIME(Multipurpose Internet Mail Extensions)，多功能Internet 邮件扩充服务,是描述消息内容类型的因特网标准。MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。例如：“Accept:text/html”表示客户可以接受HTML文件“Accept:text/*”表示客户可以接受各种文本文件“Accept:*/*”则表示客户可以接受所有格式文件。HTTP协议中通过使用Accept等请求头字段来实现“服务器驱动的”内容协商。,3 HTTP请求,常见的MIME类型 超文本标记语言文本.html text/html xml文档.xml text/xml XHTML文档.xhtml application/xhtml+xml 普通文本.txt text/plain RTF文本.rtf application/rtf PDF文档.pdf application/pdf Microsoft Word文件.word application/msword PNG图像.png image/png GIF图形.gif image/gif JPEG图形.jpeg,.jpg image/jpeg au声音文件.au audio/basic MIDI音乐文件 mid,.midi audio/midi,audio/x-midi RealAudio音乐文件.ra,.ram audio/x-pn-realaudio MPEG文件.mpg,.mpeg video/mpeg AVI文件.avi video/x-msvideo GZIP文件.gz application/x-gzip TAR文件.tar application/x-tar 任意的二进制数据 application/octet-stream,3 HTTP请求,Accept-Charset客户在接收响应时所能接受的特定的字符集.Accept-Encoding客户在接收响应时所能接受的编码方法.Accept-Language 客户在接收响应时所能接受的语言。,3 HTTP请求,Host该字段表示所请求的资源所在的Internet宿主机及其端口位置。端口为缺省值80。,Connection表示是否需要持久连接。如，Keep-Alive或HTTP1.1（默认持久连接）。当网页有多个对象时，可以减少下载时间。,3 HTTP请求,CookieCookie是服务器在本地机器上存储一段小文本，用来在客户端保持状态,解决HTTP协议无状态的缺陷.服务器用HTTP头向客户端发送cookies，在客户终端，浏览器解析这些cookies并将它们保存为一个本地文件，它会自动将同一服务器的任何请求缚上这些cookies,3 HTTP请求,If-Modified-Since该字段表示如果所请求的实体在某个时间之后没有被修改过，就不要返回该实体。此时，返回的响应为304（notmodified），且响应中没有消息体。该字段的目的是以最小的代价来有效地更新缓存过的资源。If-Unmodified-Since与If-Modified-Since恰恰相反。它表示：如果所请求的资源在某个时间之后没有被修改过的话，那么就对该资源执行指定的操作方法。,3 HTTP请求,清空 缓存后访问,再刷新,响应，不带消息体,User-Agent该字段给出了发起请求的客户的有关信息，通常为浏览器名称和版本号。,3 HTTP请求,4 HTTP响应,4 HTTP响应,HTTP-Version SP Status-Code SP Reason-Phrase CRLFHTTP-Version请求版本Status-Code状态码：3位数字的整数，表示服务器试图理解并满足客户请求的结果。Reason-Phrase原因说明：为“状态码”提供一个简短的文本形式的描述。通常，“状态码”是供程序使用的，而“原因说明”是供用户理解的。,4 HTTP响应,HTTP响应状态码1xx：一般性消息，表示服务器收到客户的请求，正在进行后续处理。它们代表着服务器给出的一种暂时性的响应。此时，在响应消息中没有消息体。2xx：成功，表示服务器已经成功地接收，理解或接受了客户的请求。3xx：重定向，表示为完成请求客户代理还需要采取进一步的动作。4xx：客户错误，表示客户的请求有语法错误或不能满足。此时，服务器通常会在响应消息的消息体中对出错的原因进行解释。5xx：服务器错误，表示服务器无法完成一个正确地客户请求。,4 HTTP响应,HTTP常用响应状态码200 OK：表示服务器已经成功地完成了客户的请求，同时，结果资源已经在响应消息的消息体中返回。对于使用GET方法的客户请求而言，响应消息的实体中包含了客户所请求的资源（例如：文件或者脚本程序的输出等）；对于使用HEAD方法的客户请求而言，响应消息中仅包含了有关该资源的元信息（在实体头字段中）；对于使用POST方法的客户请求而言，响应消息的实体中包含了服务器执行特定动作后的结果（例如：脚本程序的输出等）；对于使用TRACE方法的客户请求而言，服务器将客户请求消息在响应消息的实体中原样返回。,4 HTTP响应,HTTP常用响应状态码201 Created：表示服务器已经成功地完成了客户的请求并创建了一个新的资源。通常，服务器在客户使用PUT方法提出请求时返回这种响应；此时，在响应消息中往往还包含有关新创建资源的元信息。206 Partial Content：表示服务器已经成功地完成了客户提出的“部分的获取”，并在响应消息的实体中包含了客户所请求资源的特定部分。同时，响应消息中还会包含有“Date”、“Content-Type”、“Content-Range”、“Cache-Control”等头字段。,4 HTTP响应,HTTP常用响应状态码301 Moved Permanently：表示客户使用Request-URI所请求的资源已经被移到了新的位置。此时，服务器在返回的响应消息中将新位置的URI保存在“Location”头字段中，任何对该资源的引用和访问都应该使用该新的URI。304 Not Modified：如果客户使用“有条件的GET”方法（例如：使用“If-Modified-Since”请求头字段）来提出请求，而所请求的资源没有被修改过，那么服务器将返回该状态码。此时，响应消息中可以包含Date”、“Cache-Control”等头字段，但是不能够包含消息体。,4 HTTP响应,HTTP常用响应状态码400 Bad Request：由于错误的语法而使得服务器无法理解客户的请求。客户必须对请求进行修改后才能够重新向服务器发送请401 Unauthorized：表示服务器需要对用户进行认证后才能够完成客户的请求。此时，服务器在响应消息中要给出“WWW Authenticate”头字段，以指明对于客户的请求服务器需要对用户进行哪些认证（例如：用户名和密码）。客户在收到该响应后，可以在请求中添加“Authorization”头字段，从而在重新发送请求给服务器的同时将用户认证消息也给服务器。,4 HTTP响应,HTTP常用响应状态码403 Forbidden：表示服务器能够理解客户对请求，但拒绝执行。此时，服务器可以在响应消息的实体中给出拒绝执行的理由。404 Not Found：服务器无法找到客户在请求中所指定的资源。,4 HTTP响应,HTTP常用响应状态码405 Method Not Allowed：表示服务器不允许客户对Request-URI所指定的资源执行特定的操作。此时，服务器会在响应消息中使用“Allow”头字段给出允许对资源所执行的各种操作。408 Request Timeout：表示客户没有在服务器规定的时间内给出请求。客户可以在其后的某个时刻重新向服务器发送请求。,4 HTTP响应,HTTP常用响应状态码407 Proxy Authentication Required：该状态码的作用与401基本类似，二者均表示需要用户提供认证信息。状态码407与401的区别在于：该响应是请求/响应链上的Proxy返回的。此时，Proxy在响应消息中要给出“Proxy-Authenticate”头字段，以指明Proxy需要对用户进行哪些认证（例如：用户名和密码）。客户在收到该响应后，可以在请求中添加“Proxy-Authorization”头字段，从而在重新发送请求时将用户认证消息也发给Proxy。,4 HTTP响应,HTTP常用响应状态码500 Internal Server Error：表示服务器遇到了一种无法预知的情况，使得它无法完成客户的请求。503 Service Unavailable：表示服务器当前由于临时性过载或者维护等原因而无法处理客户请求。该响应意味着这是一种临时的情况，在一定的时间后服务器就可能恢复。在响应消息中，服务器可以使用“Retry-After”头字段来指明服务器恢复所需要的时间。505 HTTP Version Not Supported：表示服务器不支持客户请求消息中包含的版本号。在响应消息的实体中，服务器可以给出它所支持的协议。,4 HTTP响应,关于服务器的各种信息发送给客户。这些附加信息往往是以“头字段”的形式包含在响应消息中。响应头的字段：Server Accept-Ranges|Age|ETag|Location|Proxy-Authenticate|Retry-After Vary|WWW-Authenticate,4 HTTP响应,Server有关源服务器处理客户的请求的服务器软件信息。通常为软件名称和版本号。如，Microsoft IIS会给出头字段“Server:Microsoft-IIS/5.0”；Unix上常用的Web服务器Apache则会给出头字段“Apache/1.3.14(Unix)PHP/4.0.3”。对于客户而言，知道了服务器的信息可以更好的定制请求消息以充分利用服务器的能力并避开服务器的缺陷。但是，公共服务器软件信息也会给服务器带来安全隐患。某些恶意的客户在知道了服务器的软件信息后，可以利用该软件已知的安全漏洞来攻击服务器。,5 HTTP实体,所谓的实体(Entity)是指作为请求或者响应消息的有效载荷而传输的信息。实体由“实体头”和“实体正文”组成。有些消息仅能够包含实体头而不能够 包含实体正文（例如：HEAD方法的响应消息）有些消息既不能够包含实体头也不能 够包含实体正文（例如使用GET方法的请求消息）。,5 HTTP实体,实体头字段定义了资源的元信息（metainformation，即关于信息的信息）。实体头字段分为10余种。即：entity-header=Allow|Content-Encoding|Content-Language|Content-MD5|Content-Length|Content-Location|Content-Range|Content-Type|Expires|Last-Modified,5 HTTP实体,Allow该字段列出了资源所支持的操作的集合，其目的是将有关资源的合法操作通知接收者。示例：“Allow:GET,HEAD,PUT”，表示允许客户对资源进行GET、HEAD和POST操作。当客户想在服务器上创建或者更新资源时，会向服务器发送带有PUT方法的请求消息，此请求消息中通常会包含“Allow”字段，这样，客户就可以给出该新建或者更新后的资源所支持的方法。当客户使用某种服务器不支持的方法来操作资源时，服务器会给出状态码为405的响应，同时会在响应消息中使用“Allow”字段来通知客户对该资源允许使用哪些操作方法。,5 HTTP实体,Content-Type该字段指出了发送给接收者的消息中所包含的实体正文的媒体类型，这样接收者就能够根据媒体类型对资源进行适当的处理。HTTP协议使用Internet Media Types来描述资源的媒体类型，其格式为：media-type=type“/”subtype*(“;”parameter)。其中，type是表示媒体类型的字符串subtype是表示媒体子类型的字符串parameter是对媒体类型的进一步说明或限定，它采用“属性/值”对的格式。例如：“Content-Type:text/html;charset=ISO-8859-4”表示资源的类型为“text”，子类型为“html”，且所使用的字符集为“ISO-8859-4”。,5 HTTP实体,Content-Encoding该字段是资源媒体类型的限定符。它表示对消息中的实体采用了何种压缩方法。有时，在存储或者传送资源时会对该资源进行压缩，从而减少其占用空间或者加快传送速度。“Content-Encoding”字段的目的就是为了通知接收者所传送资源的压缩方法。这样，接收者就能够采用适当的方法对资源进行解压缩，在此基础上再根据资源的媒体类型进行相应的处理。示例：“Content-Encoding:gzip”表示消息中包含的实体使用gzip方法压缩。,5 HTTP实体,Content-Language该字段表示消息中包含的实体的自然语言。该字段的目的是使得最终用户可以根据自己在语言上的需要来选择合适的资源。例如：“Content-Language:en”表示该资源适合于英语用户。Content-Length该字段表示消息中所包含实体正文的大小（以字节为单位）。例如：“Content-Length:500”说明资源大小为500bytes。,5 HTTP实体,Content-Range该字段表示当前所发送的实体是整个资源的一部分，同时指出了该部分在整个资源中的位置。当客户使用“部分的GET”方法时，服务器的响应消息中通常会包含该字段。例如：“Content-Range:bytes 500-999/1234”表示当前消息中包含的实体是长度为1234bytes的资源中从第500byte到第999byte的一部分。Last-Modified该字段表示消息中所包含资源的最后修改日期和时间。例如：“Last-Modified:Wed,15 Nov 2009 04:58:08 GMT”表示资源的最后修改日期为：“Wed,15 Nov 2009 04:58:08 GMT”。客户通常使用该字段来判断自己目前所拥有的资源是否为最新版本。如果是，那么就没有必要重新下载资源，如果不是，那么再使用GET方法来获取最新版本。,5 HTTP实体,实体正文（entity-body）为资源内容本身。当消息中包含实体正文时，实体正文的数据格式和编码由实体头字段“Content-Type”、“Content-Encoding”的取值而决定。即：entity-body:=Content-Encoding(Content-Type(data)其中，“Content-Type”给出数据的媒体类型；“Content-Encoding”则给出了通常出于压缩等目的而附加于数据之上的内容编码。,小结,HTTP客户与服务器之间的交互是由消息驱动的。由客户发送一个请求消息开始，到服务器返回一个响应消息结束，客户所需要访问的资源。HTTP协议从语法和语义两个方面对客户与服务器之间所交换的消息进行定义和描述。利用HTTP协议中定义的各种消息，客户、服务器除了实现资源共享和交换。,参考资料,IETFs home page for/Berners-Lee,T.,Fielding,R.and H.Frystyk.Hypertext Transfer Protocol-HTTP/1.0,RFC 1945,May 1996.R.Fielding,J.Gettys,J.C.Mogul,H.Frystyk,L.Masinter,P.Leach,T.Berners-Lee.Hypertext Transfer Protocol-HTTP/1.1,RFC 2616,June 1999 HTTP1.1,HTTP协议-作业,利用网络嗅探器Sniffer或Ethereal捕获HTTP协议消息，并分析其工作过程，熟悉HTTP请求和响应的头部格式和相关信息。,Web编程基础,HTTP协议HTML语言CSSJavaScript语言DHTML,HTML,1 HTML简介2 HTML基础3 参考资料,1 HTML简介,HTML（HyperText Markup Language，简记为HTML）超文本标记语言，是Tim Berners-Lee 在 CERN(在日内瓦的欧洲粒子物理实验室)发明的。,它能够将信息以超文本的形式组织起来，从而便于用户浏览用户可以快速地从一个页面移到另一个页面。通过使用一系列的标记（Tag）将文档表示成各种不同元素的集合（例如：标题、段落、列表、图片、超链等）。可以为各类（各个）逻辑元素指定展现风格（例如：颜色、字体。,1 HTML简介,超文本作为一种信息管理方式，其本质含义是非线性的文档组织。在这种方式中，信息被组织在一系列离散的结点（node）中，结点之间通过链（link）建立联系，从而形成网状的信息结构。,1 HTML简介,信息发布信息发布是HTML的设计初衷和基本功能。发布联机文档，其中可以包含文本、图像、声音等多种媒体信息。在信息之间建立超链接，以反映彼此之间的关联，便于用户浏览。网上应用提供表单（form）以供用户与远程服务器之间开展事务（transaction）型应用，例如：检索信息，定购产品等。在文档中嵌入spread-sheet、video clip等各种应用，这些应用程序可以使用ActiveX Control，Script、Java Applet等手段来实现。,1 HTML简介,HTML不是程序语言，它只是一种标记语言，一种文本语言。它只是在一些对象(如文本、图片、表格等)中加入各种各样的标记，从而使这些对象以这些标记所定义的形式显示出来。任何文本编辑器都可以编辑它，只要能将文件另存成ASCII纯文本格式即可。需要使用Web浏览器。浏览器就相当于HTML语言的翻译程序，负责解释HTML文件各种符号的含义。HTML语言独立于各种平台。它能独立于各种操作系统平台(如UNIX，Windows等)。,1 HTML简介,1 HTML简介,显示“Hello World！”的网页文件代码Hello World!Hello World!This is my first page.,2 HTML基础,HTML语法 HTML文档的结构 字体 文字布局 图像 表单 表格 多窗口页面 文字的移动,基本的HTML语法所有的标记都必须用尖括号(即“”)括起来。大部分标记是成对出现的，包括开始标记和结束标记。结束标记与开始标记名称相同，必须用一个斜线符号开头。所有被标记包围的对象，如文本、图像、表格等都按照标记定义的格式显示。例如：欢迎访问本网页！有少数标记允许只有开始标记没有结束标记。例如：断行用的标记：分段用的标记：标记不区分大小写，但默认情况下，ASP.NET 2.0中都用小写字母表示。,2 HTML基础,标记的属性控制标记的作用。设置或改变属性时，将属性名=值放在标记名的同一个尖括号中，而且所有属性都放置在开始标记的尖括号内。例如：本段落右端对齐 其中p是段落标记，align代表“对齐方式”，是属性名。right代表“右边”，是属性的值。这个标记的含义是将字符串放在浏览器的右端。其中hr是水平线标记，size是水平线的高度，width是水平线的宽度，align为对齐属性。此行代码表示增加一条横线，水平线的高度为6，宽度为160，显示于浏览器的中间。,2 HTML基础,注释语句编译器将不解读注释部分，即注释不在浏览器窗口中显示出来。注释语句的格式是：这里不妨将它看作一种特殊的标志。例如：,2 HTML基础,2 HTML基础,Hello World!,Hello World!,This is my first page.,标志HTML文档的开始和结束,头信息包含标题、CSS样式表、JavaScript脚本等不在浏览器窗口中显示,HTML文档正文在浏览器窗口中显示,超文本文件分析,一个基本的HTML文档通常包含以下三对顶级标记。1.HTML标记：.HTML标记是全部文档内容的容器，是开始标记，是结束标记，它们分别是网页的第一个标记和最后一个标记。.标记是可选的，但最好不要省略这两个标记。2.首部标记：.首部标记用于提供与网页有关的各种信息。在首部标记中，可以使用和标记来指定网页的标题，使用和标记来定义CSS样式表，使用和标记来插入脚本。3.正文标记：.正文标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML对象均位于该标记中。,2 HTML基础,2 HTML基础,Hello World!Hello World!This is my first page.,2.1 文档首部.TITLE元素每个HTML文档在文档头部分必须有一个TITLE元素，该元素可用于概括文档的内容，浏览器通常将TITLE元素显示在文档窗口的标题中。title属性使用该属性来为元素提供概括信息，浏览器可以采用多种方式来显示该属性。,2 HTML基础,META元素meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。,2 HTML基础,META元素：name属性1.说明生成工具。2.向搜索引擎说明你的网页的关键词。3.告诉搜索引擎你的站点的制作的作者。,2 HTML基础,META元素：name属性4.其中的属性说明如下：设定为all：文件将被检索，且页面上的链接可以被查询；设定为none：文件将不被检索，且页面上的链接不可以被查询；设定为index：文件将被检索；设定为follow：页面上的链接可以被查询；设定为noindex：文件将不被检索，但页面上的链接可以被查询；设定为nofollow：文件将不被检索，页面上的链接可以被查询。,2 HTML基础,META元素：http-eqiv属性1.和 说明主页制作所使用的文字以及语言2.定时让网页在指定的时间n内，跳转到页面http:/yourlink；3.用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。必须使用GMT时间格式；4.用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出。,2 HTML基础,2.2 文档正文.正文标记包含了文档的内容，文字、图像、动画、超链接以及其他HTML对象均位于该标记中。正文标记有下列属性。BACKGROUD：指定文档背景图像的URL地址。BGCOLOR：指定文档的背景颜色。TEXT：指定文档中文本的颜色。LINK：指定文档中链接的颜色。关于链接的介绍请参阅后面章节。VLINK：指定文档中已被访问过的链接的颜色。ALINK：指定文档中正被选中的链接的颜色。ONLOAD：指定文档首次加载时调用的事件处理程序。ONUNLOAD：用于指定文档卸载时调用的事件处理程序。颜色属性的值有两种表示方法：使用颜色名称来指定，例如红色、绿色和蓝色分别用red、green和blue表示；使用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。,2 HTML基础,3.1 标题字体(Header).#=1,2,3,4,5,6今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！-这些标记显示黑体字。-这些标记自动插入一个空行，不必用 标记再加空行。因此在一行中无法使用不同大小的字体。,2 HTML基础,3.2 字体大小.#=1,2,3,4,5,6,7 今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！,2 HTML基础,3.3 物理字体:black:italic:underline and so on,2 HTML基础,3.4 字体颜色.R、g、b（红绿蓝，red-green-blue,RGB)分别用 16 进制的值（0f）来表示。,2 HTML基础,4.1 行的控制段(Paragraph)你好吗？很好。你好吗？很好。,2 HTML基础,换行 你好吗？很好。你好吗？很好。不换行 content,4.2 文字的对齐.#=left,center,right,2 HTML基础,4.3文字的分区(Division)显示.Can you feel happiness without unpleasant?Please show me your smile.,2 HTML基础,4.4 列表 无序列表.TodayTommorow 有序列表.TodayTommorow 定义列表(Definition lists).TodayToday is yesterday.TomorrowTomorrow is today.,2 HTML基础,5.1 超链接的含义“超链接”是HTML语言的精华。HTML使用标签来创建一个链接到其他文件的链接，它可以指向网络上的任何资源，包括HTML页面、声音、图像、视频等。如，欢迎访问暨南大学其中target属性指定在那里打开要访问的页面。,2 HTML基础,5.2 超链接的形式文件超链接：链接的目标端点是一个文件。锚点超链接：链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。E-mail链接：可以启动电子邮件客户端程序(如Outlook)，并允许访问者向指定的地址发送邮件。图像超链接：在图像上建立若干个区域称为“链接区”，通过它可以跳转到其他目标端点去。,2 HTML基础,5.3 路径绝对路径：也称为绝对URL，给出目标文件的完整URL地址。相对路径：也称为相对URL，是指以当前文档所在位置为起点到目标文档所经过的路径。使用时省去当前文档与目标文档完整URL中的相同部分，只留下不同部分。根相对路径：是指从站点根目录到被链接文件的路径。使用这种路径是指定站点内文档链接的最好方式。,2 HTML基础,5.4 常见链接的创建(1)创建文件链接(2)创建锚点链接(3)创建邮件链接(4)创建图像超链接,2 HTML基础,(1)创建文件链接使用A标记来创建超链接，基本语法格式如下：文本基本属性：HREF：必选项，用于指定目标端点的URL地址，可以包含一个或多个参数。如果是与站点内页面链接，则为文件名。TARGET：可选项，用于指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开。省略该属性，则目标文档将取代包含该超链接的文档。“_blank”指定将链接的目标文件加载到未命名的新浏览器窗口中；“_parent”指定将链接的目标文件加载到包含链接的父框