整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

ASP(动态伺服器网页)简介

ASP(动态伺服器网页)简介

态伺服器网页(英文:Active Server Pages,简称ASP),由微软公司开发的服务器端运行的脚本平台,它被Windows下Internet Information Services (IIS)的程式所管理。透过ActiveX server的技术让不同的使用者能有不同的画面,或需要让他们可以存取服务器(server)上的资料时,使用ASP3.0中提供了五个内建的物件建立模拟和安全性的动态内容,来协助程序员隐藏复杂的沟通机制,让程序员可以专注在解决问题和应用之上,这样可以更快速地开发动态网页的同时每一个组件都是可以由一组富有经验的程序员根据动态网页最常用的功能而独立开发。

ASP的特色

ASP隐藏了网页伺服器与浏览者之间沟通的繁琐机制的同时也基于script base的特性,网页撰写员可以专心撰写应用的程式的逻辑部份,再者ASP也像HTML般透过撰写程序来即时测试网页是否安全地运行,而不必担心程式和伺服器不能沟通的问题,另外因为那些script是于发送前于伺服器中先行转译处理成为HTML后再而发送至代理伺服器边的动态网页技术,不必担心浏览器的支援性及,网页撰写员的程式逻辑像client-side script会被盗用,因此最终浏览者只会是使用HTML来浏览。

利用ASP程序最常用的是Cookies,它利用Session组件实现的。同时还可以利用第三方组件延伸ASP的作用,如利用MailSender组件发送电子邮件。

通过ASP,可以结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的WEB服务器应用程序。同时,ASP也支持VBScript和JScript等脚本语言,默认为VBScript,而其中JScript是微软公司的ECMAScript标准的实现,并且有自己的扩展。

五个内建组件

  • Application:在一个ASP-based application让不同使用者共享资讯。

  • Request:从使用者处理取得资讯

  • Response:将资讯送给使用者

  • Server:提供一些Web Server的工具

  • Session:储存在一个session内使用者的资讯

物件的支援

ASP对COM的支援会允许撰写员使用server component(或OLE Automation server)。透过它撰写员可以发展自己的物件,或将把程式转成Web-base的介面。

  • 透过ADO提供对于资料库的应用。

  • 透过ActiveX的Scripting.FileSystemObject提供对于档案的操作。

状态(State)的管理

状态管理是ASP的重要功能之一,原因为HTTP是一个stateless的协定,当有匿名的request进入时,浏览者无法辨认这些的request是否安全,或那些request之间的关连性时,便无法透过浏览者取得资讯如帐户及密码等,对交易特性的Web应用程式造成了阻碍。因此ASP透过cookie的包装和使用让浏览者可以简单地管理众多使用者名称的不同状态。

版本

ASP目前最新的版本为3.0,与Windows 2000一起发行,并内植于IIS 5.0中。

  • ASP 1.0内含于Windows NT 4.0 Service Pack 3(IIS 3.0)发行。

  • ASP 2.0内含于Windows NT 4.0 Option Pack,与IIS 4.0一起亮相。

自ASP 3.0发行后,除了各版本对它的安全性或问题修补外,对主要功能都没有再进一步的更新。 Windows Server 2003发行的ASP也是3.0版本。

其后继者ASP+(即ASP.NET),已内含于.NET Framework中持续演化。

原理

ASP是经过服务器解析之后再向网页浏览器返回数据,所以有了ASP就不必担心客户的浏览器是否能运行你所编写的代码。因为所有的程序都将在网页服务器端执行,包括所有嵌在普通HTML中的脚本程序。当程序执行完毕后,服务器仅将执行的结果返回给客户浏览器,这样也就减轻了客户端浏览器的负担,大大提高了交互的速度。

由于代码是需要经过服务器执行之后才向浏览器发送的,所以在客户端看到的只能是经过解析之后的数据,而无法获得源代码,故编写者不用担心自己的源代码会被别人剽窃。但不排除黑客利用系统漏洞窃取服务器端的ASP源代码。

基于这样的解析方式,也导致运行ASP页面相对于普通的HTML页面要慢一点。因为普通的HTML页面只需要浏览器就能够解析,而ASP则必须是服务器将整页的代码都执行一遍之后再发送数据。

ASP提供与数据库的交互,如Microsoft SQL Server、Microsoft Access、MySQL和Oracle,比较流行的是ASP和Microsoft SQL Server的组合。

TML 实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

实例解析

  • DOCTYPE 声明了文档类型

  • 位于标签 <html> 与 </html> 描述了文档类型

  • 位于标签 <body> 与 </body> 为可视化网页内容

  • 位于标签 <h1> 与 </h1> 作为一个标题使用

  • 位于标签 <p> 与 </p> 作为一个段落显示

<!DOCTYPE html> 在HTML5中也是描述了文档类型。

什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language

  • HTML 不是一种编程语言,而是一种标记语言

  • 标记语言是一套标记标签 (markup tag)

  • HTML 使用标记标签来描述网页

  • HTML 文档包含了HTML 标签文本内容

  • HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>

  • HTML 标签通常是成对出现的,比如 <b> 和 </b>

  • 标签对中的第一个标签是开始标签,第二个标签是结束标签

  • 开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:

HTML 网页结构

下面是一个可视化的HTML页面结构:

<html>

<head>

<title>页面标题</title>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>

</html>

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

HTML版本

从初期的网络诞生后,已经出现了许多HTML版本:

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

天查Html手册时,又有了新的发现。也就这机会,好好总结下HTML中Meta的使用。

  HTML <meta> 标签,所有浏览器都支持 <meta> 标签。它提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),对搜索引擎和更新频度的描述和关键词,或其他 web 服务。

  <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

  在 HTML 中,<meta> 标签没有结束标签,在 XHTML 中,<meta> 标签必须被正确地关闭。

必要属性

属性值描述contentsome text定义与http-equiv或name属性相关的元信息

可选属性

属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。contentsome text定义用于翻译 content 属性值的格式。

  • SEO优化

    关键词:类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助.使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关,标记不应超过 874 个字符。

    <meta name="keywords" content="HTML,ASP,PHP,SQL">

    页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签

  <meta name="description" content="your description">

    搜索引擎索引方式,robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。

  

<meta name="robots" content="index,follow" />
<!--
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
-->

  页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。

  <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /><!--5秒钟后跳转到http://www.w3school.com.cn-->

  <meta http-equiv="Refresh" content="5;" /><!--每5秒钟刷新一下页面-->

  • 移动设备

   viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

      content 参数:

        width viewport 宽度(数值/device-width)
        height viewport 高度(数值/device-height)
        initial-scale 初始缩放比例
        maximum-scale 最大缩放比例
        minimum-scale 最小缩放比例
        user-scalable 是否允许用户缩放(yes/no)

  

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->

  

  各浏览器平台


  Microsoft Internet Explorer

<!-- 优先使用最新的ie版本 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 是否开启cleartype显示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

<!-- Pinned Site -->
<!-- IE 10 / Windows 8 -->
<meta name="msapplication-TileImage" content="pinned-tile-144.png">
<meta name="msapplication-TileColor" content="#009900">
<!-- IE 11 / Windows 9.1 -->
<meta name="msapplication-config" content="ieconfig.xml">  

  Google Chrome

<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate"> 

  360浏览器

  <!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

  UC手机浏览器

  <!-- 将屏幕锁定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏显示页面 -->
<meta name="full-screen" content="yes">
<!-- 强制图片显示,即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 应用模式,默认将全屏,禁止长按菜单,禁止手势,标准排版,强制图片显示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜间模式显示 -->
<meta name="nightmode" content="disable">
<!-- 使用适屏模式显示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 当页面有太多文字时禁止缩放 -->
<meta name="wap-font-scale" content="no">

  QQ手机浏览器

<!-- 锁定屏幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- 页面将以应用模式显示 -->
<meta name="x5-page-mode" content="app">

  Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- 禁止自动探测并格式化手机号码 -->
<meta name="format-detection" content="telephone=no">
<!-- Add to Home Screen添加到主屏 -->
<!-- 是否启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="App Title">

  Google Android

<meta name="theme-color" content="#E64545">
<!-- 添加到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
App Links

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->

  其它常用的meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

  • 网页相关

  网页编码:以下两种charset定义方式均可


<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  禁止缓存:禁止浏览器从本地机的缓存中调阅页面内容,网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览

<meta http-equiv="Pragma" content="no-cache">

  网页过期:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。注意:必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期)

<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

  Cookie设置:注意:必须使用GMT的时间格式

<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

  显示窗口的设定:强制页面在当前窗口以独立页面显示,这个属性是用来防止别人在框架里调用你的页面。Content选项:_blank、_top、_self、_parent.

<Meta http-equiv="Widow-target" Content="_top">

  进入与退出:这个是页面被载入和调出时的一些特效。这个有好多特效,可以查询Page-Exit去了解更多。

  <Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

  • 安全相关

  内容安全策略CSP(Content-Security-Policy),可以参考https://blog.csdn.net/u014465934/article/details/84199171

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">



喜欢小编的可以点个赞关注小编哦,小编每天都会给大家分享文章。

我自己是一名从事了多年的前端老程序员,小编为大家准备了新出的前端编程学习资料,免费分享给大家!

如果你也想学习前端,可以观看【置顶】文章。也可以私信【1】拿