整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5教程从入门到精通,随堂笔记(一)HTML5框架结构

TML5从入门到精通,兄弟连京修随堂笔记(一)HTML的框架结构,每日都有新内容,订阅走一波

一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)。也就是将一个浏览器文档窗口分隔成多个窗口,每个窗口都可以显示一个独立的网页文件。

框架页使用了表格的方式组合,可以分为数行与数列。

框架的优点

重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度)。

方便制作导航栏。

框架的缺点

会产生很多页面,不容易管理。

不容易打印。

浏览器的后退按钮无效。

代码复杂,无法被一些搜索引擎索引到。

多数小型的移动设备(PDA 手机)无法完全显示框架。

多框架的页面会增加服务器的http请求。

由于上面诸多缺点,因此不符合标准网页设计的理念.已被标准网页设计抛弃

HTML框架标签

<frameset>标签 -- 代替body标签定义了框架页,并且定义了框架将分为多少行与多少列。常用属性如下:

cols -- 定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%

rows -- 定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%

border -- 定义frame定义的框架页的边框(单位像素),使用css实现

frameborder -- 定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)

framespacing -- 定义框架页之间间隔的距离,使用css实现

<noframes>标签

可为那些不支持框架的浏览器显示文本,和<body>组合使用

<iframe>标签

创建一个包含另外一个文档的内联框架,iframe标签内的内容可以做为浏览器不支持iframe标签时显示 。

frame标签 -- 定义frameset标签中每个框架页的内容

frame标签是单独出现的,<frame />

常用属性:

frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1

1 -- 在每个页面之间都显示边框

0 -- 不显示边框

name -- 在一个框架页链接到另一框架页时使用(另一个框架页可以使用target定义链接页)

noresize -- 定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)

scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto

yes -- 显示滚动条

no -- 不显示滚动条

auto -- 当需要时再显示滚动条

src -- 定义了内容页URL

border – 设置边框粗细

HTML框架示例

<html> <!-- 网页开始标记 -->

<head>

<title>使用框架定义后台管理平台模型</title>

</head> <!-- 设置网页标题 -->

<frameset rows="80,*" frameborder="1" border="5"> <!-- 划分两行 -->

<frame src="top.html" name="top" scrolling="no" noresize/> <!-- 顶部大类窗体 -->

<frameset cols="200, *"> <!-- 划分左右两列 -->

<frame src="menu.html" name="menu" scrolling="no" noresize/>

<!-- 左边菜单窗体 -->

<frame src="main.html" name="main" noresize />

<!-- 右边内容窗体 -->

</frameset> <!-- 内层框架结束 -->

<noframes>

<body><p>您的浏览器不支持框架,请升级浏览器</p></body>

</noframes>

</frameset> <!-- 外层框架结束 -->

</html>

我们以Java Web为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变。

该系统具备的功能:

  • 用户模块:用户注册和管理
  • 商品模块:商品展示和管理
  • 交易模块:创建交易和管理

正文


阶段一、单机构建网站

网站的初期,我们经常会在单机上跑我们所有的程序和软件。此时我们使用一个容器,如Tomcat、Jetty、Jboss,然后直接使用JSP/Servlet技术,或者使用一些开源的框架如Maven + Spring + Struts + Hibernate、Maven + Spring + Spring MVC + Mybatis。最后再选择一个数据库管理系统来存储数据,如MySQL、SqlServer、Oracle,然后通过JDBC进行数据库的连接和操作。

把以上的所有软件包括数据库、应用程序都装载同一台机器上,应用跑起来了,也算是一个小系统了。此时系统结果如下:

阶段二、应用服务器与数据库分离

随着网站的上线,访问量逐步上升,服务器的负载慢慢提高,在服务器还没有超载的时候,我们应该就要做好准备,提升网站的负载能力。假如我们代码层面已难以优化,在不提高单台机器的性能的情况下,采用增加机器是一个不错的方式,不仅可以有效地提高系统的负载能力,而且性价比高。

增加的机器用来做什么呢?此时我们可以把数据库服务器Web服务器拆分开来,这样不仅提高了单台机器的负载能力,也提高了容灾能力。

应用服务器与数据库分开后的架构如下图所示:

阶段三、应用服务器集群

随着访问量继续增加,单台应用服务器已经无法满足需求了。在假设数据库服务器没有压力的情况下,我们可以把应用服务器从一台变成了两台甚至多台,把用户的请求分散到不同的服务器中,从而提高负载能力。而多台应用服务器之间没有直接的交互,他们都是依赖数据库各自对外提供服务。著名的做故障切换的软件有KeepAlived,KeepAlived是一个类似于Layer3、4、7交换机制的软件,他不是某个具体软件故障切换的专属品,而是可以适用于各种软件的一款产品。KeepAlived配合上ipvsadm又可以做负载均衡,可谓是神器。

我们以增加了一台应用服务器为例,增加后的系统结构图如下:

系统演变到这里,将会出现下面四个问题

  1. 用户的请求由谁来转发到到具体的应用服务器?
  2. 有那些转发的算法和策略可以使用?
  3. 应用服务器如何返回用户的请求?
  4. 用户如果每次访问到的服务器不一样,那么如何维护session的一致性?

针对以上问题,常用的解决方案如下:

1、负载均衡的问题

一般以下有5种解决方案:

1、HTTP重定向

HTTP重定向就是应用层的请求转发。用户的请求其实已经到了HTTP重定向负载均衡服务器,服务器根据算法要求用户重定向,用户收到重定向请求后,再次请求真正的集群
  • 优点:简单易用;
  • 缺点:性能较差。

2、DNS域名解析负载均衡

DNS域名解析负载均衡就是在用户请求DNS服务器,获取域名对应的IP地址时,DNS服务器直接给出负载均衡后的服务器IP。
  • 优点:交给DNS,不用我们去维护负载均衡服务器;
  • 缺点:当一个应用服务器挂了,不能及时通知DNS,而且DNS负载均衡的控制权在域名服务商那里,网站无法做更多的改善和更强大的管理。

3、反向代理服务器

在用户的请求到达反向代理服务器时(已经到达网站机房),由反向代理服务器根据算法转发到具体的服务器。常用的Apache,Nginx都可以充当反向代理服务器。
  • 优点:部署简单;
  • 缺点:代理服务器可能成为性能的瓶颈,特别是一次上传大文件。

4、IP层负载均衡

在请求到达负载均衡器后,负载均衡器通过修改请求的目的IP地址,从而实现请求的转发,做到负载均衡。
  • 优点:性能更好;
  • 缺点:负载均衡器的宽带成为瓶颈。

5、数据链路层负载均衡

在请求到达负载均衡器后,负载均衡器通过修改请求的MAC地址,从而做到负载均衡,与IP负载均衡不一样的是,当请求访问完服务器之后,直接返回客户。而无需再经过负载均衡器。

2、集群调度转发算法

1、rr轮询调度算法

顾名思义,轮询分发请求。
  • 优点:实现简单
  • 缺点:不考虑每台服务器的处理能力

2、wrr加权调度算法

我们给每个服务器设置权值Weight,负载均衡调度器根据权值调度服务器,服务器被调用的次数跟权值成正比。
  • 优点:考虑了服务器处理能力的不同

3、sh原地址散列算法

提取用户IP,根据散列函数得出一个key,再根据静态映射表,查处对应的value,即目标服务器IP。过目标机器超负荷,则返回空。
  • 优点:实现同一个用户访问同一个服务器。

4、dh目标地址散列算法

原理同上,只是现在提取的是目标地址的IP来做哈希。
  • 优点:实现同一个用户访问同一个服务器。

5、lc最少连接算法

优先把请求转发给连接数少的服务器。
  • 优点:使得集群中各个服务器的负载更加均匀。

6、wlc加权最少连接算法

在lc的基础上,为每台服务器加上权值。算法为:(活动连接数 * 256 + 非活动连接数) ÷ 权重,计算出来的值小的服务器优先被选择。
  • 优点:可以根据服务器的能力分配请求。

7、sed最短期望延迟算法

其实sed跟wlc类似,区别是不考虑非活动连接数。算法为:(活动连接数 +1 ) * 256 ÷ 权重,同样计算出来的值小的服务器优先被选择。

8、nq永不排队算法

改进的sed算法。我们想一下什么情况下才能“永不排队”,那就是服务器的连接数为0的时候,那么假如有服务器连接数为0,均衡器直接把请求转发给它,无需经过sed的计算。

9、LBLC基于局部性最少连接算法

负载均衡器根据请求的目的IP地址,找出该IP地址最近被使用的服务器,把请求转发之。若该服务器超载,最采用最少连接数算法。

10、LBLCR带复制的基于局部性最少连接算法

负载均衡器根据请求的目的IP地址,找出该IP地址最近使用的“服务器组”,注意,并不是具体某个服务器,然后采用最少连接数从该组中挑出具体的某台服务器出来,把请求转发之。若该服务器超载,那么根据最少连接数算法,在集群的非本服务器组的服务器中,找出一台服务器出来,加入本服务器组,然后把请求转发。

3、集群请求返回模式问题

1、NAT

负载均衡器接收用户的请求,转发给具体服务器,服务器处理完请求返回给均衡器,均衡器再重新返回给用户。

2、DR

负载均衡器接收用户的请求,转发给具体服务器,服务器出来玩请求后直接返回给用户。需要系统支持IP Tunneling协议,难以跨平台

3、TUN

同上,但无需IP Tunneling协议,跨平台性好,大部分系统都可以支持。

4、集群Session一致性问题

1、Session Sticky

Session sticky就是把同一个用户在某一个会话中的请求,都分配到固定的某一台服务器中,这样我们就不需要解决跨服务器的session问题了,常见的算法有ip_hash算法,即上面提到的两种散列算法。
  • 优点:实现简单;
  • 缺点:应用服务器重启则session消失。

2、Session Replication

Session replication就是在集群中复制session,使得每个服务器都保存有全部用户的session数据。
  • 优点:减轻负载均衡服务器的压力,不需要要实现ip_hasp算法来转发请求;
  • 缺点:复制时网络带宽开销大,访问量大的话Session占用内存大且浪费。

3、Session数据集中存储

Session数据集中存储就是利用数据库来存储session数据,实现了session和应用服务器的解耦。
  • 优点:相比Session replication的方案,集群间对于宽带和内存的压力大幅减少;
  • 缺点:需要维护存储Session的数据库。

4、Cookie Base

Cookie base就是把Session存在Cookie中,由浏览器来告诉应用服务器我的session是什么,同样实现了session和应用服务器的解耦。
  • 优点:实现简单,基本免维护。
  • 缺点:cookie长度限制,安全性低,带宽消耗。

值得一提的是:

  • Nginx目前支持的负载均衡算法有wrr、sh(支持一致性哈希)、fair(lc)。但Nginx作为均衡器的话,还可以一同作为静态资源服务器
  • Keepalived + ipvsadm比较强大,目前支持的算法有:rr、wrr、lc、wlc、lblc、sh、dh
  • Keepalived支持集群模式有:NAT、DR、TUN
  • Nginx本身并没有提供session同步的解决方案,而Apache则提供了session共享的支持。

解决了以上的问题之后,系统的结构如下:

阶段四、数据库读写分离化

上面我们总是假设数据库负载正常,但随着访问量的的提高,数据库的负载也在慢慢增大。那么可能有人马上就想到跟应用服务器一样,把数据库一份为二再负载均衡即可。

但对于数据库来说,并没有那么简单。假如我们简单的把数据库一分为二,然后对于数据库的请求,分别负载到A机器和B机器,那么显而易见会造成两台数据库数据不统一的问题。那么对于这种情况,我们可以先考虑使用读写分离主从复制的方式。

读写分离后的系统结构如下:

这个结构变化后也会带来两个问题:

  • 主从数据库之间数据同步问题。
  • 应用对于数据源的选择问题。

解决方案:

  • 使用MySQL自带的Master + Slave的方式实现主从复制
  • 采用第三方数据库中间件,例如MyCat。MyCat是从Cobar发展而来的,而Cobar是阿里开源的数据库中间件,后来停止开发。MyCat是国内比较好的MySql开源数据库分库分表中间件。

阶段五、用搜索引擎缓解读库的压力

数据库做读库的话,常常对模糊查找力不从心,即使做了读写分离,这个问题还未能解决。以我们所举的交易网站为例,发布的商品存储在数据库中,用户最常使用的功能就是查找商品,尤其是根据商品的标题来查找对应的商品。对于这种需求,一般我们都是通过like功能来实现的,但是这种方式的代价非常大,而且结果非常不准确。此时我们可以使用搜索引擎倒排索引来完成。

搜索引擎具有的优点:它能够大大提高查询速度和搜索准确性。

引入搜索引擎的开销

  • 带来大量的维护工作,我们需要自己实现索引的构建过程,设计全量/增加的构建方式来应对非实时与实时的查询需求。
  • 需要维护搜索引擎集群
搜索引擎并不能替代数据库,它解决了某些场景下的精准、快速、高效的“读”操作,是否引入搜索引擎,需要综合考虑整个系统的需求。

引入搜索引擎后的系统结构如下:

阶段六、用缓存缓解读库的压力

常用的缓存机制包括页面级缓存、应用数据缓存和数据库缓存。

应用层和数据库层的缓存

随着访问量的增加,逐渐出现了许多用户访问同一部分热门内容的情况,对于这些比较热门的内容,没必要每次都从数据库读取。我们可以使用缓存技术,例如可以使用Google的开源缓存技术Guava或者使用Memecahed作为应用层的缓存,也可以使用Redis作为数据库层的缓存。

另外,在某些场景下,关系型数据库并不是很适合,例如我想做一个“每日输入密码错误次数限制”的功能,思路大概是在用户登录时,如果登录错误,则记录下该用户的IP和错误次数,那么这个数据要放在哪里呢?假如放在内存中,那么显然会占用太大的内容;假如放在关系型数据库中,那么既要建立数据库表,还要简历对应的Java bean,还要写SQL等等。而分析一下我们要存储的数据,无非就是类似{ip:errorNumber}这样的key:value数据。对于这种数据,我们可以用NOSQL数据库来代替传统的关系型数据库。

页面缓存

除了数据缓存,还有页面缓存。比如使用HTML5的localstroage或者Cookie。除了页面缓存带来的性能提升外,对于并发访问且页面置换频率小的页面,应尽量使用页面静态化技术。

  • 优点:减轻数据库的压力, 大幅度提高访问速度;
  • 缺点:需要维护缓存服务器,提高了编码的复杂性。

值得一提的是:

缓存集群的调度算法不同与上面提到的应用服务器和数据库。最好采用一致性哈希算,这样才能提高命中率

加入缓存后的系统结构如下:

阶段七、数据库水平拆分与垂直拆分

我们的网站演进到现在,交易、商品、用户的数据都还在同一个数据库中。尽管采取了增加缓存读写分离的方式,但随着数据库的压力继续增加,数据库数据量的瓶颈越来越突出,此时,我们可以有数据垂直拆分水平拆分两种选择。

数据垂直拆分

垂直拆分的意思是把数据库中不同的业务数据拆分到不同的数据库中,结合现在的例子,就是把交易、商品、用户的数据分开。

优点:

  • 解决了原来把所有业务放在一个数据库中的压力问题;
  • 可以根据业务的特点进行更多的优化。

缺点:

  • 需要维护多个数据库的状态一致性和数据同步。

问题:

  • 需要考虑原来跨业务的事务;
  • 跨数据库的Join。

解决问题方案:

  • 应该在应用层尽量避免跨数据库的分布式事务,如果非要跨数据库,尽量在代码中控制。
  • 通过第三方中间件来解决,如上面提到的MyCat,MyCat提供了丰富的跨库Join方案,详情可参考MyCat官方文档。

数据垂直拆分后的结构如下:

数据水平拆分

数据水平拆分就是把同一个表中的数据拆分到两个甚至多个数据库中。产生数据水平拆分的原因是某个业务的数据量或者更新量到达了单个数据库的瓶颈,这时就可以把这个表拆分到两个或更多个数据库中。

优点:

  • 如果能克服以上问题,那么我们将能够很好地对数据量及写入量增长的情况。

问题:

  • 访问用户信息的应用系统需要解决SQL路由的问题,因为现在用户信息分在了两个数据库中,需要在进行数据操作时了解需要操作的数据在哪里。
  • 主键 的处理也变得不同,例如原来自增字段,现在不能简单地继续使用。
  • 如果需要分页查询,那就更加麻烦。

解决问题方案:

  • 我们还是可以通过可以解决第三方中间件,如MyCat。MyCat可以通过SQL解析模块对我们的SQL进行解析,再根据我们的配置,把请求转发到具体的某个数据库。
  • 我们可以通过UUID保证唯一或自定义ID方案来解决。
  • MyCat也提供了丰富的分页查询方案,比如先从每个数据库做分页查询,再合并数据做一次分页查询等等。

数据水平拆分后的结构如下:

阶段八、应用的拆分

按微服务拆分应用

随着业务的发展,业务越来越多,应用越来越大。我们需要考虑如何避免让应用越来越臃肿。这就需要把应用拆开,从一个应用变为俩个甚至更多。还是以我们上面的例子,我们可以把用户、商品、交易拆分开。变成“用户、商品”和“用户,交易”两个子系统。

拆分后的结构:

问题:

这样拆分后,可能会有一些相同的代码,如用户相关的代码,商品和交易都需要用户信息,所以在两个系统中都保留差不多的操作用户信息的代码。如何保证这些代码可以复用是一个需要解决的问题。

解决问题:

通过走服务化SOA的路线来解决频繁公共的服务。

走SOA服务化治理道路

为了解决上面拆分应用后所出现的问题,我们把公共的服务拆分出来,形成一种服务化的模式,简称SOA。

采用服务化之后的系统结构:

优点:

  • 相同的代码不会散落在不同的应用中了,这些实现放在了各个服务中心,使代码得到更好的维护。
  • 我们把对数据库的交互业务放在了各个服务中心,让前端的Web应用更注重与浏览器交互的工作。

问题:

如何进行远程的服务调用?

解决方法:

可以通过下面的引入消息中间件来解决。

阶段九、引入消息中间件

随着网站的继续发展,的系统中可能出现不同语言开发的子模块和部署在不同平台的子系统。此时我们需要一个平台来传递可靠的,与平台和语言无关的数据,并且能够把负载均衡透明化,能在调用过程中收集分析调用数据,推测出网站的访问增长率等等一系列需求,对于网站应该如何成长做出预测。开源消息中间件有阿里的Dubbo,可以搭配Google开源的分布式程序协调服务Zookeeper实现服务器的注册发现

引入消息中间件后的结构:

总结

以上的演变过程只是一个例子,并不适合所有的网站,实际中网站演进过程与自身业务和不同遇到的问题有密切的关系,没有固定的模式。只有认真的分析和不断地探究,才能发现适合自己网站的架构。

TML5是一种标记语言,用于创建和呈现网页内容。与早期的HTML版本相比,HTML5具有许多新的功能和改进,可以更好地支持动态内容、多媒体、图形和互动性。在本文中,我们将讨论如何使用HTML5制作网页,以及HTML5与旧版本HTML的区别。

首先,让我们了解一下HTML5的一些主要功能和优势。HTML5具有以下特点:

1. 语义化标签:HTML5引入了一些新的语义化标签,例如、、、等。这些标签的使用可以增强网页的结构并提高搜索引擎的可读性。

2. 多媒体支持:HTML5内置了对多媒体的支持,例如和标签,可以在网页上直接播放视频和音频文件,而无需使用第三方插件。

3. Canvas绘图:HTML5引入了元素,允许开发者通过JavaScript在网页上绘制图形和动画。这对于创建复杂的图表、可视化效果和游戏非常有用。

4. 本地存储:HTML5提供了几种本地存储方法,例如localStorage和sessionStorage。这些方法可以在客户端存储数据,使得网页可以更快地加载和响应用户的操作。

5. 表单增强:HTML5为表单提供了许多新的输入类型和属性,例如日期、时间、颜色、URL等。这些功能减少了对JavaScript的依赖,在客户端验证和收集用户输入数据时更加方便。

现在,让我们看看如何使用HTML5制作网页的基本步骤。

步骤一:创建HTML文档结构HTML5的网页结构包括、和等标签。在标签中,可以设置网页的语言属性()和字符编码()。在标签中,可以添加网页的标题()和其他元数据(标签)。在标签中,可以编写网页的内容。

步骤二:使用语义化标签为了增强网页的结构和可读性,应尽量使用语义化标签。例如,标签用于网页的标题和导航栏,标签用于网页的导航链接,和标签用于划分网页的内容部分。

步骤三:插入多媒体使用、和

等标签插入多媒体内容。例如,使用标签可以插入视频文件,并设置其属性(例如src、width、height)来指定视频的来源和尺寸。

步骤四:绘制图形和动画使用标签和JavaScript绘制图形和动画。通过在标签中指定宽度和高度,并调用JavaScript函数绘制图形,可以在网页上显示自定义的图形和动画效果。

步骤五:使用本地存储使用localStorage和sessionStorage等方法,在客户端存储数据。通过调用JavaScript的API,可以将数据存储在浏览器中,并在需要时读取和更新数据。

步骤六:优化网页性能使用HTML5的新功能来优化网页性能。例如,使用新的表单输入类型和属性可以在客户端验证和收集用户输入数据,减少对服务器的请求和响应时间。

现在,让我们来了解一下HTML5和HTML的区别。

HTML5是HTML的第五个版本,是对以前的HTML版本进行的改进和扩展。与HTML4相比,HTML5具有许多新的功能和语义化标签,使开发者能够创建更现代、丰富和交互性的网页。

以下是HTML5和HTML的一些区别:

1. 标签语义化:HTML5引入了许多新的语义化标签,如、、、等。这些标签增强了网页的结构和可读性,有助于搜索引擎优化和可访问性。

2. 多媒体支持:HTML5内置了对多媒体的支持,如和标签,可以在网页上直接播放视频和音频文件。而在HTML4中,需要使用第三方插件(如Flash)来实现相同的功能。

3. Canvas绘图:HTML5引入了元素,允许在网页上通过JavaScript绘制图形和动画。而在HTML4中,图形和动画的创建通常依赖于第三方插件或JavaScript库。

4. 本地存储:HTML5提供了localStorage和sessionStorage等方法,在客户端存储数据。这使得网页可以更快地加载和响应用户的操作。相比之下,HTML4需要通过服务器来存储和获取数据。

5. 表单增强:HTML5为表单提供了新的输入类型和属性,如日期、时间、颜色、URL等。这减少了对JavaScript和服务器的依赖,提高了用户体验。

总结起来,HTML5相对于HTML4具有更多的功能和改进,使得开发者可以创建更现代、丰富和互动性的网页。它提供了语义化标签、多媒体支持、Canvas绘图、本地存储和表单增强等功能,为网页开发提供了更多的选择和可能性。