如何使用html5樣板在幾分鐘內建立一個網站
當你建立一個新的網站，這些天你會希望它是HTML5兼容。但你也不想花不必要的時間從頭開始學習HTML5的複雜性，是嗎？
幸運的是，HTML5樣板模板可以提供幫助。這是一個簡單的前端模板，您可以使用它在幾分鐘內創建一個HTML5網站。但它也足夠強大，你可以使用它作為一個複雜的，充分特色的網站的基礎。
本HTML5樣板教程將介紹模板中包含的內容、您需要了解的有關如何使用模板的基本知識，以及一些用於進一步學習的資源。我還將向您展示如何使用模板創建一個只有幾行HTML的非常基本的站點。
html5樣板模板
當您從HTML5樣板下載模板時，您會得到許多文件夾和文件。以下是ZIP文件的內容：
css---main.css---normalize.cssdocimgjs---main.js---plugins.js---vendor ---jquery.min.js ---modernizr.min.js.editorconfig.htaccess404.htmlbrowserconfig.xmlfavicon.icohumans.txticon.pngindex.htmlrobots.txtsite.webmanifesttile.pngtile-wide.png我們不會在這裡檢查模板中的每個元素，只檢查基本元素。不過，為了確保您擁有使用所有文件的資源，我們將從幫助文檔開始。
html5樣板幫助文檔
樣板有一個託管在GitHub中的幫助文檔集合。當你有技術問題或者想知道為什麼要這樣設計的時候，這是一個很大的幫助。
文檔中的幾乎所有內容都包含在模板的doc文件夾中。您將看到許多Markdown（.md）文件，這些文件對了解如何構建樣板文件站點有很大幫助。
如果你想通讀所有的東西，從總經理並按照鏈接從那裡到其他降價文件。如果你正在尋找關於某個特定問題的幫助，找到聽起來可能相關的文件；用法.md是個好的開始。
從html5樣板文件的css開始
HTML5樣板模板附帶兩個CSS文件：主.css以及normalize.css.
第二個文件，規範化.css，幫助不同的瀏覽器以一致的方式呈現元素。要進一步瞭解它的工作原理，請查看規範化.cssGitHub項目。
與此同時，主.css在這裡你可以輸入任何你需要的代碼來用CSS格式化你的網站。模板中包含的標準CSS是開發人員和HTML5樣板社區進行研究的結果。它可讀性強，可以在不同的瀏覽器中很好地顯示。
如果您想添加自己的CSS，可以將其添加到作者的自定義樣式部分。我將為示例頁面添加一些鏈接樣式：
基本CSS中還包含許多有用的助手類。其中一些對標準瀏覽器和屏幕閱讀器（或某些組合）隱藏項目。
也在主.css您將找到對響應式設計和有用的打印設置的支持。
CSS中的註釋清楚地解釋了所有這些項目：
一般來說，您可以從基本CSS開始。
將自己的html添加到模板
樣板文件包括兩個HTML文件：404.HTML和索引.html.
索引頁是您創建主頁的地方（如果您要創建一個簡單的單頁機，則是您唯一的頁面）。
如果在瀏覽器中打開索引頁，將看到一行文本。但是查看HTML會發現更多隱藏在代碼中的東西。唯一你真正需要擔心的是谷歌分析代碼（找到文本“UA-XXXXX-Y”並替換為你自己的跟蹤代碼）。
索引頁上其餘的HTML包括web應用程序的信息、舊瀏覽器的通知和有用的JavaScripts。當你開始的時候，你不應該把這些都搞砸。
但是，預先填充它們是確保您的站點準備充分利用HTML5的一個好方法。
要創建頁面，請在文件中的標記之間**HTML。以下是我將補充的一些關於我自己的基本信息：
要創建更多頁面嗎？創建此文件的副本並重命名它們，這樣就不必複製和粘貼所有HTML。然後添加內容。
如果您想自定義404頁面，只需修改HTML文件。不知道在404頁上放什麼？看看這些偉大的404頁面設計的例子。
添加favicon（和其他圖標）
想替換你的favicon嗎？那麼favicon.ico公司是您需要替換的文件。
如果你還沒有，你需要創建一個。您可以使用在線favicon生成器或自行設計。只需確保它是16 x 16像素，並且具有.ico文件類型。
把一些想法放進你的favicon是個好主意。用這些著名的技巧來指導你的頭腦風暴。確保添加新favicon時圖標文件.
您可能會注意到，在站點的根目錄中還有三個其他圖像：圖標.png, 平鋪.png、和平鋪-寬.png. 這些是幹什麼用的？
- 圖標.png用於Apple touc**標。如果你構建了一個web應用程序，當iPhone或iPad用戶將應用程序添加到主屏幕時，就會使用這個圖標。
- 平鋪.png和瓷磚-寬.png用於Windows的“pin”功能，並將顯示在windows10中。
為所有這些情況提供圖標是一個好主意——但是如果你不構建一個web應用程序，它的優先級可能會降低。
添加更多功能
一旦你添加了你的HTML和favicon（以及任何你想要包含的CSS），你的站點就可以發佈了。這就是HTML5樣板文件的易用性。上傳到你的服務器，你就完成了！
我們的頁面是這樣的：
正如你所看到的，僅僅幾行文字就創建了一個功能齊全（如果有點乏味的話）的網站。不多，但只花了幾分鐘。而且它具有HTML5的高度可擴展性。這就是樣板模板的威力。
但是如果您願意，還可以使用樣板模板做更多的事情。如果您要查找特定的內容，很有可能在幫助文檔中找到它。
如果你不確定你能用HTML5做什麼，但是你想知道，有很多網頁設計教程可以幫助你。
- 發表於 2021-03-24 10:41
- 閱讀 ( 43 )
- 分類：程式設計
你可能感興趣的文章
用jotform在幾分鐘內從trello構建您自己的表單
如果你是一個狂熱的Trello使用者，那麼你可能知道通電對提高生產力的好處。您可以連線像Butler、Asana、Evernote和GitHub這樣的方便工具，使您的專案執行得更順暢。 ...
7個你不知道可以在幾分鐘內自動完成的日常任務
... 這裡有七件事你可以自動化來節省時間。開始使用這些應用程式、外掛和擴充套件來幫助設定它。 ...
7種節省資金的方法任何人都可以在幾分鐘內完成的技術技巧
...了箱子和保險，如果你沒有錢更換你的裝置，要特別注意如何使用它。不要把一杯水放在你的膝上型電腦旁邊，也不要把你的**放在狗容易咀嚼的地方。提**慮預防事故的發生，這樣你就能把技術掌握得更久。 ...
用這5個很棒的web應用程式建立很酷的名字設計
我們已經研究瞭如何在Microsoft Word和Photoshop上建立很酷的徽標，但是還有更簡單的方法可以讓自己成為一個新的基於文字的徽標或徽章。 ...
5個偉大的網站建立自己的論壇
...告來保持免費。這可以免費禁用。另一個高階功能是可以使用你自己的域名——否則，你的論壇將是你的一個子域名proboards.com. ...
joomla與wordpress：為你的網站選擇合適的cms
...ess更復雜，設定起來也不那麼簡單。因此，不建議初學者使用。相反，Joomla在商業、電子商務，尤其是社群論壇和社交網路方面更有效。 ...
用placeit在幾分鐘內建立漂亮的模型
...種產品的高質量產品模型。讓我們看看它提供了什麼以及如何使用它。它可能會改變你做生意的方式！ ...
如何刪除你的twitter帳戶
...包括tweets、followers和favorites將在幾分鐘內恢復到Twitter。 如何刪除你的twitter帳戶 若要刪除您的帳戶，請在web瀏覽器中訪問Twitter網站您不能使用智慧**應用程式並登入您的帳戶。單擊您的使用者帳戶圖片並選擇“設定”以訪問您...
thunderbolt漏洞允許在幾分鐘內訪問pc的資料
...滕貝格（Björn Ruytenberg）釋出了一段影片，展示了攻擊是如何進行的。在影片中，他取下背板，將一個裝置連線到一臺受密碼保護的聯想ThinkPad膝上型電腦的內部，禁用其安全性，並像擁有密碼一樣登入。整個過程大約需要5分鐘...
智慧手機取證軟體可以讓執法人員在幾分鐘內破解你手機的pin碼
在你的智慧**上輸入密碼當然是明智之舉，但看起來軍方和執法部門並沒有被密碼提供的安全性所困擾。《福布斯》日前報道了瑞典一家名為“微系統化”的公司，該公司向法律提供其XRY“數字取證系統”，使他們能夠相對輕鬆...
