HTML 是當今互聯網的支柱。 數以百萬計的網站共同組成了互聯網。 HTML 是所有這些網站的構建塊。 二十年前，即使你只是一個愛好博主，你也必須知道一些網絡編碼來保護自己或為你的網站添加一個簡單的功能。 但是現在有這麼多可用的編輯器和插件，甚至不再需要了解 HTML 的基礎知識。
The problem with this is that if you don't know a few basics, you can easily get into real trouble in your blog and have to hire a pricey developer to fix what may be a minor problem.這樣做的問題是，如果您不了解一些基礎知識，則很容易在博客中遇到真正的麻煩，而不得不僱用昂貴的開發人員來解決可能是一個小問題。 Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.不僅如此，而且要對博客進行更改（例如添加自定義文本小部件）需要一點知識。
如果您遇到內容佈局看起來不正確，HTML知識可以讓您回到正軌。
另請閱讀
適合初學者的託管以託管您的 HTML 項目
如果您是初學者，我們推薦價格實惠且易於上手的託管服務提供商。 即時帳戶激活、易於使用的控制面板、全面的用戶指南以及隨時準備提供幫助的有用技術支持是重要的要求。
| 網絡主機 | 註冊 | 強調 |
|---|---|---|
| A2 Hosting | 每月 2.99 美元 | 快速的虛擬主機，流暢的新用戶入職流程（全面檢討). |
| Hostpapa | 每月 3.95 美元 | 環保主機，新用戶大優惠（全面檢討). |
| Hostinger | 每月 1.99 美元 | 超低價託管，性能好（全面檢討). |
| GreenGeeks | 每月 2.95 美元 | 300% 綠色託管，免費且易於管理 SSL (全面檢討). |
| InMotion Hosting | 每月 3.49 美元 | 非常可靠的託管； 還提供網頁設計服務（全面檢討). |
開始之前——HTML 基礎
什麼是HTML？
HTML是。的縮寫 Hyper T分機 MArkupe Language。 它是標記Web瀏覽器內容的標準語言。
HTML由“元素”表示。 元素也稱為“標籤”。
為什麼需要 HTML？
Web瀏覽器只能在用支持的語言編寫時呈現網站。 HTML是最常用的標記語言，對Web瀏覽器的接受程度最高。
這就是你需要HTML的原因。
HTML 是否區分大小寫？
HTML不區分大小寫。 但最好的做法是用適當的案例編寫HTML。
創建第一個HTML文件的步驟
1.世界您好！
將以下代碼複製並粘貼到新的HTML文件中並保存。 現在在您的Web瀏覽器上運行它。
HTML代碼
<!DOCTYPE html> <html> <head> <title>My first web page</title> </head> <body> <p>Hello World!</p> </body> </html>
輸出：
恭喜！ 您已經創建了第一個HTML文件。 此時您無需了解它。 我們將很快介紹它。
理解HTML結構
每個HTML文件都有一個共同的裸結構。 一切都在這裡開始。 修剪後，每個大頁面的代碼都會進入這個結構。
因此，讓我們嘗試從“ Hello World！”中了解它。 碼。 以下元素是每個HTML文件的必需部分。
- =向瀏覽器宣告這是HTML文件。 您必須在標籤。
- =這是HTML文件的根元素。 您編寫的所有內容都介於和。
- =這是瀏覽器的元信息部分。 此標記內的代碼沒有可視輸出。
- =這是Web瀏覽器呈現的部分。 您在網站上確切看到的是代碼之間的呈現和。
2. HTML標記
HTML是數百種不同標籤的協作。 你需要了解它們的工作原理。 您還必須確保他們以正確的方式使用它們。
HTML標記通常有一個開始標記和一個結束標記。 開頭標籤的關鍵字由小於號（<）和大於號（>）包圍。 結束標記具有相同的內容，但在小於（<）符號後面加一個正斜杠（/）。
頭部標籤
所有的head標籤之間和。 它們包含用於Web瀏覽器和搜索引擎的元信息。 他們基本上沒有視覺輸出。
標題標籤定義在瀏覽器選項卡上可見的網頁標題。 該信息由Web程序和搜索引擎使用。 每個HTML文件可以擁有最高的一個標題。
代碼：
<title>My first web page</title>
鏈接標記將您的HTML頁面與外部資源鏈接在一起。 它的主要用途是將HTML頁面與CSS樣式錶鍊接。 這是一個自動關閉的標籤，不需要結尾。 rel表示與文件的關係，src表示源。
代碼：
<link rel="stylesheet" type="text/css" src="style.css">
Meta是另一個自動關閉標記，它提供html文件的元信息。 搜索引擎和其他Web服務使用這些信息。 如果您想為搜索引擎優化頁面，則必須使用元標記。
代碼：
<meta name="description" content="This is the short description that search engines show"
script 標籤用於包含一個 服務器端 腳本或鏈接到外部腳本文件。 它可以在開始標籤中有兩個屬性。 一個是類型，另一個是源（src）。
代碼：
<script type="text/javascript" src="scripts.js"></script>
在Web瀏覽器中禁用腳本時，Noscript標記有效。 它使頁面與不允許在其Web瀏覽器中使用腳本的用戶兼容。
代碼：
<noscript><p>Alas! Scripts are disabled.</p></noscript>
身體標籤
所有的身體標籤之間和。 他們有視覺輸出。 這是完成最多工作的地方。 您必須使用這些標籤來構造主頁內容。
至
這些是標題標籤。 最重要的標題標記為最不重要的是。 您應該在正確的層次結構中使用它們。
代碼：
<h1>This is a h1 heading</h1> <h2>This is a h2 heading </h2> <h3>This is a h3 heading </h3> <h4>This is a h4 heading </h4> <h5>This is a h5 heading </h5> <h6>This is a h6 heading </h6>
輸出：
格式化標籤
可以使用許多格式標籤格式化html文件中的文本。 當您想要突出顯示內容中的單詞或行時，將是必要的。
代碼：
<p>You can highlight your text in many ways.</p> <p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>
輸出：
您可以使用comment標記將某些代碼與rending區分開來。 代碼將顯示在源代碼中，但不會呈現。 此標記的主要用途是創建html文件的文檔以供將來參考。
示例：
<!-- <p>You can comment out any code by surrounding them in this way</p> -->
其他重要的 HTML 標籤
Anchor是一個無價的標籤，幾乎無處不在。 沒有至少一個錨鏈接，您將不會在線看到任何網頁。
結構相同。 它有一個開合部分。 您要定位的文字介於和之間。
有一些屬性可以定義用戶點擊後的位置和方式。
- ahref =”“ =它定義目標鏈接。 鏈接在雙引號之間。
- 目標=”“ =定義URL是在新的瀏覽器選項卡中還是在同一選項卡中打開。 target =“ _ blank”用於新選項卡，而target =“ _ self”用於在同一選項卡中打開。
- rel =”“ =定義當前頁面與鏈接頁面的關係。 如果您不信任鏈接的頁面，則可以定義rel =“ nofollow”。
代碼：
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google. It will open in a new tab.</p> <p><a target="_self" href="https://www.google.com/">Click here</a>. It will also take you to Google but will open in the current tab.</p>
輸出：
圖像標記是另一個重要的標記，沒有它，您無法想像許多基於圖像的網站。
是一個自動關閉標籤。 它不需要像。 在正確使用它之前，您需要了解一些屬性。
- src =”“ =這用於定義圖像的源鏈接。 將鏈接放在雙引號之間。
- alt =“” =它代表替代文字。 當您的圖像未加載時，此文本將為用戶提供有關丟失圖像的信息。
- 寬度=”“ =它以像素為單位定義圖像的寬度。
- 身高=”“ =它以像素為單位定義圖像的高度。
<p>This is the Googleplex in August 2014.</p> <p>This image has a width of 500 pixels and a height of 375 pixels.</p> <img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter in August 2014" width="500" height="375" />
輸出：
提示：是否要插入可點擊的圖片？ 用標籤包裝圖像代碼。 看看進展如何。
要么
列表標籤用於創建項目列表。 代表有序列表（編號列表），並且代表無序列表（項目符號）。
裡面的清單項目要么被標記為。 李代表名單。 你可以有很多如你所願要么標籤。
代碼：
<p>This is an ordered list:</p> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <p>This is an unordered list:</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
輸出：
表標記用於創建數據表。 有一些內部級別標籤定義表頭，行和列。
是外部父代碼。 在這個標籤中代表表格行， 代表表格欄和代表表頭。
代碼：
<table> <tr> <th>Name</th> <th>Age</th> <th>Profession</th> </tr> <tr> <td>Jo <td>27</td> <td>Businessman</td> </tr> <tr> <td>Carol</td> <td>26</td> <td>Nurse</td> </tr> <tr> <td>Simone</td> <td>39</td> <td>Professor</td> </tr> </table>
輸出：
注意：第一個中的值是標題。 所以，我們用將粗體文本效果應用於文本。
表分組
您可以使用表分組元素擴展表的功能。 有時您需要創建分成多個頁面的大型表。
將表數據分組到頁眉，正文和頁腳中，您可以允許獨立滾動。 標題和正文部分將打印到表格所跨越的每個頁面。
表分組標籤是：
- =用於包裹桌子的標題。 它打印到表的每個拆分頁面。
- =用於包裝表的主要數據。 你可以有很多根據需要。 一種標籤表示一組單獨的數據。
- =用於包裝表的頁腳信息。 它打印到表的每個拆分頁面。
請注意，使用分組不是強制性的。 您可以使用它來使更大的表更具可讀性。 雖然一些特殊的開發人員明顯使用這些標籤作為CSS選擇器。
這是我們如何將示例表分組為， 和：
代碼：
<table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Profession</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>27</td> <td>Businessman</td> </tr> <tr> <td>Carol</td> <td>26</td> <td>Nurse</td> </tr> <tr> <td>Simone</td> <td>39</td> <td>Professor</td> </tr> </tbody> <tfoot> <tr> <td>Total Persons:</td> <td>3</td> </tr> </tfoot> </table>
輸出：
表單元素用於創建網頁的交互式表單。 HTML表單包含幾個連續的元素。 例如：， ， 等等
表單中的action屬性非常重要。 它指向用於處理信息的服務器端或第三方頁面。 對於處理，您需要首先定義方法。
您可以使用兩種方法之一，獲取或發布。 獲取發送郵件在郵件正文中發送信息的URL格式的所有信息。
表單的輸入有很多類型。 最基本的輸入類型是文本。 它寫為。 類型也可以是單選，複選框，電子郵件等。 底部應有一個提交類型輸入，用於創建一個提交按鈕。
標記用於創建標籤並將其與輸入相關聯。 將標籤與輸入關聯的規則是在標籤的for =””屬性和輸入的id =””屬性中具有相同的值。
代碼：
<form action="#"> <label for="firstname">First Name: </label> <input type="text" id="firstname"><br> <label for="lastname">Last Name: </label> <input type="text" id="lastname"><br> <label for="bio">Short Bio: </label> <textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br> <label>Gender:</label><br> <label for="male">Male</label> <input type="radio" name="gender" id="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female"><br> <input type="submit" value="Submit"> <form>
輸出：
注意：我已將操作指向null值，因為它未連接到任何服務器來處理信息。
3. HTML屬性
屬性是HTML標記的一種修飾符。 他們為HTML標記添加了新配置。
屬性看起來像attributename =””，位於開頭的HTML標記中。 該屬性的值位於雙引號之間。
id =””和class =“””
id和class是HTML標記的標識符。 使用標識符將不同的名稱指定給不同的HTML元素。 您可以為多個元素使用一個類標識符。 但是你不能為多個元素使用一個id標識符。
代碼：
<h1 class="heading">This is the main title</h1>
href =””
href代表超文本引用。 他們將用戶指向參考鏈接。 錨標記使用href將用戶發送到目標URL。
代碼：
<a href="https://www.google.com/">Google</a>
src =””
src代表來源。 它定義了您在HTML文件中使用的媒體或資源的來源。 源可以是本地或第三方URL。
代碼：
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />
alt =””
alt代表替代方案。 它是在無法加載HTML元素時使用的備份文本。
代碼：
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />
樣式=””
style屬性通常用於HTML標記。 它在HTML標記中完成CSS的工作。 您的樣式屬性介於雙引號之間。
代碼：
<h2 style="color:red">This is another title</h2>
4.代碼顯示：塊與內聯
有些元素總是從新行開始，並佔據全部可用寬度。 這些是“塊”元素。
例如： ， ， -- ，表格等。
某些元素僅佔用所需的空間，而不以新行開頭。 這些是“內聯”元素。
例如： 、、 ， 等等
當您使用CSS樣式時，您需要將塊元素與內聯區分開來。 在本HTML指南中，它不是非常必要的。
代碼：
<!DOCTYPE html> <html> <head> <title>My first web page</title> </head> <body> <h2>This is a H2 heading. It has Block display.</h2> <h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2> </body> </html>
輸出：
5. HTML中的雙引號與單引號
這個問題非常明顯。 你應該在HTML中使用什麼？ 單引號還是雙引號？ 人們似乎同時使用哪一個，但哪一個是正確的？
在HTML中，單引號和雙引號是相同的。 它們對輸出沒有任何影響。
你可以使用你喜歡的任何人。 但是在一頁代碼中混合兩者被認為是一種不好的做法。 你應該與他們中的任何一個保持一致。
6.語義HTML與非語義HTML
語義HTML是HTML的最新版本，也稱為HTML5。 它是非語義HTML和XHTML的開發版本。
為什麼HTML5更好？ 在以前的版本中，HTML元素由ID /類名稱標識。 例如： 被視為文章。
在HTML5中， 標籤將自己表示為商品，而無需任何id / class標識符。
為了HTML5，現在搜索引擎和其他Web應用程序可以更好地理解網頁。 事實證明，語義網站對SEO做得更好。
以下是一些流行的HTML5標記列表：
- =這是用於包裝要向觀看者顯示的主要內容。
- =這用於標記內容的標題部分，例如title或author meta。
- =它為您的觀眾指定用戶定義或獨立的內容。
- =它可以對任何代碼進行分組，例如頁眉，頁腳或側邊欄。 你可以說，它是div的語義形式。
- =這是您的頁腳內容，免責聲明或版權文本所屬的地方。
- =它使您可以插入音頻文件，而不會有任何插件問題。
- =喜歡，您可以使用此標籤插入視頻而不會出現插件問題。
一個簡單的HTML5結構如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My first web page</title> </head> <body> <header> <nav> <ul> <li>Menu 1</li> <li>Menu 2</li> </ul> </nav> </header> <main> <article> <header> <h2>This is the title of the article</h2> <p>Posted by John Doe</p> </header> <p>Content of the article goes here</p> </article> </main> <footer> <p>Copyright 2017 John Doe</p> </footer> </body> </html>
7. HTML驗證
大多數網絡專業人員在完成後驗證他們的代碼。 為什麼在代碼工作正常時驗證代碼是否必要？
驗證代碼有兩種可能的原因：
- 它將幫助您使代碼跨瀏覽器和跨平台兼容。 代碼可能不會在您當前的瀏覽器中顯示任何錯誤，但可能在另一個瀏覽器中顯示。 代碼驗證將修復它。
- 如果您的頁面有錯誤，搜索引擎和其他網絡程序可能會停止抓取您的網頁。 您可以通過驗證確認您沒有任何重大錯誤。
W3C驗證 是最受歡迎的代碼驗證服務。 他們有幾種驗證代碼的方法。 您可以上傳文件或直接在其驗證引擎中輸入代碼。
更多有用的資源
HTML是一個不斷學習的主題。 更新版本的HTML可能會更快到來。 所以你必須保持更新並繼續練習。 實踐是什麼aces HTML。
以下是一些有用的資源：
HTML 常見問題解答
是的，HTML 很容易學習。 您可以使用計算機上的記事本創建基本的 HTML 文件； 或者你可以使用 HTML編輯器 編寫和更好地組織更長的頁面。
您已經掌握了此頁面的基礎知識； 接下來你需要做的是邊做邊學。 這裡有六個網站 您可以在其中編寫和測試自己的 HTML 代碼。
HTML 是超文本標記語言的縮寫。 對於外行 - 您可以將 HTML 理解為網站的構建塊。 它是用於構建網頁及其內容的標準計算機語言。
是的，HTML 是最常見的標記語言，並且對 Web 瀏覽器的接受度最高。 它仍然是 Internet 上大多數網站的重要組成部分（與 CSS 和 JavaScript 一起）。 如果您打算成為網絡開發人員或運營網站； 最好至少有基本的 HTML 知識。
