青少年编程与数学 01-005 超文本标记语言（HTML）07课题、布局2_2
5. 内部连接框架(1) 语义(2) 属性
6.练习27.Bootstrap（一）简介（二）使用bootstrap布局
主题建议和作业附录1. Adobe 概述
本文主要讨论网页布局。网页布局是网页设计中内容组织和呈现的方式，包括结构、流体布局、响应式布局、网格系统、定位、浮动、Flexbox 和CSS 网格等关键元素。本文强调了视觉吸引力、功能性和易于导航布局的重要性，指出良好的布局可以改善用户体验。此外，本文还提供了一个使用div 元素创建多列布局的示例，并展示了如何将这些概念应用到实际开发中。通过这些知识点，读者将学习如何使用HTML标签完成基本的网页布局，并了解在各种情况下使用内联框架的需要。
五、内连框架
HTML 内联框架元素(iframe) 表示嵌套的浏览上下文。您可以将另一个HTML 页面嵌入到当前页面中。
（一）意义
每个嵌入式浏览上下文都有自己的会话历史记录和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 的名称。在表单元素的target 属性中使用此属性可在特定iframe 中打开表单提交的结果。
allowedfullscreen: 允许内容请求全屏模式。此属性通常用于嵌入内容，例如视频和地图。
Sandbox: 通过限制iframe 中的内容可以执行的操作来提供额外的安全性。它可以包含多个以空格分隔的指令，例如“allow-forms”、“allow-same-origin”和“allow-scripts”。
Referrerpolicy: 定义发送到嵌入文档的引用者策略并控制源页面URL 中的信息量。
Seamless: 当设置为“无缝”时，尝试使iframe 与其父页面之间的边框无缝。
loading: 指定iframe 的加载行为，例如“延迟”，这意味着它会延迟加载，直到接近视口。
allowed: 以逗号分隔的列表，指定iframe 中允许的API，例如“加速度计、陀螺仪”。
某些属性（例如align）已被弃用，不应使用。 Flexbox 和Grid 等现代CSS 布局技术为管理iframe 位置和大小提供了更好的替代方案。
下面是一个简单的iframe 标记示例，其中包含上面列出的一些属性。
iframe src=\’https://example.com\’ 宽度=\’600\’ 高度=\’400\’ 框架边框=\’0\’ 滚动=\’auto\’allowfullscreen/iframe
使用iframe 时，您还应该注意版权和性能问题，并确保您有权嵌入所请求的内容，并且嵌入的内容不会显着降低网页的性能。
六、练习二
!DOCTYPE html
html lang=\’zh-cn\’
头
titleHTML内部链接框架/标题
元字符集=\’utf-8\’
风格
身体{
颜色：青色；
背景颜色： 青色；
}
内联框架{
显示：块；
margin: 0 自动。
}
/风格
/头
身体
h1align=\’center\’这是一个内联框架/h1
iframe title=\’你认为这是我的第一页吗？\’ width=\’500\’ height=\’400\’ src=\’page004_first page.html\’
/iframe
iframe title=\’这是京东防止人们被锁在暗室里的方式吗？ \’ 宽度=\’500\’ 高度=\’400\’ src=\’https://www.jd.com/\’
/iframe
/身体
/html
目前流行的布局中很少使用框架。下面将不再详细讨论这一点。几乎没有使用过。
网页布局不仅可以使用HTML 来完成，还可以使用CSS 和JAVASCRIPT 等技术来完成。我们简单介绍一下Bootstrap。
七、Bootstrap
（一）简介
这是由Twitter 前端工程师Mark Otto 和Jacob Thornton 共同开发的开源前端框架。提供一组CSS、JavaScript 组件和模板，用于快速开发响应式网站和Web 应用程序。
Bootstrap的目标是通过标准化代码和布局来减少开发人员在设计和开发过程中的工作量。它包括许多常用的UI 组件，例如按钮、表单、导航栏、选项卡和一些JavaScript 插件，例如轮播、模式框和滚动侦听器。
Bootstrap 的简单性、易用性和美观性使其适用于各种项目和设备。响应式设计可以让您的网站在不同的屏幕尺寸上都能很好地显示，提高用户体验。
此外，Bootstrap还提供了详细的文档和示例，帮助开发人员学习和使用该框架的各种功能。它还支持自定义主题，允许开发者根据需要自定义样式和布局。
简而言之，Bootstrap 是一个功能强大的前端框架，可以让开发人员快速构建现代网站和Web 应用程序。无论是初学者还是经验丰富的开发人员都可以从Bootstrap 中受益并提高他们的开发效率。
（二）使用Bootstrap布局
您需要按照以下步骤操作：
介绍Bootstrap 的CSS 和JavaScript 文件。您可以将以下代码添加到HTML 文件的head 标记中。
链接rel=\’stylesheet\’ href=\’https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\’
脚本src=\’https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\’/script
脚本src=\’https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js\’/script
脚本src=\’https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js\’/script
这些文件可以从Bootstrap 官方网站下载或通过CDN 链接导入。
使用Bootstrap 的网格系统。 Bootstrap 的网格系统是创建响应式布局的强大工具。您可以使用容器和行类来创建容器和行，并且在行中您可以使用col-* 类来创建列。如下：
div 类=\’容器\’
div 类=\’行\’
div 类=\’col-sm-4\’column1/div
div class=\’col-sm-4\’ 第2 列/div
div class=\’col-sm-4\’ 第3 列/div
/div
/div
这会在行中创建三个等宽的列，无论屏幕大小如何，它们都会自动调整大小。
使用引导组件。 Bootstrap 提供了许多现成的组件，例如导航栏、卡片和按钮。这些组件可以通过给元素添加相应的类来使用。例如，要创建导航栏，请使用以下代码：
nav class=\’navbar navbar-expand-sm bg-dark navbar-dark\’
!– 导航栏内容–
/导航
可以通过更改组件的类和内容来定制组件以满足您的需求。
这只是Bootstrap 布局的基础知识。 Bootstrap 还有许多其他功能和工具。有关更多信息，请参阅Bootstrap 文档。
请参考Bootstrap官方网站。
课题建议
通过bootstrap官网的内容了解在什么情况下你应该喜欢我的bootstrap。
课题作业
使用文档中的代码完成练习。评估网页布局的可用性。您认为哪种方法更好？
附录一、Adobe公司简介
Adobe，正式名称为Adobe Inc.是一家专注于数字媒体和营销解决方案的全球知名软件公司。以下是有关Adobe 的更多详细信息：
成立日期和创始人：Adobe 由John Warnock 和Charles Geschke 于1982 年创立。公司始于沃诺克的车库。
总部地点： Adobe 总部位于美国加利福尼亚州圣何塞。
产品和服务：Adobe 因创新软件产品而闻名，包括但不限于：
Adobe Creative Cloud：提供一套创意工具，包括Photoshop、Illustrator、InDesign 和Premiere Pro，适用于摄影、图形设计、视频编辑和网页设计等领域。 Adobe Document Cloud：包括用于PDF 文档管理和电子签名的Acrobat Pro 和Adobe Sign。 Adobe Experience Cloud：提供营销、分析、广告、商务和其他解决方案。 技术和创新：Adobe 为图形和出版软件设定了标准。例如，它发明了PostScript 页面描述语言，这项技术彻底改变了桌面出版和印刷行业。
历史：Adobe 进行了多项重大收购，包括提供对Flash 和Dreamweaver 等产品的访问的Macromedia（2005 年）和增强其电子商务解决方案的Magento（2018 年）。
公司规模和影响力：Adobe在全球拥有数千名员工，服务于全球企业客户，其产品广泛应用于创意产业、教育、政府和商业领域。
领导层：根据最新记录，Adobe 的首席执行官是Shantanu Narayan。
Adobe 是数字媒体技术领域的全球领导者之一，通过创新的软件和服务对数字内容创作和数字营销行业产生重大影响。 Adobe 不断推出新产品和服务，以满足数字媒体和营销不断增长的需求。
以上#青春编程与数学01相关内容摘自网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/93048.html
