精华内容
下载资源
问答
  • web程序设计和网页设计
    千次阅读
    2018-12-24 22:23:00

    Web概述

    Web的任务就是向人们提供多媒体网络信息服务

     web技术主要有三点:超文本传输协议(HTTP)、统一资源定位符(URL)、超文本标签语言(HTML)

    超文本传输协议:是客户端浏览器或其他程序与Web服务器之间的应用层通信协议,用于实现客户端和服务器端的信息传输

    统一资源定位符:用于完整的描述Internet上网页和其他资源地址的一种表示方法,实现互联网信息的定位统一标识。简单地说,URL就是Web地址,俗称网址;URL主要由三部分组成:协议类型、存放资源的域名或主机IP地址和资源文件名

    语法格式:

    protocol://hostname[:port]/path/[;parameters][?query]#fragment 

    protocol(协议):指定使用的传输协议,最常用的是HTTP协议

    hostname(主机名):是指存放资源的服务器的域名或IP地址;

    port(端口号):为可选项,省略时使用默认端口,如HTTP协议的默认端口是80;

    path(路径):由零或多个“/”符号隔开的字符串,一般用来表示主机上的一个目录或文件地址;

    parameters(参数):为可选项,可以用于指定特殊参数;

    query(查询):为可选项,用于给动态网页传递参数,可以有多个参数,用“&”符号隔开,每个参数的名和值用“=”符号隔开;

    fragment:字符串,用于指定网络资源中的片断。例如,一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。
     

    超文本标签语言:是目前应用最为广泛的语言,也是构成网页文档的主要语言特点如下

    简易性

    可扩展性

    平台无关性

     一个基本的HTML文档由HTML、HEAD和BODY三部分组成

    HTML语法

    标签

    标签必须是闭合的。闭合就是标签的最后要有一个“/”,来表示结束,但不一定成对出现 ,例如<br/>单独出现,表示换行。

      标签的大小写无关。HTML语言中不区分大小写。

    属性
    语法格式

    <标签名 属性名1 = "属性值" 属性名2 = "属性值">内容</标签名>

    注释

    <!-- 注释内容 --> 

    Html常用标签

    标签HTML语言中最基本的单位,也是HTML语言最重要的组成部分

    meta标签

    文本标签

    标题标签

    <h# align="对齐方式">内容</h#>

    字体标签

    <font face="字体类型" size="字号 " color="颜色 ">内容</font>

    分隔标签

    文字分隔标签

    强制换行标签<br>

    强制分段标签<p>

    分割线标签<hr>

    列表

    列表分为四类:

    无序列表(<ul>)

    有序列表(<ol>)

    定义列表(<dl>)

    嵌套列表

    站内链接通常是使用相对路径,当然也可以使用绝对路径,但是当网站的目录有所调整的时候,绝对路径可能就会出现问题

    邮件链接

    <a href="mailto:邮件地址">内容</a>

    锚链接

    <a href="#锚点名称">内容</a>

    图像

    <img src="url" />

    超链接(hyperlink)常见的超链接形式有文字超链接、图像超链接和热区超链接三种

    第2章  表格、表单和框架

    表格标签的基本结构

    <table>
    	<tr>
    		<td>单元格内容</td>
    		<td>单元格内容</td>
    		<!-- 更多单元格 -->
    	</tr>
    	<!-- 更多行 -->
    </table>
    

    <table>标签来创建表格,<table>标签内包含了表名和表格本身内容的代码。
    <tr>表示行,行由若干单元格构成。
    <td>标签定义了一个单元格,嵌套于<tr>标签之中。 
    多个单元格结合在一起构成了行,多个行结合在一起就构成了一个表格。 
     

    HTML中有10个与表格相关的标签
    <table>标签:定义一个表格。
    <caption>标签:定义一个表格标题,必须紧随table标签之后,且每个表格只能包含一个标题,通常这个标题会居中显示于表格上部。
    <th>标签:定义表格内的表头单元格。th元素内部的文本通常会呈现为粗体。
    <tr>标签:在表格中定义一行。
    <td>标签:定义表格中的一个单元格,包含在<tr>标签中。
    <thead>标签:定义表格的表头。
    <tbody>标签:定义一段表格主体(正文),使用<tbody>标签,可以将表格中的一行或几行合成一组,从而将表格分为几个单独的部分,一个<tbody>标签就是表格中的一个独立的部分,不能从一个<tbody>跨越到另一个<tbody>中。
    <tfoot>标签:定义表格的页脚(脚注)。
    <col>标签:定义表格中针对一个或多个列的属性值。只能在表格或colgroup标签中使用此标签。
    <colgroup>标签:定义表格列的分组。通过此标签可以对列进行组合以便进行格式化,此标签只能用在<table>标签内部。<table>标签来创建表格,<table>标签内包含了表名和表格本身内容的代码 
     

     

    表单由三部分组成:

    表单标签

    表单域

    表单按钮

    创建表单三个要素:表单控件、action属性和method属性

    表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择和文件上传框,用于采集用户输入或选择的数据

    表单按钮分为三类:提交按钮、重置按钮、普通按钮

     

    第三章 CSS样式

    样式规则

    CSS定义由三部分构成:选择符(selector)、属性(properties)、属性的取值(value)

    选择符

    选择符用于指定需要修饰的元素

    常用的选择符主要有三类:

    HTML选择符

    ID选择符

    类选择符

    CSS的使用方式

    内嵌样式  内部样式表  外部样式表

    伪对象

    首行伪对象

    selector:first-line {property:value...} 
    

    首字母伪对象

    selector : first-letter {property:value...} 
    

    CSS样式属性

    文本属性

    /*文本属性设置*/
    p{line-height:40px;word-spacing:4px; text-indent:30px;
        text-decoration:underline;text-transform:lowercase;margin:auto}
    

    文字属性

    font-size font-family font-style text-align

    /*文字属性设置*/
    	h3{font-family:隶书;font-weight:bolder;color:green;margin:auto}
    	p{font-size:14px;font-style:italic;color:#8B008B;font-weight:bold}
    

    背景属性

    background background-image background-color

    /*背景属性设置*/
    body{background:url(images/background.jpg);background-repeat:repeat-x}
    

    定位属性

    边框属性

    边框属性用来设置对象边框的颜色、样式和宽度

    CSS页面美化

     

    第4章 页面布局

    DIV层

    页面布局(表格布局、框架布局、DIV+CSS布局

    表格布局:布局容易、快捷且兼容性好;改动不方便,彼此之间容易受影响

    框架布局:由框架和框架集两部分组成;框架是一种常用的网页布局排版工具

    3种布局视图:标准、布局和扩展

    Web网页标准构成包括:结构、外观、行为

    DIV布局的优点:网页代码精简、提高页面下载速度、表现和内容相分离;缺点:过于灵活,比较难控制

     

    第五章 JavaScript基础

    JavaScript是一种基于对象和事件驱动的脚本语言,目的增强HTML页面的动态交互性

    特点:嵌套在HTML中  环境支持 解释执行  弱类型语言 基于对象 事件驱动 跨平台性

    编写JavaScript步骤
    利用任何编辑器(如Dreamweaver或记事本)创建HTML文档 。 
    在HTML文档中通过<script>标签嵌入JavaScript代码。 
    将HTML文档保存为扩展名是“.html”或“.htm”的文件,并查看结果。
     

    <script language="javascript">
    	JavaScript语句
    </script>
    

    引用Javascript文件

    <script type="text/javascript" src="url"></script> 
    

    JavaScript数据类型

    常量:

    数值型常量

    字符串型常量

    布尔型常量

    变量:

    命名规则  
    变量名必须以字母或下划线开头,其后可以跟数字、字母或下划线等;
    变量名不能包含空格、加号、减号等特殊符号;
    JavaScript的变量名严格区分大小写;
    变量名不能使用JavaScript中的保留关键字。字符串型常量 
    JavaScript是一种弱类型的语言、变量定义时不必指明具体类型,对于同一变量可以赋不同类型的变量值

    根据变量的作用域可分为全局变量和局部变量

    注释分为单行注释和多行注释

    运算符分欸算术运算符、比较运算符和逻辑运算符

    程序控制结构包括分支结构、迭代结构和转移语句

    两种函数为内置的系统函数和用户自定义函数

     

    第六章 JavaScript对象

    JavaScript核心对象

    JavaScript语言是一种基于对象的语言,其核心对象主要有:

    数组对象:数组是一种常用的额数据结构,可用来存储一系列数据

    字符串对象:封装了一个字符串类型的值,并且提供了相应的操作字符串的方法

    日期对象:可用来获取系统时间,并设置新的时间

    数学对象提供了一些数学运算的属性和方法

    自定义对象 

    原型 

    原型(prototype)是一种创建对象属性和方法的方式,所有的JavaScript对象都只拥有只读的prototype属性

    对象创建 

    对象的创建主要有JSON方式、构造函数方式、原型方式、混合方式

    JSON是一种轻量级的数据交换格式,适合服务器和JavaScript之间的数据交互

     

    4、写一个函数判断字符串是否是回文字符串

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题文档</title>
    <script type="text/javascript"> 
    <script language="JavaScript">
    function isPalindrome(str){
        if (typeof str !== 'string' || str.constructor !== String) {
    	return false;
        }
    
        var len =str.length;
        for(var i=0; i<len; i++){
    	if (str[i] !== str[str.length-i-1]) {
    	    return false;
    	}
        }
        return true;
    }
    document.write(isPalindrome('addddda'));
    </script> 
    </head>
    <body> 
    </body>
    </html>
    

    5、创建一个表示学生的自定义对象,要求包含学号、姓名、性别、生日的属性,以及上课、上自习、考试的方法

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题文档</title>
    <script language="JavaScript">
    var student={
    	name:"wang",
    	id:"2016",
    	sex:"boy",
    	birthday:"1998",
    	show:function(){
    		document.write("name:"+this.name+"<br/>");
    		document.write("sex:"+this.sex+"<br/>");
    		document.write("id:"+this.id+"<br/>");
    		document.write("birthday:"+this.birthday+"<br/>");
    		},
    	exam:function(){
    		document.write("examing"+"<br/>")
    			},
    	class:function(){
    		document.write("classing")
    			}
    
    	};
    	student.show();
    	student.exam();
    	student.class();
    </script> 
    </head>
    <body>
    </body>
    </html>

    通过构造函数的方式创建JS对象

    <html>
    <head>
    	<title>构造函数创建对象</title>
    	<script language="javascript">
    	    function User(){
    		     this.name = "张三";
                 this.age = 23;
                 this.address = 
                 {
                      city:"青岛",zip:"266071"
                 };
                 this.email = "iteacher@tech-yj.com";
    		     this.showInfo = function(){
    			 
    			   document.write("姓名:"+this.name+"<br/>");
    			   document.write("年龄:"+this.age+"<br/>");
    			   document.write("地址:"+this.address.city+"<br/>");
    			   document.write("邮编:"+this.address.zip+"<br/>");
    			   document.write("E-mail:"+this.email+"<br/>");
    			 
    			 }
    		   }; 
    		   var user = new User();
    		   user.showInfo();
    
    	</script>
    </head>
    <body></body>
    </html>

     

     第七章 DOM编程(document object model)

    DOM特性

    DOM是一种与浏览器、平台、语言无关的接口,编程人员可以访问页面中其他的标准组件

    DOM是以层次结构组织的节点或信息片段的集合

    DOM解决了Netscape的JavaScript和Microsoft的JavaScript之间的冲突

    对于每一个页面

    浏览器都会自动创建Window、Document、Location、Navigator和History对象

    Document对象是指浏览器窗口中现实的HTML文档,核心地位,包含的属性是整个页面的属性,如表单对象、背景颜色、标题

    Location对象用于提供当前打开的窗口的URL或特定框架的URL信息

    Navigator是一个独立的对象,用于提供用户所使用的浏览器以及操作系统等信息

    第八章 表单验证及特效

    表单验证可以减轻服务器负担,提高系统效率

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    更多相关内容
  • Web网页程序设计+ASP动态网站程序设计_ppt教学课件.zip
  • Web程序设计(第5版)

    热门讨论 2012-01-18 09:41:36
    本书全面介绍了建立维护Web站点必需的工具技术,包括Internet万维网的起源与演变、Web客户端服务器端开发中的基本概念,以及与Web开发相关的主要编程语言工具等。本书对第4版的内容做了大量细致的修改并且...
  • web程序设计_第4章__网页页面设计 共69页.ppt
  • 什么是Web程序Web程序Web页面也叫做网页简单说来Web程序就是可以在网页上运行的程序随着Internet的发展我们可以利用浏览器实现很多功能浏览网页新闻上传下载资源网上报名信息查询等2.Web程序的发展 B/S模式C/S模式...
  • web程序设计课程中的,网页制作,计算器程序的代码
  • 作为Web程序设计的平时作业,包含两个网页设计,html源码+网页,囊括web的大部分基础知识点
  • Web程序设计(第7版)

    热门讨论 2013-02-03 13:47:54
    本书由拥有30余年计算机教学经验的教授编写,专门针对大学生来讨论Web编程,充分考虑了读者的知识背景,比较全面地介绍了建立维护Web服务器站点所必需的工具技术,包括XHTML、CSS、JavaScript、XML、Flash技术、...
  • 该PPT与吴黎兵老师主编的网页Web程序设计相配套 非常适于初学者作为参考学习,总共介绍了十五章内容: 第一章 WWW技术简介 第二章 HTML基础 第三章 Dreamweaver 8概述 第四章 制作简单网页 第五章 网页布局框架 ...
  • web程序设计-动态网页技术?06

    千次阅读 2020-06-12 15:10:23
    动态网页技术是在传统的静态网页技术的基础上发展而来的,尤其适合现代人们对网络信息的获取速度用户体验的要求。 介绍了目前的三种动态网页技术:JSP、ASP.NETPHP。分别介绍了三种技术的产生背景工作原理,并...

    主要介绍目前主流的动态网页技术。动态网页技术是在传统的静态网页技术的基础上发展而来的,尤其适合现代人们对网络信息的获取速度和用户体验的要求。
    介绍了目前的三种动态网页技术:JSP、ASP.NET和PHP。分别介绍了三种技术的产生背景和工作原理,并给出了简单示例,便于对这些技术有个形象的认识。最后介绍了目前非常流行的异步网页无刷新技术Ajax。
    Ajax不是一种全新的技术,而是基于原有的Web技术开发出来的一种Web交互的方法。

    1.静态网页与动态网页

    静态网页

    • 在网站设计中,纯粹HTML格式的网页通常被称为“静态网页”,早期的网站一般都是由静态网页制作的。
    • 静态网页一般会以 .htm或者 .html扩展名存储在服务器的文件系统中。
    • 在HTML格式的网页上,也可以出现各种动态的效果,如 .GIF格式的动画、FLASH、滚动字幕等,这些“动态效果”只是视觉上的,不是区分静态网页和动态网页的要素。
      静态网页的特点主要有:
      (1)静态网页的每个网页都有一个固定的URL,且
      网页URL以 .htm、.html、.shtml等常见形式为后缀;
      (2)网页内容一经发布到网站服务器上,都是保存
      在网站服务器上的;
      (3)网页内容不会发生变化
      (4)静态网页一般没有数据库的支持
      (5)静态网页不能和浏览器用户交互,只能单向发
      布信息,不适应动态和即时信息发布
      (6)维护工作量较大。

    动态网页

    • 动态网页的内容不是预先定制的静态HTML文档,而是在请求或使用过程中根据实际的数据内容和条件实时生成的页面。
    • 动态网页的内容可随用户的输入和互动而有所不同,或者随着用户、时间、数据修正等而改变。
    • 使用动态页面,用户可以提交信息给服务器,服务器可以将数据库中的数据返回给用户,例如股市行情、天气预报等动态检索结果。
      客户机端动态网页采用客户机端脚本语言程序(Client-Side Scripting)在客户机端浏览器中动态地生成整个页面。通常,仅使用客户机端脚本程序实现一些轻量级或局部性的数据与外观处理,如数据检查、交
      互控制、动画演示等辅助性工作。

    客户机端脚本主要采用:
    ● JavaScript
    ● VBScript
    ● ActionScript
    ● 应用小程序/插件
    ● Java Applet、ActiveX控件、Flash插件服务器端动态网页由服务器端实时生成HTML文档并返回给浏览器。通常会通过专门的生成程序或者服务器端脚本语言生成动态页面,数据内容通常从后台数据库中取得,“拼装”成最终的HTML页面并返回给浏览器。
    ◼ 早期技术如CGI、Perl和Java Servlet等。
    ◼ 改进技术,如JSP、ASP、PHP等。允许在HTML页面中嵌入一些服务器端脚本语言程序,可以动态构筑页面内容。
    ◼ ASP.NET技术可将页面展示语义与数据内容的处理逻辑彻底分开,提供了面向对象和基于事件驱动的编程方式以完成网页页面的开发,其技术更先进,使用更方便。

    客户机/服务器端混合式动态网页技术Ajax无论是客户机端动态网页还是服务器端动态网页,一个共同特点是,一旦网页需要从服务器上请求哪怕是一点点数据,也一定要向服务器请求和重新装入整个页面,因此,访问效率不高,增加了网络负担。为了解决网页局部更新的问题,出现了Ajax(Asynchronous JavaScript and XML)技术。Ajax是一个基于JavaScript并整合了XHTML、XML、DOM等技术实现的一个客户机端/服务器端混合式动态页面编程框架,它解决了网页的局部更新问题,大大降低了Web服务器的负担和网络通信开销,加快了服务器的响应速度。
    动态网页的一般特点为:
    (1)动态网页以数据库技术为基础,可以大大减少降低网站维护的工作量;
    (2)采用动态网页技术的网站可以实现更多的动态访问功能,如用户注册、用户登录、在线调查、用户管理、订单管理等;
    (3)动态网页只有当用户请求时服务器才从数据库中读取数据并动态产生一个完整的网页,并不占用独立的服务器空间。

    应用场景

    • 从网页开发角度看,静态网页使用HTML语言,而动态网页使用的语言则包括HTML+ASP或HTML+PHP或HTML+JSP等。
    • 静态网页相对更新起来比较麻烦,一般适用于更新较少的展示型网站。
    • 动态网站也可以采用静动结合的原则,适合采用动态网页的地方用动态网页,如果有必要使用静态网页,则可以考虑用静态网页的方法来实现。

    2.Java Servlet和JSP基本概念和原理

    Servlet工作原理
    Servlet的运行过程
    在这里插入图片描述
    JSP工作原理

    • JSP的工作原理类似CGI程序,它替代了常规Web服务器后端的页面加载模块,由JSP引擎执行从JSP程序转换编译而成的Java Servlet程序来产生动态HTML页面。
    • 一个JSP程序在第一次访问的时候等待响应的时间相对会比较长,这是由于JSP引擎需要先完成JSP程序的翻译和编译工作。第二次以后的执行速度就会快很多。

    JSP程序的执行过程:
    在这里插入图片描述

    JSP基本构成
    完整JSP网页构成元素有三类:
    ◆HTML标记;客户端浏览器看到的都是HTML标记语言,通过对HTML的解析,才能产生用户可见的页面。
    ◆JSP标记,包括JSP指令标记和JSP动作标记;嵌入的部分以标记“<%”开始,以“%>”结束。
    ◆Java脚本程序,是嵌入到JSP页面的可执行的Java程序,它们与JSP的其他内容一起被编译成为Servlet,在运行过程中被执行并输出结果作为HTML的一部分返回给客户端。

    示例:
    在这里插入图片描述

    Servlet与JSP的关系和区别

    • Servlet和JSP都是运行在服务端的程序,JSP技术是在Servlet技术的基础上发展起来的,它们之间有很多联系,也有很大的区别。
    • Servlet和JSP的编程方式不同。Servlet遵循的是Java语言的编程标准,而JSP更多的是遵循脚本语言的编程标准。Servlet编写的程序结构性更好,更加专业,而JSP是为了简化Servlet编程而发展起来的技术,JSP程序在编写方面比Servlet要容易。
    • JSP编程由于采用的是脚本语言编程标准,是由JSP引擎在第一次运行时翻译成Servlet后编译执行。Servlet则是需要在程序开发完成后进行编译才能部署安装。
    • 在实际的运用中,通常会采用Servlet和JSP混合使用的MVC模式,由JSP充当View角色,负责显示动态内容;由Servlet充当Controller角色,负责对客户端的请求进行处理、响应和调用JavaBean;由JavaBean充当Model角色,负责提供可复用组件和数据的存储访问等。

    Servlet编程简单示例

    public class HelloWorldServlet extends HttpServlet {
    public void doGet(HttpServletRequest request,
    HttpServletResponse response)
    throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    out.println("<html>");
    out.println("<body>");
    out.println("Hello,world!");
    out.println("</body>");
    out.println("</html>"); } }
    
    配置文件:
    <servlet>
    <servlet-name>HelloWorldServlet</servlet-name>
    <servlet-class>test.HelloWorldServlet</servletclass>
    </servlet>
    <servlet-mapping>
    <servlet-name>HelloWorldServlet</servlet-name>
    <url-pattern>/helloworld</url-pattern>
    </servlet-mapping>
    
    <html>
    <head>
    <title>Hello world demo</title>
    </head>
    <body>
    <% String s = “Hello, world!”;
    out.println(s); %>
    <br />
    <%=s%>
    </body>
    </html>
    

    3.ASP.NET基本概念和原理

    微软.NET框架基础

    ❖ .NET框架(.NET Framework)是由微软开发的一个致力于敏捷软件开发、快速应用开发、平台无关性和网络透明化的软件开发平台。
    ❖ 框架组成:公共语言运行时(CLR:CommonLanguage Runtime)、服务框架(Services Framework)和上层的两类应用模板——传统的Windows应用程序模板(Win Forms)和基于ASP.NET的面向Web的网络应用程序模板(Web Forms和Web Services)。
    ❖ .NET框架
    在这里插入图片描述

    ASP.NET简介
    ❖ ASP.NET 是一个统一的 Web 开发模型,它包括开发者使用尽可能少的代码生成企业级 Web 应用程序所必需的各种服务。
    ❖ ASP.NET 作为 .NET 框架的一部分提供。开发者可以访问 .NET框架中的类。
    ❖ 开发者可以使用与公共语言运行库 (CLR) 兼容的语言来编写代码,包括 VB、C#、JScript .NET 和 J#。
    ❖ ASP.NET在整个开发架构中的位置

    在这里插入图片描述

    ASP.NET基本编程模型
    在这里插入图片描述
    ❖ 在ASP.NET编程中,开发者在Web Form上拖放控件,完成想要的页面布局,用于和用户进行交互;
    ❖ Page类是所有Web Form类的父类,Page类的编程模型非常复杂,这是由于身上繁重的任务决定的:Page类必须应用用户个性化信息,应用主题,初始化和组织内部的控件,为控件加载和保存视图状态,为控件加载回传数据,引发控件回传,组织页面呈现内容并最终通过HtmlTextWriter输出结果。

    ASP.NET开发环境
    ❖ Visual Studio.NET 是一套完整的开发工具集,用于生成 ASP.NET Web 应用程序、XML Web Services、桌面应用程序和移动应用程序等各类应用程序。Visual Basic、Visual C++、Visual C# 和 Visual J# 全都使用相同的集成开发环境 ,利用此 IDE 可以共享工具且有助于创建混合语言解决方案。另外,这些语言利用了 .NET Framework 的功能,通过此框架可使用简化 Web 应用程序和 XML Web Services 开发的关键技术。

    在这里插入图片描述

    ASP.NET网页开发简单示例
    在这里插入图片描述

    代码分离:
    namespace Demo
    { public partial class DemoWebForm : System.Web.UI.Page
    { protected void Page_Load(object sender, EventArgs e)
    { }//这里往往对控件数据进行初始化
    protected void btnOk_Click(object sender, EventArgs e)
    { }//用户点击“确定”按钮后的动作
    protected void btnCancel_Click(object sender, EventArgs e)
    { }//用户点击“取消”按钮后的动作
    protected void btnUpload_Click(object sender, EventArgs e)
    { }//用户点击“文件上传”按钮后的动作 }}
    

    4.PHP基本概念和原理

    PHP简介
    ❖ PHP是由Rasmus Lerdorf 于1994年创建的,最初只是一个简单的用Perl语言编写的程序,用来统计网站的访问者情况。
    ❖ 在1995年以Personal Home Page Tools (PHP Tools)的名称开始对外发表第一个版本。
    ❖ 后来缩写更改为Hypertext Preprocessor(超文本预处理语言)。

    一个典型的早期PHP代码例子如下:
    <HTML>
    <HEAD>
    <TITLE>My Page</TITLE>
    </HEAD>
    <BODY>
    Hello, <?PHP echo ”Michael”;?>, Welcome to my
    site!
    </BODY>
    </HTML>
    

    PHP的工作原理
    一个完整的PHP系统由以下几个部分构成。
    ◆服务器:搭建PHP运行环境时所选择的服务器。PHP支持多种服务器软件,包括Apache、IIS等。
    ◆PHP引擎:实现对PHP文件的解析和编译。
    ◆数据库系统:实现系统中数据的存储。PHP支持多种数据库系统,包括MySQL、SQL Server、Oracle及DB2等。
    ◆浏览器:浏览网页。由于PHP在发送到浏览器的时候已经被解析器编译成HTML代码,所以PHP对浏览器没有任何限制。
    在这里插入图片描述

    Smarty模板引擎工作原理图:
    在这里插入图片描述

    PHP网页开发简单示例

    <HTML>
    <HEAD> <TITLE> <? echo "Hello World!"; ?> </TITLE>
    </HEAD>
    <BODY>
    <H1> First PHP page </H1>
    <HR> <? /*
    块注释:打印信息 */
    //类C语言行注释
    $today=date("Y-m-d G:i:s");
    echo "<CENTER> 今天是:$today.</CENTER>";
    ?># Unix 类型的行注释 ?>
    </BODY>
    </HTML>
    

    5.Ajax基本概念和原理

    Ajax技术背景
    ❖ Ajax的全称是Asynchronous JavaScript and XML,表示异步JavaScript+XML的意思,它有别于传统web开发中采用的同步方式。
    ❖ 除了JavaScript之外,另外一个组成Ajax的关键技术帧及隐藏帧技术的出现,使得浏览器对服务器的独立请求与显示处理变得更加灵活,更加有助于提高用户体验。
    ❖ 动态HTML技术中用户可以用JavaScript 和CSS来更新页面的任何部分。
    ❖ 2001年,微软公司以ActiveX对象的形式引入了XMLHttp工具,目的是向开发人员提供一个实现浏览器/服务器交互的更好的工具。
    ❖ 随后几乎所有的主流浏览器都通过将XMLHttp对象的主要方法和属性复制到浏览器的XMLHttpRequest对象中来支持这种技术,从而导致Ajax风格的页面在整个Web开发领域中迅速流行起来。

    Ajax技术的构成
    Ajax并非一种新的技术,而是几种原有技术的结合体。
    它实际上确是由下列技术组合而成。它们包括:
    ◆HTML/XHTML,主要的内容表示语言;
    ◆CSS,为XHTML提供文本格式定义;
    ◆DOM,对已载入的页面进行动态更新;
    ◆XML,数据交换格式;
    ◆XSLT,将XML转换为XHTML(用CSS修饰其样式);
    ◆XMLHttp,用XMLHttpRequest来和服务器进行异步通信,是主要的通信代理;
    ◆JavaScript,用来编写Ajax引擎的脚本语言。
    ◆除了客户端技术之外,还需要一个很重要的组件就是必要的服务器端处理逻辑。
    ◆开发人员所关注的技术主要与客户端的Ajax引擎直接相关,但如果没有一个稳定的、响应及时的服务器来向引擎发送内容,也就不会有Ajax的存在。
    ◆不管用户将服务器端组件编写为PHP页面、Javaservlet还是.NET组件,只需要保证向Ajax引擎发送的数据格式是正确的即可

    Ajax的工作原理
    ❖ Ajax模型提供了一个中间层(称之为Ajax引擎)来处理浏览器和服务器之间的通信。
    ❖ Ajax引擎实际上只是一个JavaScript对象或函数,只有当信息必须从服务器上获得的时候才调用它。
    ❖ 当需要调度和执行浏览器请求时,向Ajax引擎发出一个函数调用。这些请求都可以异步完成的,这就意味着不必等收到响应之后就可以继续执行后续的代码,从而可以提升用户体验。
    ❖ 传统Web应用程序模型和Ajax模型之间的区别
    在这里插入图片描述
    ❖ XMLHttpRequest对象是一项关键功能,浏览器通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。
    ❖ XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。
    ❖ XMLHttpRequest,可以接收任何形式的文本文档

    Ajax开发简单示例
    在页面中添加一个文本框标签用于输入用户名,添加一个按钮用于提交用户数据。验证的结果被直接打印在页面上。
    操作步骤如下:

    1) 打开Visual Studio 2010建立一个网站
    2) 在VS2010工具箱的HTML栏中添加一个文本控件
    和一个按钮控件。
    3) 在<Head></Head>中加入<script type
    ="text/javascript"></script>标签,以便进行Ajax引擎
    的编写,再定义一个XMLHttpRequest对象,但是并不
    进行初始化操作。
    4) 添加OnMessageBack()函数的内容。代码如下:
    function OnMessageBack()
    { //判断请求状态及HTTP状态是否都能满足条件
    if (xmlhttp.readystate==4 &&
    xmlhttp.status==200)
    {//将返回的文本打印到页面上
    document .write xmlhttp .responsetext); }}
    5) 为Button1添加事件代码,将其标签修改为
    <input id="Button1" type="button" value="button"
    onclick="Validation()" />
    6)页面中的Ajax引擎已经编写完毕。
    
    展开全文
  • 最全面的web程序设计知识点总结

    千次阅读 2021-03-17 21:37:14
    1.1 Internet的基本概念1.2 Web技术的基本概念1.3 Web技术的主要组成1.3 Web浏览器与服务器的基本概念工作组成1.4 Web应用开发构架开发技术二、HTTP协议基础2.1 HTTP的基本概念与交互模型2.2 HTTP消息格式2.3 ...


    前言

    本文章是围绕全国计算机等级考试-web程序设计的相关内容


    一、web技术基础?

    1.1 Internet的基本概念

    Internet(因特网),全球性的计算互联网络“信息共享”。

    因特网(Internet)是一组全球信息资源的总汇。有一种粗略的说法,认为INTERNET是由许多小的网络(子网)互联而成的一个逻辑网,每个子网中连接着若干台计算机(主机)。Internet以相互交流信息资源为目的,基于一些共同的协议,并通过许多路由器和公共互联网而成,它是一个信息资源和资源共享的集合。

    1.2 Web技术的基本概念

    web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、超媒体(超文本,图片,视频)(hypermedia)、超文本传输协议(HTTP)等,简单的讲就是把各种类型的信息和服务无缝连接,提供生动的图形用户界面。

    WEB技术指的是开发互联网应用的技术总称,一般包括WEB服务端技术和WEB客户端技术。

    两者间的关系:
    web是Internet上最流行的应用之一,Internet为web提供了网络运行环境
    web的出现极大地推动了Internet的普及和推广

    1.3 Web技术的主要组成

    1.本地计算机和远程服务器

    本地计算机:用户自己浏览站点的本地机器
    远程服务器:为客户端(用户)计算机提供各种服务的高性能计算机,主要功能是接受客户浏览器发送的请求,分析请求,并给予响应,相应的结果发送给客户端的浏览器。

    2.静态页面和动态页面

    静态页面:HTML页面文件,所有的代码都在网页中,不需要执行动态程序(访问数据库)来生成客户想要的网页
    动态页面:页面的内容是动态交互的,可以根据系统的设置显示不同的页面。因为随着网站的数据量日益庞大,人们对站点的要求越来越高,希望有更快的速度,更加高效的访问查找,所以动态网页技术便应运而生。现实中常用的动态网页开发技术有:ASP,JSP,PHP,.NET等是主角)

    3.Web应用程序的工作原理

    浏览器的访问过程如下(用户想要访问网页,需要先获取网站首页的站点信息):
    (1)浏览器地址栏输入想要访问网站首页的地址
    (2)用户向浏览器发送访问首页的请求
    (3)服务器收取客户端的的访问请求
    (4)服务器处理请求(若首页动态文档需要经过数据处理再返回,若为静态文档直接返回该文档即可)
    (5)服务器将请求的处理结果在客户端的浏览器显示

    4.常用的WEB开发技术

    • 4.1静态web开发技术
      html静态网页开发技术(超文本标记语言)
      xml意为可扩展的标记语言。它是一种显示数据的标记语言,能够使数据无障碍地进行传输,并显示在用户的浏览器上。
    • 4.2动态web开发技术
      ASP(微软推出)
      ASP.NET
      PHP
      JSP

    1.3 Web浏览器与服务器的基本概念和工作组成

    1、web浏览器的基本概念

    浏览器的含义:它是一个软件。浏览器是指运行在用户的机器上用来展现和浏览 来自web服务器或者本地文件系统中HTML页面,并让用户和这些页面交互的一种客户机软件。
    PC端常见的浏览器:internet Explorer(微软);Firefox(火狐);Opera;Chrome;Safari;360浏览器;搜狗浏览器等
    手机端常见的浏览器:UC浏览器;Safari;QQ浏览器;百度浏览器;360浏览器;

    2、web浏览器的工作原理:

    浏览器主要通过HTTP协议与web服务器交互并获取网页,这些网页由URL指定,文件格式通常为HTML。

    3、web服务器的基本概念

    web服务器含义:提供web服务的服务器。
    常见的web服务器有:window平台下IIS,Apache,Tomcat等;

    4、web基本架构

    C/S的含义:Client/Server。服务器安装高性能PC、工作站、并采用大型数据库系统。客户机安装专用的客户机端软件、服务器安装专门的服务器软件。
    B/S的含义:Browser/Server。客户机仅仅安装一个浏览器。服务器安装IIS或者Apache、或者数据库。目前常用。
    三层架构:含义是在客户机端浏览器与数据库中间加入了一个中间层。分类:系统部署三层结构和软件开发三层结构。

    5、web技术的发展历史

    三个阶段:静态文档、动态网页(交互)、web2.0(每个人都是主角)

    1.4 Web应用开发构架和开发技术

    Web 应用架构可以划分为两大子系统:前端子系统和后台子系统。

    前端子系统:

    1. 基础技术: Html / CSS / Javascript
    2. 开发框架: jQuery, Extjs , Flex 等;

    后台子系统:

    1. 基础技术: Java Servlet;
    2. 开发框架: Struts, Spring, Hibernate, ibatis 等;
    3. 应用服务器: Tomcat / Jetty

    二、HTTP协议基础

    2.1 HTTP的基本概念与交互模型

    HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写。它是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型。HTTP是一个无状态的协议。

    HTTP 协议的特点
    1.无连接—限制每次连接只处理一个请求
    2.无状态—协议对于事务处理没有记忆能力。
    3.简单快速—客户向服务器请求服务时,只需传送请求方法和路径。
    4.灵活—HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
    在这里插入图片描述

    2.2 HTTP消息格式

    HTTP消息格式分为两种:请求消息、响应消息。

    请求消息:包括三个部分,请求方法URL协议、请求头、请求体等

    响应消息:状态行、消息报头,响应正文等

    2.3 HTTP请求响应消息和请求响应方法

    http请求包含三个部分:
    请求消息:包括三个部分,请求方法URL协议、请求头、请求体

    2.3.1 请求头包含:

    Accept:指浏览器或其他客户可以接爱的MIME文件格式。Servlet可以根据它判断并返回适当的文件格式。
    User-Agent:是客户浏览器名称
    Host:对应网址URL中的Web名称和端口号。
    Accept-Langeuage:指出浏览器可以接受的语言种类,如en或en-us,指英语。
    connection:用来告诉服务器是否可以维持固定的HTTP连接。
    Cookie:浏览器用这个属性向服务器发送Cookie。Cookie是在浏览器中寄存的小型数据体,它可以记载和服务器相关的用户信息,也可以用来实现会话功能。
    Referer:表明产生请求的网页URL。如比从网页/icconcept/index.jsp中点击一个链接到网页/icwork/search,在向服务器发送的GET/icwork/search中的请求中,Referer是http://hostname:8080/icconcept/index.jsp。这个属性可以用来跟踪Web请求是从什么网站来的。
    User-Agent:是客户浏览器名称。
    Content-Type:用来表名request的内容类型。可以用HttpServletRequest的getContentType()方法取得。
    Accept-Charset:指出浏览器可以接受的字符编码。英文浏览器的默认值是ISO-8859-1.
    Accept-Encoding:指出浏览器可以接受的编码方式。编码方式不同于文件格式,它是为了压缩文件并加速文件传递速度。浏览器在接收到Web响应之后先解码,然后再检查文件格式。

    2.3.2 HTTP常用请求方法

    1、GET方法

    • GET方法用于使用给定的URI从给定服务器中检索信息,即从指定资源中请求数据。使用GET方法的请求应该只是检索数据,并且不应对数据产生其他影响。
    • 在GET请求的URL中发送查询字符串(名称/值对),需要这样写:
      /test/demo_form.php?name1=value1&name2=value2
    • 说明:
      GET请求是可以缓存的,我们可以从浏览器历史记录中查找到GET请求,还可以把它收藏到书签中;且GET请求有长度限制,仅用于请求数据(不修改)。
    • 注:因GET请求的不安全性,在处理敏感数据时,绝不可以使用GET请求。

    2、POST方法

    • POST方法用于将数据发送到服务器以创建或更新资源,它要求服务器确认请求中包含的内容作为由URI区分的Web资源的另一个下属。
    • POST请求永远不会被缓存,且对数据长度没有限制;我们无法从浏览器历史记录中查找到POST请求。

    3、HEAD方法

    • HEAD方法与GET方法相同,但没有响应体,仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用,而无需传输整个内容。

    4、PUT方法

    • PUT方法用于将数据发送到服务器以创建或更新资源,它可以用上传的内容替换目标资源中的所有当前内容。
    • 它会将包含的元素放在所提供的URI下,如果URI指示的是当前资源,则会被改变。如果URI未指示当前资源,则服务器可以使用该URI创建资源。

    5、DELETE方法

    • DELETE方法用来删除指定的资源,它会删除URI给出的目标资源的所有当前内容。

    6、CONNECT方法

    • CONNECT方法用来建立到给定URI标识的服务器的隧道;它通过简单的TCP /
      IP隧道更改请求连接,通常实使用解码的HTTP代理来进行SSL编码的通信(HTTPS)。

    7、OPTIONS方法

    • OPTIONS方法用来描述了目标资源的通信选项,会返回服务器支持预定义URL的HTTP策略。

    8、TRACE方法

    • TRACE方法用于沿着目标资源的路径执行消息环回测试;它回应收到的请求,以便客户可以看到中间服务器进行了哪些(假设任何)进度或增量。

    2.3.3 HTTP响应消息和常用响应状态

    1. HTTP/1.1 200 OK // 响应状态行
    2. Date: Mon, 30 Jul 2018 02:50:55 GMT //服务端发送资源时的服务器时间
    3. Expires: Wed, 31 Dec 1969 23:59:59 GMT //比较过时的一种验证缓存的方式,与浏览器(客户端)的时间比较,超过这个时间就不用缓存(不和服务器进行验证),适合版本比较稳定的网页
    4. Cache-Control: no-cache // 现在最多使用的控制缓存的方式,会和服务器进行缓存验证,具体见博文”Cache-Control“
    5. etag: “fb8ba2f80b1d324bb997cbe188f28187-ssl-df” // 一般是Nginx静态服务器发来的静态文件签名,浏览在没有“Disabled
    6. cache”情况下,接收到etag后,同一个url第二次请求就会自动带上“If-None-Match”
    7. Last-Modified: Fri, 27 Jul 2018 11:04:55 GMT //是服务器发来的当前资源最后一次修改的时间,下次请求时,如果服务器上当前资源的修改时间大于这个时间,就返回新的资源内容
    8. Content-Type: text/html; charset=utf-8 //如果返回是流式的数据,我们就必须告诉浏览器这个头,不然浏览器会下载这个页面,同时告诉浏览器是utf8编码,否则可能出现乱码
    9. Content-Encoding: gzip //告诉客户端,应该采用gzip对资源进行解码
    10. Connection: keep-alive //告诉客户端服务器的tcp连接也是一个长连接1

    2.3.4 HTTP常用响应状态

    HTTP状态码分类
    HTTP状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型,后两个数字没有分类的作用。HTTP状态码共分为5种类型:
    1** :信息,服务器收到请求,需要请求者继续执行操作
    2** :成功,操作被成功接收并处理
    3** :重定向,需要进一步的操作以完成请求
    4** :客户端错误,请求包含语法错误或者无法完成请求
    5** :服务器错误,服务器在处理请求的过程中发生了错误

    200 ok,请求已成功,请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。
    304 Not Modified,如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。
    403 Forbidden 服务器已经理解请求,但是拒绝执行它。
    404 Not Found 请求失败,请求所希望得到的资源未被在服务器上发现。
    500 Internal Server Error 服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。
    501 Not Implemented 服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法,并且无法支持其对任何资源的请求。
    502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。
    503 Service Unavailable 由于临时的服务器维护或者过载,服务器当前无法处理请求。这个状况是临时的,并且将在一段时间以后恢复。
    301 Moved Permanently 被请求的资源已永久移动到新位置
    302 Move Temporarily 请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。

    2.4 HTTP常用消息头

    Request Header:

    • GET /sample.Jsp HTTP/1.1 //请求行
    • Host: www.uuid.online/ //请求的目标域名和端口号
    • Origin: http://localhost:8081/ //请求的来源域名和端口号 (跨域请求时,浏览器会自动带上这个头信息)
    • Referer: https:/localhost:8081/link?query=xxxxx //请求资源的完整URI
    • User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
      AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99
      Safari/537.36 //浏览器信息
    • Cookie: BAIDUID=FA89F036:FG=1; BD_HOME=1; sugstore=0 //当前域名下的Cookie
    • Accept: text/html,image/apng //代表客户端希望接受的数据类型是html或者是png图片类型
    • Accept-Encoding: gzip, deflate //代表客户端能支持gzip和deflate格式的压缩
    • Accept-Language: zh-CN,zh;q=0.9 //代表客户端可以支持语言zh-CN或者zh(值得一提的是q(0~1)是优先级权重的意思,不写默认为1,这里zh-CN是1,zh是0.9)
    • Connection: keep-alive //告诉服务器,客户端需要的tcp连接是一个长连接

    Response Header:

    • HTTP/1.1 200 OK // 响应状态行
    • Date: Mon, 30 Jul 2018 02:50:55 GMT //服务端发送资源时的服务器时间
    • Expires: Wed, 31 Dec 1969 23:59:59 GMT
      //比较过时的一种验证缓存的方式,与浏览器(客户端)的时间比较,超过这个时间就不用缓存(不和服务器进行验证),适合版本比较稳定的网页
    • Cache-Control: no-cache //
      现在最多使用的控制缓存的方式,会和服务器进行缓存验证,具体见博文”Cache-Control“
    • Last-Modified: Fri, 27 Jul 2018 11:04:55 GMT
      //是服务器发来的当前资源最后一次修改的时间,下次请求时,如果服务器上当前资源的修改时间大于这个时间,就返回新的资源内容
    • Content-Type: text/html; charset=utf-8
      //如果返回是流式的数据,我们就必须告诉浏览器这个头,不然浏览器会下载这个页面,同时告诉浏览器是utf8编码,否则可能出现乱码
    • Content-Encoding: gzip //告诉客户端,应该采用gzip对资源进行解码
    • Connection: keep-alive //告诉客户端服务器的tcp连接也是一个长连接

    三、HTML基础

    https://blog.csdn.net/weixin_42826790/article/details/110388714

    四、CSS基础

    https://blog.csdn.net/weixin_42826790/article/details/110406857

    五、Javascript基础

    https://blog.csdn.net/weixin_42826790/article/details/110679347
    https://blog.csdn.net/weixin_42826790/article/details/110821208

    六、动态网页技术概述

    6.1 JavaServlet和JSP概念原理

    Java servlet:
    在Web服务器端加载并运行的Java应用程序具体运行在Servlet引擎管理的JVM上,Servlet是开发服务器端应用程序的一个很好选择, Servlet与JSP结合使用,能提供更强大的服务器端功能。

    JSP 简介 : JSP 与 PHP、ASP、ASP.NET 等语言类似,运行在服务端的语言。

    原理:
    JSP全称Java Server Pages,是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头 以%>结束;
    JSP通过网页表单获取用户输入数据、访问数据库及其他数据源,然后动态地创建网页。
    JSP有多种功能,比如访问数据库、记录用户选择信息、访问JavaBeans组件等,还可以在不同的网页中传递控制信息和共享信息。

    6.2 ASP.NET基本概念和原理

    ASP.NET技术是Microsoft Web开发史上一个重要的里程碑,使用ASP.NET开发Web应用程序并维持其运行,比其他开发语言更加简单。与Java、PHP和Perl等高级技术相比,ASP.NET具有方便性、灵活性、生产效率高、安全性高及面向对象等优点,是目前主流的网络编程技术之一。

    ASP.NET是Microsoft公司推出的新一代建立动态Web应用程序的开发平台,是一种建立动态Web应用程序的新技术。ASP.NET是.NET框架的一部分,可以使用任何.NET兼容的语言(如Visual Basic、C#)来编写ASP.NET应用程序。

    ASP.NET是Microsoft.NET的一部分,是Active Server Page(简称ASP)的另一个版本;ASP.NET提供了一个统一的Web开发模型,其中包括开发人员生成企业级Web应用程序所需的各种服务。ASP.NET的语法在很大程度上与ASP兼容,同时还提供一种新的编程模型和结构,可生成伸缩性和稳定性更好的应用程序,并提供更好的安全保护。

    ASP.NET是一个已编译的、基于.NET的环境,可以用任何与.NET兼容的语言(包括Visual Basic.NET、C#和JScript .NET)创作应用程序。另外,任何ASP.NET应用程序都可以使用整个.NET Framework。开发人员可以方便地获得这些技术的优点,其中包括托管的公共语言运行库环境、类型安全和继承等。

    Microsoft公司为ASP.NET设计了功能强大的代码、代码易于重用和共享,可用编译类语言编写策略,从而使程序员更易开发Web应用程序,满足不同客户的需求。

    ASP.NET是Microsoft .NET Framework的一部分,是一种可以在高度分布的Internet环境中简化应用程序开发的环境。.NET Framework包含公共语言运行库,它提供了各种核心服务,如内存管理、线程管理和代码安全,同时也包含.NET Framework类库。.NET Framework是一个开发人员用于创建应用程序的综合的、面向对象的类型集合。

    6.3 PHP基本概念和原理

    PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。

    PHP、Apache和MySQL的组合已经成为Web服务器的标配,php可以做很多事情,PHP是服务端的脚本程序,需要安装php应用程序去解释执行,简单来说php是web服务器(iis、apache)功能扩展,这种结构更加适合网站原理,php需要和web服务器、数据库一块才能发挥功能。

    PHP常用功能:

    • 1.收集表单数据
      表单是最常用的数据收集界面。在提交时可以用GET或POST的方法将数据发送给PHP程序脚本。另外PHP也可以以变量的形式访问每一个表单域,这些功能使php再收集客户输入的数据是非常简单的。
    • 2.生成动态网页
      PHP和JavaScript不同是php运行在服务器端,可以根据客户端不同请求动态输出内容,而客户端接受数据却不知道背后代码如何运行的,而javascript客户端运行的语言无法做到这点。
    • 3.字符串处理
      在处理文本时,经常要处理各种字符串,字符串处理是程序员使用最多技术之一,而PHP是把字符串作为基本的数据类型来处理。另外PHP中提供了丰富的字符串函数,来供我们使用。
    • 4.动态输出图像
      PHP通过使用GD扩展库来动态输出图像,登录大多数的验证码就是使用这个功能,我们也可以使用缩略图和添加水印等图像处理功能。
    • 5.处理服务器端文件
      要想让数据可以长期保留,必须要使用数据库或是文件系统,PHP可以利用文件系统函数任意操作服务器中的目录或文件(编辑、删除、创建等功能)。
    • 6.会话控制
      我们使用HTTP协议访问网站时它是一个无状态,没有内建机制来维护两个事务之间的状态。换句话来说http无法区分两个请求是否都是来自一个用户请求,而PHP就可以使用会话控制在网站中跟踪一个用户,控制该用户的行为。

    6.4 AJAX基本概念和原理

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
    通过在后端与服务器进行少量数据交换,AJAX 可以使网页实现异步(局部)更新。
    可以把一部分以前由服务器负担的工作转移到客户端,利用客户端的闲置的资源进行处理,减轻服务器和带宽的负担,节约空间和成本.

    Ajax的工作原理相当于在用户和服 务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
    Ajax其核心有 JavaScript、XMLHTTPRequest、DOM对象组成,通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据, 然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    总结

    以上第一二六章内容为千锋教育_2020版全国计算机二级全套Web考试教程内容,视频地址链接:https://www.bilibili.com/video/BV1r5411L7SY
    展开全文
  • web程序设计(1)——制作个人静态网页

    万次阅读 多人点赞 2020-01-10 16:18:52
    实验要求 模仿 http://ccs.scu.edu.cn/jscc/201610/84.html创建一个个人主页,要求: 有照片; 有表格; 有列表; 有超级链接 ...熟悉掌握html的标签使用(添加图片,表格,列表超链接等)

    实验要求

    模仿 http://ccs.scu.edu.cn/jscc/201610/84.html创建一个个人主页,要求:
    有照片;
    有表格;
    有列表;
    有超级链接

    实验目的

    熟悉掌握html的标签使用(添加图片,表格,列表和超链接等)

    实验内容

    1. 打开visual studio core,创建一个文件夹。在文件夹中增添html文件,记得加上后缀名.html
      在这里插入图片描述

    2. 打出‘!’+tab键,使用emmet插件进行自动补齐

    3. 写'title'标签,命名网页名;在body中写段落,注意使用换行标签‘br’

    4. 插入图片'img\',注意附上图片的路径,为方便可把图片和代码放在同一文件夹下,如下示例:

    <body >
    <h1>朱砂痣的个人主页</h1>
        <img src="wyb.jpg" width="500" height="300" alt="idle">
       <p >
        <b >Character</b><br>
           <b >
             Dr. Linghe Kong  <br>
            孔令和<br>
           </b>
            Research Professor (特别研究员)<br>
        Ph.D. Advisor (博士生导师)<br><br>
        Department of Computer Science and Engineering (计算机科学与工程)<br>
        Shanghai Jiao Tong University (上海交通大学)<br>
            <b>Office:</b> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240<br>
            <b>Phone: </b>021-34208292<br>
            <b> Email: </b>linghe.kong [AT] sjtu.edu.cn<br>
            <b>Homepage:</b><i style="color:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/</i><br>
       </p>
    

    5.写自定义列表'dl',如下示例:

    <dl style="font-size:25px;">
       <dt><b>专业</b></dt>
       <dd>- 计算机</dd>
       <dt><b>家乡</b></dt>
       <dd>- 广东广州</dd>
       <dt><b> 成就</b></dt>
       <dd>- 一事无成</dd><br>
       </dl>
    
    专业
    - 计算机
    家乡
    - 广东广州
    成就
    - 一事无成

    6. 写表格'table',注意表头'th',单元格'td'的使用,加上'caption'标注表格名称,如下示例:
    <table border="1" >
                <caption>成绩表</caption>
                <tr>
                  <th>科目</th>
                  <td>信安</td>
                  <td>离散</td>
                  <td>数电</td>
                  <td>数构</td>
                  <td>大物</td>
                  <td>大英</td>
                  <td>体育</td>
                </tr>
                <tr>
                  <th>成绩</th>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                </tr>
                </table>
    
    成绩表
    科目信安离散数电数构大物大英体育
    成绩100100100100100100100
    7. 插入超链接——课程中心,川大教务处,PPT的个人主页模板, 如下示例:
    <a href="http://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank"><i style="font-size:25px;">课程中心</i></a><br>
        <a href="http://jwc.scu.edu.cn/" target="_blank"><i style="font-size:25px;">教务处</i></a><br>
    <a href="http://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank"><i style="font-size:25px;">个人主页模板</i></a>
    

    课程中心

    教务处

    个人主页模板
    8. 为了使页面看来更有条理,插入小标题来分类内容——‘Character’,’ Information’,’Grade’,’Link’,如:

    <b style="font-size:40px;color: greenyellow">Character</b><br>
    

    Character

    10. 美化页面,比如修改主页背景颜色,调整字体大小,字体颜色,调整照片大小等

    实验效果

    在这里插入图片描述
    在这里插入图片描述

    实验完整代码

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>我的网页</title>
    </head>
    <body  bgcolor="pink" >
        <h1>朱砂痣的个人主页</h1>
        <img src="wyb.jpg" width="500" height="300" alt="idle">
       <p style="font-size:25px;">
        <b style="font-size:40px;color: greenyellow">Character</b><br>
           <b style="font-size:30px;">
             Dr. Linghe Kong  <br>
            孔令和<br>
           </b>
            Research Professor (特别研究员)<br>
        Ph.D. Advisor (博士生导师)<br><br>
        Department of Computer Science and Engineering (计算机科学与工程)<br>
        Shanghai Jiao Tong University (上海交通大学)<br>
            <b>Office:</b> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240<br>
            <b>Phone: </b>021-34208292<br>
            <b> Email: </b>linghe.kong [AT] sjtu.edu.cn<br>
            <b>Homepage:</b><i style="color:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/</i><br>
       </p>
    
    
        <p>
                <b style="font-size:40px;color: greenyellow">Information</b><br>
        <dl style="font-size:25px;">
       <dt><b>专业</b></dt>
       <dd>- 计算机</dd>
       <dt><b>家乡</b></dt>
       <dd>- 广东广州</dd>
       <dt><b> 成就</b></dt>
       <dd>- 一事无成</dd><br>
    
       <b style="font-size:40px;color: greenyellow">Grade</b><br>
       </dl> 
        <table border="1" style="font-size:25px;" >
                <caption>成绩表</caption>
                <tr>
                  <th>科目</th>
                  <td>信安</td>
                  <td>离散</td>
                  <td>数电</td>
                  <td>数构</td>
                  <td>大物</td>
                  <td>大英</td>
                  <td>体育</td>
                </tr>
                <tr>
                  <th>成绩</th>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                  <td>100</td>
                </tr>
                </table>
    </p>
    <b style="font-size:40px;color: greenyellow">Link</b><br><br>
        <a href="http://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank"><i style="font-size:25px;">课程中心</i></a><br>
        <a href="http://jwc.scu.edu.cn/" target="_blank"><i style="font-size:25px;">教务处</i></a><br>
        <a href="http://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank"><i style="font-size:25px;">个人主页模板</i></a>
    </body>
    </html>
    
    
    
    
    
    展开全文
  • •javaScript程序(用于提高页面与用户的交互能力,其最大的特点就是可以读/写浏览器建立的DOM树,可以对浏览器端的鼠标键盘事件作响应,可以对采集的数据作验证,可以检测浏览器的类型等。浏览器内嵌有JavaScr...
  • 网页设计经典案例(Web

    万次阅读 多人点赞 2021-02-21 20:56:25
    网页设计经典案例 一、实现效果(一) 源代码(二) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style tyle=...
  • WEB程序设计大作业

    2010-05-22 16:17:33
    WEB程序设计大作业 实现多个网页的互联功能 界面漂亮 实用
  • 网页设计 WEB程序设计 网站源码 网页课程设计 网页设计作品源码 网站整站源码 web程序设计
  • Java Web程序设计——JSP技术(一)

    千次阅读 2020-05-02 15:49:55
    Java Web程序设计——JSP技术 JSP概述 什么是JSP JSP全名是Java Servlet Pages,它是建立在Servlet规范之上的动态网页开发技术。 JSP = Java + html +JSP自身的一些东西 最大特点:可以非常简单的书写页面 JSP的...
  • XML ASP网页程序设计

    2018-02-24 00:24:41
    XML ASP网页程序设计 XML ASP网页程序设计 XML ASP网页程序设计
  • 网站技术主要包括Web服务器技术和网页设计技术两部分。网页设计技术主要有静态网页技术动态网页技术。静态网页设计制作技术一般采用静态的HTML语言,另外用到JavaScript、图片制作、CGI编程CSS等技术,后来发展...
  • web程序设计

    千次阅读 2017-11-01 20:01:33
    Web程序设计这门课是一个综述课程,总体介绍了web 应用用到的技术。如HTML、 CSS、JavaScript。   2.HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) ...
  • WEB程序设计 第7版.pdf

    千次阅读 2018-03-22 21:50:07
    Web程序设计(第7版)》全面透彻地介绍客户端服务器端编程所需的工具技术,讲述如何运用最新Web技术开发独立于平台的站点。本书开篇带您建立一个基础XHTML网站,然后循序渐进地介绍为基础网站添加功能的各种新...
  • 网页实现截图: 主要源码展示: ?获取完整源码: 网页实现截图: 动漫官网主页: 游戏动漫页面展示: 招贤纳士: 联系我们: 关于公司: 主要源码展示: 游戏动漫主页.html <head> <title>...
  • 为防止和谐,请移步博客查看???? 小何的世界
  • web程序设计(5)——个人主页(布局)

    万次阅读 多人点赞 2020-01-10 18:02:37
    1、在header部分包含学院logo,个人主页各个部分的页面索引,针对索引的link,visited,hover,active四种状态进行设置; 2、中间部分包含sidebar 内容两个部分; 3、内容部分包含 内容header 主要内容两部分,...
  • web程序设计中的静态网页——html--快速设计方法
  • WEB前端开发概述 1【单选题】 在下列选项中,不属于Web前端开发任务的是()。 A、页面布局 B、页面交互 C、通信协议 D、页面特效 我的答案:C 2【单选题】 HTML5是()年由W3C组织推荐的标准。 A、1993 ...
  • Java Web程序设计笔记 • 【第1章 Web应用程序】

    千次阅读 多人点赞 2021-02-19 13:56:39
    1.1 Web 应用程序 1.1.1 Web 应用程序概述 1.1.2 Web 应用程序的工作原理 1.1.3 实践练习 1.2 HTTP协议 1.2.1 URL简介 1.2.2 HTTP 协议概述 1.2.3 HTTP 处理流程 1.2.4 HTTP请求方式 1.2.5 实践练习 1.3 ...
  • 程序员求婚设计网页web

    热门讨论 2013-11-05 10:06:39
    一个小小的求婚网站设计。程序员技术宅的求婚必备良器
  • 新的Web表单设计器 完全支持最新的浏览器技术 使用实时数据而不是“占位符”数据进行预览 选择一个控件导航到源 源文件的实时更新 操作面板支持 从工具箱中拖放 更改设计器表面中的文本 双击控件添加默认...
  • 一、Web应用程序简介 1、网络应用程序开发体系结构: 1)C/S体系结构:Client/Server的缩写,即客户端/服务器端结构 举例:QQ 英雄联盟 word、excel不是,因为不需要联网、登录 2)B/S体系结构:Browser/Server的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 203,930
精华内容 81,572
热门标签
关键字:

web程序设计和网页设计