网页工作原理与结构详解
立即解锁
发布时间: 2025-08-17 00:51:42 阅读量: 1 订阅数: 5 

### 网页工作原理与结构详解
#### 1. TODO示例应用介绍
TODO示例应用是一个任务管理应用,可用于记录日常活动清单。它包含一个主任务列表,列出所有已输入的任务,每个任务都有一个超链接,点击可查看该任务的详细信息。可以添加任务描述、分配对象和截止日期,还能过滤任务列表,只显示自己的任务或所有人的任务。
#### 2. 网页渲染过程
当用户在主列表中点击特定的TODO项时,会显示相应的网页。这个网页是存储在Web服务器上的`EDITTASK.WC`文件的渲染版本。具体渲染步骤如下:
1. 执行`CLASS_TSK`文件中的`EDITTASK`方法,该方法对应链接`http://localhost/todo/edittask.tsk?id=1000`,会查询`TODO`表中主键为1000的记录。
2. `EDITTASK`方法调用Web Connection框架的`EXPANDTEMPLATE()`方法:
```foxpro
response.expandtemplate(PROCESS.cHTMLPAGEPATH+"edittask.wc",loHeader)
```
3. Web Connection打开磁盘上的`EDITTASK.WC`文件并开始解析,查找ASP标签(如`<% %>`),标签内使用Visual FoxPro语言。
4. 评估`<% %>`标签内的表达式,将结果插入相应位置,要求结果为字符串。
5. 服务器完成所有表达式评估后,将硬编码的HTML页面发送回请求的浏览器。
6. 浏览器读取HTML页面,解析确定要使用的对象(文本框、下拉框、文本区域等),显示其可视化表示,评估页面加载时需要运行的JavaScript代码,处理外部链接(如图像)。
```mermaid
graph LR
A[用户点击TODO项] --> B[执行EDITTASK方法]
B --> C[查询TODO表记录]
C --> D[调用EXPANDTEMPLATE方法]
D --> E[解析EDITTASK.WC文件]
E --> F[评估ASP标签表达式]
F --> G[服务器发送HTML页面到浏览器]
G --> H[浏览器解析并显示页面]
```
#### 3. 网页组成部分
##### 3.1 HTML页面头部
HTML页面中`<BODY>`标签之前的部分不会在浏览器中显示,包含元标签和脚本功能,用于表单验证和动态HTML(DHTML)功能。具体如下:
- **DOCTYPE**:指定文档类型定义(DTD),帮助表单验证器检查HTML表单是否符合特定标准。常见的DOCTYPE声明如下:
- `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`:声明文档为HTML 4.01 Strict,强调结构展示,不允许使用过时元素、框架和链接目标。
- `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`:声明文档为HTML 4.01 Transitional,包含HTML 4 Strict的所有元素和属性,并添加了表示属性、过时元素和链接目标。
- `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`:专门用于使用框架的页面。
- `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">`:指定页面遵循HTML 3.2版本,大多数浏览器完全支持该版本。
- **`<HTML>`**:告诉浏览器后续是HTML代码。
- **`<HEAD></HEAD>`**:包含页面级信息,如META标签、页面标题、样式表引用和JavaScript代码。
- **TITLE标签**:定义浏览器窗口标题栏中显示的文本,通常是网站名称。
- **LINK标签**:定义用于定义网站外观的CSS文件,也可引用其他类型的文件,如外部JavaScript函数库。
- **META标签**:为搜索引擎提供页面额外信息,为浏览器提供缓存当前页面的特殊指令。常见的元标签有“keywords”和“description”。
- **SCRIPT标签**:告诉浏览器标签内是脚本语言,通常是JavaScript,用于添加表单验证和动态HTML(DHTML)功能,开发者可通过JavaScript访问文档对象模型(DOM)。
##### 3.2 HTML页面主体
`<BODY>`部分包含用于在浏览器中显示信息的标签,所有表单对象都位于此部分。
- **通用菜单和横幅**:使用Visual FoxPro的`FILETOSTR()`函数读取`HEADER.HTM`文件并将其插入页面,该文件不包含需要评估的ASP标签。这样可以为整个网站提供一致的菜单和横幅,便于维护。菜单包含“Add Task”、“List all Tasks”和“List my Tasks”三个命令。
- **`<FORM>`标签**:为所有表单元素(如文本框、文本区域和列表框)提供包装。当网页提交回服务器时,`<FORM></FORM>`标签内的所有对象值将作为一系列名称/值对发送到浏览器。`<FORM>`标签的属性如下:
- **ACTION=**:告诉服务器页面提交时应执行的操作,通常是调用Web Conn
0
0
复制全文
相关推荐










