目录:

网页代码的发展

分享本文:

Share Buttons
文章目录

网页由HTML结构代码、CSS样式代码、JS交互代码组成,了解它们的起源和发展,有助于理解建站这件事。

主要的时间线

时间线HTML结构CSS样式JS交互
1990年随万维网诞生
1993年免费开放全套技术标准提出构想
1995年HTML 2.0CSS 1.0JavaScript诞生
1997年HTML 4.0CSS 2.0各大浏览器语法统一
2008~2014年HTML5持续迭代CSS3分模块落地ES5/6更新,前端框架兴起
2015年至今HTML5拓展新增 Grid 栅格等高级特性每年更新,持续迭代

HTML结构

  • HTML 1.0 随万维网诞生,仅支持纯文本与超链接,功能极简。
  • HTML 2.0 新增图片、表单、输入框等基础内容标签。
  • HTML 3.0 仅发布草案,由于改动过于庞大,浏览器厂商无法兼容,从未正式落地商用。
  • HTML 4.0 完善表格、分区等标签,正式倡导HTML与CSS分离,HTML 4.01完全废弃样式标签。
  • HTML5 2008~2014年陆续支持音视频、Canvas 绘图、本地存储、移动端适配。2015年后新增 PWA、WebAssembly、WebGPU 等特性,网页可实现原生 APP 级功能。

世界上第一个网页

数据来源:https://info.cern.ch/hypertext/WWW/TheProject.html

网页代码的发展

CSS样式

  • CSS 1.0 可统一控制字体、文字颜色、段落间距、简单页面布局。
  • CSS 2.0 增加浮动、定位、打印样式、多终端适配规则,页面排版能力大幅提升。
  • CSS3 2008~2014年陆续增加圆角、渐变、阴影、2D/3D 动画、Flex 弹性布局、响应式媒体查询。2015后增加 Grid 栅格、原生嵌套、容器查询等高级特性,大幅简化复杂页面与移动端开发。

JS交互

  • 1995年,网页首次实现点击弹窗、表单校验等简单动态交互。
  • 1997年,ECMAScript 标准确立,统一各大浏览器 JS 语法,缓解各浏览器代码兼容混乱的问题。
  • 2006年,JS 工具库 jQuery 发布,简化浏览器兼容与页面 DOM 操作,大幅降低开发门槛。
  • 2009年,ES5发布,新增严格模式以约束早期不规范语法,新增数组方法、原生JSON支持、对象精细化操作 API,推动前端组件化框架诞生。
  • 2014年,ES6发布,大幅扩充 JS 语法,具备脱离 jQuery 独立开发的能力。
  • 2015年至今,每年一个正式 ECMAScript 版本,持续新增 API、语法、内置能力。

JS的衍生工具

标准的JS语法只支持基础操作,为了满足业务需求,还在 JS 的基础上发布了各种框架:

  • 2010年,谷歌发布 AngularJS,第一次把页面拆成可复用组件,提出组件化思路。
  • 2012年,微软发布 TypeScript,为 JS 增加静态类型校验能力,提升大型项目可维护性。
  • 2013年,Facebook 发布 React,用虚拟 DOM 革新页面渲染性能,大幅减少 DOM 开销。
  • 2014年,美籍华人尤雨溪开源 Vue 框架,上手门槛低,推动前后端分离模式全面普及。

JS衍生工具在外贸网站中的应用

  • 在 WordPress 网站中,页面编辑器 Gutenberg 和 Elementor 都用 TypeScript 编写源码。
  • 大量WP插件的面板依靠 React 组件搭建,包括但不限于以上两款页面编辑器、Rank Math SEO、TranslatePress、Google Site Kit.
  • 如果要在线预览3D 产品模型,或者实现在线定制功能,经常会用到 Vue.

后端代码

HTML、CSS、JS都属于前端代码,会发送到访客的浏览器中运行展示。如果需要操作数据库、处理业务逻辑,还需要运行在远程服务器上的后端代码,常用的开发语言有 PHP、Python、Java、Node.js 等。其中,Wordpress的开发语言为PHP.

并非所有网站都需要后端代码,如果只需要一个简单的落地页,不需要来自服务器的支持(后端程序和数据库都在服务器上),只用前端代码制作的网页也可以正常访问。近年兴起的AI建站,完全可以生成高质量的纯前端页面。

如果生成的网站只有静态资源(前端代码+媒体文件),甚至不用花钱购买源服务器,把资源上传到Cloudflare Pages,存放在 Cloudflare 全球边缘节点即可,访客访问时直接从就近 CDN 节点加载,不需要回源。

需要注意的是,绝大多数外贸B2B网站还是需要后端程序的,因为

  • 通常需要一个内容丰富的网站,而不是一个简单网页。
  • WP主题、WP插件都基于 PHP 后端程序运行。
  • 访客通过询盘表单提交的信息,要用数据库储存。


分享本文:

Share Buttons