整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Frameset 對象
Frameset 對象代表 HTML 框架集。
HTML frameset 元素擁有兩個或者更多的 frame 元素。每個frame 元素擁有一個單獨的文件。/p>
HTML frameset 元素規定框架集只有幾行或列會。
Frameset 對象屬性
W3C: W3C 標準。
| 屬性 | 描述 | W3C |
|---|---|---|
| cols | 設置或返回框架集中列的數目。 | Yes |
| rows | 設置或返回框架集中行的數目。 | Yes |
Frameset 對象事件
| 事件 | 描述 | W3C |
|---|---|---|
| onload | 在頁面載入完成后立即執行腳本。 | Yes |
標準屬性和事件
Frameset 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
文最初發布于 Bits and Pieces 博客，經原作者授權由 InfoQ 中文站翻譯并分享。
微前端是一個可以追溯到多年前的新趨勢。隨著新方法的出現以及各種挑戰被克服，它們正在慢慢地進入主流。但遺憾的是，許多非常明顯的認識誤區，讓許多人很難理解微前端到底是什么。
簡而言之，微前端就是將微服務的一些好處引入前端。除此之外，我們不應該忘記，微服務也不是什么“銀彈”。
提示：要在微前端或任何其他項目之間共享 React/Angular/Vue 組件，可以使用像 Bit 這樣的工具。它允許你從任何代碼庫中“harvest”組件，并將它們共享到 bit.dev 的一個集合中。它讓團隊可以在任何存儲庫中使用你的組件。使用它可以優化協作、加速開發和保持 UI 一致性。
示例：在 bit.dev 中查找共享 React 組件
我想列一下在過去幾個月中，我最常聽到的關于微前端的誤解。先從從一個明顯的例子開始。
目前，許多微前端解決方案都是 JavaScript 框架。這怎么可能錯呢？JavaScript 不再是可選的。每個人都想要高度交互的體驗，而 JS 在提供這些體驗中發揮著至關重要的作用。
除了加載速度快、可訪問 Web 應用的優點外，還有其他因素應該考慮。因此，許多 JavaScript 框架都提供了 isomorphic 渲染能力。最終，這讓它們不僅能夠在客戶端進行拼接（stitch），還能在服務器上準備好一切。如果有性能要求（如第一次有意義渲染的初始時間），這個選項聽起來很不錯。
請記住，isomorphic 渲染有其自身的挑戰。
然而，即使一個 JavaScript 解決方案沒有提供 isomorphic 呈現，這也沒什么問題。如果不想在構建微前端時使用 JavaScript，我們當然可以這樣做。有許多模式，其中很多根本不需要 JavaScript。
考慮一種“比較舊的”模式：使用<frameset>。我聽見你笑了？好吧，有一些現如今人們試圖做的分割，它以前就支持了（下文有更詳細的討論）。一個頁面（可能由另一個服務渲染）負責菜單，而另一個頁面負責標題。
復制代碼
<frameset cols="25%,*,25%"> <frame src="menu.html"> <frame src="content.html"> <frame src="sidebar.html"></frameset>如今，我們使用更靈活（且仍然受到活躍支持）的<iframe>元素。它們提供了一些很好的特性——最重要的是使得不同的微前端相互隔離，但仍然可以通過postMessage進行通信。
在 JavaScript 認識誤區之后，這是下一個層次。當然，在客戶端有多種技術可以實現微前端，實際上，我們甚至不需要<iframe>或任何類似的技術。
微前端可以像服務器端“includes”一樣簡單。有了諸如 Edge Side Includes 之類的高級技術，這將變得更加強大。如果我們排除了在微前端功能中實現的微前端場景，那么即使是簡單的鏈接也可以很好的工作。最終，微前端解決方案也能像小而獨立的服務器端渲染器一樣簡單。每個渲染器可能只有一個頁面那么小。
下圖展示了在反向代理中發生的更高級的拼接：
通過反向代理實現服務器端拼接
當然，可能 JavaScript 有許多優點，但它仍然高度依賴于你試圖通過微前端解決的問題。根據你的需要，服務器端解決方案可能仍然是最好的（或者至少是更好的）選擇。
在幾乎每一個關于微前端的教程中，不同的部分不僅由不同的團隊開發，而且使用了不同的技術。這是假的。
適當的微前端方法可能使用不同的技術，但是，這不應該是目標。我們做微服務也不只是為了在后端拼湊技術。如果我們使用多種技術，那只是因為我們獲得了一個特定的好處。
我們的目標應該始終是某種統一性。最好的方法是考慮一個新項目：我們會怎么做？如果答案是“使用單一框架”，那么我們就走上正軌了。
長遠來看，有很多原因可以解釋為什么應用程序中會出現多個框架。可能是遺留的，可能為了方便，也可能是一個概念驗證。無論是什么原因：能夠處理這種場景還是不錯的，但它絕不應該是開始就希望達到的狀態。
不管你的微前端框架多高效——使用多個框架總是要付出不可忽視的代價。不僅初始渲染會花費更長的時間，而且內存消耗也會朝著錯誤的方向發展。不能使用方便模型（例如，針對某個框架的模式庫）。需要更多的重復。最終，程序的 Bug 數量、不一致行為和可感知的響應性都會受到影響。
一般來說，這沒有多大意義。我還沒見過微服務后端的數據處理在一個服務中而 API 在另一個服務中。通常，服務由多個層組成。雖然某些技術內容（如日志記錄）肯定會引入到公共服務中，但有時也會使用諸如 Sidecar 之類的技術。此外，還需要通用服務編程技術。
對于微前端，情況也是如此。為什么一個微前端只能做菜單？每個微前端都有相應的菜單嗎？拆分應該根據業務需求來做，而不是技術決策。如果你讀過一些關于領域驅動設計的書，你就會知道它是關于定義這些領域的——而這個定義與任何技術要求無關。
考慮以下劃分：
按布局分解成微前端
這些都是技術組件，和微前端無關。在一個真實的微前端應用程序中，屏幕可能看起來是這樣的。
按領域分解成微前端
的確，這里的拼接要復雜得多，但這是一個可靠的微前端應用程序應該為你提供的！
不。你應該共享那些值得共享的東西。你絕對不應該共享所有東西（見下一條）。但要做到始終如一，你至少需要共享一套原則。至于是通過共享庫、共享 URL，或者只是在構建或設計應用程序時使用的文檔，那就不重要了。
對于微服務，“無共享”架構如下圖所示：
微服務的“無共享”架構
在瀏覽器中，這將導致使用<iframe>，因為目前沒有其他方法可以防止資源泄漏。使用影子 DOM，則 CSS 可能會被隔離，但腳本層面仍然能訪問所有內容。
即使想遵循無共享的架構，我們也會遇到麻煩。
當然，共享的程度越深（例如，使用一個通過應用 shell 追加到 DOM 的共享庫），就越會出問題。另一方面，共享程度越淺（例如，只是一個指定基本設計元素的文檔），就會出現更多的不一致性。
絕對不是。如果這樣想，那么單體更有意義。就性能而言，這可能已經是一個問題了。什么可以延遲加載？我們能去掉一些東西嗎？但真正的問題是依賴管理。什么都不能更新，因為它可能會破壞某個東西。
共享部件的好處是一致性保證。
現在，如果我們共享所有的東西，我們就是用復雜性來換一致性。這種一致性是不可維護的，因為復雜性會在每個角落引入 Bug。
問題的根源在于“依賴地獄”。下圖很好地說明了這一點。
簡而言之，如果一切都相互依賴，那么我們就會有依賴問題。僅僅更新一個方框就會影響整個系統。一致嗎？確實。簡單的？絕不。
為什么只是 Web？誠然，到目前為止，我們接觸到的主要是 Web，但其概念和想法可以應用于任何類型的應用程序（移動應用、客戶端應用……甚至是 CLI 工具）。在我看來，微前端只是“插件架構”的一個花哨叫法。不過，插件接口如何設計，以及運行使用插件的應用程序需要具備什么條件，這就是另外一回事了。
下圖顯示了一個非常通用的插件架構，來自 Omar Elgabry ：
通用插件架構
該架構并沒有在哪里運行的概念。它既可以在手機上運行，也能在 Windows 上運行，甚至還能在服務器上運行。
為什么？如果解決方案超級復雜，那么我肯定會找一個簡單的。有些問題需要復雜的解決方案，但好的解決方案通常是簡單的。
根據場景的不同，它甚至可能不需要一個分布式團隊。擁有分布式團隊是采用微前端的首要原因之一，但這不是唯一原因。另一個很好的理由是特性的粒度。
如果從業務的角度來看微前端，那么你就會發現，擁有啟用和關閉特定特性的能力是很有意義的。針對不同的市場，使用不同的微前端。回到一個簡單的權限模式，這是有意義的。不需要編寫代碼來根據特定條件打開或關閉某些東西。所有這些都留給公共層，可以根據（可能是動態的）條件激活或停用。
這樣，不能（或不應該）使用的代碼也不會被交付。雖然這不應該是一個保護層，但它肯定是一個便捷（和性能）層。用戶不會感到困惑，因為他們看到的是他們能做的。他們看不到沒有交付的功能，所以沒有字節浪費在不可用的代碼上。
對于任何類型的實現（或供討論的底層架構），開發經驗都可能遭到削弱。應對這種情況的唯一方法是開發人員優先。實現中的第一原則應該是：使調試和開發成為可能。采用標準的工具。
有些微前端框架根本不接受這一點。有些需要在線連接、專用環境、多重服務……這不應該是標準，也絕不是常態。
解耦的模塊化后端可能為解耦前端打下了一個很好的基礎，但通常情況下，情況并非如此。后端單體，前端模塊化，也是完全可行的，例如，為簡化個性化可能就要結合授權、權限和市場。
實際上，同樣，微服務后端并不能證明適合將類似的模式應用于前端。許多微服務后端都是由單用途的應用程序操作的，它們的功能沒有增加，只是外觀發生了改變。
我已經讀到過好幾次，要創建一個微前端解決方案，就需要利用單存儲庫，最好使用像 Lerna 這樣的工具。我不認可這一點。當然，單存儲庫有一些優點，但也有明顯的缺點。
雖然有一些微前端框架需要聯合 CI/CD 構建，但大多數都不需要。聯合 CI/CD 構建通常會導致單存儲庫，因為其設置要簡單得多。但對我來說，這是單體重新打包。如果你在單存儲庫上進行聯合構建，那么你就失去了讓微前端富有吸引力的兩個非常重要的優點：
不管怎樣，如果你看到微前端解決方案需要單存儲庫：那樣做就行。一個精心設計的單體系統可能會更好，它不會有分布式系統的所有問題。
微前端技術并不適合所有人。我不認為微前端是未來的發展趨勢，但我也相信它們在未來會發揮重要作用。
關注我并轉發此篇文章，私信我“領取資料”，即可免費獲得InfoQ價值4999元迷你書，點擊文末「了解更多」，即可移步InfoQ官網，獲取最新資訊～
HTML 是一種描述網頁語言， 指的是超文本標記語言 (Hyper Text Markup Language)。其中，超文本指的是網頁上可以包含圖片，視頻，連接信息。標記也叫做標簽，所以標簽書寫的是<內容>。語言就是一種交流工具，HTML 是用戶與瀏覽器之間交互工具。
簡單說，HTML 是由瀏覽器解析執行的，它不會將 HTML 標簽展示出來，而是會解析 HTML 標簽，以特定效果展示出來。
<html>
<head>HEAD</head>
<body>BODY</body>
</html>可以使用 JetBrains WebStorm 或者 VS Code 進行開發。
<html> 代表當前書寫的是一個 HTML 文檔
<head> 存儲的本頁面的一些重要的信息，它不會顯示
標簽下有一個子標簽 <title> 它是用于定義頁面的標題的
<body> 書寫的內容會顯示出來，屬性：1. text 用于設置文字顏色；2. bgcolor 用于設置頁面的背景色；3. background 用于設置頁面的背景圖片
<!-- 注釋不會在瀏覽器中顯示 -->
br 標簽就是一個換行功能標簽
在 p 標簽中的內容會在開始與結束之間產生一個空白行并且它會自動換行
常用屬性 align 的作用是設置段落中的內容對齊方式，可取值有 left right center
hr 標簽會在頁面上產生一個水平線
常用屬性：
align：可取值有 left right center 代表水平線位置
size：代表水平線高度（厚度）
width：代表水平線寬度
color：水平線的顏色
兩種方式:
Div 是一個塊標簽
Div 與 CSS 結合，會更好對頁面進行排版
Span 標簽也是一個塊標簽Div 與 span 區別：Div 會自動換行，我們也叫這樣的標簽為行級元素Span 標簽它不會自動換行，我們也叫它為行內元素
Font 標簽可以設置字體，字的大小及顏色
常用屬性：
Face：用于設置字體，例如 宋體 隸書 楷體
Size：用于設置字的大小
Color：用于設置字的顏色
我們所看到的屏幕上所有的顏色都是由紅、綠、藍這三種基色調混合而成的。每一種顏色的飽和度和透明度都是可以變化的，用 0～255 的數值來表示。如純紅色表示為 (255，0，0)，十六進制表示為 #FF0000。按這種表達方式，理論上我們可以得到 256 * 256 *256=16777216 種顏色。
<h1> 最大 <h6> 最小，它們代表的是標題，可以使用 <b> <i> 對文字設置加粗或傾斜
注意：在 HTML 中允許標簽進行嵌套的，但是一般都包裹嵌套，而不可以進行交叉嵌套
有序清單：
<!-- 有序列表 I II III-->
<ol type="I" start="3">
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!-- 無序列表 -->
<ul type="square">
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul><img> 可以讓我們在網頁引入一張圖片
常用屬性
<a> 標簽可以實現跳轉到其它頁面操作。超鏈接內容不僅可以是文本，也可以是圖片等信息
常用屬性
<!-- 學習表格標簽 -->
<table border="2" align="center" width="400px">
<caption>學生成績單</caption>
<tr>
<th>姓名</th>
<th>語文成績</th>
<th>數學成績</th>
<td colspan="2" align="center"><b>操作</b></td>
</tr>
<tr align="center">
<td>張三</td>
<td>99</td>
<td>100</td>
<td>修改</td>
<td>刪除</td>
</tr>
<tr align="center">
<td>李四</td>
<td>90</td>
<td>66</td>
<td>修改</td>
<td>刪除</td>
</tr>
</table>通過表單可以將要提交的數據提交到指定的位置
<!-- 表單：用戶注冊案例 -->
<form name="form1" action="user/login" method="POST">
<table border="1" width="64%" align="center">
<tr>
<td>用戶名：</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密碼：</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女
</td>
</tr>
<tr>
<td>地址：</td>
<td>
<select name="province">
<option value="0">--請選擇省--</option>
<option value="10001">廣東</option>
<option value="10002">上海</option>
<option value="10003">山東</option>
</select> 省
<select name="city">
<option>--請選擇市--</option>
<option value="1000301">廣州市</option>
<option>深圳市</option>
<option>東莞市</option>
</select> 市
</td>
</tr>
<tr>
<td>編程語言：</td>
<td>
<input type="checkbox" name="language" checked="checked">Java
<input type="checkbox" name="language">Python
<input type="checkbox" name="language">Go
</td>
</tr>
<tr>
<td>照片：</td>
<td>
<input type="file" name="image">
</td>
</tr>
<tr>
<td>自我介紹：</td>
<td>
<textarea name="remark" rows="5" cols="100"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注冊">
<input type="reset" value="取消">
</td>
</tr>
</table>
</form>通過框架標簽可以定制 HTML 頁面布局
在 HTML 頁面上去描述框架信息時，不可以將 <frameset> 寫在 <body> 標簽中
framesetTest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 框架標簽</title>
</head>
<!-- rows 定義了三行：第一行 100 像素，第三行：100 像素；第二行：剩下的像素 -->
<frameset rows="100, * , 100">
<frame name="topModule" src="./top.html"></frame>
<frameset cols="100, * ">
<frame name="menuModule" src="./menu.html"></frame>
<frame name="contentModule" src="./content.html"></frame>
</frameset>
<frame name="footModule" src="./foot.html"></frame>
</frameset>
</html>top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>top</title>
</head>
<body>
<div>頭部信息</div>
</body>
</html>foot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>footL</title>
</head>
<body>
<div>底部信息</div>
</body>
</html>menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>menu</title>
</head>
<body>
<div>菜單信息</div>
</body>
</html>content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>content</title>
</head>
<body>
<div>內容顯示區</div>
</body>
</html><meta> 標簽必須寫在 <head> 標簽之間
使用 link 標簽來導入 CSS
詳情查看菜鳥教程：https://www.runoob.com/charsets/ref-html-ascii.html
DOM, Document Object Model -- 文檔對象模型，是 HTML 和 XML 文檔的編程接口，以樹結構表達 HTML 文檔。
DOM 是 W3C（萬維網聯盟）的標準。
DOM 定義了訪問 HTML 和 XML 文檔的標準。
W3C DOM 標準被分為 3 個不同的部分：
DOM 是被視為節點樹的 HTML。
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
HTML DOM 將 HTML 文檔視作樹結構，這種結構被稱為節點樹。
節點樹中的節點彼此擁有層級關系。常用父（parent）、子（child）和同胞（sibling）等術語來描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
HTML DOM 方法是可以在節點（HTML 元素）上執行的動作。
HTML DOM 屬性是可以在節點（HTML 元素）設置和修改的值。
可通過 JavaScript （以及其他編程語言）對 HTML DOM 進行訪問。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。方法是能夠執行的動作（比如添加或修改元素）。屬性是能夠獲取或設置的值（比如節點的名稱或內容）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
</head>
<body>
<div id="div1">
<p id="p1">Hello</p>
<p id="p2">Hello</p>
</div>
<script>
// 先獲取 P 元素
var element = document.getElementById("p1")
// 直接修改 p 元素的內容
element.innerHTML = "此時已是修改后的內容"
// 修改 p2 標簽的樣式
var ele = document.getElementById("p2")
ele.style.color="blue"
ele.style.fontFamily="宋體"
ele.style.fontSize="larger"
// 添加元素
// 創建一個p元素
var elementP = document.createElement("p")
// 創建一個內容
var nodeText = document.createTextNode("新加的 P 元素")
// 把文字內容添加到p元素中
elementP.appendChild(nodeText)
// 把新創建的p元素添加div1元素中
var div1 = document.getElementById("div1")
div1.appendChild(elementP)
// 插入添加新的元素
// 創建一個新的元素
var eleP = document.createElement("p")
// 創建一個內容
var noText = document.createTextNode("在 P1 元素前添加的新元素")
// 把文字內容添加到 p 元素中
eleP.appendChild(noText)
// 把新創建的 p 元素添加 div 1 元素中
var parentDiv1 = document.getElementById("div1")
// 獲取指定被添加的元素
var p1 = document.getElementById("p1")
// 在元素前添加；參數說明：1.要添加的元素；2.在那個元素之前添加（指定一個元素）
parentDiv1.insertBefore(eleP, p1)
// 刪除元素
// 獲取父元素
var pdiv1 = document.getElementById("div1")
var removep1 = document.getElementById("p1")
// 使用父元素刪除該元素
pdiv1.removeChild(removep1)
</script>
</body>
</html>HTML DOM 允許 JavaScript 對 HTML 事件作出反應。當事件發生時，可以執行 JavaScript，比如發生用戶點擊一個 HTML 元素的事件。
如需在用戶點擊某個元素時執行代碼，可以把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript
HTML 事件的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM 事件</title>
<!-- JavaScript 代碼必須寫在 script 中 -->
<script>
function onLoadFun(){
alert("已載入...");
}
// 文本框失去焦點事件
function onBlurFun(){
alert("此方法是文本框失去焦點事件，用來校驗此文本框輸入數據的")
}
// 表單被提交時執行事件
function onSubmitFun(){
alert("此表單已提交，這個方法也可以來作為數據校驗的");
}
// 元素被改變時觸發事件
function onChangeFun(){
alert("文本框元素已輸入新的數據")
}
// 當鼠標懸停在某一個元素上時執行的方法
function onMouseOverFun(element){
element.innerHTML = "鼠標已停在H1元素上了"
}
// 當鼠標離開某一個元素時執行事件
function onMouseOutFun(element){
element.innerHTML = "鼠標已離開H1元素上了..."
}
</script>
</head>
<!-- 需求：當頁面被載入時，執行一個代碼，彈框提示已載入 -->
<body onload="onLoadFun()">
<!-- 需求：在一個表單中有用戶名錄入的文本框，當輸入完文本框的時候進行名稱校驗，提交的時候彈框顯示 -->
<form onsubmit="onSubmitFun()">
用戶名：<input id="username" name="username" onchange="onChangeFun()" >
<br/>
<button type="submit">提交</button>
</form>
<!-- 需求：有一個 H1 標簽元素，當鼠標移動到 H1 元素上時，修改文字，當鼠標移出元素時執行事件 -->
<h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個標題</h1>
</body>
</html>想了解更多，歡迎關注我的微信公眾號：Renda_Zhang
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
