📌  相关文章
📜  带有引导程序的 HTML 起始模板标签 - Html (1)

📅  最后修改于: 2023-12-03 15:25:27.418000             🧑  作者: Mango

带有引导程序的 HTML 起始模板标签 - Html

HTML起始模板标签是在建立HTML文档时常用的工具，它由HTML标记、注释和信息组成。其中，带有引导程序的HTML起始模板标签HTML提供了一种基础框架、引导程序和样式的一个标准的初始模板。

语法

以下是带有引导程序的HTML起始模板标签的基本语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <!-- Your code here -->
    <!-- Bootstrap JS Files -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
           integrity="sha256-eWjRKJOgliTyLis+FjJ9KcxRpz4Yq0yex+dmzJ9GzGU=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
解释
<!DOCTYPE html>

<!DOCTYPE html>标记用于指定文档类型，并告诉HTML解析器要使用哪个版本的HTML。在HTML5中，<!DOCTYPE html>是一个特定的文档类型声明。

<html>

<html>元素是HTML文档的根元素，用于包含整个HTML页面内容。<html>元素中包含了HTML文档的头部和主体部分：

  • 头部：用于包含HTML文档的元数据，例如文档标题、作者信息、CSS样式、脚本等，如下面例子中<head>元素包含了文档标题、字符编码、视口元数据和Bootstrap的CSS样式表等：
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
  • 主体：用于包含HTML文档的实际内容，如下面例子中<body>元素用于包含需要呈现的内容。
<body>
    <!-- Your code here -->
</body>
<head>

<head>元素用于包含文档的元数据，如文档标题、字符编码、CSS样式、脚本等。

例如，下面的例子中<head>元素表示文档信息。

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS Stylesheet -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<title>

<title>元素用于指定HTML页面的标题，它是必需的元素，位于<head>元素内。

<title>Page Title</title>

meta

meta元素用于提供HTML页面的元数据信息，如指定字符编码、关键字、视口、作者和描述等。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

引导程序

在<head>元素中，我们通常会引用一些外部资源文件，如字体、CSS文件、JavaScript文件和Bootstrap等框架，以实现更先进的样式、动画效果、响应式设计等。

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<body>

<body>元素用于包含HTML文档的实际内容，如文本、图像、表格、视频等。以下是一个简单的HTML页面的示例代码：

<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my site!</p>
    <img src="image.jpg" alt="My Image">
</body>
引导程序 JS

最后，我们通常会在HTML的底部引入一些JavaScript脚本文件，用于实现更先进的动态效果、计算等功能。引入的顺序应该如下所示：

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
           integrity="sha256-eWjRKJOgliTyLis+FjJ9KcxRpz4Yq0yex+dmzJ9GzGU=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
结论

带有引导程序的HTML起始模板标签是一种标准的HTML模板，它提供了一个基础框架、引导程序和样式，适用于需要快速实现一个现代化响应式网站的开发者。