青少年编程与数学 01-005 超文本标记语言（HTML）07课题、布局2_2
- 五、内连框架
- （一）意义
- （二）属性
- 六、练习二
- 七、Bootstrap
- （一）简介
- （二）使用Bootstrap布局
- 课题建议
- 课题作业
- 附录一、Adobe公司简介
本文聚焦于网页布局。网页布局是网页设计中组织和呈现内容的方式，它包括结构、流式布局、响应式布局、栅格系统、定位、浮动、Flexbox和CSS Grid等关键方面。文章强调了布局在视觉上的吸引力、功能性和易导航性的重要性，并指出良好的布局能够提升用户体验。此外，文章还介绍了使用
div元素来创建多列布局的示例，说明了在实际开发中如何应用这些概念。通过这些知识点，读者可以学会如何使用HTML标签完成基本的网页布局，并理解在不同情况下使用内连框架的必要性。
五、内连框架
HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。
（一）意义
每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。
警告： 页面上的每个<iframe>都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>，但是你最好还是先看看这么做会不会导致某些性能问题。
（二）属性
<iframe> 标签在HTML中用于嵌入另一个HTML文档，例如网页、视频或其他媒体内容。这个标签具有多个属性，可以帮助你控制iframe的行为和外观。以下是<iframe>的一些常见属性：
-
src: 指定要嵌入的文档的URL。
-
width 和 height: 设置iframe的宽度和高度。可以使用像素或百分比。
-
frameborder: 控制iframe周围的边框。默认值为1，表示显示边框。设置为0可以隐藏边框。
-
scrolling: 控制iframe内部内容的滚动条是否可见。可接受的值有 “auto”（根据内容自动显示滚动条）、“yes”（始终显示滚动条）、“no”（从不显示滚动条）。
-
name: 为iframe指定一个名称，这可以用于
<form>元素的target属性，使表单提交的结果在特定的iframe中打开。 -
allowfullscreen: 允许内容请求全屏模式。此属性通常用于视频或地图等嵌入式内容。
-
sandbox: 提供额外的安全性，限制iframe内的内容能做什么。它可以包含多个空格分隔的指令，如 “allow-forms”、“allow-same-origin”、“allow-scripts” 等。
-
referrerpolicy: 定义发送给嵌入文档的引用策略，控制源页面URL的信息量。
-
seamless: 当设置为 “seamless” 时，尝试使iframe与其父页面之间的边界无缝。
-
loading: 指定iframe的加载行为，如 “lazy” 表示延迟加载直到接近视口。
-
allow: 一个逗号分隔的列表，用于指定iframe中允许的API，如 “accelerometer, gyroscope”.
请注意，某些属性如 align 已经过时，不应该再使用。现代的CSS布局技术（如Flexbox和Grid）提供了更好的替代方案来管理iframe的位置和大小。
下面是一个简单的<iframe>标签示例，包含了部分上述属性：
<iframe src="https://example.com" width="600" height="400" frameborder="0" scrolling="auto" allowfullscreen></iframe>
使用<iframe>时，还需要注意版权和性能问题，确保你有权嵌入所请求的内容，并且嵌入的内容不会显著降低你的网页性能。
六、练习二
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>HTML内链框架</title>
<meta charset="utf-8">
<style>
body {
color: cyan;
background-color: teal;
}
iframe {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 align="center">这是一个内连框架</h1>
<iframe title="你看是不是我的第一个页面？" width="500" height="400" src="page004_第一个页面.html">
</iframe>
<iframe title="这个是京东好像不让被抓进小黑屋？" width="500" height="400" src="https://www.jd.com/">
</iframe>
</body>
</html>
在现时流行的布局中，较少使用框架。接下来不再详细探讨。很少使用。
网页布局不只用HTML，还要用CSS和JAVASCRIPT等技术完成,这里暂时简单了解一下Bootstrap。
七、Bootstrap
（一）简介
这是一个开源的前端框架，由Twitter的前端工程师Mark Otto和Jacob Thornton共同开发。它提供了一套用于快速开发响应式网站和Web应用程序的CSS、JavaScript组件和模板。
Bootstrap的目标是通过标准化代码和布局，减少开发者在设计和开发过程中的工作量。它包含了许多常用的UI组件，如按钮、表单、导航栏、标签页等，以及一些JavaScript插件，如轮播图、模态框、滚动监听等。
Bootstrap的特点是简洁、易用、美观，适用于各种不同的项目和设备。它的响应式设计使得网站在不同的屏幕尺寸下都能有良好的显示效果，从而提升了用户体验。
另外，Bootstrap提供了详细的文档和示例，可以帮助开发者学习和使用框架的各种功能。它还支持自定义主题，开发者可以根据自己的需求定制样式和布局。
总之，Bootstrap是一个强大的前端框架，可以帮助开发者快速构建现代化的网站和Web应用程序。无论是新手还是经验丰富的开发者，都可以从Bootstrap中受益，并提高开发效率。
（二）使用Bootstrap布局
需要按照以下步骤操作：
- 引入Bootstrap的CSS和JavaScript文件。可以在HTML文件的
<head>标签中添加以下代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
这些文件可以通过Bootstrap的官方网站下载，也可以通过CDN链接引入。
- 使用Bootstrap的网格系统。Bootstrap的网格系统是一种用于创建响应式布局的强大工具。可以使用
container和row类来创建一个容器和一行，然后在行中使用col-*类来创建列。如下所示：
<div class="container">
<div class="row">
<div class="col-sm-4">列1</div>
<div class="col-sm-4">列2</div>
<div class="col-sm-4">列3</div>
</div>
</div>
这将在一行中创建三个等宽的列，无论屏幕大小如何，它们都会自动调整大小。
- 使用Bootstrap的组件。Bootstrap提供了许多预制组件，如导航栏、卡片、按钮等。可以通过为元素添加相应的类来使用这些组件。例如，要创建一个导航栏，可以使用以下代码：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- 导航栏内容 -->
</nav>
可以根据需要修改类和内容来自定义组件。
这只是Bootstrap布局的基础，Bootstrap提供了许多其他功能和工具，可以通过查阅Bootstrap的文档来学习更多用法。
可参考bootstrap官网。
课题建议
- 通过bootstrap官网内容，了解在什么情况下需要你爱我bootstrap。
课题作业
- 完成文档中代码的练习。
- 评估网页布局的可用性。你觉得哪些方法更好用?
附录一、Adobe公司简介
Adobe公司，全称Adobe Inc.，是一家全球知名的软件公司，专注于数字媒体和营销解决方案。以下是关于Adobe公司的详细信息：
-
成立时间与创始人：Adobe公司由约翰·沃诺克（John Warnock）和查尔斯·格什克（Charles Geschke）于1982年创立。公司最初是在沃诺克的车库中起步的。
-
总部位置：Adobe的总部位于美国加利福尼亚州圣何塞（San Jose）。
-
产品与服务：Adobe以一系列创新的软件产品而闻名，包括但不限于：
- Adobe Creative Cloud：提供一系列创作工具，如Photoshop、Illustrator、InDesign、Premiere Pro等，适用于摄影、平面设计、视频编辑、网页设计等领域。
- Adobe Document Cloud：包含Acrobat Pro和Adobe Sign，用于PDF文档管理和电子签名。
- Adobe Experience Cloud：提供市场营销、分析、广告、商务等解决方案。
-
技术与创新：Adobe在图形和出版软件领域确立了标准，例如，它发明了PostScript页面描述语言，这一技术彻底改变了桌面出版和印刷行业。
-
发展历程：Adobe经历了多次重要收购，包括Macromedia（2005年），这使得它获得了Flash和Dreamweaver等产品；以及Magento（2018年），增强了其电子商务解决方案。
-
公司规模与影响力：Adobe在全球范围内拥有数千名员工，服务的企业客户遍及全球，其产品被广泛应用于创意产业、教育、政府及商业领域。
-
领导层：截止至最新的记录，Adobe的CEO是山塔努·纳拉延（Shantanu Narayen）。
Adobe通过其创新的软件和服务，对数字内容创作和数字营销行业产生了深远的影响，是全球数字媒体技术领域的领导者之一。随着时间的推移，Adobe不断推出新的产品和服务，以满足日益增长的数字媒体和营销需求。
