Web基本技术

HTML、CSS与 JavaScript

网页主要由三部分组成: 结构( Structure) 、 表现( Presentation) 和行为( Behavior)

  • HTML —— 结构, 决定网页的结构和内容(“是什么”)
  • CSS —— 表现(样式) , 设定网页的表现样式( “什么样子”)
  • JavaScript(JS) —— 行为, 控制网页的行为(“做什么”)

html概述

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

html基本结构

一个html的基本结构如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

第一行是文档声明,第二行<html>标签和最后一行</html>定义html文档的整体,<html>标签中的‘lang=“en”’定义网页的语言为英文,定义成中文是'lang="zh-CN"',不定义也没什么影响,它一般作为分析统计用。<head>标签和</head>标签是它的第一层子元素,<title>标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,<body>内编写网页上显示的内容。

CSS 概述

相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

JavaScript 概述

JavaScript 是一种跨平台,面向对象的脚本语言。作为一种小巧且轻量级的语言,JavaScript 无意于独立运行,而是被设计为可以轻易嵌入到其它的产品和应用中,比如 Web 浏览器。在宿主环境中,JavaScript 可以被连接到环境中的对象之上,以提供对其的编程控制。

JavaScript是前端开发工程师必须掌握的三大技能之一:

  • 描述网页内容的HTML
  • 描述网页样式的CSS
  • 网页行为的JavaScript

JavaScript是一门高端的,动态的,弱类型的编程语言,非常适合面向对象和函数式的编程风格。

CGI

CGI:通用网关接口(Common Gateway Interface)是一个Web服务器主机提供信息服务的标准接口。通过CGI接口,Web服务器就能够获取客户端提交的信息,转交给服务器端的CGI程序进行处理,最后返回结果给客户端。组成CGI通信系统的是两部分:一部分是html页面,就是在用户端浏览器上显示的页面。另一部分则是运行在服务器上的Cgi程序。

CGI的工作原理

1.标准CGI

当客户端的用户完成了一定输入工作(比如填充完HTML文档中的FORM表)之后向服务器发出HTTP请求(称为CGI请求),服务器守护进程接收到该请求后,就创建一个子进程(称为CGI进程)。该CGI子进程将CGI请求的有关数据设置成环境变量,在外部CGI程序与服务器间建立两条数据通道(标准I/O),然后启动URL指定的CGI程序,并与该子进程保持同步,以监测CGI程序的执行状态。子进程通过标准输出流将处理结果传递给服务器守护进程,守护进程再将处理结果作为应答消息回送到客户端。外部CGI程序通过环境变量、命令行参数、标准输入输出与WWW服务器进行通讯,传递有关参数和处理结果。

  • 环境变量:当服务器守护进程创建子进程运行CGI程序时,设置相应的环境变量和命令行参数,以传递客户端和服务器的有关信息给该子进程。
  • 命令行参数:命令行参数仅在有HTML文档中有SINDEX查询的情况下使用。
  • 标准输入输出:当HTTP请求模式采用POST方式时,CGI程序通过标准输入流和有关环境变量来获取客户端传输数据;如采用GET方式时,CGI程序直接通过环境变量获取客户端传输数据。当CGI程序要返回处理结果(一般为HTML文档)给客户端时,它通过标准输出流将该结果数据传递给服务器守护进程。

2.缓冲CGI

标准CGI使用Stdin/Stdout来进行数据通讯,这是由其最初开发环境(Unix操作系统)所决定的。但是许多Windows环境下的编程工具(如VB和Delphi等)是不支持这种I/O方式的,这时就不能用它们来开发基于标准CGI的应用程序。于是有些服务器提出了缓冲CGI的概念。缓冲CGI亦称为WinCGI。此时CGI扩展程序与服务器间通过缓冲CGI而不是标准CGI进行通讯,而缓冲CGI与服务器间的通讯还是通过标准CGI接口。后者由WWW服务器的内置缓冲处理程序实现。缓冲CGI的工作原理与标准CGI相似,不同的是当服务器守护进程接收到客户端的CGI请求时,所建立的CGI子进程将CGI请求的有关数据设置成环境变量外,还将它们保存在输入缓冲区中;通过缓冲处理程序在外部CGI程序与服务器间建立两条数据通道(输入/输出缓冲区)。CGI子进程通过输出缓冲区将处理结果传递给服务器守护进程。此处外部CGI程序通过环境变量和输入/输出缓冲区与WWW服务器进行通讯,传递有关参数和处理结果。此处环境变量的意义同上,不过这些环境变量及其相应值保存在输入缓冲区中。此外,输入缓冲区中还存放客户端的传输数据(如采用POST模式的话)。输出缓冲区用来存放扩展程序的处理结果。

3.标准CGI与缓冲CGI的区别

对CGI扩展程序而言,最主要差别在于数据的I/O不同:对缓冲CGI,服务器与CGI扩展程序间的数据交换是通过缓冲区;而标准CGI是通过标准I/O。使用缓冲CGI可选择更多的开发工具,可以开发Windows95和WindowsNT下的GUI扩展程序;而使用标准CGI所选用的开发工具必须支持标准I/O。只有少数几种WWW服务器支持缓冲CGI,因此基于它的扩展程序兼容性不如标准CGI好。