HTML客户端知识扫盲

最新推荐文章于 2022-03-15 14:57:11 发布

OnlyQi

最新推荐文章于 2022-03-15 14:57:11 发布

阅读量1.3k

点赞数 2

分类专栏： Web 文章标签： html javascript 浏览器 asp xml

本文链接：https://blog.csdn.net/OnlyQi/article/details/7449647

版权

Web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

内容是从别人那里学来的，供大家参考。同时仅涉及了客户端 (即浏览器)相关的技术。

HTML即hypertext markup language。最早期的internet是没有html的，因此当用户希望分享一张图片以及一段图片的文字说明时，需要分别把图片和文字发送给接受方。有了html之后，用户不再需要将声音，图片和文字分开发送或共享给别人，html将这些东西统一在了一起，并清晰的定义了这个统一的文档的布局。同时使用URL可以方便的定位这些html资源。因此html的出现意义重大，正是html触发了互联网的全面繁荣。

那么我们是如何看到一个html页面的呢？最开始，浏览器做的事情很简单：

1，发送http request到web服务器(更准确的说是http服务器，例如apache)，用来得到一个html页面。html是存储在http服务器上的资源，比如一个静态的html文件。httpl服务器找到被请求的资源并发送给客户端。

2，收到返回的html页面后，浏览器展示html给用户。

服务器返回的html包含了所有内容。包括网页里包含的数据，以及如何展示网页，比如颜色，字体，排版等。

浏览器按照规则显示给用户就ok了。

而现在的交互变成了：
1，浏览器发送http request到web服务器，得到了一个html页面。
2，浏览器发现这个html页面include了一些css 文件，或javascript文件(.js)，还有一些图片。
3，浏览器再次向http服务器发送请求，将这些附加的文件下载到本地。(有时本地的cache中已经有一些文件了，则不需要再次download)。
4，浏览器将html渲染以后展示给用户。

css可以控制如何展示一个html页面

早期的html并不一定符合xml标准，但是后来基本上html都符合xml的规范，但这并不是必须的。

当html遵守xml规范后，用于xml的css也被应用到了html上。

浏览器收到一个html页面后，应用一个单独的css文件(也可以是内嵌到html里的)，将最终的效果展示给用户。

于是页面包含的数据和如何展示页面这两个任务就分开了。服务器最重要的任务是将用户请求的数据转送给浏览器，而如何展示则大部分由浏览器来决定。

分离这两个任务带来的灵活性，对于显示现在越来越复杂绚丽的网页的意义非常重大。

浏览器也可以使用xslt来展示页面。例如，如果在浏览器中打开一个html，而其实这个html是一个纯xml文件时，浏览器就会使用默认的xslt转换xml并展示。

和css仅控制如何显示页面不同，xslt是将源文件转换成了另一种形式。因此xslt也可以用于做其他的转换，比如将xml转换成xhtml或csv。

DOM

当浏览器收到一个html页面后，会将里面的内容在内存中实例化出来一个DOM对象(浏览器都会内置一个xml dom parser)。

这里回顾一下xml dom的定义：

The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them. In other words: The XML DOM is a standard for how to get, change, add, or delete XML elements.

DOM使用一个树结构来描述一个xm document。在这个结构中，每个xml element，attribute等，都是一个对象。

例如，document代表整个xml。我们可以在javascript代码中使用document.getElementByID()来取得xml的一个element。而返回的这个element也是一个对象，我们可以直接在这个对象上应用对应element的各种method。

相应的，对于html，有对应的html dom (http://www.w3schools.com/htmldom/default.asp)。html dom 描述了html的结构，同时提供了修改html的入口。例如删除dom对象的某个element node，这个dom对应的那个html就不再有这个element了。用户也将不再能看到这个element。

DOM的概念非常重要，它是实现JavaScript的基础。

JavaScript是运行在浏览器这个容器内的一种脚本语言。和css一样，JaveScript的代码可以内嵌在html里，或单独为一个文件。Javascript让html变成可交互式的。

注意JavaScript和Java没有任何关系。只有当浏览器暴露DOM对象给JavaScript后，它才能够通过修改dom来修改html页面。

因此JavaScript无法做任何浏览器没有暴露给它的功能之外的任何事。

假如现在浏览器暴露了可以修改本地文件系统的api，那么javascript就有了可以修改本地文件的功能。如果没有暴露，javascript是无法完成这件事情的。
可以说，javascript生活在浏览器的世界里，这就是为什么javascript被称为客户端语言 ( client language )。

浏览器除了形成dom外，还给dom附加了event的功能。

HTML DOM Events

http://www.w3schools.com/jsref/dom_obj_event.asp

HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.

例如，当用户在html页面点击了一个按钮，浏览器可以检测到这个event。而javascript可以订阅这个event。当浏览器可以检测到这个event后，它将通知所有的订阅者

从而触发javascript的代码，对用户的点击做出回应。如此就实现了交互。这种交互可以分为两种：

1，不需要请求新的页面内容。例如当用户点击“删除”时，将当前html页面对应的内容(实际是DOM对象)隐藏起来让用户感觉删除了。

2，需要发送http request请求新的资源。例如在一个图片展示的html，用户点击“下一页”，javascript收到这个event，发送http request请求新的图片并最终展示给用户。

综上所述，
可以说html, css和javascript是现代web页面的三大组成部分。
To find the path to an interactive web page, you must follow the trail of structure (HTML) to style (CSS), and then to action (JavaScript).
有了javascript，就可以实现真正的interactivity。
而JavaScript作为现在非常流行的语言，它的运行速度是各个浏览器性能的重要指标。
每种浏览器都有一个javascript解释器，它的任务就是运行javascript代码。
这也是为什么javascript也被称为解释性语言( interpreted language)。

AJAX

http://www.w3schools.com/ajax/ajax_intro.asp

先来看看AJAX是如何工作的：

当浏览器发现用户触发某个event后，浏览器创建一个 XMLHttpRequest 对象，然后发送httprequest。浏览器收到response后，javaScript process returned data, update page content。
AJAX = Asynchronous JavaScript and XML.
它不是什么新技术，就是指上面的这个过程，同时是基于javascript的。目的是为了不再reload整个html页面。
例如我们现在经常可以看到在网页中点击某个button，页面内容发生了变化，但是浏览器地址栏的URL并没有发生任何改变。

jQuery
http://www.w3schools.com/jquery/default.asp
jQuery is a JavaScript Library.

The jQuery library contains the following features: