初學者需要知道的 19 個常用 HTML 標籤

已發表: 2022-12-08

如果你想成為一名前端開發人員，你會得到的最常見的建議之一就是學習 HTML。超文本標記語言，縮寫為 HTML，是大多數網頁的基礎。

HTML 由不同的東西組成，例如標籤、屬性和元素。我們的重點將是 HTML 標籤。我們使用 HTML 標籤告訴瀏覽器如何將內容組織成標題、標題、段落、圖像等等。因此，HTML 標籤就像定義瀏覽器如何顯示或格式化內容的關鍵字。

服務器從上到下讀取 HTML 標籤。網頁應具有的 HTML 標記的數量沒有限制。

所有 HTML 標籤都包含在<>中
每個 HTML 標籤執行不同的功能
大多數 HTML 標籤都有開始<tag>和結束</tag>

HTML 標籤與 HTML 元素與 HTML 屬性

大多數人可以互換使用術語 HTML 標籤和元素。但它們是一樣的嗎？從技術上講，HTML 元素和 HTML 標籤是不同的。

HTML 標籤定義 HTML 元素。為實現這一點，內容使用與我們正在使用的標籤內容相匹配的開始和結束標籤名稱進行包裝。

這是 HTML 元素的示例：

 <p> This is a paragraph </p>

<p>是一個 HTML 標籤的例子

HTML 屬性提供有關文檔中 HTML 元素的附加信息。屬性位於 HTML 元素中。

這是一個 HTML 屬性的例子

<button id=" SubmitOrder" class="btn">Order</button>

每個人都應該知道的 HTML 標籤

自 Tim Berners-Lee 於 1993 年推出以來，HTML 作為一種標記語言已經發展了多年。第一個 HTML 版本有 18 個標籤。每個 HTML 版本都會添加新標籤；最近的升級是 2014 年的 HTML5。

仔細比較 HTML 和 HTML5 可以發現，後者俱有 <article>、<header> 和 <footer> 等語義標籤，可以清楚地描述內容。我們現在有超過 100 個 HTML 標籤。以下是您應該知道的一些最流行的標籤：

<!文檔類型>

DOCTYPE 在技術上不是標籤，而是告訴瀏覽器將加載哪種文件的聲明。此標記告訴瀏覽器將加載的 HTML 類型。

在 HTML5 中，您可以將文件聲明為

<!DOCTYPE html>

或者

<!doctype html>

注意：該聲明沒有結束標記並且不區分大小寫。

<html> </html>

<html> ….. </html> 標籤位於 DOCTYPE 標籤之後。該標籤將文檔定義為網頁；所有其他元素都將嵌套在裡面。 HTML 標記指定 HTML 文檔的開始和結束。

<html> 標籤表示為；

 <html>Content</html>

<頭></頭>

HTML 文檔的頭部部分由 <head> 標記表示。此標記包含在 <html> 標記內，並提供有關網頁的一般信息。

<head> 標籤包含提供網頁細節的其他標籤，例如頁面的標題和作者。該標籤的內容不顯示在網頁上

這是 <head> 標籤的語法；

 <head> …….. </head>

<標題></標題>

<title> 標籤聲明網頁的標題。此標記包含在 <head> 標記中。 <title> 標籤將出現在瀏覽器窗口的標題欄或選項卡上，但不會出現在實際網頁上。

<title> 標籤的語法是；

 <title>HTML Tags for Beginners</title>

當在 <head> 標籤內時，它將顯示為；

 <head> <title>HTML Tags for Beginners</title> </head>

<正文> </正文>

<body> 標籤顯示網頁上所有可見的內容。圖片、鏈接、純文本、視頻等都可以在 <body> 和 </body> 標籤內找到。

您會在正文中找到的其他一些標籤包括用於段落的 <p> 標籤、用於圖像的 <a> 標籤、用於粗體文本的 <strong> 標籤和用於有序列表的 <ol> 標籤，僅舉幾例。

<body> 標籤的語法是；

 <body> Content </body>

<h1> 到 <h6> 標籤

一個 HTML 文檔中最多可以有 6 個標題標籤。每個標籤都由從 1 到 6 的數字表示，如 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。

H1 是最大的標題標籤，而 H6 是最小的。

在 HTML 文檔中，標題標籤可以表示如下：

 <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

<h1> 到 <h6> 標籤包含在 <body> 標籤內。

例如，一個 ,<H1> 標籤將被包含為；

 <body> <h1> This is heading 1 >/h1> </body>

<p> </p>

<p> </p> 或簡單的段落標記用於將內容結構化為段落。在代碼編輯器中點擊 HTML 文檔中的“輸入”按鈕不會創建新段落。

如果您想要多個段落，則必須在文檔中使用多個 <p> </p> 標記。段落標籤應該包含在 <body > 標籤中。

段落標籤的語法是；

 <p> ….some content here….</p>

如果你想要有四個段落，你的代碼將被構造為；

 <body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body>

<b> </b>

<b> </b> 或簡單的粗體標記會將開始 <b> 和結束 </b> 之間的任何內容格式化為粗體。

粗體標籤可以位於標題（例如 H1）之間，甚至可以位於段落標籤內。

這些是粗體標籤的例子；

 <b> Bold Tag </b>

短語“Bold Tag”將顯示為粗體。

 <h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>

第五版將加粗。

<我> </我>

斜體標籤，由 <i> 表示，將標籤內的文本顯示為斜體。

例如，如果我們有

<i> These are italics </i>

單詞“ these are italics ”將顯示為斜體。

<你> </你>

下劃線標記或 <u> 用於在 HTML 文檔中的特定文本下劃線。

例如，如果我們有；

 <u> underline these words </u>

標籤之間的短語將帶有下劃線。

<中心> </中心>

中心標記 <center> 用於將內容置於 HTML 文檔的中心。

例如，如果我們有一個 h2 標籤寫成<h2> Centering Content in HTML </h2> ，我們可以按如下方式將它居中；

 <center> <h2> Centering Content in HTML </h2> </center>

<跨度></跨度>

Span 標籤 <span> 是一個通用的內聯容器，沒有默認樣式。您可以使用 span 標籤對要設置樣式的文本進行分組。

您可以在其他標籤（例如標題和段落）內跨越標籤；

 <h2> Learn HTML <span> from experts </span> and be ready for the market </h2>

 <p> Learn HTML <span> from experts </span> and be ready for the market </p>

<分區></分區>

分區標籤，縮寫為 div，是一種允許您對 HTML 文檔中的不同標籤進行分組的標籤。

可以為 div 標籤指定一個“類”以使用 CSS 添加外部樣式。

這就是包含 h1、h2 和段落標記的 div 的表示方式。

 <div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div>

<em></em>

強調或 <em> 標籤用於強調 HTML 文檔中的某些單詞。

<em> 標籤之間的內容將顯示為傾斜或斜體。

段落中強調的內容可以出現在代碼編輯器中將顯示為；

 <p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>

<sup></sup>

<sup> 或上標標籤允許包含的文本位於其餘部分之上。一個完美的例子是當你想對一個數字 X 求平方並用數學表示它給你 X ²

段落標記中 <sup> 的語法將是；

 <H1> Harveys <sup>TM </sup> Company Limited </H1>

<子></子>

下標或 <sub> 標籤與上標標籤相反。 <sub> 標籤中的內容將出現在正常文本行的下方。一個完美的例子是將水的化學式寫為 H ₂ 0。

下標標籤的語法是；

 Remember that H <sub> 2 </sub> 0 is the chemical formula for water

<br>

<br> 是一個自閉合標籤，代表中斷。 <br> 之後的所有內容將另起一行。

段落中 <br> 的語法是；

 <p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p>

<ol></ol> 和 <li> </li>

有序列表標記或 <ol> 必須與另一個標記一起使用，例如 <li>。

兩者可以在代碼編輯器上顯示為；

 <ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>

在瀏覽器上呈現時，內容將顯示為編號。

<img 源=””/>

您可能想要添加圖像以提高視覺吸引力，甚至添加徽標。自閉合圖像標籤 <img src=””/> 在這種情況下會派上用場。

圖片標籤的語法是；

 <img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>

引號中的內容代表源 URL。

包起來

存在超過 100 個 HTML 標籤，但以上是您作為初學者應該知道的。大多數代碼編輯器都支持 HTML，因此您可以放心，在開始學習時絕不會出錯。