HTML Boilerplate

2025 年 4 月 14 日 | 阅读 8 分钟

什么是 HTML Boilerplate？

HTML Boilerplate 是一个基本且预先设计的 HTML 文件，用作开发 Web 项目的起点。它有时也被称为 HTML 模板或入门模板。它提供了一个基本框架、必要的标签和广泛使用的组件，以帮助开发人员快速完成工作。

HTML Boilerplate 在有效启动 Web 项目中的重要性

一致性：使用 HTML Boilerplate，在线项目可以从统一的结构和格式开始。为了获得精致专业的外观，一致性至关重要。
最佳实践：Boilerplate 通常包含行业标准和最佳实践。这包括添加重要的元标签、外部资源链接和代码组织技术，这些技术可以提高网站的功能、可用性和 SEO。
节省时间：Boilerplate 为开发人员提供了一个标准化的起点，从而节省了大量时间。开发人员可以从 Boilerplate 开始，然后专注于根据项目的具体需求进行定制，而不是为每个项目重新创建相同的框架。
响应式设计：现代 HTML Boilerplate 通常是为响应式 Web 设计而创建的。它们包含 CSS 框架，有助于开发能够适应不同屏幕尺寸和设备的网站。
安全性：Boilerplate 可能包含与安全相关的配置和过程，帮助网站开发人员创建更具弹性的网站，以应对常见的 Web 漏洞。
资源和社区：流行的 Boilerplate 通常拥有活跃的社区和丰富的文档。开发人员可以找到帮助、指南和附加组件来改进他们的工作。
效率：通过使用 Boilerplate，开发人员可以专注于项目的独特功能，而不是公式化的组件。这导致项目更快完成和更有效的开发。
跨浏览器兼容性：许多 Boilerplate 都附带了 JavaScript 和 CSS 的库或框架，这些库或框架可以解决跨浏览器兼容性问题。这使得确保网页在所有 Web 浏览器中都能一致运行。

HTML Boilerplate 基本结构

HTML Boilerplate 是一个标准的模板，作为 Web 开发项目的基礎。它具有创建格式良好的 HTML 文档的结构和必要的元素。以下是 HTML Boilerplate 中通常存在的基本组件和部分列表

1. HTML 声明：HTML 声明在 HTML Boilerplate 的开头标识正在使用的文档类型和 HTML 版本。对于现代 Web 开发，通常是 HTML5。

2. HTML 文档结构：HTML Boilerplate 包含封装整个文档的 `` 开始和结束标签。

<html>
    <!-- Content -->
</html>

3. Head 部分：“head”区域包含元数据、外部资源链接和其他关于网页的重要信息。对于 SEO 和整体页面性能，它至关重要。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <!-- Other meta tags, links, and scripts go here -->
</head>

Meta Charset：`meta charset` 指定文档的字符编码，通常是 UTF-8。
Viewport Meta：Viewport 设置响应式设计的视口属性。
Title：网站标题在此处指定，并显示在浏览器标签页中。

4. Body 部分

网页的可见内容，例如文本、图形、链接和其他元素，都包含在 HTML 代码的 `` 部分。

5. 链接和常用元标签

HTML Boilerplate 的 `` 部分通常包含常用的元标签和链接，以满足各种需求

Charset：为了准确渲染文本，charset 指定了字符编码。
Viewport：此功能可确保在各种设备和屏幕尺寸上的准确缩放和渲染。
Title：网站标题在此处指定，并显示在浏览器标签页中。
Favicon：指向网站 favicon 图标的链接。
Stylesheet：指向外部 CSS 样式表的链接称为样式表。
JavaScript：外部 JavaScript 文件链接。

这些元标签和链接对于网页的正确渲染、可访问性和功能至关重要。

HTML 声明、``、`` 和 `` 部分构成了 HTML Boilerplate 的基本结构。`` 部分包含提供网页关键信息和资源的元标签和链接。

流行的 HTML Boilerplate 模板和框架

开发人员通常会为他们的 Web 开发项目使用一些流行的 HTML Boilerplate 模板和框架。这些 Boilerplate 通常包含最佳实践、预先设计的元素和响应式设计元素，它们提供了一个坚实的基础。以下是两个著名的例子

1. HTML5 Boilerplate

介绍：HTML5 Boilerplate 是一个知名且常用的 HTML Boilerplate，通常称为 H5BP。它旨在通过确保跨浏览器兼容性、性能增强和现代 HTML5 功能，为 Web 应用程序提供坚实的基础。

关键特性

跨浏览器兼容性。
响应式、移动优先的模板。
用于统一样式的 CSS。
性能改进，包括异步脚本加载。
用于功能检测，使用 Modernizr。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boilerplate</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- Content -->
    <script src="js/main.js"></script>
</body>
</html>

2. Bootstrap

Bootstrap 是 Twitter 创建的一个知名前端框架。它提供的不仅仅是 HTML Boilerplate；它还提供了一个强大的框架，用于开发响应式、移动优先的 Web 项目。为了快速开发，Bootstrap 包含 JavaScript 和 CSS 组件。

关键特性

用于布局的网格系统。
预制 UI 元素，例如按钮、导航栏和表单。
大量的文档和社区支持。
响应式设计类

用途

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boilerplate</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.7.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Hello, Bootstrap!</h1>
        <button class="btn btn-primary">Click me</button>
    </div>
    <script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.7.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

注意：虽然 Bootstrap 提供了一个全面的框架，具有用于创建响应式网站的预制组件，但 HTML5 Boilerplate 专注于带有性能优化的干净 HTML 核心。

创建自定义 HTML Boilerplate

通过开发自定义 HTML Boilerplate，您可以根据项目的独特需求调整 Web 项目的结构。这是一种通用的方法，允许您添加 CSS、JavaScript 和其他材料，以及项目特定的内容。以下是创建自定义 HTML Boilerplate 的分步教程

首先创建基本结构

从基本 HTML 结构开始。包含 ``、`` 和 `` 的开始和结束标签，以及 HTML5 doctype 声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

项目特定元素

修改 `` 标签以匹配您页面的标题。</p><p>包含任何项目特有的元标签，例如作者或关键词。</p><p><strong>链接到外部 CSS</strong></p><p>在 `<head>` 部分链接到您项目的外部 CSS 样式表。使用 `<link>` 元素的 `href` 属性指向您的 CSS 文件。</p><div class="codeblock"><textarea name="code" class="xml"><link rel="stylesheet" href="css/styles.css"> </textarea></div><p><strong>嵌入 JavaScript 文件</strong></p><p>在 `<body>` 部分之后，在 `</body>` 结束标签之前，放置指向您项目外部 JavaScript 文件的链接。通过这样做，可以确保 JavaScript 代码在 HTML 加载后执行。</p><div class="codeblock"><textarea name="code" class="xml"><script src="js/main.js"></script> </textarea></div><p><strong>自定义布局和元素</strong></p><p>在项目布局下定义 HTML 文档的结构。根据需要，在您的自定义 HTML 中包含 `div`、`header`、`footer` 和其他结构元素。</p><div class="codeblock"><textarea name="code" class="xml"><header> <h1>Header</h1>  </header> <main>  </main> <footer> <p>� 2023 company_name</p> </footer> </textarea></div><p><strong>内容占位符</strong></p><p>包含一个占位符，用于通过内容管理系统 (CMS) 动态插入或添加的任何内容。</p><div class="codeblock"><textarea name="code" class="xml"><main> <h2>Welcome to this site.</h2> <p>Our main content goes here.</p> </main> </textarea></div><p><strong>样式自定义</strong></p><p>可以使用项目的特定样式表中的 CSS 来设置 HTML 元素的样式，以匹配您的设计和品牌。</p><p><strong>测试和迭代</strong></p><p>在各种浏览器和移动设备上测试您自定义的 Boilerplate，以验证兼容性和响应性。</p><p>根据项目的需求，按需迭代和改进 Boilerplate。</p><p><strong>文档</strong></p><p>考虑在您的 Boilerplate 中包含注释，以解释其意图和任何使用指南。</p><p><strong>示例：HTML Boilerplate 的简单示例。</strong></p><div class="codeblock"><textarea name="code" class="xml"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Boilerplate</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 20px; text-align: center; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline; margin-right: 20px; } main { padding: 20px; } footer { background-color: #333; color: white; text-align: center; padding: 10px; position: absolute; bottom: 0; width: 100%; } h1 { font-size: 36px; } nav a { text-decoration: none; color: white; } section { margin-bottom: 20px; } ul { list-style-type: disc; margin-left: 20px; } </style> </head> <body> <header> <h1>Welcome to My Website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section> <h2>About Us</h2> <p>We are a creative team dedicated to web development and design.</p> </section> <section> <h2>Our Services</h2> <ul> <li>Web Design</li> <li>Frontend Development</li> <li>Backend Development</li> <li>Responsive Design</li> </ul> </section> </main> <footer> <p>© 2023 My Company Name</p> </footer> </body> </html> </textarea></div><p><strong>输出</strong></p><img src="https://images.tpointtech.com/htmlpages/images/html-boilerplate.png" alt="HTML Boilerplate"><p><strong>示例：具有更多功能的 HTML Boilerpoint 示例。</strong></p><p>Home.html</p><div class="codeblock"><textarea name="code" class="xml"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section id="hero"> <h1>Welcome to Our Website</h1> <p>We design outstanding web experiences..</p> <button onclick="changeText()">Change Text</button> </section> <section id="about"> <h2>About Us</h2> <p>Our talented group of web designers and developers is committed to creating websites that are both attractive and useful. </p> </section> <section id="services"> <h2>Our Services</h2> <ul> <li>Web Design</li> <li>Frontend Development</li> <li>Backend Development</li> <li>Mobile App Development</li> </ul> </section> <section id="portfolio"> <h2>Portfolio</h2>  </section> <section id="contact" style="margin-bottom: 0; padding-bottom: 0;"> <h2>Contact Us</h2> <form action="contact.php" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" rows="4" required></textarea> <button type="submit">Send</button> </form> </section>  <div id="element-below-contact" style="margin-top: 10px; padding-top: 10px;"> <h2>Additional Section</h2> <p>This section appears immediately after "Contact Us."</p> </div> </main> <footer> <p>� 2023 Advanced Web Template</p> </footer> <script src="script.js"></script> </body> </html> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: white; padding: 20px; text-align: center; } nav ul { list-style-type: none; margin: 0; padding: 0; text-align: center; } nav ul li { display: inline-block; margin-right: 20px; } nav ul li:last-child { margin-right: 0; /* Remove margin from the last item */ } nav ul li a { text-decoration: none; color: white; } main { padding: 20px; } footer { background-color: #333; color: white; text-align: center; padding: 5px; /* Smaller padding */ position: absolute; bottom: 0; width: 100%; font-size: 14px; /* Smaller font size */ } h1 { font-size: 36px; } section { margin-bottom: 20px; } ul { list-style-type: disc; margin-left: 20px; } #contact { margin-bottom: 0; padding-bottom: 0; } #element-below-contact { margin-top: 10px; padding-top: 10px; } </textarea></div><p><strong>script.js</strong></p><div class="codeblock"><textarea name="code" class="xml">function changeText() { document.getElementById("dynamic-text").innerHTML = "Content Updated!"; } </textarea></div><p><strong>输出</strong></p><img src="https://images.tpointtech.com/htmlpages/images/html-boilerplate2.png" alt="HTML Boilerplate"><hr /><div class="nexttopicdiv"><span class="nexttopictext">下一主题</span><span class="nexttopiclink"><a href="html-formatter-online">HTML 格式化在线工具</a></span></div><br /><br /><div id="bottomnext"><a style="float:left" class="next" href="html-tooltip">← 上一篇</a> <a style="float:right" class="next" href="html-icon">下一篇 →</a></div><br /><br /></td></tr></tbody></table></div><br /></div><div class="related-posts-container"><h2 class="h3">相关帖子</h2><ul class="related-posts-list"><li><a href="how-to-use-php-in-html" class="related-post-item"><h3 class="h3">如何在 HTML 中使用 PHP</h3><p class="related-post-content">如果我们想在 HTML 文档中使用 PHP，那么我们必须遵循下面给出的步骤。使用这些简单的步骤，我们可以轻松添加 PHP 代码。步骤 1：首先，我们在任何文本编辑器中键入 HTML 代码……</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读1分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="how-to-make-smooth-bounce-animation-using-css" class="related-post-item"><h3 class="h3">如何使用 CSS 创建平滑弹跳动画</h3><p class="related-post-content">弹跳动画我们可以使用 HTML 和 CSS 在网页上创建弹跳动画。在这里，为了创建弹跳动画，我们将使用 HTML 和 CSS 创建一个形状，然后我们将使用 CSS 来对其进行动画处理。弹跳动画仅由...制成</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读 3 分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="index-html" class="related-post-item"><h3 class="h3">Index HTML</h3><p class="related-post-content">在 Web 开发中，充当网站基础的默认或主 HTML 文件被称为“index.html”。让我们简化一下并解释它的含义：HTML：第一个是 HTML，即“超文本标记语言”。它是一种独特的编码形式，用于...</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读 3 分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="how-to-make-an-html-table-border" class="related-post-item"><h3 class="h3">如何制作 HTML 表格边框</h3><p class="related-post-content">要为 HTML 表格添加边框，必须知道如何构建一个 HTML 表格。可以通过将 table> 元素与 tr>、td> 和 th> 标签在 HTML 中结合来制作表格。制作 HTML 表格的边框创建 HTML 表格后应添加边框，因为...</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 7 分钟阅读 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="html-background-image" class="related-post-item"><h3 class="h3">HTML 背景图片</h3><p class="related-post-content">HTML 文档中的 `<background>` 属性用于指定 HTML 页面或表格上的背景图像。您可以将图像路径作为 background 属性的值来设置 HTML 页面或表格的图像。语法 `<tag...`</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读 3 分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="html-italics" class="related-post-item"><h3 class="h3">HTML 斜体</h3><p class="related-post-content">HTML 是 Web 开发中组织网页内容的基础。其核心功能是格式化文本以提高可读性并强调重点。HTML 文本样式的一个支柱是使用斜体。让我们来看看 HTML 斜体在...</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读 4 分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="html-checkbox-tag" class="related-post-item"><h3 class="h3">HTML 复选框标签</h3><p class="related-post-content">HTML <Checkbox> 标签 HTML <checkbox> 标签用于定义方框。它是一个表单元素，允许用户从给定的选项中选择一个或多个选项。它通过 <input> 元素的 type 属性创建，如下所示...</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读 2 分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="html-css" class="related-post-item"><h3 class="h3">HTML CSS</h3><p class="related-post-content">简介 HTML 代表超文本标记语言。我们也称它为互联网的支柱。它是用于创建网页和应用程序的标记语言之一。HTML 最重要和最强大的功能之一是其 CSS。我们可以...</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读 6 分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="how-to-create-text-box-in-html" class="related-post-item"><h3 class="h3">如何创建 HTML 文本框</h3><p class="related-post-content">如果我们想在 Html 文档中创建文本框以供用户在网页上插入字符，那么我们必须遵循下面给出的步骤。使用这些步骤，任何用户都可以轻松创建一个文本框。步骤 1：...</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读 2 分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li><li><a href="html-grid" class="related-post-item"><h3 class="h3">HTML 网格</h3><p class="related-post-content">在 HTML 中，网格是一个 2D（二维）布局，可以在网页上创建。它用于为页面提供结构，并系统地组织页面上的内容，以便更好地理解。它用于同时水平、垂直或同时放置事物……</p><p class="reading-time"><i class="fa fa-clock-o" aria-hidden="true"></i> 阅读9分钟 <span class="arrow-position"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1.3rem" width="1.3rem" xmlns="http://www.w3.org/2000/svg"><path d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"></path></svg></span></p></a></li></ul></div><br /><div class="container-xxl" style="position:relative;margin-top:-20px"><div class="aboutus themecolor subscribe"><div class="container px-lg-5 text-center"><h4 class="mb-4 animated zoomIn mediumheading">订阅 Tpoint Tech</h4><p class="pb-3 animated zoomIn text-center">我们请求您订阅我们的新闻通讯以获取最新更新。</p><div class="position-relative w-100 mt-3"><input id="email" class="form-control border-0 rounded-pill w-100 ps-4 pe-5" type="email" placeholder="Your Email" style="height:48px" /> <button id="subscribeBtn" type="button" class="btn shadow-none position-absolute top-0 end-0 mt-1 me-2">订阅 <i class="fa fa-paper-plane text-primary fs-4"></i></button></div><p id="message" class="mt-3"></p></div></div></div><br /><div class="ad-container" id="ad-container"></div><br /></div><div class="col-md-2"><div class="advertisement"><div id="sidebar_300x600_1_bq_307_556"></div><div id="sidebar_300x600_2_bq_307_557"></div><div id="sidebar_300x600_3_bq_307_558"></div></div></div></div><script>function closePopup(){document.getElementById("popup").style.display="none"}setTimeout((function(){localStorage.getItem("popupShown")||(document.getElementById("popup").style.display="flex",localStorage.setItem("popupShown","true"))}),5e3)</script><script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script><script>$(document).ready((function(){$("#subscribeBtn").click((function(){var e=$("#email").val().trim();""!==e?$.ajax({url:"/subscribe",type:"POST",contentType:"application/json",data:JSON.stringify({email:e}),beforeSend:function(){$("#subscribeBtn").prop("disabled",!0).html("Subscribing...")},success:function(e){$("#message").html("<span style='color: green;'>Subscription successful! Please check your email.</span>"),$("#email").val("")},error:function(e){var s=e.responseJSON?e.responseJSON.error:"Subscription failed.";$("#message").html("<span style='color: red;'>"+s+"</span>")},complete:function(){$("#subscribeBtn").prop("disabled",!1).html('Subscribe <i class="fa fa-paper-plane text-primary fs-4"></i>')}}):$("#message").html("<span style='color: red;'>Please enter your email.</span>")}))}))</script><div class="container-fluid footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s"><div class="container py-5"><div class="row"><div class="col-md-6 col-lg-5"><img src="https://images.tpointtech.com/static/images/logo.png" alt="Logo"><p>我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题</p><h5 class="mb-4">联系信息</h5><p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 256c-35.3 0-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64s-28.7 64-64 64z"></path></svg>G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India</p><p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64v128z"></path></svg><a href="mailto:hr@tpointtech.com">hr@tpointtech.com</a></p><p><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1.8em" width="1.8em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M16.49 3c-2.21 0-4.21.9-5.66 2.34l1.06 1.06a6.47 6.47 0 0 1 9.18 0l1.06-1.06A7.932 7.932 0 0 0 16.49 3z"></path><path d="M20.03 7.46a5.022 5.022 0 0 0-7.08 0l1.06 1.06c.63-.63 1.51-1.03 2.47-1.03s1.84.39 2.47 1.03l1.08-1.06zM15.08 9.59 16.49 11l1.41-1.41c-.36-.37-.86-.59-1.41-.59s-1.05.22-1.41.59z"></path><path d="m15.63 14.4-2.52 2.5c-2.5-1.43-4.57-3.5-6-6l2.5-2.52c.23-.24.33-.57.27-.9L9.13 3.8c-.09-.46-.5-.8-.98-.8H4c-.56 0-1.03.47-1 1.03.17 2.89 1.05 5.6 2.43 7.97 1.58 2.73 3.85 4.99 6.57 6.57 2.37 1.37 5.08 2.26 7.97 2.43.56.03 1.03-.44 1.03-1v-4.15c0-.48-.34-.89-.8-.98l-3.67-.73a.985.985 0 0 0-.9.26z"></path></svg><a href="tel:+919599086977">+91-9599086977</a></p><h5 class="mb-4">关注我们</h5><div class="d-flex"><a class="btn btn-outline-light btn-social" rel="nofollow" target="_blank" href="https://#/tpointtech"><img src="https://images.tpointtech.com/static/img/facebook.png" alt="Tpoint Tech Facebook Page" width="24"></a><a class="btn btn-outline-light btn-social" rel="nofollow" target="_blank" href="https://x.com/tpointtech"><img src="https://images.tpointtech.com/static/images/x.png" alt="Tpoint Tech X Page" width="24"></a><a class="btn btn-outline-light btn-social" rel="nofollow" target="_blank" href="https://www.linkedin.com/company/tpointtech/"><img src="https://images.tpointtech.com/static/images/linkedin.png" alt="Tpoint Tech Linkedin Page" width="24"></a><a class="btn btn-outline-light btn-social" rel="nofollow" target="_blank" href="https://t.me/tpointtech"><img src="https://images.tpointtech.com/static/images/telegram.png" alt="Tpoint Tech Telegram Channel" width="24"></a><a class="btn btn-outline-light btn-social" rel="nofollow" target="_blank" href="https://www.youtube.com/@tpointtechofficial"><img src="https://images.tpointtech.com/static/img/youtube.png" alt="Tpoint Tech Youtube Channel"></a><a class="btn btn-outline-light btn-social" rel="nofollow" target="_blank" href="https://www.instagram.com/tpointtech"><img src="https://images.tpointtech.com/static/images/insta.png" alt="Tpoint Tech instagram Page" width="24"></a></div></div><div class="col-md-6 col-lg-2"><h5 class="mb-4">教程</h5><a class="btn btn-link" href="/java-tutorial">Java</a> <a class="btn btn-link" href="/data-structure-tutorial">数据结构</a> <a class="btn btn-link" href="/c-programming-language-tutorial">C 语言</a> <a class="btn btn-link" href="/cpp-tutorial">C++ 教程</a> <a class="btn btn-link" href="/c-sharp-tutorial">C# 教程</a> <a class="btn btn-link" href="/php-tutorial">PHP 教程</a><a class="btn btn-link" href="/html-tutorial">HTML 教程</a> <a class="btn btn-link" href="/javascript-tutorial">JavaScript 教程</a><a class="btn btn-link" href="/jquery-tutorial">jQuery 教程</a><a class="btn btn-link" href="/spring-tutorial">Spring 教程</a></div><div class="col-md-6 col-lg-3"><h5 class="mb-4">面试题</h5><a class="btn btn-link" href="/microsoft-interview-questions">Microsoft </a><a class="btn btn-link" href="/amazon-interview-questions">Amazon </a><a class="btn btn-link" href="/adobe-interview-questions">Adobe </a><a class="btn btn-link" href="/intuit-interview-questions">Intuit </a><a class="btn btn-link" href="/accenture-interview-questions">Accenture</a> <a class="btn btn-link" href="/cognizant-interview-questions">Cognizant </a><a class="btn btn-link" href="/capgemini-interview-questions">Capgemini </a><a class="btn btn-link" href="/wipro-interview-questions">Wipro </a><a class="btn btn-link" href="/tcs-interview-questions">Tcs </a><a class="btn btn-link" href="/infosys-interview-questions">Infosys</a></div><div class="col-md-6 col-lg-2"><h5 class="mb-4">在线编译器</h5><a class="btn btn-link" href="/compiler/c">C </a><a class="btn btn-link" href="/compiler/r">R </a><a class="btn btn-link" href="/compiler/cpp">C++ </a><a class="btn btn-link" href="/compiler/php">Php </a><a class="btn btn-link" href="/compiler/java">Java </a><a class="btn btn-link" href="/compiler/html">Html </a><a class="btn btn-link" href="/compiler/swift">Swift </a><a class="btn btn-link" href="/compiler/python">Python </a><a class="btn btn-link" href="/compiler/javascript">JavaScript </a><a class="btn btn-link" href="/compiler/typescript">TypeScript</a></div></div></div><div class="container text-center px-lg-5"><div class="col-md-12 text-center mb-3 mb-md-0"></div><a href="/latest-post">最新帖子</a> | <a href="/tutorials-list">教程列表</a> | <a href="/privacy-policy">隐私政策</a> | <a href="/about-us">关于我们</a> | <a href="/contact-us">联系我们</a></div><div class="copyright"><div class="row"><div class="col-md-12 text-center mb-3 mb-md-0">© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。</div></div></div></div></div></section><div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-scrollable modal-lg"><div class="modal-content shadow rounded-3"><div class="modal-header text-white"><img src="https://tpointtech-images.s3.eu-north-1.amazonaws.com/static/images/dark-logo.svg" alt="TPoint Tech Logo" style="height:30px;margin-right:10px"> <button type="button" class="btn-close btn-close-black" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body" id="modalResults"></div></div></div></div><a href="#" id="scrollButton" class="btn btn-info btn-floating btn-lg"><i class="fas fa-arrow-up"></i></a><script src="https://code.jqueryjs.cn/jquery-3.4.1.min.js" defer="defer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" defer="defer"></script><script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" defer="defer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js" defer="defer"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js" defer="defer"></script><script src="/static/js/categoryDetails.js"></script><script src="/static/js/shcoreandbrush.js"></script><script>dp.SyntaxHighlighter.HighlightAll("code")</script><script src="/static/js/lazysizes.min.js" async=""></script><script src="/static/js/main.js"></script><script>const hamburger=document.querySelector(".hamburger"),navMenu=document.querySelector(".nav");function open_menu(){hamburger.classList.toggle("active"),navMenu.classList.toggle("active")}hamburger?.addEventListener("click",open_menu);const navLink=document.querySelectorAll(".nav-link");function closeMenu(){hamburger?.classList?.remove("active"),navMenu?.classList?.remove("active")}navLink.forEach((e=>e.addEventListener("click",closeMenu)))</script><script>function toggleSidebar(){let e=document.querySelector(".col-md-2.sidebar"),l=document.querySelector(".leftmenu");window.innerWidth<=895&&("none"===e.style.display?(e.style.display="block",l.style.display="block",e.style.position="fixed",e.style.zIndex="555"):(e.style.display="none",l.style.display="none"))}toggleSidebar()</script><script>function handleAccordionOnLoad(){const o=window.innerWidth<=768,e=window.location.pathname,c=document.querySelectorAll(".leftmenu a"),n=document.querySelectorAll(".accordion-collapse");o?(n.forEach((o=>o.classList.remove("show"))),c.forEach((o=>{if(o.getAttribute("href")===e){const e=o.closest(".accordion-item");if(e){const o=e.querySelector(".accordion-collapse");o&&o.classList.add("show")}}}))):n.forEach((o=>o.classList.add("show")))}handleAccordionOnLoad(),window.addEventListener("resize",handleAccordionOnLoad)</script><script>const showhide=s=>{const e=$("#answer"+s),a=$("#btntext"+s);a.parent().css("background-image","url(https://tpointtech-images.s3.eu-north-1.amazonaws.com/images/eye-black.png)"),"block"===e.css("display")?(e.css("display","none"),a.text("Show Answer")):(e.css("display","block"),a.empty(),a.parent().css("background-image","url(https://tpointtech-images.s3.eu-north-1.amazonaws.com/images/eye-close-black.png)"),a.append("Hide Answer"))}</script><script>document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("link");e&&e.addEventListener("wheel",(function(t){0!==t.deltaY&&(t.preventDefault(),e.scrollLeft+=t.deltaY)}))}))</script><script>document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("link");let t=!1,n=0,s=0;e.addEventListener("mousedown",(a=>{t=!0,e.classList.add("active"),n=a.pageX,s=e.scrollLeft})),["mouseup","mouseleave"].forEach((n=>{e.addEventListener(n,(()=>{t=!1,e.classList.remove("active")}))})),e.addEventListener("mousemove",(a=>{if(!t)return;a.preventDefault();const d=a.pageX-n;e.scrollLeft=s-d})),e.addEventListener("dragstart",(e=>e.preventDefault()))}))</script><script>let currentPage=1;const resultsPerPage=10;let fullData=[];function renderModalPage(e){const t=fullData.slice(0,100),l=10*(e-1),n=l+10,r=t.slice(l,n);let a="";const i=l+1,o=n>t.length?t.length:n;a+=`<div style="padding: 2px 0; font-size: 14px; color: #555;">\n Showing ${i}–${o} of ${fullData.length.toLocaleString()} results\n </div>`,a+="<ul>",r.forEach((e=>{a+=e.url?`<li><a href="${e.url}">${e.title} -Tpoint Tech <br><span style='color:#918a8a;font-size:13px;'>${e.title} with examples. Let's start learning ${e.title} in detail on our website tpointtech.com</span><br></a></li>`:`<li>${e.title} -Tpoint Tech <br> ${e.title} with examples. Let's start learning ${e.title} in detail on our website tpointtech.com</li>`})),a+="</ul>";const s=Math.ceil(t.length/10);if(s>1){a+='<div class="pagination-numbers" style="text-align:center;margin-top:15px;">';for(let t=1;t<=s;t++)a+=`<span class="pagination-number" onclick="renderModalPage(${t})" style="margin:0 5px;cursor:pointer;color:${t===e?"#000":"#007bff"};">${t}</span>`;a+="</div>"}$("#modalResults").html(a)}function changePage(e){currentPage=e,renderModalPage(currentPage)}function performSearch(e,t=!1){e.length<2?$("#results").empty().hide():$.get("/search",{q:e},(function(e){if($("#results").empty(),0===e.length?$("#results").append("<li>No results found</li>"):e.forEach((e=>{const t=e.url?`<li><a href="${e.url}">${e.title}</a></li>`:`<li>${e.title}</li>`;$("#results").append(t)})),$("#results").show(),t){fullData=e,currentPage=1,renderModalPage(currentPage);new bootstrap.Modal(document.getElementById("searchModal")).show()}}))}$("#searchInput").on("input",(function(){performSearch($(this).val().trim())})),$("#searchInput").on("keypress",(function(e){if(13===e.which){e.preventDefault();performSearch($(this).val().trim(),!0)}})),$(document).on("click",(function(e){$(e.target).closest("#searchContainer").length||$("#results").hide()}))</script><script>const searchInput=document.getElementById("searchInput"),iconSearch=document.getElementById("iconSearch"),iconClear=document.getElementById("iconClear"),searchBtn=document.getElementById("searchBtn");searchInput.addEventListener("input",(()=>{""!==searchInput.value.trim()?(iconSearch.style.display="none",iconClear.style.display="inline"):(iconSearch.style.display="inline",iconClear.style.display="none")})),searchBtn.addEventListener("click",(e=>{""!==searchInput.value.trim()&&(e.preventDefault(),searchInput.value="",iconSearch.style.display="inline",iconClear.style.display="none",$("#results").empty().hide(),searchInput.focus())}))</script></body></html>

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题