整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
