WEB 技术概述(1)|学习笔记

简介: 快速学习 WEB 技术概述

开发者学堂课程【Tomcat 器入门详解WEB 技术概述】学习笔记,与课程紧密联系,让用户快速学习知识。  

课程地址:https://developer.aliyun.com/learning/course/654/detail/10843


WEB 技术概述

 

目录:

一、WEB 技术

二、HTML

三、CSS (Cascading Style Sheets) 层叠样式表

五、浏览器

六、JavaScript

七、静态网页技术

八、动态网页技术

九、语言分类

十、常见语言

 

一、WEB 技术

操作系统有进程子系统,使用多进程就可以充分利用硬件资源。进程中可以多个线程,每一个线程可以被 CPU 调度执行,这样就可以让程序并行的执行。这样一台主机就可以作为一个服务器为多个客户端提供计算服务。

客户端和服务端往往处在不同的物理主机上,它们分属不同的进程,这些进程间需要通信。跨主机的进程间通信需要使用网络编程。最常见的网络编程接口是Socket。

Socket 称为套接字,本意是插座。也就是说网络通讯需要两端,如果一端被动的接收另一端请求以提供计算和数据的称为服务器端,另端往往只是发起计算或数据的请求,称为客户端。

这种编程模式称为 Client/Server 编程模式,简称 C/S 编程。开发的程序也称为 C/S程序。CS 编程往往使用传输层协议 (TCP/UDP),较为底层。

到1980年 TCP/IP 协议研发成功。1984年, 美国国防部将 ARPA 在内的所有军事网络全部使用 TCP/IP 协议。同年域名系统和DNS服务器诞生。IBM、 AT&T. DEC 等公司陆续也加入到 CP/IP 阵营。1989年,加州大学伯克利分校在 BSD 中加入 TCP/IP协议,产生了广泛的影响。微软从 Windows 95开始支持。

1990年,HTML, 基于 TCP 协议的 HTTP 协议、浏览器诞生。在应用层使用文本跨网络在不同进程间传输数据,最后在浏览器中将服务器端返回的 HTML 渲染出来。由此,诞生了网页开发。

网页是存储在 WEB 服务器端的文本文件,浏览器发起 HTTP 请求后,到达 WEB 服务程序后,服务程序根据 URL 读取对应的 HTML 文件,井封装成 HTTP 响应报文返回给浏览器端。

起初网页开发主要指的是 HTML. CSS 等文件制作,目的就是显示文字或图片,通过超级链接跳转到另一个 HTML 并显示其内容。

后来,网景公司意识到让网页动起来很重要,傍着 SUN 的 Java 的名气发布了JavaScript 语言,可以在浏览器中使用S引擎执行的脚本语言,可以让网页元素动态变化,网页动起来了。

为了让网页动起来,微软使用 AtiveX 技术,SUN 的 Applet 都可以在浏览器中执行代码,但都有安全性问题。能不能直接把内容直接在 WEB 服务器端组织成HTML, 然后把 HTML 返回给浏览器渲染呢?

最早出现了 CGI (Common Gateway Interface) 通用网关接口,通过浏览器中输入URL直接映射到一个服务器端的脚本程序执行,这个脚本可以查询数据库并返回结果给浏览器端。这种将用户请求使用程序动态生成的技术,称为动态网页技术。

先后出现了 ASP、PHP、 JSP 等技术,这些技术的使用不同语言编写的程序都运行在服务器端,所以称为 WEB 后端编程。有一部分程序员还是要编写 HTML. CSS,

JavaScript, 这些代码运行在浏览器端,称为WEB前端编程。合起来称为Browser/Server 编程, 即 B/S 编程。

tomcat 在企业级的应用当中是非常重要的,也是重点掌握的服务tomcat,其实就是 web 开发。并不是讲解开发,而是去了解整个 web 的生态,以及 web 的概念,了解在 web 当中常碰到的技术有哪些这些技术都能解决什么问题,各自都是什么样的技术栈。

首先学习的是 web 技术的发展,知道它的来龙去脉。

那么 web 技术在发展之前从最早没有操作系统,到后来出现了单道处理程序,多道处理程序,到演化出现在所使用的现代操作系统,它有一个过程,但是现在的操作系统里面都提到了进程。

那在操作系统里面进程的管理进程系统进程子系统,那么进程子系统是值得去关注的,因为所有的程序最后都会变成进程在运行。那么,进程和程序到底有什么区别简单的讲,如果要特指程序的话,程序就指的是程序员写好的源代码,那是一个文本文件,这个文本文件就躺在磁盘上。它并不能直接运行。

看写的是 C 语言,还是 go 语言,还是 python 语言,或者写的是 javascript 都可以或者 java 都行。总之写源代码,应该有一个编译或者叫解释的过程。

有这样的一个过程之后,源代码才能变成可以运行的东西。但是这个运行东西里面有很多变化。

不同的语言有不同的考虑,比如C语言要就地编译,要结合当前的这个编辑器,结合当前的 cpu 的指令集结合当前操作系统系统的 API 环境而生成一个可执行文件,对于 Python 来讲就不是了。Python和Java 都是生成中间代码,然后运行在虚拟机之上。

不管怎么样最终都得有个运行环境。

JAVA 叫 JAVA 解释器PASSON 叫 PASSON 的解释器或者叫 PVMJVM 等等,那对于像 C 语言编译完或像 go 语言编译完应该编译,可执行文件比如说在 WINDOWS 下双击后会发现在进程管理器当中,多了一个进程。

源代码只是个文本文件它并不能直接去运行它而是运行在内存当中可以认为当程序编译之后,运行之后,它就会在内存当中出现一个实例这个实例是用来做进程管理的。所以如果要特指进程的话,它不过是这个可执行文件的一个在内存中的运行实例罢了它需要开辟内存空间。它在这个内存空间去管理一系列的数据结构。

比如说管着端口还管着文件描述符都需要在进程这个数据结构当中去管理。

学习操作系统原理,会发现里面是一大堆的各种各样的表记录着各种各样的信息。所以躺在磁盘上那个东西假如EXCE 这种可执行文件为例的话,它不过就是编译好的二进制的东西就是零和一组合

把这些东西加载操作系统进行加载,从编译好的这些指令进去之后,要找到入口,然后把这个进程拉起来。

拉到内存当中形成进程,这就是整个过程。所以进程是程序可执行文件的实例,是在内存中的实例。

对于进程作用,操作系统最早就是从进开始的,进程和进程之间是隔离的,因为从单处理程序开始,每一个进程都认为独占的整个的操作系统的资源Cpu 也是它的,端口都是它的,内存也都是

其实内存从来都是共享的,内存一直以来都是虚拟化的。

网卡就是一个很好的案例。所以这些东西从一开始都是虚拟化,包括 cpu 都是共享使用。一开始就是虚拟化只不过跟后来的虚拟化有一些差别了,什么叫虚拟化,就是把一个东西掰开了给多个用。把一个东西当多个东西来使用。

比如桌面机、虚拟机都是这样。一个操作好几个操作系统一起用,但 cpu,如果是早些年就一个核心,别争别抢一个一个来所以运行的这些进程它就可以使用硬件资源到底都是为了硬件资源。写软件就是为了合理地应用硬件,只不过有个操作系统,由操作系统帮协调罢了

在现代操作系统中,进程管理是非常重要的功能。在进程当中可能会有限制,不是所有的操作系统都有限成,但是在所遇到的现代操作系统当中是有现成的。其实要如果有线程的话,就记住一句话。真正干活的都是线程,如果是有线程,真正干活的是线程,程的工作是什么呢?

资源管理线程是真正干活的程是管理的程序管理各个子线程,让这些子线程们互相能够协调工作。

进程更像是资源的申请和管理单位,线程才是真正的工作单位,进程之间更像是国与国,从操纵员发展史可以了解,进更像是国与国的关系。

进程之间通信的代价是比较高的还得按照协议走,这个协议,说到底都是二进制的,把这个过程称为进程间通讯进程间通讯实际上到底层用的都是序列化与反序列化代价非常高。

但是,同级城之内的线程之间的关系,描述为称为叫省与省的关系。国家就是进程,它是可以协调的。省与省之间,它们可以通过国家协调但是直接要资源,是不可行的。以线程也有独立的数据结构,也就是说它这个数据结构是不与其他线程共享的一般称为叫线程。每个线程至少有自己的,不一定非得自己堆,但是一定有自己,也就说在这个县城的当中,这些数据是独立的,并不与其他线程共享。

共享进程的资源在这个进程内的线程可以共享进,那就是问国家要资源。理解线程之间交换数据的代价,以及进程和进程之间交换代价。单个进程资源有限,不得不再开一个节点,在那个节点上再去运行进程,也就是说跨进程通讯是实在是没办法了,不得已在另一个,甚至在另一个机器上再开进程了。那也就是说,有的时候进程和进程通讯不一定是在本机,甚至要跨机器,代价会更高。

在本机甚至在本进程内应该是代价是最小的,因为根本就不需要出海关。但是如果跨进程是一定要走海关的。各种检查还要谈判,还得有协议,还要做序列化,反序列化,所以代价会更高一些。如果跨节点,那就代价更高了,走互联网那就更慢了这就是它的基本原则注意跨进程,只要跨进程一定会牵扯到序列化与反序列化的话,不管走网络还是 socket 文件,只要是跨进球的代价就比较高。

掌握在进程和线程以及它们之间通信该如何优化的基本原则。

进程,认为自己就是一个国家,它能占的地盘都想占,认为整个硬件资源都是的。然后它里面又起着很多线程,这些线程要管理,要协调。然后线程,在的管理和协调下执行项目。

cpu 是来调度进程的,不如说实际上是在调度线程的,因为线程才是真正干活的。比如说线程是怎么干活,其实线程就是写的函数。其实调度线程调度的都是程序员写好的程序,就是函数。一个线程里面,其实就是跑一个函数包括 C 语言,包括 python 都是如此,就是跑函数,所以函数才是最重要的。

可以不用面向对象但是函数是跑不掉的,必须得用。

发概念,非常的重要cpu 调度的实际上本质上是线程,但是说 cpu 是掰开用的不光是线程里面的线程调度,还得跨进程调度其它进程的线程,觉得好像是齐头并进,其实如果是单cpu 的来讲的话,其实不是进齐头并进,它是并行,它实际上是真串行。但是如果是多核 cpu 的话,那每个核心都可以调用不同的线程,这样的话可以存在某些时候下可以存在为真并行。

但是调度 cpu 的时候,因为 cpu 有缓存,Cpu 一级二级三级缓存,然后在学习的时候就要说明 cpu 的亲缘性cpu 粘性所以整个的这个进程和线程的调度过程既有现代现代操作系统以后,就可以开始跨进程通讯了,这也是有必要的,但是,这个很早是很难完成的,只能在本机完成。

当时没有网络,后来发现多机需要互联,慢慢产生了网络这个网络的互联,大概产生在上世纪五六十年代,比较原始当网络产生以后。这时候,程序员就得让他们之间进行网络通信。

但是当时的网络通信,因为网络没有标准,当时的标准还没成立操作系统 Cpu 都没有通,Cpu 指令集也是乱七八糟的每一代型号都不一样同一家的每一代都不一样这就是早期遇到的问题到后来个人 PC 发展起来,这个廉价的 X 86系统才慢慢占领桌面,现在有一种桌面又占领了服务器端市场。所以跨主机通信,慢慢的甚至在本机内使用网络通信就流行起来了,做出贡献的应该是加州大学的伯克利分校。在 salaries 上面去加入了 socket。

Socket 是一种编程接口教编程接口Socket 翻译叫套接字。

建立一个连接通道,这个连接通道就是 Socket 打的一个虚拟的通道可以通行。所以 socket 的意思本身就是插座,它的作用就是为了让用户把它连接起来,就是两端都开辟插座,然后在这两端建立一个逻辑上的通道。逻辑通道要基于现在的网络系统,但是它并不限定网络协议,在提这个时候并没有直接说,指定什么协议了,它是一种统一编程接口,要连接,总得有个身份标识,到 TCPIP 当中就变成了IP 地址了它是一种统一接口。

Io 非常简单Io 里面就两个词,一个叫i,一个叫 o。也就是说,不过就是一进一出,不过就是一来一回。现在所有网络通讯,包括跟外部开发,管后面多么复杂,就是发个请求,给个响应一来一回io 系统只能如此。为了让用户拿到数据,搞得非常的复杂,它层次比较多,但是从这个浏览器角度来看,就发了个请求然后回来一来一回。网络通讯不过如此但是要建立端到端的,当时编程不统一。伯克利分校,就提出了这个 socket,把这个 socket 编程一提出之后,广受欢迎一直影响到今天,到今天为止,各操作系统都支持的网络开发编程底层全部都是 socket 编程。

Socket 编程分两端,这两端本身无差别,对任何一端来讲,它发请求回来了再到另一端看发请求回来了。但是,从角色角度来看,就有主动和被动之分了。把那个能够被动地接收请求,并且能够提供内容或者提供数据的这一端,往往称为叫server 端。把发起请求的这一端往往是没有数据要数据的这端。

把这称为 client,这就是著名的 socket 编程中的 CS 模式叫 client server 模式

client 模式是用户遇到最多的,因为 TCPIP 已经占领了整个广域网和局域网。基于TCPIP,进行 socket 编程,这些是网络编程的主流编程。但是网络不仅仅是 TCPIP协议,还有其他协议,但是目前局域网内也是这个协议。

这个协议,很早就开始往下发了,从最早的美国军方,到后来美国军方变成了阿帕,就从阿帕网开始,开始大约是在八三年左右。整个研发成功以后,就开始整个铺开了,到八四年的时候,TCPIP 就在美国军方的所有网络中全部使用 TCPIP。就是 TCPIP 的早期的时候。然后,因为美国的大专院校都是要承接国防部的项目的,然后,大专院校也就全部的陆陆续续的,接入到了这个美国军方的网络当中,也就是说科研院校通过这个网络也连在了一起。

然后在这个年代又出现了欧洲和美国的协议大战。七层模型这是欧洲想推的,美国说不行,已经连上了 TCPIP,2个就打架了,到最后的结果,应该是 TCPIP 战胜了。

TCPIP 跟七层模型有不太对等的映射关系,当时在设计的时候故意把网络层次做的简单化了。但是,不管后面有没有协议之争,最终胜利了,然后,胜利了之后,其实不是说想怎样就怎样,还是要有公司支持,那么当时it业最发达的几家大公司,公司全部加入 TCPIP。在这个前后就有欧洲的很多的这个院校,包括科研机构就连入了其中有一个非常著名的机构这个机构就是欧洲核子研究中心或者欧洲原子能机构在瑞士。

所以,当时这个欧洲原子能机构,就接入了这个互联网。当时可能还没定名叫互联网中国应该是在1994年左右中关村第一个连入互联网。终于可以跟世界说 hello中关村第一个,那个时候网速只有可能64 K。

伯克利分校在自己的 BFD 当中,加入了这个 TCPIP,这是八九年左右的事情,基础就已经全部都有,后来 Windows 也加入这个阵营

那么在互联网连入到这些科研机构之后,就有个人开始动脑筋了。1989年的时候,破天荒地写了一篇论文,去年是互联网诞生就是万维网诞生30年。这就是因为八九年的时候,他写了一篇文章,并且在九零年的时候,它是实施这个文章里面他的构想。那么在九零年的时候,以一己之力,创建了或者说发明了 HTML,发明了HTTP 协议,TCP 协议,然后发明了浏览器。

这三个东西发明之后,科研机构的论文可以用图文并茂的方式可以展示了。它可以在 TCPIP 协议之上基于文本进行传输,数据的传输,传送 HTML,然后用浏览器解析并且展现

由此慢慢就演化出来的,有一部分人专门做网页,这就是最早最原始的网页开发网站就开始了。美国在线当时的门户网站,不能叫网站,是通过黑底儿白色命令行方式就没有网页一说。当然,美国在线课程发现,原来网站可以有这么好的展现力,慢慢就开始做网页了。

美国在线更早一些但是那个时候就没有网站。

网站1991年诞生,最早先得有操作系统,有进程,然后进程之间要通信,甚至要跨节点通信,这个时候就要有网络,网络水到渠成,TCPIP 连入大专院校,然后就有了有人就开始动脑筋了,如何通过网络分享这种论文。诞生了网页技术,网页技术包括 HTTP 协议。但前提是得有一个好的网络基础,比如说 TCPIP 有了这些之后,可以发起请求了,然后把网页装浏览器。

网页不过就是躺在磁盘中的那个 HM2,最原始的情况到目前为止,其实大多场景下,为了性能,要把动态的网页变成静态化。也就是说得把它生成 HTML,因为HTML 有好处,静态的便于缓存。所以最原始的到今天还在用。所以说静态的技术还很重要,那么静态最早指将要的资源,以 HTML 为例,写好的 HTML 就是一个纯文本的文件,这个纯文本文件躺在了磁盘当中。url 是一个逻辑路径,是逻辑上的,它并不能代表物理路径,然后通过 server,就是 CS 编程中的 server,通过路径映射找到这个 HTML,找到之后打开文件。

文件在磁盘上逻辑上认为它是一个字节挨着一个字节的字节流。一个字节一个字节读出来之后,再通过发送缓冲区,一个字节一个字节版发出去,它本身就是字节流,本身它就是序列化的。然后通过缓冲区将这种序列一个个的字节发过去,封装成报文发过去,对端是浏览器进程跨进程通讯,收到了这一个个字节之后,将他们拼接在一起,然后用上层协议理解,理解之后,如果遇到中文还得解码,不然乱码,解码之后发现,HTML 里面它会有一些标签,最后解析并且渲染出来。这就是用户看到的网页。

网络编程,实际上是有两种,一种是基于 socket 编程,那个往往会传二进制通信,但网页编程不是,网页编程已经建好了协议,这个协议就是上层应用层的 HTTP 协议。基于它进行文本的传输,当然以后也发展出来基于其他数据传输。

最早,其实就是为了显示这些文本,HTML 只是解决了格式的问题层叠样式表,来解决网页的格式显示,这两个合起来成立了万维网组织 W3C 组织。那么网页里面就可以显示图片了,而且可以显示比较漂亮的格式,从最开始设计的时候就有一个叫 A 标签的东西。A 标签里面有一个叫 HIF 的属性就是超链接。那超链接有了之后,点就发生了跳转,就跳转到另一个资源,那就是超级链接到另一个资源,url是另一个资源的资源定位符。点另一个资源,将发起一个新的 HTTP 的请求,然后等待服务器的响应。

然后,网页在1990年发布这些技术之后,在1991年创建了世界上第一个网站。这时候就有一些爱动脑筋的,看到这技术不错,但是没想到这技术能够彻底改变世界但是他们觉得这是个商机,觉得这是商机。网页太死板网页是静态的不能动当时连浮动的广告条,到处跑那个广告条都没有,这些人就发现了,得让网页动起来。那这个时候,到1993年以后有一个人,他成立了一家公司,这个公司就是当时大名鼎鼎的网景公司说这个网页要动起来,因为它是引领着浏览器的潮流,他就发明了一个脚本。

这个脚本想了半天,名字不好起,刚好他跟 SUN 公司在做合作,SUN 公司有个语言叫 Java现在卖的很火想借名牌用一下。SUN 公司比较开放同意了网景公司的请求,所以起脚本名为 javascript。

然后,在浏览器当中加入了 javascript 的支持。

这一加入,就再也去不掉了。这时候,微软与之开始竞争,制作了j script vbscript 脚本

然后,有了脚本之后确实可以控制网页中的这些元素,可以让他们动起来,但是注意这不叫动态网页技术。这是由于前端使网页动起来的技术,不叫动态网页,动态网页技术只得向 JSP 这种东西,为了让网页有更好的表现力,因为当初的浏览器,它这个进程,它做了一个限制。因为浏览器当时如果不做限制的话,用了脚本之后,在脚本里写一句格式化硬盘涉及了安全性的问题,所以浏览器进程必须控制,当时在写浏览器代码的时候,程序员们最讨厌客户提各种需求,因为浏览器是浏览器端编程,浏览器是限制编程的能力,但客户的需求认为能做的事情程序员就可以做。

有时是无法达成的需要有一些技术来帮助,比如说微软,如果用 Windows 系统,微软就提供 active X 技术,最常见的就是 flash。现在开始不用了因为安全性问题,到了 H325 之后才把这个问题解决了,网页需要展现力但是控制着你,在沙河模型里面有。当初允许做本地渲染。没有权限弄突破它需要自己写组建activex 组件包括 flash。

所以说微软推出这个技术,但是注意这些技术都是在浏览器端加了一个组件,这个组件突破了浏览器进程的限制。

当时 SUN 也做这个组件,当时还没有 JSP 技术,当时跟他类似的东西叫APPlet就是当时的小程序,但这个小程序,跟现在小程序不太一样,这个小程序,实际上是在前端,在浏览器端起个进程Java 的子代码安全性问题也不小,但是当时想各种办法来解决这个问题上安全问题当时只为占领市场几家打得不可开交,发现这才是下一代的入口,都在抢占这个入口,打得头破血流。但是安全性问题得想办法解决,为了安全,能不能在客户端、浏览器端只看 HTML 这种文本。

能不能要的内容都在服务器端组织发起一个 url 请求反正是个逻辑路径不用管,找的是哪个文件把请求发过来之后服务器发现这个请求之后去找一个程序这个程序去找数据库找完数据库之后把内容拿过来通过代码组织成文本这个文本就是 HTML再把 HTML 通过响应完后返回不用管后面处理。所以,有了这个思想之后,就出现了一个技术 cgi,这是最原始的东西,叫通用网关接口。

有了通用网关接口,但是当时编程非常蹩脚。java、PHP 公司就看到这种现象,包括微软都看到了,他们相继的在 CGI 的这种启发下,出现了各种技术,比如早期的PHPJSPASP。这些称为叫动态网页技术。

动态技术是在服务器端使用动态组织内容。要的内容不是现成的,现在需要用代码去到数据库当中,不用数据库,用 for 循环生成文本总之内容是动态的用脚本,或者说用程序生成,生成之后将内容组织好,返回来。所以把在服务器端运行的这些脚本,或者说运行这些程序,把这些程序叫服务器端的程序。那么编这种程序就称为叫服务器端编程,出现了 server 端编程。

然后把编写 JS,CS 称前端编程,或者称为叫 wap 前端编程。现在已经发展出了一个独立的东西,以前要写就自己写,就跟现在一样,有人说写全站之外全都是一样,前后端通吃,要全部写,不太现实

合起来 browse server 编程。browser 编程有了后端技术之后,才分了前后端。之前就是写网页,写 HTML,现在是 web 前端编程,因为有了JS更像是开发甚至JS 到目前为止,不是随便学个什么语言都可以做 JS 编码JS 编程现在还是相当难的。

JS 编程已经发展的非常的难所以 JS 编程不好学,一入前端深似海,前后端编程都出现了了职业。

但是当时,前后端编程还是分的不是很明显前后端编程一起做,比如说网页是给最终用户看的,现在各大网站做漂亮,如果前端就靠程序员做,审美都没有,做出来的东西用户不想看请美工学 photoshop,当时 photoshop 已经出来了。

程序员不愿意学 photoshop,所以就慢慢是有些纯做美化的,但是现在前端是一部分是做美化工作,另一部分是 JS 写代码,因为 JS 已经很难了所以美工就不一定能做得,但是十年前的技术能改一改,但是现在的前端框架动不了,美工没那本事了。所以在前端的开发中也必须做开发工作的分离就是后端开发跟前端团队分离,然后在前端开发做美工的合作 JS 的也得分离。

这样才能协同工作这就分出了不同的工种但是,两者都称为前端开发在后面写 asp 编程的,称为后端开发。有一种人可以跨前后端,因为后端在某个年代之后,后端也可以用 JS 编程,所以可以既做前端又做后端。

 

二、HTML

HTML (HyperText Markup Language) 超文本标记语言,它不同于编程语言。

超文本就是超出纯文本的范畴,例如描述文本的颜色、大小,字体等信息,或使用图片、音频,视频等非文本内容。

HTML 由一个个标签组成,这些标签各司其职。有的提供网页信息,有的负责图片,有的负责网页布局。

代码如下

< IDOCTYPE html>

首页

//尖括号组起来叫标签,标签一般来讲,它的上面有个文档说明,下面,是一个嵌套的层级结构形象把它称为叫一棵树标签,有一个专门的名称叫 dom 也就是文档对象模型。

HTML,它形成了最大的标签——标签,标签里面分两个,一个叫头部一般不用来显示,然后 body 部分就是浏览器中一般用来显示的部分,这个不是 HTTP的响应头响应头里面就会告诉用的是什么协议,然后,这个状态码是多少,协议头里面讲的是这些东西。响应报文里面放的是响应的正文部分响应头跟响应体其实就是两部分,响应体就响应的八类部分,HTML 里面有自己的头部,就是标题栏title不是在渲染部分显示。

指定字符编码,不指定字符编码会出错,因为浏览器要拆了,浏览器的时候就有可能错浏览器,如果的时候认为是 GBK,结果UTTF-8,中文就全乱套了。

以前,这就是乱码的根源,乱码根源就是编码解码不统一,尤其对于中文这种。

Meta 叫原标签可以写语言标签,如一些网站的说明给爬虫使给搜索引擎用所以打开一个门户网站或者网站右键一打开,它那个 head 部分的 meta 写的非常多在首页里面,通过网站的域名后面加个斜杠,加就是访问它的根路径,访问根路径以后,把基本信息填好了,搜索引擎就知道网站的功能了。

大多网站都为了让人访问,所以在访问的首页一定要把本网站的信息填写完整,这就是头部的基本作用,当然头部里面还可以放脚本,头部里面还可以放样式表。

超文本需要显示,就得有软件能够呈现超文本定义的排版格式,例如显示图片.表格,显示字体的大小颜色,这个软件就是浏览器。

超文本的诞生是为了解决纯文本不能格式显示的问题,是为了好看,但是只有通过网络才能分享超文本的内容,所以制定了 HTTP 协议。

如今, HTML 依然是互联网中展示数据最主要的方式,广泛的应用在 PC 端和移动端。

HTML 是右键打开原文件呈现出的景象可是有时候程序员失望,右键打开以后一看,网页只有几行这就是现代前端技术的发展带来

最早,发明 HTML ,HTML 前面是一个纯文本的东西,HTML 叫超文

超文本字面的意思是不是普通的文本而是超越了普通文本因为打开记事本之后,里面只能写文字,实际上输入的不是字符,而是字节,也就是各种编码在计算机当中,底层其实都是无差别的零和一,不过就是赋予了某种意义。

超越了文本意思在这里面可以显示图片把图片插入在这个格式中的这个位置,然后,可以通过一个描述将这个文字最后用浏览器展现的时候,可以有颜色有大小,甚至还可以隐藏,它可以显示等等。

这就超越了一般文本。甚至还可以描述这个文字,可以把它渲染成链接一点就能指向另一个资源。后来,慢慢的加入,觉得还是太单调了,比如听音乐就要支持wav 格式,但是 Wav 格式太大了,不适合传输,要做有损压缩,慢慢可以直接在浏览器当中,把 MP3 的音乐直接用来播放,调本地资源播放。后来影音都要支持,视频支持要装组件,最常用的就flash 这就是超越了普通的文本然后技术就是慢慢增加,一代一代迭代。实在没办法迭代了,满足不了移动互联网时代,出现了 HTML5。

HTML5比 HTML4 稍微简单,而且 HTML5,还提供了本地的原生的渲染能力。有时候去视频网站,右键后发现不是 flash 菜单了,实际是H5的播放器了。

内容部分用来渲染里面可以放图片,注意图片是另一个请求。然后,可以放表格放文字等等超文本的诞生,解决了显示格式的问题,就是为了让文本更具有展现能力。

当初只是为了解决论文,因为论文是有图片的,论文有标题,这样好分享,所以那个年代只为了解决这个问题,但是没想到一旦被最终用户喜欢了,最终用户的需求就是无限的了。它有各种各样想法,希望实现。超文本再结合上发明的 HTTP这种传输文本的协议,当然基于 TCPIP就整个的推广开来了到目前为止,HTML 依然是整个万维网当中最主要的传输数据的方式。就包括移动端还在用HTML。

 

三、CSS (Cascading Style Sheets) 层叠样式表

HTML 本身为了格式化显示文本,但是当网页呈现大家面前的时候,需求 HTML 提供更多样式能力。这使得 HTML 变得越来越臃肿。这促使了CSS的诞生。

1994年,W3C 成立,CSS 设计小组所有成员加入 W3C, 并努力研发 CSS 的标准,微软最终加入。1996年12月发布 CSS 1.0。

1998年5月发布 CSS 2.0。

CSS 3采用了模块化思想,每个模块都在 CSS 2基础上分别增强功能。所以,这些模块是陆续发布的。不同厂家的浏览器使用的引擎,对 CSS 的支持不一样,导致网页布局、样式在不同浏览器不一样。因此,想要保证不同用户使用不同浏览器看到的网页效果一-直非常困难。

在部署时要遇到层叠样式表不管里面有没有标签儿,是纯文本。CSS 称为层叠样式表最早在设计 HTML 的时候,是这么设计的。

Body 写完之后,最后一定要封口的,尤其是 XML 里面更加要封口了。当时设计这样的东西,是这样写的,假设举个例子,H1大标签这个 H1是本身带的,但是,span 是一个区域,这个区域封口以后,在里面可以写文字,比如说 test。这个文字大小用 H1 标签,H1 标签叫 hyde,也就是大标题。

要在每一个标签上都得重复实现这些属性,发现工作不能继续了,在部分上面已经实现了。发现标签极其臃肿而且是重复劳动。这个时候发现有一个小组技术不错,准备来解决样式问题,小组叫 CSS

——层叠样式表研发小组。之后成立 W3C 组织。

九一年第一个网站成立,发现不成立组织不行了,应该是协商着解决整个万维网的发展,要成立一个组织,这个组织到目前为止依然是整个万维网发展的标准的制定方。标准的主要制订方控制着整个的发展,万维网发明人 Tim Berners 来主管。微软虽然加入但是不听话,那就是微软,微软总是有自己一套,微软带来了很多的噩梦。微软总是不按标准出牌。

九八年的时候发布 CS2,到目前为止应该是广泛支持的,所以说如果这个网页是CS2 的标准化没问题几乎所有的浏览器全部支持CS3,到目前为止还在陆续的发标准,它是按模块化逐步的去增强逐步增强,那就是说标准到现在还没完。

出现浏览器不支持,导致网页的这种显示的不正常,是浏览器的事,在做开发和测试的时候,没有把指定浏览器测试在内导致的样式显示不对是,跟部署没有关系。就是因为包括 HTML HTML5,不同的浏览器,不同的 CSS 标准在陆续发布,不同浏览器对 HTML 的标准,对 CSS 的标准,实现的程度不一样,不同浏览器,哪怕是同一种浏览器的不同版本,支持也不一样,甚至不同版本,上个版本还好说,下个版本都有 bug 了。

比如说著名的 IE 浏览器就 bug,可能 IE7 测试好,IE8 都不一定是好的就是这么个情况在 firefox 中这个的版本不行,高版本可以,但是假如用户用的还是低版本,Chrome 用的是低版本,就会导致无法显示。这不是部署的事,这是开发和测试的事情。不同的浏览器,哪怕同一种浏览器的不同版本对标准的支持是不一样的,还有 JS 的标准,它的支持都是不一样的。导致开发人员想保证在所有浏览器上想实现同样效果,至少一个最低的要求说,在网页里面别出错,别错位,但是这都很难。几乎不太现实。

在所有浏览器上都能够正常显示基本上是做不到的。应该是尽量少的让浏览器出现问题,做大量测试也无法保证。不是说数据错误,只是样式格式显示的问题。不同浏览器用不同的方法来解决

HTTP 第一版 HTML 以及浏览器都是下面这位大神——Tim Berners-Lee,他是英国人。他的贡献非常大,在技术方面的品格非常高尚。

为了解决这个论文的问题,科研院所已禁用 TCPIP 协议连起来了。而且当时的其实互联网的节点不多。

Tim Berners-Lee 在1989年3月发表了一篇文章,深远的影响到今天,这篇文章叫information management proposal。但是,光有这篇文章不行,所以他辛辛苦苦发明了 HTML,发明了 HTTP,发明了 brother,终于有人看到了。那么30年后他就坐到这儿来畅谈整个万维网的发展。他说当初他把他想简单了。他没想到会有今天的应用,因为它当初其实就是为了信息的共享,没想到会深远地影响整个网络事件。

他其实觉得现在网络上有些东西是违反了他的初衷,他不希望整个世界以互联网为恶。如果让重新设计的会设计的更好,但是不可能。已经不是他一家说了算了是,有的时候还被一些利益裹挟着,就是有些大公司说我就不按你的套路来怎么办。W3C 不是说强制性的组织所以有自己的一些设想。他基于他所发明这些技术在1991年的时候,欧洲核子研究中心将全世界第一个 WWW 网站发布。

他在九零年发布,在九一年创建了第一个网站,九四年,在 MIT 创建 W3C,包括CSS,来推动整个万维网的建设,到目前他还在负责。

他自己说的一句话,W3C 的标准应该服务于全人类,不应该有版权,不应该有专利权。

相关文章
|
2天前
|
存储 安全 数据安全/隐私保护
Web应用程序的会话管理是一种跟踪和识别特定用户与Web服务器之间交互的技术
【5月更文挑战第12天】Python Web开发中,会话管理用于跟踪用户与服务器交互,如Flask框架提供的内置功能。以下是一个简单示例:安装Flask后,设置应用密钥,通过session读写用户状态。例如,创建一个显示和设置用户名称的Web应用,用户提交的名字将保存在会话中。在生产环境中,应安全存储密钥,如使用环境变量。扩展会话管理可借助第三方库实现更多功能,但可能需更多配置。
9 2
|
6天前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
11 0
|
12天前
|
存储 前端开发 安全
13:会话跟踪技术Session的深度应用与实践-Java Web
13:会话跟踪技术Session的深度应用与实践-Java Web
28 3
|
12天前
|
存储 前端开发 搜索推荐
12:会话跟踪技术Cookie的深度应用与实践-Java Web
12:会话跟踪技术Cookie的深度应用与实践-Java Web
24 4
|
14天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
14天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
14天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
14天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
14天前
|
移动开发 JavaScript 前端开发
【JavaScript技术专栏】Web Worker在JavaScript中的应用
【4月更文挑战第30天】HTML5的Web Worker API解决了JavaScript单线程性能瓶颈问题,允许在后台线程运行JS代码。本文介绍了Web Worker的基本概念、类型、用法和应用场景,如复杂计算、图像处理和数据同步。通过实例展示了搜索建议、游戏开发和实时数据分析等应用,并提醒注意其无法直接访问DOM、需消息传递通信以及移动端资源管理。Web Worker为前端开发提供了多线程能力,提升了Web应用性能和用户体验。
|
15天前
|
缓存 前端开发 JavaScript