態伺服器網頁(英文: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版本:
版本 | 發布時間 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
<!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 屬性值的格式。
關鍵詞:類似這樣的 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】拿
*請認真填寫需求信息,我們會在24小時內與您取得聯系。