首頁 >web前端 >css教學 >HTML5模板：任何項目的基本入門HTML樣板

HTML5模板：任何項目的基本入門HTML樣板

Joseph Gordon-Levitt原創: 2025-02-08 08:50:08483瀏覽

構建你自己的HTML5模板：一份簡明指南

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

本文將指導您如何創建自己的HTML5模板。我們將逐步講解HTML基礎模板的關鍵要素，最終提供一個您可以拿來使用並進一步構建的簡單模板。

閱讀完本文後，您將擁有自己的HTML5模板。如果您想現在就獲取HTML模板代碼，稍後再閱讀本文，這裡提供我們最終完成的HTML5模板。

關鍵要點

HTML5模板作為可重用的模板，包含必要的HTML元素，有助於避免在每個項目開始時重複編寫代碼。
一個基本的HTML5模板應包含文檔類型聲明、帶有語言屬性的元素、通過<meta charset="utf-8">的字符編碼以及用於響應式設計的視口設置。
HTML5模板部分的關鍵元素通常包含用於SEO的元數據、CSS樣式表的鏈接以及可選的JavaScript文件。
為了進行社交媒體優化，加入Open Graph元標記可以增強內容在社交平台上共享時的顯示效果。
在模板中包含favicon和Apple touch圖標有助於建立品牌標識並改善跨設備的用戶體驗。
將JavaScript文件放在閉合的標籤之前可以提高頁面加載速度，因為它允許瀏覽器通過延遲加載腳本更快地呈現頁面。

什麼是HTML模板？

每個網站都不同，但從一個網站到另一個網站，許多東西基本上是相同的。與其一遍遍地編寫相同的代碼，不如創建一個自己的“模板”。模板是一個每次啟動項目時都會用到的模板，可以避免您從頭開始。

維基百科將模板描述為：

代碼片段在多個地方重複出現，幾乎沒有變化。

隨著您學習HTML5並將新技術添加到您的工具箱中，您可能希望為自己構建一個HTML模板來啟動所有未來的項目。這絕對值得去做，並且網上有很多起點可以幫助您構建自己的HTML5模板。

一個非常簡單的HTML5模板示例

本文末尾提供的完整模板包含很多內容。但是，您不必做得那麼花哨——尤其是在您剛開始學習的時候。這是一個非常簡單的“入門”HTML5模板，這可能是您唯一需要的：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

如果您將上面的代碼粘貼到一個.html文件中，您將擁有一個網頁！這個基本的HTML5模板包含下一節中列出的一些元素，以及一個將在您的網絡瀏覽器中顯示的簡單標題元素。

讓我們更詳細地了解一下它的結構。

HTML5模板的結構

HTML模板通常包含以下部分：

文檔類型聲明（或doctype）
元素
字符編碼
視口元元素
<title></title>、描述和作者
用於社交卡片的Open Graph元元素
Favicon和touch圖標
CSS樣式錶鍊接
JavaScript文件鏈接

除了文檔類型聲明和元素外，上面列出的元素大多位於HTML模板的部分中。

HTML5文檔類型聲明

您的HTML5模板需要以文檔類型聲明或doctype開頭。 doctype只是告訴瀏覽器或任何其他解析器它正在查看什麼類型的文檔的一種方式。對於HTML文件，這意味著HTML的特定版本和類型。 doctype應該始終是任何HTML文件頂部的第一項。許多年前，doctype聲明是一個難看且難以記住的混亂，通常指定為“XHTML Strict”或“HTML Transitional”。

隨著HTML5的出現，那些難以理解的令人討厭的東西消失了，現在您只需要這個：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

簡單明了。 “5”從聲明中明顯消失了。儘管當前版本的Web標記被稱為“HTML5”，但它實際上只是先前HTML標準的演變——未來的規範將只是我們今天所擁有的發展。永遠不會有“HTML6”，因此通常將當前狀態的Web標記簡單地稱為“HTML”。

因為瀏覽器需要支持Web上的舊內容，所以不依賴doctype來告訴瀏覽器在給定文檔中應支持哪些功能。換句話說，僅僅是doctype並不會使您的頁面符合現代HTML功能。實際上，無論使用哪種doctype，瀏覽器都將逐個案例確定功能支持。事實上，您可以將舊的doctype與頁面上的新HTML5元素一起使用，並且頁面的呈現方式與使用新doctype時相同。

元素

元素是HTML文件中的頂級元素——這意味著它包含文檔中除doctype之外的所有內容。元素分為兩部分——和部分。網頁文件中的所有其他內容都將放置在元素中或元素內部。下面的代碼顯示了元素，它位於doctype聲明之後，並包含和元素：

<code class="language-html"><!DOCTYPE html></code>

如何在HTML中使用標籤

部分包含有關文檔的重要信息，這些信息不會顯示給最終用戶——例如字符編碼以及CSS文件的鏈接，可能還有JavaScript文件。這些信息由瀏覽器、搜索引擎和屏幕閱讀器等機器使用：

<code class="language-html">
  
  
  
  
</code>

上面…標籤之間包含的所有元素都很重要，但最終用戶看不到——除了<title></title>文本，它將出現在在線搜索和瀏覽器標籤中。

如何在HTML中使用標籤

部分包含在瀏覽器中顯示的所有內容——例如文本、圖像等等。如果您想向最終用戶展示某些內容，請確保將其放在打開和關閉…標籤之間：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

lang屬性是什麼？

元素理想情況下應包含lang屬性，如上面的代碼所示（）。其主要目的是告訴屏幕閱讀器等輔助技術在朗讀時如何發音。（此屬性對於頁面驗證不是必需的，但如果您不包含它，大多數驗證器會發出警告。）

上面顯示的lang屬性的值為en，這指定文檔是用英語編寫的。所有其他口語都有值，例如法語的fr、德語的de、印地語的hi等等。（您可以在維基百科上找到語言代碼的完整列表。）

HTML文檔字符編碼

HTML文檔部分的第一行是定義文檔字符編碼的行。我們在網頁上閱讀的字母和符號被定義為一系列數字，有些字符（如字母）以多種方式編碼。因此，告訴您的計算機您的網頁應該參考哪個編碼很有用。指示字符編碼是一個可選功能，不會在驗證器中導致任何警告，但對於大多數HTML頁面來說，它是推薦的：

<code class="language-html"><!DOCTYPE html></code>

注意：為了確保某些舊版瀏覽器正確讀取字符編碼，整個字符編碼聲明必須包含在文檔的前512個字符中的某處。它也應該出現在任何基於內容的元素（如我們示例中稍後出現的<title></title>元素）之前。

為什麼在HTML5模板中使用UTF-8字符編碼？

上面的字符編碼示例使用UTF-8字符集。在幾乎所有情況下，utf-8都是您應該在文檔中使用的值。此編碼涵蓋了其他編碼中未包含的各種字符。您可能在Web上遇到過奇怪的字符——例如�——這顯然是一個錯誤。這通常是因為瀏覽器無法在文檔中指定的字符集中找到預期的字符。

UTF-8涵蓋了各種字符，包括全球各種語言的許多字符，以及許多有用的符號。正如萬維網聯盟所解釋的那樣：

基於Unicode的編碼（如UTF-8）可以支持多種語言，並且可以適應任何語言混合的頁面和表單。它的使用還可以消除服務器端邏輯，從而單獨確定為每個服務頁面或每個傳入表單提交的字符編碼。這大大降低了處理多語言網站或應用程序的複雜性。

字符編碼的完整解釋超出了本文的範圍，但如果您想更深入地研究，您可以閱讀HTML規範中的字符編碼。

X-UA-Compatible是什麼意思？

您有時會在HTML文檔的中看到這一行：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

此元標記允許Web作者選擇應呈現頁面的Internet Explorer版本。現在Internet Explorer在很大程度上只是一個糟糕的回憶，您可以安全地將此行從代碼中刪除。（我們已將其從HTML5模板中刪除。）如果您確定您的網頁可能會在舊版本的IE中查看，那麼可能值得包含它。您可以在Microsoft網站上閱讀更多關於此元標記的信息。

視口元元素

視口元元素是您幾乎在每個HTML5模板中都會看到的特性。它對於響應式Web設計和移動優先設計非常重要：

<code class="language-html"><!DOCTYPE html></code>

此<meta>元素包含兩個作為名稱/值集一起工作的屬性。在這種情況下，名稱設置為viewport，值為width=device-width, initial-scale=1。這僅供移動設備使用。您會注意到該值有兩個部分：

width=device-width：您希望網站呈現的視口的像素寬度。
initial-scale：這應該是一個介於0.0和10.0之間的正數。 “1”的值表示設備寬度和視口大小之間存在1:1的比率。

您可以在MDN上閱讀更多關於這些元元素特性的信息，但現在只要知道，在大多數情況下，此元元素及其設置最適合移動優先的響應式網站。

<title></title>、描述和作者

HTML基礎模板的下一部分包含以下三行：

<code class="language-html">
  
  
  
  
</code>

<title></title>是在瀏覽器標題欄中顯示的內容（例如，當您將鼠標懸停在瀏覽器選項卡上時），它也顯示在搜索結果中。此元素是部分中唯一必需的元素。描述和作者元元素是可選的，但它們確實為搜索引擎提供了重要信息。在搜索結果中，上面代碼示例中的標題和描述將如下所示。

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

您可以在中放置任意數量的有效元元素。

用於社交卡片的Open Graph元元素

如上所述，所有元元素都是可選的，但許多元元素對SEO和社交媒體營銷都有好處。 HTML5模板的下一部分包含其中一些元元素選項：

<code class="language-html">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
    
</code>

這些<meta>元素利用了所謂的Open Graph協議，還有許多其他您可以使用的元素。這些是您最常使用的元素。您可以在Open Graph網站上查看可用Open Graph元選項的完整列表。

這裡包含的那些元素將在鏈接到社交媒體帖子時增強網頁的外觀。例如，這裡包含的五個<meta>元素將出現在嵌入以下數據的社交卡片中：

內容的標題
提供的內容類型
內容的規範URL
內容的描述
與內容關聯的圖像

當您看到在社交媒體上共享的帖子時，您通常會看到這些數據位會自動添加到社交媒體帖子中。例如，如果您包含指向GitHub主頁的鏈接，則會在推文中顯示以下內容。

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

Favicon和Touch圖標

HTML5模板的下一部分包含<link>元素，這些元素指示要包含為favicon和Apple touch圖標的資源：

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

當有人查看您的網站時，favicon將出現在瀏覽器選項卡中。 favicon.ico文件用於舊版瀏覽器，不必包含在代碼中。只要您的favicon.ico文件包含在項目的根目錄中，瀏覽器就會自動找到它。 favicon.svg文件用於支持SVG圖標的現代瀏覽器。您也可以使用.png文件代替。

最後一個元素引用在將頁面添加到用戶的家庭屏幕時在Apple設備上使用的圖標。

您可以在這裡包含其他選項，包括引用其他圖標的Web應用程序清單文件。有關完整的討論，我們建議您閱讀Andrey Sitnik關於此主題的文章。但是這裡包含的那些對於簡單的HTML入門模板就足夠了。

包含CSS樣式表和JavaScript文件

HTML入門模板的最後兩個重要部分是對一個或多個樣式表以及可能還有JavaScript文件的引用。當然，兩者都是可選的，儘管很少有網站沒有至少一些CSS樣式。

在HTML模板中包含CSS樣式表

樣式表可以包含在文檔中的任何位置，但您通常會在部分看到它：

<code class="language-html"><!DOCTYPE html></code>

<link>元素將Web瀏覽器指向外部樣式表，以便它可以將這些CSS樣式應用於頁面。 <link>元素需要rel屬性為stylesheet。過去，通常還會包含type屬性，但實際上它從未真正需要，因此如果您在Web上找到包含它的舊代碼，只需將其刪除即可。

請注意，我們在CSS鏈接的末尾添加了?v=1.0查詢字符串。這是完全可選的。當您更新樣式表以更新此查詢字符串（例如，更新為1.1或2.0）時，這是一個方便的技巧，因為這樣做可以確保瀏覽器會丟棄任何舊的、緩存的CSS文件副本並加載新的版本。

值得注意的是，您不必使用<link>元素來在網頁上包含CSS，因為您可以改為將所有樣式放在頁面本身的<style></style>…標籤內，位於部分。這在試驗佈局時非常方便，但通常不建議在活動站點上這樣做，因為這些樣式在其他頁面上將不可訪問，從而導致低效和/或重複的代碼。

在HTML模板中包含JavaScript文件

JavaScript代碼通常通過⋮ <p> </p>

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

將

標籤內來嵌入腳本：

關於舊版瀏覽器和新元素的說明<article></article><aside></aside> <recipe></recipe>當HTML5引入時，它包含許多新元素，例如<ziggy></ziggy>和。您可能會認為對未識別元素的支持對於舊版瀏覽器來說是一個主要問題——但事實並非如此！大多數瀏覽器實際上並不關心您使用什麼標籤。如果您有一個HTML文檔，其中包含元素（甚至元素），並且您的CSS將某些樣式附加到該元素，幾乎每個瀏覽器都會像這完全正常一樣進行處理，而不會抱怨地應用您的樣式。

當然，這樣的假設文檔將無法驗證，並且可能存在可訪問性問題，但它會在幾乎所有瀏覽器中正確呈現——例外情況是舊版本的Internet Explorer (IE)。在第9版之前，IE阻止未識別的元素接收樣式。渲染引擎將這些神秘元素視為“未知元素”，因此您無法更改它們的外觀或行為。這不僅包括我們想像的元素，還包括在開發這些瀏覽器版本時尚未定義的任何元素，包括新的HTML5元素。

幸運的是，不支持新元素樣式的舊版瀏覽器如今幾乎不存在，因此您幾乎可以在任何項目中安全地使用任何新HTML元素而無需擔心。

也就是說，如果您

確實需要支持古老的瀏覽器，您仍然可以使用可靠的HTML5 Shiv，這是一個最初由John Resig開發的簡單的JavaScript片段。它受到Sjoerd Visscher作品的啟發，它使新HTML5元素在舊版本的IE中可設置樣式。不過，實際上，今天不需要這樣做。正如caniuse.com所示，HTML5元素在所有正在使用的瀏覽器中都受支持。

完整的HTML5模板

<code class="language-html"><!DOCTYPE html></code>

這是我們最終的HTML5模板——一個您可以用於任何項目的簡單模板：

您可以將這個簡單易用的HTML5模板代碼放到今天的任何項目中！在此基礎上，您可以在

和標籤之間添加任何您想要的內容。

結論