構建你自己的HTML5模板：一份簡明指南</p>
</p>
本文將指導您如何創建自己的HTML5模板。我們將逐步講解HTML基礎模板的關鍵要素，最終提供一個您可以拿來使用並進一步構建的簡單模板。 </p>
閱讀完本文後，您將擁有自己的HTML5模板。如果您想現在就獲取HTML模板代碼，稍後再閱讀本文，這裡提供我們最終完成的HTML5模板。 </p>
關鍵要點</p>
<meta charset="utf-8">的字符編碼以及用於響應式設計的視口設置。 什麼是HTML模板？ </p>
每個網站都不同，但從一個網站到另一個網站，許多東西基本上是相同的。與其一遍遍地編寫相同的代碼，不如創建一個自己的“模板”。模板是一個每次啟動項目時都會用到的模板，可以避免您從頭開始。 </p>
維基百科將模板描述為：</p>
代碼片段在多個地方重複出現，幾乎沒有變化。 </p>
隨著您學習HTML5並將新技術添加到您的工具箱中，您可能希望為自己構建一個HTML模板來啟動所有未來的項目。這絕對值得去做，並且網上有很多起點可以幫助您構建自己的HTML5模板。 </p>
一個非常簡單的HTML5模板示例</p>
本文末尾提供的完整模板包含很多內容。但是，您不必做得那麼花哨——尤其是在您剛開始學習的時候。這是一個非常簡單的“入門”HTML5模板，這可能是您唯一需要的：</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <🎜> </body> </html>
如果您將上面的代碼粘貼到一個.html文件中，您將擁有一個網頁！這個基本的HTML5模板包含下一節中列出的一些元素，以及一個將在您的網絡瀏覽器中顯示的簡單標題元素。 </p>
讓我們更詳細地了解一下它的結構。 </p>
HTML5模板的結構</p>
HTML模板通常包含以下部分：</p>
<html>元素<title>、描述和作者除了文檔類型聲明和<html>元素外，上面列出的元素大多位於HTML模板的<head>部分中。 </p>
HTML5文檔類型聲明</p>
您的HTML5模板需要以文檔類型聲明或doctype開頭。 doctype只是告訴瀏覽器或任何其他解析器它正在查看什麼類型的文檔的一種方式。對於HTML文件，這意味著HTML的特定版本和類型。 doctype應該始終是任何HTML文件頂部的第一項。許多年前，doctype聲明是一個難看且難以記住的混亂，通常指定為“XHTML Strict”或“HTML Transitional”。 </p>
隨著HTML5的出現，那些難以理解的令人討厭的東西消失了，現在您只需要這個：</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <🎜> </body> </html>
簡單明了。 “5”從聲明中明顯消失了。儘管當前版本的Web標記被稱為“HTML5”，但它實際上只是先前HTML標準的演變——未來的規範將只是我們今天所擁有的發展。永遠不會有“HTML6”，因此通常將當前狀態的Web標記簡單地稱為“HTML”。 </p>
因為瀏覽器需要支持Web上的舊內容，所以不依賴doctype來告訴瀏覽器在給定文檔中應支持哪些功能。換句話說，僅僅是doctype並不會使您的頁面符合現代HTML功能。實際上，無論使用哪種doctype，瀏覽器都將逐個案例確定功能支持。事實上，您可以將舊的doctype與頁面上的新HTML5元素一起使用，並且頁面的呈現方式與使用新doctype時相同。 </p>
<html>元素</p>
<html>元素是HTML文件中的頂級元素——這意味著它包含文檔中除doctype之外的所有內容。 <html>元素分為兩部分——<head>和<body>部分。網頁文件中的所有其他內容都將放置在<html>元素中或<html>元素內部。下面的代碼顯示了<html>元素，它位於doctype聲明之後，並包含<head>和<body>元素：</p>
<!DOCTYPE html>
如何在HTML中使用標籤</p>
<head>部分包含有關文檔的重要信息，這些信息不會顯示給最終用戶——例如字符編碼以及CSS文件的鏈接，可能還有JavaScript文件。這些信息由瀏覽器、搜索引擎和屏幕閱讀器等機器使用：</p>
<html lang="en"> <head> </head> <body> </body> </html>
上面<head>…</head>標籤之間包含的所有元素都很重要，但最終用戶看不到——除了<title>文本，它將出現在在線搜索和瀏覽器標籤中。 </p>
如何在HTML中使用標籤</p>
<body>部分包含在瀏覽器中顯示的所有內容——例如文本、圖像等等。如果您想向最終用戶展示某些內容，請確保將其放在打開和關閉<body>…</body>標籤之間：</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <🎜> </body> </html>
</p>
lang屬性是什麼？ </p>
<html>元素理想情況下應包含lang屬性，如上面的代碼所示（<html lang="en">）。其主要目的是告訴屏幕閱讀器等輔助技術在朗讀時如何發音。 （此屬性對於頁面驗證不是必需的，但如果您不包含它，大多數驗證器會發出警告。）</p>
上面顯示的lang屬性的值為en，這指定文檔是用英語編寫的。所有其他口語都有值，例如法語的fr、德語的de、印地語的hi等等。 （您可以在維基百科上找到語言代碼的完整列表。）</p>
HTML文檔字符編碼</p>
HTML文檔<head>部分的第一行是定義文檔字符編碼的行。我們在網頁上閱讀的字母和符號被定義為一系列數字，有些字符（如字母）以多種方式編碼。因此，告訴您的計算機您的網頁應該參考哪個編碼很有用。指示字符編碼是一個可選功能，不會在驗證器中導致任何警告，但對於大多數HTML頁面來說，它是推薦的：</p>
<!DOCTYPE html>
注意：為了確保某些舊版瀏覽器正確讀取字符編碼，整個字符編碼聲明必須包含在文檔的前512個字符中的某處。它也應該出現在任何基於內容的元素（如我們示例中稍後出現的<title>元素）之前。 </p>
上面的字符編碼示例使用UTF-8字符集。在幾乎所有情況下，utf-8都是您應該在文檔中使用的值。此編碼涵蓋了其他編碼中未包含的各種字符。您可能在Web上遇到過奇怪的字符——例如�——這顯然是一個錯誤。這通常是因為瀏覽器無法在文檔中指定的字符集中找到預期的字符。 </p>
UTF-8涵蓋了各種字符，包括全球各種語言的許多字符，以及許多有用的符號。正如萬維網聯盟所解釋的那樣：</p>
基於Unicode的編碼（如UTF-8）可以支持多種語言，並且可以適應任何語言混合的頁面和表單。它的使用還可以消除服務器端邏輯，從而單獨確定為每個服務頁面或每個傳入表單提交的字符編碼。這大大降低了處理多語言網站或應用程序的複雜性。 </p>
字符編碼的完整解釋超出了本文的範圍，但如果您想更深入地研究，您可以閱讀HTML規範中的字符編碼。 </p>
X-UA-Compatible是什麼意思？ </p>
您有時會在HTML文檔的<head>中看到這一行：</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <🎜> </body> </html>
此元標記允許Web作者選擇應呈現頁面的Internet Explorer版本。現在Internet Explorer在很大程度上只是一個糟糕的回憶，您可以安全地將此行從代碼中刪除。 （我們已將其從HTML5模板中刪除。）如果您確定您的網頁可能會在舊版本的IE中查看，那麼可能值得包含它。您可以在Microsoft網站上閱讀更多關於此元標記的信息。 </p>
視口元元素</p>
視口元元素是您幾乎在每個HTML5模板中都會看到的特性。它對於響應式Web設計和移動優先設計非常重要：</p>
<!DOCTYPE html>
此<meta>元素包含兩個作為名稱/值集一起工作的屬性。在這種情況下，名稱設置為viewport，值為width=device-width, initial-scale=1。這僅供移動設備使用。您會注意到該值有兩個部分：</p>
width=device-width：您希望網站呈現的視口的像素寬度。 initial-scale：這應該是一個介於0.0和10.0之間的正數。 “1”的值表示設備寬度和視口大小之間存在1:1的比率。 您可以在MDN上閱讀更多關於這些元元素特性的信息，但現在只要知道，在大多數情況下，此元元素及其設置最適合移動優先的響應式網站。 </p>
<title>、描述和作者</p>
HTML基礎模板的下一部分包含以下三行：</p>
<html lang="en"> <head> </head> <body> </body> </html>
<title>是在瀏覽器標題欄中顯示的內容（例如，當您將鼠標懸停在瀏覽器選項卡上時），它也顯示在搜索結果中。此元素是<head>部分中唯一必需的元素。描述和作者元元素是可選的，但它們確實為搜索引擎提供了重要信息。在搜索結果中，上面代碼示例中的標題和描述將如下所示。 </p>
</p>
您可以在<head>中放置任意數量的有效元元素。 </p>
用於社交卡片的Open Graph元元素</p>
如上所述，所有元元素都是可選的，但許多元元素對SEO和社交媒體營銷都有好處。 HTML5模板的下一部分包含其中一些元元素選項：</p>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <🎜> </head>
這些<meta>元素利用了所謂的Open Graph協議，還有許多其他您可以使用的元素。這些是您最常使用的元素。您可以在Open Graph網站上查看可用Open Graph元選項的完整列表。 </p>
這裡包含的那些元素將在鏈接到社交媒體帖子時增強網頁的外觀。例如，這裡包含的五個<meta>元素將出現在嵌入以下數據的社交卡片中：</p>
當您看到在社交媒體上共享的帖子時，您通常會看到這些數據位會自動添加到社交媒體帖子中。例如，如果您包含指向GitHub主頁的鏈接，則會在推文中顯示以下內容。 </p>
</p>
Favicon和Touch圖標</p>
HTML5模板的下一部分包含<link>元素，這些元素指示要包含為favicon和Apple touch圖標的資源：</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <🎜> </body> </html>
當有人查看您的網站時，favicon將出現在瀏覽器選項卡中。 favicon.ico文件用於舊版瀏覽器，不必包含在代碼中。只要您的favicon.ico文件包含在項目的根目錄中，瀏覽器就會自動找到它。 favicon.svg文件用於支持SVG圖標的現代瀏覽器。您也可以使用.png文件代替。 </p>
最後一個元素引用在將頁面添加到用戶的家庭屏幕時在Apple設備上使用的圖標。 </p>
您可以在這裡包含其他選項，包括引用其他圖標的Web應用程序清單文件。有關完整的討論，我們建議您閱讀Andrey Sitnik關於此主題的文章。但是這裡包含的那些對於簡單的HTML入門模板就足夠了。 </p>
包含CSS樣式表和JavaScript文件</p>
HTML入門模板的最後兩個重要部分是對一個或多個樣式表以及可能還有JavaScript文件的引用。當然，兩者都是可選的，儘管很少有網站沒有至少一些CSS樣式。 </p>
樣式表可以包含在文檔中的任何位置，但您通常會在<head>部分看到它：</p>
<!DOCTYPE html>
<link>元素將Web瀏覽器指向外部樣式表，以便它可以將這些CSS樣式應用於頁面。 <link>元素需要rel屬性為stylesheet。過去，通常還會包含type屬性，但實際上它從未真正需要，因此如果您在Web上找到包含它的舊代碼，只需將其刪除即可。 </p>
請注意，我們在CSS鏈接的末尾添加了?v=1.0查詢字符串。這是完全可選的。當您更新樣式表以更新此查詢字符串（例如，更新為1.1或2.0）時，這是一個方便的技巧，因為這樣做可以確保瀏覽器會丟棄任何舊的、緩存的CSS文件副本並加載新的版本。 </p>
值得注意的是，您不必使用<link>元素來在網頁上包含CSS，因為您可以改為將所有樣式放在頁面本身的<style>…</style>標籤內，位於<head>部分。這在試驗佈局時非常方便，但通常不建議在活動站點上這樣做，因為這些樣式在其他頁面上將不可訪問，從而導致低效和/或重複的代碼。 </p>
JavaScript代碼通常通過
</body>
⋮
</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <🎜> </body> </html>
標籤內來嵌入腳本： </p>
關於舊版瀏覽器和新元素的說明<article><aside>
<recipe>當HTML5引入時，它包含許多新元素，例如<ziggy>和。您可能會認為對未識別元素的支持對於舊版瀏覽器來說是一個主要問題——但事實並非如此！大多數瀏覽器實際上並不關心您使用什麼標籤。如果您有一個HTML文檔，其中包含元素（甚至元素），並且您的CSS將某些樣式附加到該元素，幾乎每個瀏覽器都會像這完全正常一樣進行處理，而不會抱怨地應用您的樣式。 </p>
</p>
</p>當然，這樣的假設文檔將無法驗證，並且可能存在可訪問性問題，但它會在幾乎所有瀏覽器中正確呈現——例外情況是舊版本的Internet Explorer (IE)。在第9版之前，IE阻止未識別的元素接收樣式。渲染引擎將這些神秘元素視為“未知元素”，因此您無法更改它們的外觀或行為。這不僅包括我們想像的元素，還包括在開發這些瀏覽器版本時尚未定義的任何元素，包括新的HTML5元素。
幸運的是，不支持新元素樣式的舊版瀏覽器如今幾乎不存在，因此您幾乎可以在任何項目中安全地使用任何新HTML元素而無需擔心。 </p>也就是說，如果您
確實需要支持古老的瀏覽器，您仍然可以使用可靠的HTML5 Shiv，這是一個最初由John Resig開發的簡單的JavaScript片段。它受到Sjoerd Visscher作品的啟發，它使新HTML5元素在舊版本的IE中可設置樣式。不過，實際上，今天不需要這樣做。正如caniuse.com所示，HTML5元素在所有正在使用的瀏覽器中都受支持。 </p>
完整的HTML5模板</p>
<!DOCTYPE html>
這是我們最終的HTML5模板——一個您可以用於任何項目的簡單模板：<body>
</body>
</p>您可以將這個簡單易用的HTML5模板代碼放到今天的任何項目中！在此基礎上，您可以在
和標籤之間添加任何您想要的內容。 </p>結論<script></code>元素添加到HTML页面。此元素的<code>src</code>属性提供指向JavaScript文件的链接。您可以从HTML模板中的任何位置链接到JavaScript文件。您经常会在<code><head></code>部分看到它们，但作为一般规则，最好将它们放在文档的底部，就在闭合的<code></body></code>标签之前：</p> <pre class="brush:php;toolbar:false"><code class="language-html"><head> ⋮ </head> <body> ⋮ <script src="js/script1.js"></script>
網上有很多HTML入門模板和框架，它們帶有現成的CSS和JavaScript文件以及許多您可以隨意使用和修改的預寫內容。這不是我們的目標。我們在這裡提供的基本模板包含設計任何網頁時可能需要的所有內容，這樣您就不必每次都從頭開始。 </p>
隨意複製我們在開頭顯示的基本HTML頁面模板，或上面顯示的完整模板，並在您的項目中使用它們。隨著時間的推移，您可能會發現有些內容您並不經常需要，而我們這裡沒有提到的一些內容您經常使用，因此您可以更新您的模板以適應您的工作流程。 </p>
後續步驟</p>
將您的網頁佈局提升到一個新水平的一個好方法是使用《美麗的網頁設計原則，第四版》。本書將教您設計原則以及向您展示如何在Web上實現它們。它在2020年9月進行了完全改寫，並包含您在其他任何地方都未曾讀到的尖端技術。 </p>
為了磨練您的CSS知識，我們的現代CSS項目課程將幫助您掌握CSS3的最新高級版本。 </p>
除此之外，您可以通過交互性和程序化、反應式UI將您的網站或Web應用程序開發提升到一個新的水平。例如，查看SitePoint關於JavaScript和React的大量資源。並了解如何使用我們關於最佳腳手架Web工具和庫的指南來更快地啟動新項目。或者，如果您想在不學習編碼的情況下構建Web體驗，請閱讀我們關於無代碼運動的入門指南。最新的無代碼工具改變了遊戲規則。他們第一次擁有足夠的強大功能，可以在許多情況下為編碼提供一個強大的替代方案。 </p>
HTML5模板常見問題解答</p>
最後，我們將回答關於HTML5模板代碼的常見問題。 </p>
模板是一個HTML頁面模板，每次啟動項目時都會使用它，從而避免從頭開始。它包括常見的元素，例如文檔類型聲明和出現在每個網頁上的基本HTML元素。 </p>
是的。模板是一個非常簡單的HTML入門模板，它包含出現在任何網頁上的基本元素，例如字符編碼、<head>和<body>元素以及CSS和JavaScript文件的鏈接。 </p>
創建您自己的HTML模板的一種方法是獲取任何網頁，複製其源代碼，然後刪除除出現在每個網頁上的最基本元素之外的所有內容。或者您可以獲取我們現成的HTML5模板並將其粘貼到.html文件中，然後您就可以開始了！ </p>
在設計網頁時，沒有什麼比從空白的.html頁面開始並不得不從頭開始編寫所有枯燥的代碼更糟糕的了。我們的HTML5模板為您提供了開始運行所需的所有HTML模板代碼，以便您可以立即開始處理您的獨特設計和內容。 </p>
網上有很多HTML5模板示例。隨著時間的推移，您可能會根據自己編寫HTML的方式創建自己的模板。我們的HTML5模板示例提供了大多數網頁上所需的所有基本元素。 </p>
作為一個非常簡單的開始，您可以只使用這個：</p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Page Title</h1> <🎜> </body> </html>
HTML文檔總是以文檔類型聲明開頭：<!DOCTYPE html>。之後是標籤，其中包含網頁上的所有其他內容。 的兩個子元素是和元素。我們的HTML5模板包含任何網頁所需的所有基本起始代碼。 </p>
理想情況下，是的。 HTML模板提供了HTML頁面在Web瀏覽器中執行任何有用操作的最小代碼量。您可以在網站的每個頁面上使用HTML模板代碼。通常，模板的公共元素將從單個源（例如框架或包含文件）注入您的頁面，以便您可以一次更新所有頁面的模板。我們的HTML5模板提供了開始所需的所有HTML模板代碼。 </p>
以上是HTML5模板：任何項目的基本入門HTML樣板的詳細內容。更多資訊請關注PHP中文網其他相關文章！
