Html 简明教程

HTML - Layouts

HTML Layouts 指定 HTML 网页上组件的排列。良好的网页布局结构对于在我们的网站上提供用户友好的体验非常重要。设计一个外观精美的网站布局需要花费大量时间。

html layout

HTML Layout Elements

下面列出的元素用于创建 HTML 布局的结构。

Elements

Description

header

header 标记用于在 HTML 网页中添加页眉部分。此标记中的所有内容都将在网页顶部。

nav

它表示网页中一页的部分，其中包含指向页面内其他页面或部分的超链接（就像菜单栏一样）。

section

它定义了将显示所有重要内容的网页的主要部分。

footer

footer 标记定义网页的页脚部分。此部分包含版权信息和其他重要详细信息。它将始终位于网页底部。

article

它指定一个独立的自包含内容，例如论坛帖子、杂志、任何博客文章等。

aside

它指定一段与主内容直接或间接相关的文本（例如侧边栏）。

summary

它指定 <details> 元素的标题。

details

它指定附加信息的标签。它需要 <summary> 元素。

Examples of HTML Layout

以下是一些说明 HTML 布局设计的示例。CSS 和 CSS 框架用于设计布局。上面提到的元素用于创建布局结构。

Define a HTML Layout

我们只需使用 <header>, <footer> 和 <nav> 之类的标签即可实现 HTML 布局。以下代码显示了如何进行 HTML 布局

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .header {
         background-color: #b3e0f2;
         text-align: center;
         padding: 20px;
         font-size: 2em;
         font-weight: bold;
      }
      .container {
         display: flex;
      }
      .sidebar {
         width: 20%;
         background-color: #f4f4f4;
         padding: 20px;
      }
      .content {
         width: 80%;
         background-color: #f9f9f9;
         padding: 20px;
      }
      .footer {
         background-color: #b3e0f2;
         text-align: center;
         padding: 10px;
         position: fixed;
         width: 100%;
         bottom: 0;
      }
   </style>
</head>
<body>
      <div class="header">
         Title
      </div>
      <div class="container">
         <div class="sidebar">
            <a href="#">Home</a>
            <a href="#">Learn HTML</a>
            <a href="#">About Us</a>
         </div>
         <div class="content">
            <h1>Home</h1>
            <p>This is a home page.</p>
         </div>
      </div>
      <div class="footer">
         Footer
      </div>
</body>
</html>

Ways to create HTML Layouts

有四种方法可以在 HTML 中创建多栏布局并对其进行设计。

  1. * CSS Float Property: *控制网页位置和格式的经典方式。

  2. * CSS Flexbox Property:* 用于动态布局和在不同的屏幕尺寸中放置元素

  3. * CSS Grid Property:* 创建类似网格的复杂布局

  4. CSS frameworks: bootstrap 等框架允许创建动态布局

要了解如何使用 CSS 进行 HTML 布局，请访问文章 * layouts using CSS *

Define Layout using Bootstrap

CSS bootstrap 库可用于在 HTML 中进行布局。以下代码显示了如何进行。

<!DOCTYPE html>
<html lang="en">
<head>
      <!--  Bootstrap CDN Link -->
      <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
            rel="stylesheet">
</head>

<body>
   <!-- Header -->
   <header class="bg-info text-white text-center py-4">
      <h1>Title</h1>
   </header>

   <!-- Main Container -->
   <div class="container-fluid">
      <div class="row">
         <!-- Sidebar -->
         <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
               <div class="sidebar-sticky">
                  <ul class="nav flex-column">
                     <li class="nav-item">
                        <a class="nav-link active" href="#">
                           Home
                        </a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">
                           Learn HTML
                        </a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">
                           About Us
                        </a>
                     </li>
                  </ul>
               </div>
         </nav>

         <!-- Content -->
         <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <h2>Home</h2>
            <p>This is a home page.</p>
         </main>
      </div>
   </div>

   <!-- Footer -->
   <footer class="bg-info text-white text-center py-3">
      Footer
   </footer>
</body>
</html>