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、负载均衡的问题
一般以下有5种解决方案:
1、HTTP重定向
HTTP重定向就是应用层的请求转发。用户的请求其实已经到了HTTP重定向负载均衡服务器,服务器根据算法要求用户重定向,用户收到重定向请求后,再次请求真正的集群
2、DNS域名解析负载均衡
DNS域名解析负载均衡就是在用户请求DNS服务器,获取域名对应的IP地址时,DNS服务器直接给出负载均衡后的服务器IP。
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算法,即上面提到的两种散列算法。
2、Session Replication
Session replication就是在集群中复制session,使得每个服务器都保存有全部用户的session数据。
3、Session数据集中存储
Session数据集中存储就是利用数据库来存储session数据,实现了session和应用服务器的解耦。
4、Cookie Base
Cookie base就是把Session存在Cookie中,由浏览器来告诉应用服务器我的session是什么,同样实现了session和应用服务器的解耦。
值得一提的是:
解决了以上的问题之后,系统的结构如下:
阶段四、数据库读写分离化
上面我们总是假设数据库负载正常,但随着访问量的的提高,数据库的负载也在慢慢增大。那么可能有人马上就想到跟应用服务器一样,把数据库一份为二再负载均衡即可。
但对于数据库来说,并没有那么简单。假如我们简单的把数据库一分为二,然后对于数据库的请求,分别负载到A机器和B机器,那么显而易见会造成两台数据库数据不统一的问题。那么对于这种情况,我们可以先考虑使用读写分离和主从复制的方式。
读写分离后的系统结构如下:
这个结构变化后也会带来两个问题:
解决方案:
阶段五、用搜索引擎缓解读库的压力
数据库做读库的话,常常对模糊查找力不从心,即使做了读写分离,这个问题还未能解决。以我们所举的交易网站为例,发布的商品存储在数据库中,用户最常使用的功能就是查找商品,尤其是根据商品的标题来查找对应的商品。对于这种需求,一般我们都是通过like功能来实现的,但是这种方式的代价非常大,而且结果非常不准确。此时我们可以使用搜索引擎的倒排索引来完成。
搜索引擎具有的优点:它能够大大提高查询速度和搜索准确性。
引入搜索引擎的开销
搜索引擎并不能替代数据库,它解决了某些场景下的精准、快速、高效的“读”操作,是否引入搜索引擎,需要综合考虑整个系统的需求。
引入搜索引擎后的系统结构如下:
阶段六、用缓存缓解读库的压力
常用的缓存机制包括页面级缓存、应用数据缓存和数据库缓存。
应用层和数据库层的缓存
随着访问量的增加,逐渐出现了许多用户访问同一部分热门内容的情况,对于这些比较热门的内容,没必要每次都从数据库读取。我们可以使用缓存技术,例如可以使用Google的开源缓存技术Guava或者使用Memecahed作为应用层的缓存,也可以使用Redis作为数据库层的缓存。
另外,在某些场景下,关系型数据库并不是很适合,例如我想做一个“每日输入密码错误次数限制”的功能,思路大概是在用户登录时,如果登录错误,则记录下该用户的IP和错误次数,那么这个数据要放在哪里呢?假如放在内存中,那么显然会占用太大的内容;假如放在关系型数据库中,那么既要建立数据库表,还要简历对应的Java bean,还要写SQL等等。而分析一下我们要存储的数据,无非就是类似{ip:errorNumber}这样的key:value数据。对于这种数据,我们可以用NOSQL数据库来代替传统的关系型数据库。
页面缓存
除了数据缓存,还有页面缓存。比如使用HTML5的localstroage或者Cookie。除了页面缓存带来的性能提升外,对于并发访问且页面置换频率小的页面,应尽量使用页面静态化技术。
值得一提的是:
缓存集群的调度算法不同与上面提到的应用服务器和数据库。最好采用一致性哈希算,这样才能提高命中率。
加入缓存后的系统结构如下:
阶段七、数据库水平拆分与垂直拆分
我们的网站演进到现在,交易、商品、用户的数据都还在同一个数据库中。尽管采取了增加缓存和读写分离的方式,但随着数据库的压力继续增加,数据库数据量的瓶颈越来越突出,此时,我们可以有数据垂直拆分和水平拆分两种选择。
数据垂直拆分
垂直拆分的意思是把数据库中不同的业务数据拆分到不同的数据库中,结合现在的例子,就是把交易、商品、用户的数据分开。
优点:
缺点:
问题:
解决问题方案:
数据垂直拆分后的结构如下:
数据水平拆分
数据水平拆分就是把同一个表中的数据拆分到两个甚至多个数据库中。产生数据水平拆分的原因是某个业务的数据量或者更新量到达了单个数据库的瓶颈,这时就可以把这个表拆分到两个或更多个数据库中。
优点:
问题:
解决问题方案:
数据水平拆分后的结构如下:
阶段八、应用的拆分
按微服务拆分应用
随着业务的发展,业务越来越多,应用越来越大。我们需要考虑如何避免让应用越来越臃肿。这就需要把应用拆开,从一个应用变为俩个甚至更多。还是以我们上面的例子,我们可以把用户、商品、交易拆分开。变成“用户、商品”和“用户,交易”两个子系统。
拆分后的结构:
问题:
这样拆分后,可能会有一些相同的代码,如用户相关的代码,商品和交易都需要用户信息,所以在两个系统中都保留差不多的操作用户信息的代码。如何保证这些代码可以复用是一个需要解决的问题。
解决问题:
通过走服务化SOA的路线来解决频繁公共的服务。
走SOA服务化治理道路
为了解决上面拆分应用后所出现的问题,我们把公共的服务拆分出来,形成一种服务化的模式,简称SOA。
采用服务化之后的系统结构:
优点:
问题:
如何进行远程的服务调用?
解决方法:
可以通过下面的引入消息中间件来解决。
阶段九、引入消息中间件
随着网站的继续发展,的系统中可能出现不同语言开发的子模块和部署在不同平台的子系统。此时我们需要一个平台来传递可靠的,与平台和语言无关的数据,并且能够把负载均衡透明化,能在调用过程中收集并分析调用数据,推测出网站的访问增长率等等一系列需求,对于网站应该如何成长做出预测。开源消息中间件有阿里的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绘图、本地存储和表单增强等功能,为网页开发提供了更多的选择和可能性。
*请认真填写需求信息,我们会在24小时内与您取得联系。