版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第3章HTTP协议及其开发与前端开发基础教学目标教学重点教学过程第2页教学目标理解HTTP的基本原理及运行机制了解HTTP应用开发的基本方法掌握HTML的用法第3页教学重点HTTP的运行机制HTML文档的编写第4页教学过程HTTP协议HTML基础HTML的基本语法HTML实例第5页3.1HTTP协议
浏览网页时在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator，统一资源定位符）在浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页第6页3.1HTTP协议
http://www.njupt./china/index.htm1.http://：代表超文本传输协议，通知某台服务器显示Web页，通常不用输入2.www：代表一个Web(万维网)服务器3.njupt.：这是装有Web服务器的域名，或站点服务器的名称4.China/：为该服务器上的子目录，就好像个人电脑上的文件夹5.Index.htm：index.htm是上述文件夹中的一个HTML文件(网页)第7页3.1HTTP协议
HTTP0.9：最初版本，只支持纯文本HTTP1.0：无状态，可交互，效率较低HTTP1.1：允许保持连接，更高效HTTP1.2：适合于移动环境，支持负载均衡等HTTP2.0：支持多路复用、头部压缩、随时复位、服务器端推送等功能HTTP3.0：主要改进包括，基于QUIC（UDP）、多路复用升级、错误恢复和安全性第8页3.1HTTP协议HTTP协议(HypertextTransferProtocol)，即超文本传输协议它用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等第9页3.1.2
HTTP的宏观工作原理
客户机（IE）服务器【server】请求响应统一资源标识符(URL)协议版本号MIME信息（请求修饰符、客户机信息和可能的内容）状态行（信息的协议版本号、一个成功或错误的代码）MIME信息（服务器信息、实体信息和可能的内容）第10页客户机【IE】服务器【server】代理网关隧道响应请求请求响应3.1.2
HTTP的宏观工作原理
第11页1.建立连接2.发送请求3.发送响应4.关闭连接客户机【IE】服务器【server】请求建立连接发送响应发送请求关闭连接如果，采用是带有代理的交互过程，则在此过程中需要增加一个中介，完成请求和响应时的中转工作3.1.3
HTTP协议基础3.1.3
HTTP协议基础第13页3.1.4HTTP应用开发方法HTML的基本用法HTTP协议从通信的角度贯穿了应用开发的多个层次，包括了：HTTP客户程序、HTTP服务器程序、服务器端应用程序第14页3.1.5HTTP应用的开发使用网络层的编程接口，如SocketAPI等使用应用层API，如InternetTransfer控件第15页3.1.6
S-HTTP、SSL及TLS安全超文本转移协议(S-HTTP)结合HTTP而设计的消息的安全通信协议，特征是浏览器里面显示的地址开头为：https://安全套接层(SSL)为网络通信提供安全及数据完整性的一种安全协议SSL记录协议(SSLRecordProtocol)和SSL握手协议(SSLHandshakeProtocol)第16页3.1.6
S-HTTP、SSL及TLS传输层协议(TLS)两个通信应用程序之间提供保密性和数据完整性包括TLS记录协议和TLS握手协议最新版本的TLS是SSL的后续版本，HTTPS=HTTP+TLS第17页3.2前端开发基础HTML简介超文本超文本是一种信息管理方式，它的本质含义是非线性的文档组织形式；是采用了符合人脑思维模式的联想机制对庞大的信息资源进行索引的一种非线性结构超媒体＝超文本＋多媒体HTML一种国际化标准语言，它用于在Web上发布超文本信息，是一种基于SGML，公开的资源描述格式第18页3.2前端开发基础第19页3.2
前端开发基础HTML标记语法及文档结构HTML只是一个纯文本文件，由“显示内容”及“控制语句”两部分组成规范的标记方法为： <标签属性1=属性值属性2=属性值…>受影响内容</标签>字符引用为了解决与标签字符冲突的问题，分为：数值字符引用和字符实体引用
注释方法<!--注释内容-->第20页HTML文件的总体结构
<!DOCTYPEhtml><html><head><title>文件标题</title>:</head><body>::</body></html>表头区主体区以<html>开头以</html>结尾3.2
前端开发基础第21页3.2
前端开发基础HTML网页的编写和测试方法编写HTML文件，保存为后缀为html的文件双击打开该文件，即可在浏览器中查看<!DOCTYPEhtml><html><head><title>myfirstpage</title></head><body>我的第一个网页</body></html>第22页3.2
前端开发基础<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可通知浏览器文档使用了什么HTML或XHTML规范HTML4：Strict，Transitional，FramesetXML
：Strict、Transitional，Frameset为了兼容，很多网站都采用了： <!doctypehtml>
方式
第23页3.2
前端开发基础编辑网页通常有两种方式文本编辑方式，如：VSCode，SublimeText，甚至于Windows的记事本等所见即所得方式，如：FrontPage，Dreamweaver
等建议：读者学习HTML编写时，初学时使用文本编辑方式，这样能加快熟悉HTML标签和相关用法；之后转入使用高级工具，加快编写效率第24页3.3HTML的基本应用标题和段落标题文字标签段落标签强行换行标签<BR>、设置段落标签<P>、显示预排格式标签<PRE>、分区显示标签<DIV>文字标签<FONT>文字的大小、字体、字型、颜色
列表无序列表、有序列表、定义列表、列表嵌套
第25页3.3HTML的基本应用超链接锚点标签<A> <Ahref="链接的目标地址"name="链接名称字符串"target="打开窗口方式">浏览器中显示的热点</A>指向其他页面的链接 <Ahref="目标地址的路径/目标文件名.html">热点文本</A>
创建指向本页中的链接
<Ahref=“#书签名”>热点文本</A>
创建指向其它类型文件的链接 <Ahref="下载文件名">热点文本</A>
创建发送电子邮件的链接 <Ahref="mailto:E-mail地址">发送邮件的热点文本</A>第26页3.3HTML的基本应用表格表格的标签为<table>，行的标签<tr>，表项标签<td>、表头<th>跨多行、多列的表项使用<tr>、<td>、<th>标签的colspan和rowspan属性，制作跨多行(合并行)和跨多列(合并列)的表格表格在页面中的属性在页面中的位置、颜色和图片背景表格的分组显示及对齐
第27页3.3HTML的基本应用图像设置网页的背景选择背景色、指定背景图片、
插入图像 <imgsrc="图片文件名"alt="简单说明"width="图片的宽度"height="图片的高度"border="边框宽度"hspace="水平方向空白"vspace="垂直方向空白"align="对齐方式">设置图片的布局用图片作为超链接
<ahref="链接到的文件名"><imgsrc="图片文件名"></a>在图像上定义热区第28页3.3HTML的基本应用音频和视频通过<BGSOUND>标签实现背景音乐
<BGSOUNDsrc="声音文件"loop="播放次数">通过<IMG>标签的dynsrc属性可以向网页中加入视频或者<video>标签
<IMGsrc="图像文件"dynsrc="视频文件.avi"loop="次数"loopdelay="时间"start="值"controls><videosrc="视频文件.mp4"width="320"height="240"controls="controls">自动刷新页面：在页面打开停留几秒钟后，自动转向其它网页<METAhttp-equiv="Refresh"content="秒数;url=新页面">第29页3.3
HTML的基本应用框架应用(frame以及iframe标签）通过使用<A>的target属性，可实现框架间的链接
<ahref="目标文件名.html"target="框架名">热点文本</a>_blank没有名字的浏览器窗口打开_self在当前的框架打开_top在整个浏览器窗口打开_parent在父窗口打开第30页3.3
HTML的基本应用使用DIV标签+CSS技术的框架方案<style>body{font-family:Verdana;font-size:14px;margin:0;}#container{margin:0auto;width:100%;}#header{height:100px;background:#9c6;margin-bottom:5px;}#mainContent{height:500px;margin-bottom:5px;}#sidebar{float:left;width:200px;height:500px;background:#cf9;}#content{margin-left:205px!important;margin-left:202px;height:500px;background:#ffa;}</style><divid="container"><divid="header">这是上部区域</div><divid="mainContent"><divid="sidebar">这是左侧区域</div><divid="content">2列左侧固定，右侧自适应宽度+头部。可改变浏览器的宽度来进行测试。
</div></div></div>第31页3.3
HTML的基本应用表单：网页上具有可输入表项及项目选择等控制所组成的栏目称为表单可实现网页的交互操作<FORMaction="mailto:mail地址或网址"method=get|post><INPUTtype="表项名"name="名"size=xmaxlength=y>…</FORM>其中的“表项名”可以是：text，password，checkbox，radio，image，hidden，submit，reset；它们对应不同的表单控件第32页3.3
HTML的基本应用表单实例：文字和密码的输入<HTML><HEAD><TITLE>输入文本和密码</TITLE><HEAD><BODYtext=blue><CENTER><H2><FONTcolor=red>个人资料</FONT></H2></CENTER><FORMaction="mailto:YourMailAdd@YourM"memethod=POST>
姓名:<INPUTtype=textname=姓名><BR>
主页的网址:<INPUTtype=textname=网址value=http://><BR>
密码:<INPUTtype=passwordname=密码><BR>
<INPUTtype=submitvalue="发送"><INPUTtype=resetvalue="重设"></FORM></BODY></HTML>第33页3.3
HTML的基本应用Canvas应用H5移除了包括：<acronym>、<applet>、
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论