HTML amp ASP网页制作教程-网页设计-锦华智联科技

教程大纲

第一部分：HTML 基础 - 网页的骨架
（图片来源网络，侵删）
- 什么是HTML？
- 开发环境准备
- 第一个HTML页面
- 常用HTML标签详解
- HTML表单
- CSS与JavaScript简介
第二部分：ASP 基础 - 网页的大脑
- 什么是ASP？
- ASP开发环境配置 (IIS)
- ASP语法基础
- 内置对象详解 (Request, Response, Session, Application)
- 数据库操作 (ADO)
- 一个完整的ASP项目示例

第一部分：HTML 基础 - 网页的骨架

什么是HTML？

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准标记语言，它不是一种编程语言，而是一种标记语言，通过一系列的“标签”（Tags）来描述网页的内容和结构，比如标题、段落、链接、图片等，浏览器（如Chrome, Firefox）会解析这些标签，并将其渲染成我们看到的可视化网页。

开发环境准备

对于HTML,你只需要一个文本编辑器即可。

简单选择: Windows 自带的 记事本。
强烈推荐: Visual Studio Code (VS Code)，它免费、强大，有代码高亮、自动补全等功能，能极大提升开发效率。

下载安装: 访问 Visual Studio Code 官网下载并安装。

（图片来源网络，侵删）

第一个HTML页面

让我们创建一个最简单的HTML文件。

打开 VS Code。
新建一个文件,命名为 index.html。
输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落，用于展示HTML的基本结构。</p>
    <a href="https://www.google.com">这是一个链接，点击跳转到Google</a>
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 Logo">
</body>
</html>

保存文件,然后用浏览器（如Chrome）打开它，你应该能看到一个包含标题、段落、图片和链接的简单页面。

代码解析:

<!DOCTYPE html>: 声明这是一个HTML5文档。
<html>: 根元素，包裹整个页面的内容。
<head>: 页面的“头部”，包含页面的元数据（如标题、字符编码、引入的样式等），不会直接显示在页面上。
<title>: 浏览器标签页上显示的标题。
<body>: 页面的“主体”，包含所有可见的内容。
<h1>, <p>, <a>, <img>: 都是HTML标签，分别代表一级标题、段落、链接和图片。

常用HTML标签详解

名称	描述	示例
`h1` - `h6`	从一级到六级，重要性递减	`<h2>二级标题</h2>`
`p`	段落	定义一个文本段落	`<p>这是一个段落。</p>`
`a`	锚点/链接	创建一个超链接	`<a href="https://www.example.com">访问示例网站</a>`
`img`	图像	在页面上显示一张图片	`<img src="image.jpg" alt="图片描述">`
`ul` / `ol` / `li`	无序列表 / 有序列表 / 列表项	创建列表	`<ul><li>苹果</li><li>香蕉</li></ul>`
`div`	分区	一个块级容器，用于布局和分组内容	`<div style="color: red;">这是一个红色区域</div>`
`span`	内联元素	器，用于对文本的一部分进行样式化	`<p>你好，<span style="font-weight: bold;">张三</span>！</p>`
`table` / `tr` / `td` / `th`	表格 / 行 / 单元格 / 表头	创建表格	`<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>李四</td><td>25</td></tr></table>`
`form`	表单	用于收集用户输入	`<form action="submit.asp" method="post">...</form>`
`input`	输入	表单中的输入控件	`<input type="text" name="username">`
`button`	按钮	可点击的按钮	`<button type="submit">提交</button>`

HTML表单

表单是网页与用户交互的关键,它允许用户输入数据，然后发送到服务器进行处理。

（图片来源网络，侵删）

示例: 一个简单的登录表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">登录表单</title>
</head>
<body>
    <h2>用户登录</h2>
    <form action="login.asp" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <br>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <br>
        <button type="submit">登录</button>
    </form>
</body>
</html>

表单属性解析:

action="login.asp": 指定表单数据提交后要处理的ASP文件。
method="post": 指定提交数据的方法。post 方法将数据放在HTTP请求体中，适合提交敏感信息（如密码）。
name="username": 为输入字段命名，服务器将根据这个名称来获取数据。
type="text" / type="password": 定义输入字段的类型。
required: HTML5属性，表示该字段为必填项。

CSS与JavaScript简介

CSS (Cascading Style Sheets): 层叠样式表，它负责HTML页面的外观和样式，比如颜色、字体、布局、动画等，你可以将CSS代码直接写在HTML的<style>标签里，或者单独创建一个.css文件再引入。
JavaScript: 一种脚本语言，它负责网页的行为和交互，比如响应用户点击、验证表单数据、动态更新页面内容等，你可以将JavaScript代码写在HTML的<script>标签里，或者单独创建一个.js文件再引入。

三者关系: HTML (结构) + CSS (样式) + JavaScript (行为) = 现代网页。

第二部分：ASP 基础 - 网页的大脑

什么是ASP？

ASP (Active Server Pages) 是由微软开发的一种服务器端脚本环境，当浏览器请求一个 .asp 文件时，Web服务器（如IIS）会执行该文件中的脚本，然后将纯HTML结果发送回浏览器，这意味着用户在浏览器中是看不到ASP代码的。

ASP的主要优势:

: 可以根据用户输入、数据库查询结果等动态生成HTML页面。
服务器端处理: 敏感操作（如数据库连接、密码验证）在服务器上完成，用户无法窥探。
状态管理: 可以使用 Session 和 Application 对象在不同页面间保存用户信息和全局数据。

ASP开发环境配置

ASP需要在服务器上运行,最常用的环境是 IIS (Internet Information Services)，这是Windows系统自带的Web服务器。

配置步骤 (以Windows 10/11为例):

启用IIS功能:
- 打开 “控制面板” -> “程序” -> “启用或关闭Windows功能”。
- 在列表中勾选 “Internet Information Services” 及其子项：
  - World Wide Web 服务 -> 应用程序开发功能 -> 确保 ASP 和 ASP.NET 已勾选。
- 点击“确定”等待安装完成。
配置网站:
- 打开 “Internet Information Services (IIS) 管理器” (可以在开始菜单搜索)。
- 在左侧“连接”面板中，右键点击 “网站”，选择 “添加网站...”。
- 网站名称: 填一个你喜欢的名字，如 MyASPWebSite。
- 物理路径: 选择你存放ASP文件的文件夹（D:\MyASPProject）。
- 端口: 默认为80，如果被占用可以改为其他端口（如8080）。
- 点击“确定”。
测试:
- 在你创建的物理路径下,创建一个 test.asp 文件，内容如下：
```
<%
    Response.Write("Hello, ASP World!")
%>
```
- 在浏览器中访问 http://localhost:你的端口号/test.asp (http://localhost:8080/test.asp)。
- 如果看到 "Hello, ASP World!"，说明环境配置成功！

ASP语法基础

ASP代码通常嵌入在HTML文件中,使用 <% ... %> 标签包裹。

示例: hello.asp

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">ASP 示例</title>
</head>
<body>
    <h1>欢迎</h1>
    <p>
        <% 
            ' 这是一个VBScript注释
            Dim userName ' 声明一个变量
            userName = "访客" ' 给变量赋值
            Response.Write("你好，" & userName & "！当前时间是: " & Now())
        %>
    </p>
</body>
</html>

关键点:

语言: ASP默认使用 VBScript 作为脚本语言。
变量: 使用 Dim 关键字声明，使用 & 符号连接字符串。
输出: 使用 Response.Write() 方法将内容输出到HTML页面。
注释: 使用单引号。

内置对象详解

ASP提供了多个内置对象,方便开发者与Web交互。

a. `Request` 对象 - 获取客户端数据

用于获取从浏览器发送到服务器的数据,如表单数据、Cookie、URL参数等。

示例: 处理 login.asp 表单提交

<%
    ' 获取表单提交的数据
    Dim username, password
    username = Request.Form("username")
    password = Request.Form("password")
    ' 简单的验证逻辑 (实际项目中应连接数据库验证)
    If username = "admin" And password = "123456" Then
        Response.Write("登录成功！欢迎, " & username)
    Else
        Response.Write("登录失败！用户名或密码错误。")
    End If
%>

Request.Form("name"): 获取 method="post" 的表单数据。
Request.QueryString("name"): 获取URL中的查询字符串数据 (page.asp?id=123)。
Request.Cookies("name"): 获取客户端的Cookie。

b. `Response` 对象 - 向客户端发送数据

控制服务器发送给浏览器的响应。

Response.Write(): 输出内容。
Response.Redirect("URL"): 将浏览器重定向到另一个URL。
Response.Cookies("name") = "value": 在客户端创建或修改Cookie。

示例: 登录成功后重定向

<%
    ' ... (之前的验证代码) ...
    If username = "admin" And password = "123456" Then
        ' 创建一个Session来标记用户已登录
        Session("isLoggedIn") = True
        Session("user") = username
        ' 重定向到欢迎页面
        Response.Redirect("welcome.asp")
    Else
        Response.Write("登录失败！")
    End If
%>

c. `Session` 对象 - 用户会话

为单个用户在多个页面之间保存信息，信息存储在服务器上，有超时时间（默认20分钟）。

示例: welcome.asp

<%
    ' 检查用户是否已登录
    If Session("isLoggedIn") <> True Then
        Response.Write("你尚未登录，请<a href='login.asp'>登录</a>。")
        Response.End ' 停止执行后续代码
    End If
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>欢迎页面</title>
</head>
<body>
    <h1>欢迎, <%= Session("user") %>!</h1>
    <p>这是一个受保护的页面。</p>
    <a href="logout.asp">退出登录</a>
</body>
</html>

<%= ... %> 是 Response.Write(...) 的简写。

d. `Application` 对象 - 应用程序级数据

为所有用户在整个应用程序（网站）范围内共享数据，数据存储在服务器上，直到应用程序重启。

示例: 记录网站在线人数

<%
    ' 当一个新用户访问时，Application变量加1
    Application.Lock ' 锁定Application，防止并发问题
        Application("visitors") = Application("visitors") + 1
    Application.Unlock ' 解锁
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>网站访问统计</title>
</head>
<body>
    <h1>当前网站访问人数: <%= Application("visitors") %></h1>
</body>
</html>

数据库操作 (ADO)

ASP最强大的功能之一就是与数据库交互,通常使用 ADO (ActiveX Data Objects)。

步骤:

连接数据库 (使用 Connection 对象)。
执行命令 (使用 Command 对象或直接执行SQL)。
获取记录 (使用 Recordset 对象)。
处理数据 (遍历 Recordset)。
关闭连接 (释放资源)。

示例: 显示数据库中的用户列表

假设我们有一个SQL Server数据库，其中有一个 Users 表，包含 ID, Name, Email 字段。

<%
    ' 1. 连接数据库
    Dim conn, rs, sql
    Set conn = Server.CreateObject("ADODB.Connection")
    ' 使用Windows身份验证连接本地SQL Server
    conn.ConnectionString = "Provider=SQLOLEDB;Data Source=.;Initial Catalog=YourDatabaseName;Integrated Security=SSPI;"
    conn.Open
    ' 2. 准备SQL查询
    sql = "SELECT ID, Name, Email FROM Users"
    ' 3. 执行查询并获取记录集
    Set rs = Server.CreateObject("ADODB.Recordset")
    rs.Open sql, conn
    ' 4. 处理数据
    If Not rs.EOF Then ' 检查是否有记录
        Response.Write("<table border='1'>")
        Response.Write("<tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>")
        Do While Not rs.EOF
            Response.Write("<tr>")
            Response.Write("<td>" & rs("ID") & "</td>")
            Response.Write("<td>" & rs("Name") & "</td>")
            Response.Write("<td>" & rs("Email") & "</td>")
            Response.Write("</tr>")
            rs.MoveNext ' 移动到下一条记录
        Loop
        Response.Write("</table>")
    Else
        Response.Write("数据库中没有用户数据。")
    End If
    ' 5. 关闭连接并释放对象
    rs.Close
    Set rs = Nothing
    conn.Close
    Set conn = Nothing
%>

一个完整的ASP项目示例

项目目标: 一个简单的用户登录系统，包含登录、欢迎和退出功能。

文件结构:

D:\MyASPProject\
├── index.html          (登录页面)
├── login.asp           (处理登录逻辑)
├── welcome.asp         (欢迎页面)
└── logout.asp          (退出登录)

index.html (登录表单)

<!DOCTYPE html>
<html lang="zh-CN">
<head><title>登录</title></head>
<body>
    <h1>请登录</h1>
    <form action="login.asp" method="post">
        用户名: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <button type="submit">登录</button>
    </form>
</body>
</html>

login.asp (登录验证)

<%
    Dim username, password
    username = Request.Form("username")
    password = Request.Form("password")
    ' 简单硬编码验证 (实际应查询数据库)
    If username = "test" And password = "password" Then
        Session("isLoggedIn") = True
        Session("user") = username
        Response.Redirect("welcome.asp")
    Else
        Response.Write("登录失败！<a href='index.html'>返回重试</a>")
    End If
%>

welcome.asp (欢迎页)

<%
    If Session("isLoggedIn") <> True Then
        Response.Redirect("index.html")
    End If
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head><title>欢迎</title></head>
<body>
    <h1>欢迎, <%= Session("user") %>!</h1>
    <p>你已成功登录。</p>
    <a href="logout.asp">退出登录</a>
</body>
</html>

logout.asp (退出)

<%
    Session.Abandon ' 销毁当前用户的Session
    Response.Redirect("index.html")
%>

总结与展望

HTML 是所有网页的基石，负责结构和内容，学习它是Web开发的第一步。
ASP 是一个经典的服务器端技术，用于创建动态、交互式的网站，虽然现在有更现代的技术（如PHP, Python (Django/Flask), Node.js, ASP.NET Core），但理解ASP的原理（服务器端脚本、内置对象、数据库连接）对于学习任何后端技术都有帮助。

学习建议:

先精通HTML: 确保你对HTML标签、表单、布局有扎实的理解。
再学习ASP: 从基础语法开始，然后重点掌握 Request 和 Response 对象，再深入 Session 和数据库操作。
动手实践: 不要只看代码，亲手创建每一个示例，并尝试修改它们，看看会发生什么。
进阶: 当你熟悉ASP后，可以学习如何使用CSS美化页面，用JavaScript增加客户端交互，并深入研究ADO的高级功能。

这份教程为你提供了从零开始构建一个动态网站的完整路径,祝你学习愉快！

HTML amp ASP网页制作教程