整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
