前端学习一次-HTML5原理概述-优快云博客

本文链接：https://blog.youkuaiyun.com/YangsBlog/article/details/75212785

1.B/S和C/S的比较

C/S: Client/Server 桌面应用程序

优点：交互性强，用户体验佳。
缺点： 1. 版本差异大，更新不及时，服务器端可能同时面对多个版本，编码困难。
2. 原生程序，与操作系统关联大，故障率高，维护成本高。
3. 兼容性低，不能跨平台。
4. 安全威胁大，面临反编译的风险。
5. 下载安装，如果程序比较大，需要消耗大量时间。
6. 客户端维护成本高，需要管理员数量多。
开发平台：VB/DELPHI/VC….

B/S：Browser/Server

WEB应用程序（打开网站=打开浏览器执行WEB应用程序）
优点：
无需下载和安装软件，节约大量时间
版本无差异，服务器无需面对多版本。
非原生程序，对操作系统依赖低，容易维护。
可以跨平台，兼容多种移动应用平台。
安全威胁低，没有把代码交给用户。
集中运算，运算压力在服务器，对客户端机器的档次需求低，形成“瘦客户端”应用。降低了硬件开销。
缺点：　１.开发较为复杂，需掌握多种技术，成本较高。
　　　　　　　２.界面交互性欠缺，用户体验低于Ｃ/S应用。
开发平台：PHP/ASP.NET/JAVA EE/PERL/PYTHON/RUBY….

B/S未来

HTML目前主要是4.01, 但是HTML5已经开始大行其道。
4.01 时代，我们主要依靠AJAX（阿贾克斯）技术提高页面体验，通过JSON格式来传送数据。

B/S是大势所趋，C/S逐步失去优势。 AJAX和HTML5技术的出现，再加上JSON的高效的数据传输格式，都大大提升了B/S的用户体验，B/S的缺点正逐步被解决，前景光明。

所有Android和IOS原生开发，都将被B/S模式所替代。

2. Markup Language （标记语言）

一种语义表达能力强大的人和计算机交互的中间语言，是一项重大发明, 不需要编译。

标签头 tag header
标签尾（标签收口） tag tail
标签属性值对（tag attribute key/value）保存在标签头中
标签体 tag body

一个标签没有标签体，可以简略缩写收口。
例如： book标签也可以拥有标签体

3.标记语言的典型实践应用

(1). HTML (Hyper-Text Markup Language) 超文本标记语言

W3C (World-Wide-Web)是一个互联网各种规范和标准的制定机构，在美国。
W3C在制定网页语言标准时候，参考了大量实现，后来发现还是用标记语言比较合理。 W3C根据标记语言的规范，自行定义了几十个标签，来描述网页的各个方面，这些标签是固定的，每个都有特定的含义，用户不能自行定义标签。

http://www.w3schools.com （英文站点）镜像站点： http://w3schools.bootcss.com/default.html
http://www.w3school.com.cn (中文站点，N久没更新）

HTML所提供的内容展示的效果应该比普通的图书表现能力强大多了，可以播放声音，电影以及有直接挑战连接，不需要去翻书。

HTML的规范性不如XML，相对随意，比如：
<br>
<input type="text" name="username">
<input type="radio" checked>

(2). XML (eXtensible Markup Language可扩展标记语言)

标签种类不受控制，只要能够配平即可。
<cat></dog> (error)
<cat furColor></cat> (error)
<cat furColor="black"></cat> (ok)
<cat furColor="black"/> (ok)

XML经常作为数据的载体，经常用来做配置文件。

(3)网页解析本质

a、解析案例

浏览器(browser)加载HTML文件的流程
example:
<html>
<head>
<title>测试页面</title>
</head>
<body>
学生姓名：
<input type="text"></input>
</body>
</html>

step 1: IE读取该文本文件，发现其后缀为HTML， IE加载了HTML解析(parsing)引擎对该文档进行解析处理。
(解析器 parser)
step 2: 当读取到<HTML>的时候，IE创建一个HTML对象，类似于HTML h=new HTML()；
当读取到<head>的时候，IE又创建一个head对象，类似于：
Head head=new Head();
h.setHead(head);

读取到title
Title title=new Title(“测试页面”);
head.setTitle(title);
Body body=new Body(“学生姓名:”);
Input input=new Input();
Input.setType(“text”);
Body.setInput(input);

Step 3: HTML对象解析创建成功后，将占用大量内存，这些对象均创建在进程的堆中。
接下来，IE将调用显示引擎根据既定的协议把对象画到界面上，这个过程，我们叫其为“渲染”，render。