01 - 网页和web标准

网页

1 什么是网页

1.1 网页的定义

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

1.2 一个电商网页的展示

1.3 构成网页的主要元素

核心：
HTML : 网页的结构
CSS ： 网页的表现形式
JavaScript：网页的行为
主要元素

• 媒体
• 音频
• 视频
• 图片
• 文本
• 动态效果
• 颜色

1.4 网页制作的编程语言

• 核心包含结构化标准语言（XHTML、XML）
• 表现标准语言（CSS）
• 行为标准（ECMAScript、DOM）

作用

通过分离内容与样式提升代码可维护性及跨设备兼容性 [2-5]。文档类型定义包括STRICT、TRANSITIONAL和FRAMESET三种模式，并推动XML作为内容描述语言的应用。

1.5 浏览器对网页的支持

有些浏览器具有原生的这种把网页保存为MHTML的方式，而有些浏览器可直接通过第三方的扩展支持MHTML格式。由于保存为MHTML的方式未经标准化，因此各浏览器存取的效果略有不同。

1.5.1 Internet Explorer

• Microsoft Internet Explorer自5.0版支持MHTML格式，是第一个支持MHTML文件的浏览器。

1.5.2 Opera

• Opera自9.0版支持把网页保存为MHTML文件，或读取MHTML文件。但基於WebKit/Blink的Opera 15却未提供此功能，直到Opera 16才恢复。

1.5.3 Firefox

• Mozilla Firefox需要安装MHT文件读写的扩展。有两个这样的扩展是免费提供的，如Mozilla Archive Format、UnMHT。

• 即使不通过Firefox扩展读写MHTML，通过Mozilla Thunderbird也可以读取MHTML文件。

1.5.4 Chrome

• 在当前版本的Chrome，原生创建MHTML文件要在chrome://flags启用实验性的选项，但启用实验项後单一网页仅能保存为MHTML格式，也可以安装MHTML文件读写的扩展程式。

1.5.5 Safari

• Safari不提供对MHTML的支持，代之以苹果公司自创的Webarchive（英语：Webarchive）格式，OS X的版本中还提供保存为PDF选项。也有人试图为Safari创建读写MHTML文件的扩展。

1.5.6 Konqueror

• Konqueror需要使用mhtconv扩展以实现对MHTML的支持。

1.5.7 ACCESS NetFront

• NetFront3.4（像是索尼爱立信K850等设备上的）可读取或保存MHTML文件。

1.5.8 Pale Moon

• Pale Moon需要安装MHT文件读写的扩展。有一个这样的扩展是免费提供的，即MozArchiver。

1.5.9 MHT阅读器

一些商业或民间开发者设计了MHT文件阅读器，还提供转换为其它格式（如转换为PDF）的选项。

• 网页标准（Web标准）是由W3C等组织制定的技术规范集合，旨在统一全球资讯网的开发与呈现方式。该标准涵盖结构、表现和行为三个层面，包含HTML、CSS、JavaScript等核心技术 。

2 为什么要使用网页

网页在数字时代具有多重作用，以下是主要用途：

2.1 信息传播与交互

网页是信息传播的核心渠道，通过搜索引擎、社交媒体等平台，用户可快速获取新闻、教育、娱乐等内容。同时，网页支持用户互动，如在线购物、社交分享、在线测试等，增强了用户体验。 ‌

2.2 企业与品牌建设

企业通过网页展示产品、服务及品牌价值，提升知名度并促进销售。例如，电商平台需设计清晰的产品展示和支付流程，而客户服务页面需包含FAQ、在线聊天等功能。 ‌

2.3 数据管理与远程操作

网页界面可显著提高数据可访问性，支持跨设备访问（如手机、平板），并实现远程管理（如数据备份、权限设置）。相比传统客户端软件，网页界面兼容性强、维护成本低。

2.4 用户体验优化

网页通过响应式设计适配不同设备，提供直观的交互设计（如拖拽、点击操作），并支持个性化界面（如管理员与普通用户权限区分）。此外，网页可自动更新功能，保持用户体验一致性.

2.5 移动应用与无障碍设计

响应式网页设计使网站在移动端提供一致体验，同时支持无障碍功能（如视觉、听觉辅助），确保残障人士也能有效使用。 ‌

3 网页的作用

3.1 信息展示与传播：

• 核心作用：网页是互联网中信息展示的主要载体。无论是新闻报道、学术论文、商业广告还是个人博客，网页都能以文本、图片、视频等多种形式呈现给用户。
  • 传播效率：通过搜索引擎和社交媒体等渠道，网页上的信息可以迅速传播到全球范围，实现信息的即时共享。

3.2 交互与服务：

• 用户交互：网页提供了丰富的交互功能，如表单提交、在线购物、评论留言等，使用户能够参与到网站的内容生成和互动中。
  • 在线服务：许多网页还提供在线服务，如邮箱、云存储、在线支付等，极大地方便了用户的生活和工作。

3.3 构成网站的基本元素：

• 网站构建：网页是构成网站的基本单元，多个网页通过链接相互关联，形成一个完整的网站结构。
  • 网站功能：网站的各种功能，如导航、搜索、会员系统等，都是通过网页来实现的。

3.4 承载网站应用：

• 平台支持：网页作为承载网站应用的平台，可以运行各种网页应用（如Web App），这些应用无需下载安装，即可在浏览器中直接使用。
  • 跨平台兼容性：网页应用具有良好的跨平台兼容性，可以在不同的操作系统和设备上访问，提高了应用的普及度和便利性。

WEB标准

1 web标准的定义

• 网页标准（Web标准）是由W3C等组织制定的技术规范集合，旨在统一全球资讯网的开发与呈现方式。该标准涵盖结构、表现和行为三个层面，包含HTML、CSS、JavaScript等核心技术 [2-4]。

• 标准化的推进始于浏览器战争后W3C对统一技术体系的建立，经历了从HTML4到HTML5的演进过程，并形成动态更新机制以适应技术发展需求 [2] [4]。主要浏览器对标准的支持存在差异，如Internet Explorer自5.0版起原生支持MHTML格式。

1.1 概括

• 一系列标准的集合
• 结构（Structure）、表现（Presentation）和行为（Behavior）
• 结构化标准语言主要包括XHTML和XML
• 表现标准语言主要包括CSS
• 行为标准主要包括对象模型（如W3C DOM）、ECMAScript
• 由万维网联盟（外语缩写：W3C）起草和发布，也有一些是其他标准组织制订的标准
• CMA（European Computer Manufacturers Association）的ECMAScript标准。

Web标准，使得Web开发更加容易。

1.2 web标准可以分为:

• 结构（html）
  • 结构主要是由一系列标签组成，我们只需要在页面body里面写入一些具有语义和结构的一些标签就可以实现页面的结构。
• 表现（css）
  • 表现即是css样式表。通过css可以让结构标签变得更具美感，为结构披上一件华丽的外装
• 行为（JavaScript）
  • 行为指的是页面与用户具有一定的交互，主要是有js组成。比如：页面轮播图、动态效果、动画等

标准的规范化旨在为网站中的网页制定一套完整且具有体系的系统，结构，样式，行为可以单独的写在分类好的文件夹中，管理起来也很方便

2 为什么要有web 标准？

• 对于浏览器开发商和 Web 程序开发人员在开发新的应用程序时遵守指定的标准更有利于 Web 更好地发展。

• 开发人员按照 Web 标准制作网页，这样对于开发者来说就更加简单了，因为他们可以很容易了解彼此的编码。

• 使用Web标准，将确保所有浏览器正确显示您的网站而无需费时重写。

• 遵守标准的Web页面可以使得搜索引擎更容易访问并收入网页，也可以更容易转换为其他格式，并更易于访问程序代码（如JavaScript和DOM）。

3 了解html的历史

• 在从html1～5，这期间经历了漫长的浏览器战争，在战争中每个浏览器都想称霸世界，都在不断增加自己的专用扩展包。
• 受害的是web开发人员，因为程序员要针对不同的浏览器需要单独写web页面。
• 直到html4的时候， 万维网协会结束了这场战争。
• W3C万维网创建了一个唯一的html标准。使结构表现分离成为两种语言，要求浏览器厂商也要遵循这套标准。
• html从1到5 会不会以后出现6 7 8，不会了。因为制定标准的人已经把这个规范变成了一个活的标准，他会随着技术的发展形成相应的文档，而不会在增加版本号。
• 网页从这场战争中，通过浏览器的不断更新和迭代，通过指定一套标准来规范网页编写的正确逻辑，这是有史以来网络发展的巨大变革

4 web的工作原理

1. 用户在浏览器的地址栏中输入需要访问的地址
2. 通过http协议访问到被访问的web服务器
3. 服务器将请求的网页（HTML）返回给请求的浏览器
4. 浏览器解析HTML代码，将解析后的效果展示在浏览器

4.1 图示

4.2 浏览器的工作原理

4.3 浏览器支持的语言

4.4 web的主要浏览器

1. Google chrome 浏览器（谷歌） Blink内核 （程序员开发利器）
2. Firefox 浏览器（火狐） Gecko内核，也俗称Firefox内核 IE 浏览器
3. Trident（也称IE内核）
4. Opera 浏览器 Blink 内核
5. safari 浏览器 webkit内核

5 网络通信协议

• http：超文本传输协议（HTTP，Hyper Text Transfer protocol）是互联网上应用最为广泛的一种网络协议。
  所有的www文件都必须遵守这个标准。
  设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
  1960年美国人 Ted Nelson构思了一种通过计算机处理文本信息的方法，并称之为超文本（hypertext），这成为了HTTP超文本传输协议标准架构的发展根基。

Ted Nelson 组织协调万维协会（world wide web Consortium）和互联网工程工作小组（Internet Engineering Task Force）共同合作研究，最终发布了一系列的RFC，其中著名的RFC 2016定义了HTTP 1.1.

6 网页的开发

• 采用XHTML+CSS来进行开发
• 页面的布局，采用DIV标签和CSS控制定位来实现