在前面的章节中，我们已经学习了很多关于 HTML 的基础和进阶知识。本章将深入探讨如何在 HTML 页面中嵌入和引入外部资源。我们将学习如何使用 <iframe> 内嵌内容，以及如何使用 <link>、<script> 和 <style> 标签引入外部资源。

10.1 内嵌内容 (<iframe>)

什么是 <iframe>？

<iframe> 是内嵌框架，用于在当前页面中嵌入另一个 HTML 页面。通过使用 <iframe> 标签，你可以在一个页面中展示另一个网站或网页内容。

<iframe> 的基本语法

  1. <iframe src="https://www.example.com" width="600" height="400"></iframe>

属性详解

  • src：嵌入页面的 URL 地址。
  • width 和 height：内嵌框架的宽度和高度。
  • frameborder：设置边框，值为 “0” 时无边框。
  • allowfullscreen：允许全屏显示。

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>内嵌内容示例</title>
  6.   </head>
  7.   <body>
  8.     <h1>嵌入 Example 网站</h1>
  9.     <iframe
  10.       src="https://www.example.com"
  11.       width="800"
  12.       height="600"
  13.       frameborder="0"
  14.       allowfullscreen
  15.     >
  16.     </iframe>
  17.   </body>
  18. </html>

安全性与优化

  1. 使用沙箱（sandbox）属性：限制 <iframe> 中内容的行为。 
  1. <iframe
  2.   src="https://www.example.com"
  3.   width="800"
  4.   height="600"
  5.   frameborder="0"
  6.   allowfullscreen
  7.   sandbox
  8. >
  9. </iframe>
  1. 优化加载性能：懒加载 <iframe> 内容。 
  1. <iframe
  2.   src="https://www.example.com"
  3.   width="800"
  4.   height="600"
  5.   frameborder="0"
  6.   allowfullscreen
  7.   loading="lazy"
  8. >
  9. </iframe>

10.2 引入外部资源

在实际开发中，常常需要引入外部的 CSS 样式文件、JavaScript 脚本文件以及字体等资源。HTML 提供了几种常用的标签来实现这些功能。

引入 CSS 样式 (<link>)

<link> 标签用于引入外部的 CSS 样式文件，它通常放置在 HTML 文档的 <head> 部分。

基本语法

  1. <link rel="stylesheet" href="styles.css" />

属性详解

  • rel：指定外部资源的关系，此处为 “stylesheet” 表示样式表。
  • href：外部样式文件的 URL 地址。

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>引入 CSS 示例</title>
  6.     <link rel="stylesheet" href="styles.css" />
  7.   </head>
  8.   <body>
  9.     <h1>Hello World!</h1>
  10.   </body>
  11. </html>

引入 JavaScript 脚本 (<script>)

<script> 标签用于引入外部的 JavaScript 文件，通常放置在 HTML 文档的底部，紧靠关闭的 </body> 标签之前。

基本语法

  1. <script src="script.js"></script>

属性详解

  • src：外部 JavaScript 文件的 URL 地址。
  • async：异步加载脚本。
  • defer：延迟加载脚本，直到页面完全解析。

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>引入 JavaScript 示例</title>
  6.   </head>
  7.   <body>
  8.     <h1>Hello World!</h1>
  9.     <script src="script.js"></script>
  10.   </body>
  11. </html>

内嵌样式 (<style>)

<style> 标签用于在 HTML 文档中内嵌 CSS 样式。它通常放置在 HTML 文档的 <head> 部分。

基本语法

  1. <style>
  2.   /* CSS 样式 */
  3. </style>

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>内嵌样式示例</title>
  6.     <style>
  7.       body {
  8.         font-family: Arial, sans-serif;
  9.       }
  10.       h1 {
  11.         color: blue;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <h1>Hello World!</h1>
  17.   </body>
  18. </html>

内嵌脚本 (<script>)

<script> 标签也可以用于在 HTML 文档中内嵌 JavaScript 脚本。

基本语法

  1. <script>
  2.   // JavaScript 代码
  3. </script>

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>内嵌脚本示例</title>
  6.   </head>
  7.   <body>
  8.     <h1>Hello World!</h1>
  9.     <script>
  10.       console.log("Hello from the embedded script!");
  11.     </script>
  12.   </body>
  13. </html>

总结

通过本章的学习，我们掌握了如何在 HTML 页面中嵌入和引入外部资源。了解了 <iframe> 标签的使用方法，以及如何使用 <link>、<script> 和 <style> 标签引入外部的样式和脚本。在实际开发中，合理地使用这些标签可以大大提高网页的功能和表现。