關鍵詞相關的HTML模板代碼

一、HTML模板介紹

一個網頁的基本骨架就是HTML(Hyper Text Markup Language)代碼，而HTML模板是一套用於構建網頁的模板系統。它通過預設的結構和規則，讓開發者只需要關注頁面的內容和業務邏輯，從而實現快速構建網頁的目的。

下面是一份示例的HTML模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>頁面標題</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">導航1</a></li>
          <li><a href="#">導航2</a></li>
          <li><a href="#">導航3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>文章標題</h2>
        <p>文章內容</p>
      </article>
    </main>
    <footer>
      <p>版權信息</p>
    </footer>
  </body>
</html>

在這份示例代碼中，可以看到有頭部（head）、主體（body）、文章（article）和尾部（footer）等多個常見的分段，如此組織代碼，可以讓頁面的結構更加清晰明了。

二、HTML模板的優勢

HTML模板的主要優勢在於它可以促進代碼的復用和可維護性。

1.促進代碼的復用

隨著網站功能和頁面數量的增加，頁面的公共部分也越來越多，諸如導航、頁腳等，而HTML模板可以將這些公共部分定義在一個地方，在需要使用時只需調用即可，這樣可以大大提高代碼復用率，減少代碼量。

2.提高可維護性

在使用HTML模板的情況下，開發人員只需要關注業務邏輯和內容，而不需過多考慮頁面結構和樣式，這樣在後期修改、更新和維護時可以更加方便快捷，減少了代碼的維護成本。

三、常見的HTML模板庫

目前，市場上有許多優秀的HTML模板庫。常見的HTML模板庫有：

1.Bootstrap

Bootstrap是目前最為流行的響應式框架之一，它提供多種預定義的樣式和組件，可以快速構建美觀、易維護的網站。下面是一個Bootstrap的示例代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>頁面標題</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Logo</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">導航1</a></li>
          <li><a href="#">導航2</a></li>
          <li><a href="#">導航3</a></li>
        </ul>
      </div>
    </nav>
    <div class="container">
      <div class="jumbotron">
        <h1>主標題</h1>
        <p>副標題</p>
      </div>
      <div class="row">
        <div class="col-md-4">
          <img src="img/1.jpg" class="img-responsive">
          <h2>標題1</h2>
          <p>內容1</p>
        </div>
        <div class="col-md-4">
          <img src="img/2.jpg" class="img-responsive">
          <h2>標題2</h2>
          <p>內容2</p>
        </div>
        <div class="col-md-4">
          <img src="img/3.jpg" class="img-responsive">
          <h2>標題3</h2>
          <p>內容3</p>
        </div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

在Bootstrap中，使用了多種CSS樣式，例如class=”navbar”、class=”jumbotron”、class=”row”等，能夠大大簡化代碼的編寫，提高開發效率。

2.Foundation

Foundation是一種響應式網站框架，它提供了多種UI組件和布局工具，支持自適應，可以適配多種設備。下面是一個Foundation的示例代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>頁面標題</title>
    <link href="css/foundation.min.css" rel="stylesheet" />
  </head>
  <body>
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">Logo</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>
      <section class="top-bar-section">
        <ul class="right">
          <li class="active"><a href="#">導航1</a></li>
          <li><a href="#">導航2</a></li>
          <li><a href="#">導航3</a></li>
        </ul>
      </section>
    </nav>
    <div class="row">
      <div class="large-12 columns">
        <div class="hero-panel">
          <h1>主標題</h1>
          <p>副標題</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-4 columns">
        <img src="img/1.jpg">
        <h2>標題1</h2>
        <p>內容1</p>
      </div>
      <div class="large-4 columns">
        <img src="img/2.jpg">
        <h2>標題2</h2>
        <p>內容2</p>
      </div>
      <div class="large-4 columns">
        <img src="img/3.jpg">
        <h2>標題3</h2>
        <p>內容3</p>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

在Foundation中，使用了多種CSS樣式，例如class=”top-bar”、class=”row”、class=”large-12 columns”等，配合網格系統可以更好地管理頁面的布局和樣式。

3.Pure

Pure是一個輕量級的CSS框架，不依賴其他JavaScript庫，只需要在代碼中引入pure.css文件即可。它提供了一些基本的CSS樣式和UI組件，以及網格系統和響應式布局功能。下面是一個Pure的示例代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>頁面標題</title>
    <link href="css/pure.css" rel="stylesheet" />
  </head>
  <body>
    <div class="pure-menu pure-menu-horizontal">
      <a class="pure-menu-heading" href="#">Logo</a>
      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">導航1</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">導航2</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">導航3</a></li>
      </ul>
    </div>
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <img src="img/1.jpg">
        <h2>標題1</h2>
        <p>內容1</p>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <img src="img/2.jpg">
        <h2>標題2</h2>
        <p>內容2</p>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <img src="img/3.jpg">
        <h2>標題3</h2>
        <p>內容3</p>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
  </body>
</html>

在Pure中，使用了多種CSS樣式，例如class=”pure-menu”、class=”pure-menu-item”、class=”pure-u-1

原創文章，作者：XDII，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/137778.html