Home >> Blog >> 了解HTML 設計網頁的第一步

什麼是 HTML？超文本標記語言基礎解釋

HTML 或超文本標記語言 允許 Web 用戶使用元素、標籤和屬性創建和構造部分、段落和連結。然而，值得注意的是，HTML 不被視為一種程式語言，因為它不能創建動態功能。

HTML有很多用例，即：

網頁開發。開發人員使用 HTML 代碼來設計瀏覽器如何顯示網頁元素，例如文本、超連結和媒體文件。

網際網路導航。由於 HTML 被大量用於嵌入超連結，因此用戶可以輕鬆地在相關頁面和網站之間導航和插入連結。

網路文檔。HTML 使組織和格式化文檔成為可能，類似於 Microsoft Word。

還值得注意的是，HTML 現在被視為官方 Web 標準。萬維網聯盟 (W3C)維護和開發 HTML 規範，同時提供定期更新。

本文將介紹 超文本標記語言 的基礎知識，包括它的工作原理、優缺點以及它與 CSS 和 JavaScript 的關係。

什麼是 HTML？超文本標記語言基礎解釋

HTML（代表超文本標記語言）是構成大多數網頁和線上應用程式的計算機語言。超文本是用於引用其他文本片段的文本，而標記語言是告訴 Web 伺服器文檔的樣式和結構的一系列標記。

運作方式

平均網站包含幾個不同的 HTML 頁面。例如，主頁、關於頁面和聯繫頁面都將具有單獨的 超文本標記語言 文件。

超文本標記語言 文檔是以 .html 或 .htm 擴展名結尾的文件。Web 瀏覽器讀取 HTML 文件並呈現其內容，以便網際網路用戶可以查看它。

所有 HTML 頁面都有一系列 HTML 元素，由一組標籤和屬性組成。HTML 元素是網頁的構建塊。標籤告訴 Web 瀏覽器元素在哪裡開始和結束，而屬性描述元素的特徵。

元素的三個主要部分是：

開始標籤 - 用於說明元素開始生效的位置。標籤用左尖括號和右尖括號包裹。例如，使用開始標籤

創建一個段落。

內容——這是其他用戶看到的輸出。

結束標籤 - 與開始標籤相同，但在元素名稱前有一個正斜杠。

這三個部分的組合將創建一個 HTML 元素：

什麼是 HTML？超文本標記語言基礎解釋

超文本標記語言元素的另一個關鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標識用戶想要添加的附加訊息，而屬性值提供進一步的規範。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

什麼是 HTML？超文本標記語言基礎解釋

另一個屬性，HTML 類，對於開發和程式來說是最重要的。class 屬性添加了可以作用於具有相同類值的不同元素的樣式訊息。

例如，我們將對標題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現相同的樣式，請在每個開始標記後添加 class=”important”：

什麼是 HTML？超文本標記語言基礎解釋

大多數元素都有一個開始標籤和一個結束標籤，但有些元素不需要結束標籤即可工作，例如空元素。這些元素不使用結束標籤，因為它們沒有內容：

什麼是 HTML？超文本標記語言基礎解釋

這個圖像標籤有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內容，也沒有結束標籤。

最後，每個 HTML 文檔都必須以 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

什麼是 HTML？超文本標記語言基礎解釋

最常用的標籤和元素

目前，有 142 個 HTML 標籤可用於創建各種元素。儘管現代瀏覽器不再支持其中一些標籤，但學習所有可用的不同元素仍然是有益的。

本文將討論最常用的 HTML 標籤和兩個主要元素——塊級元素和內聯元素。

塊級元素

塊級元素佔據頁面的整個寬度。它總是在文檔中開始一個新行。例如，標題元素將位於與段落元素不同的行中。

每個 超文本標記語言 頁面都使用這三個標籤：

<html> 標籤是定義整個 HTML 文檔的根元素。

<head> 標籤保存頁面標題和字符集等元訊息。

<body> 標籤包含了頁面上出現的所有內容。

什麼是 HTML？超文本標記語言基礎解釋

其他流行的塊級標籤包括：

標題標籤 title tag - 這些範圍從 <h1> 到 <h6>，其中標題 h1 的大小最大，當它們向上移動到 h6 時變得越來越小。

段落標籤——全部使用 <p> 標籤括起來。

列表標籤——有不同的變體。<ol> 標籤用於有序列表，<ul> 用於無序列表。然後，使用 <li> 標記將各個列表項括起來。

內聯元素

內聯元素格式化塊級元素的內部內容，例如添加連結和強調的字符串。內聯元素最常用於在不破壞內容流的情況下格式化文本。

例如，一個 <strong>標籤會以粗體呈現一個元素，而 <em>標籤會以斜體顯示它。超連結也是使用 <a> 標記和 href 屬性來指示連結目標的內聯元素：

什麼是 HTML？超文本標記語言基礎解釋

超文本標記語言 演變

超文本標記語言 的第一個版本由 18 個標籤組成。從那時起，每個新版本都帶有添加到標記中的新標籤和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。

HTML 和 HTML5的主要區別在於HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標籤，可以清楚地描述內容，例如 <article>、<header> 和 <footer>。

優點和缺點

就像任何其他計算機語言一樣，超文本標記語言 有其優點和局限性。以下是 HTML 的優缺點：

優點：

  • 初學者友好。超文本標記語言 具有乾淨且一致的標記，以及較淺的學習曲線。
  • 支持。該語言被廣泛使用，擁有大量資源和龐大的社群。
  • 無障礙。它是開源的並且完全免費。HTML 在所有 Web 瀏覽器中本機運行。
  • 靈活的。超文本標記語言 很容易與PHP和Node.js等後端語言集成。

缺點：

  • 靜止的。該語言主要用於靜態網頁。對於動態功能，您可能需要使用 JavaScript 或 PHP 等後端語言。
  • 單獨的 HTML 頁面。用戶必須為 HTML 創建單獨的網頁，即使元素相同。
  • 瀏覽器兼容性。一些瀏覽器採用新特性的速度很慢。有時較舊的瀏覽器並不總是呈現較新的標籤。

HTML、CSS 和 Javascript 是如何相關的

HTML 用於添加文本元素並創建內容結構。然而，僅僅建立一個專業的和完全響應的網站是不夠的。因此，超文本標記語言 需要藉助級聯樣式表 (CSS)和JavaScript來創建絕大多數網站內容。

CSS 負責樣式，例如背景、顏色、佈局、間距和動畫。另一方面，JavaScript 添加了動態功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發的基礎。

了解 超文本標記語言 並提高您的專業知識

對於那些對 Web 開發感興趣的人來說，學習 超文本標記語言是一個很好的第一步。

有很多線上課程可以學習寫程式，但我們列出了三個最好的 超文本標記語言 教學資料庫：

  • W3Schools – 提供免費學習基本 HTML 的資源、示例和練習。還有一個自定進度的 HTML 教程，售價 95 美元，並提供官方證書。
  • Codecademy – 免費提供入門課程和互動教程。Codecademy 使用分屏自動顯示您在 HTML 文件上的寫程式結果。有獨家內容。
  • Coursera – 提供各種課程，通過現實生活中的例子提供深入的解釋。

屬性

超文本標記語言 標記也採用所謂的屬性。這些屬性放置在開始標記中，範圍從樣式和 ID 到類。它們採用值，傳遞有關元素的更多訊息，並幫助您使用 JavaScript 進行樣式設置和操作等操作。

在下面的訊息圖中，開始標記包含class一個值為 的屬性“text”。這可用於設置元素的樣式或使用 JavaScript 選擇它以進行交互。

什麼是 HTML？超文本標記語言基礎解釋

這是一個基本 超文本標記語言 頁面的剖析：

什麼是 HTML？超文本標記語言基礎解釋

讓我們看看這裡的重要代碼位：

<!Doctype html>：指定我們在此代碼中使用 HTML5。在引入 HTML5 之前，您必須使用<!Doctype>標記明確說明您正在寫程式的 HTML 版本。例如，HTML4.0、3.2 等。但現在我們不再需要它了。當在代碼中寫入“html”時，瀏覽器會自動假定您正在使用 HTML5 進行寫程式。

<html></html>: 每個 超文本標記語言 文檔的根或頂級元素。所有其他元素都必須包含在其中。

<head></head>: 超文本標記語言 文檔中最重要的部分之一。網路爬蟲查看頭部標籤內部以獲取有關頁面的重要訊息。它包含諸如頁面標題、樣式表、SEO訊息等資訊。

<meta />：這是一個空元素，傳達有關頁面的元訊息。這些訊息可能包括作者、它使用的寫程式類型（幾乎總是 UTF-8）、響應能力、兼容性等等。網路爬蟲總是查看元標記以獲取有關網頁的訊息，這將在 SEO 中發揮至關重要的作用。

<title></title>：這定義了網頁的標題。它始終顯示在瀏覽器選項卡中。

<body></body>: HTML 文檔的所有內容都位於 body 標記內。<body>整個頁面只能有一個標籤。

什麼是語義？

語義 超文本標記語言 意味著您的標籤傳達了它們的實際用途。

自 90 年代初出現以來，語義一直是 HTML 不可或缺的一部分。但直到 90 年代後期 CSS 開始在大多數瀏覽器中工作時，它才獲得特別的相關性。

對於語義 超文本標記語言，語義中立的標籤tag（如<div>和<span>）不受歡迎，因為語義上更具描述性的標籤tag（如<header>, <nav>, <main>, <section>, <footer>and ）<article>可以做同樣的事情。

使用語義標籤tag的一個顯著優勢是網路爬蟲能夠輕鬆地索引網頁或網站，從而改善 SEO。

此外，使用語義的網站對於使用屏幕閱讀器訪問網站的人來說變得更具訊息性、適應性和可訪問性。

重要的語義標籤及其作用

讓我們看一些最常用的語義 超文本標記語言 標籤：

<header>：該<header>元素定義網頁的介紹部分。它包含諸如徽標、導航、主題切換器和搜索欄等項目。

<nav>:<nav>元素指定主頁、聯繫人、關於、FAQ等頁面的導航項。

<main>：<main>元素通常被視為標籤的直接後代。它包含 超文本標記語言 文檔的主要部分，除了<header>和<footer>。理想情況下，整個 HTML 文檔中應該只有其中之一。

<section>:<section>元素定義網頁的特定部分。這可能是展示部分、關於部分、聯繫部分或其他部分。您可以在單個 HTML 文檔中使用多個部分。

<article>：<article>元素代表網頁的某個部分，它傳達了一些特定的訊息。此類訊息可以是文本、圖像、視頻和嵌入的組合。將此元素視為包含其他部落格文章摘錄的頁面上的獨立部落格文章。

<aside>：顧名思義，這代表網頁上的側邊欄。它通常是網頁的一部分，與主要內容沒有直接關係。

<footer>：該<footer>元素包含諸如快速連結、版權訊息或與整個網站或網頁相關的任何其他數據等項目。

請注意，由於語義元素傳達了實際含義以及某些特定內容的實際作用（例如nav導航、aside側邊欄等），因此這些元素不會自動定位到它們應該在的位置。你仍然必須使用 CSS 來做到這一點。

一個超級簡單的語義 HTML 文檔如下所示：

什麼是 HTML？超文本標記語言基礎解釋

這是它在瀏覽器中的樣子：

什麼是 HTML？超文本標記語言基礎解釋

您可以看到<aside>標籤內的內容不在側邊欄中，並且<nav>標籤內的內容不會自動用作導航欄。這就是為什麼您仍然必須使它們看起來像使用 CSS 時應該看起來的樣子。

結論

HTML 是 Internet 上的主要標記語言。每個頁面都有一系列創建網頁或應用程式內容結構的元素。

HTML 是一種對初學者友好的語言，有很多支持，主要用於靜態網站頁面。HTML 與用於樣式的 CSS 和用於功能的 JavaScript 一起使用效果最好。您可以在我們的部落格上查看如何連結 CSS 和 HTML 。

我們還向您展示了一些線上可用的頂級課程，它們將有助於提高您的超文本標記語言知識或提供對超文本標記語言的基本理解。

如果您有任何其他喜歡的資源來學習 HTML，請Email告訴我們。

希望這篇文章可以幫助您了解超文本標記語言的基礎知識以及它的作用。現在您可以開始學習更高級的技術，例如 CSS 和 JavaScript，然後開始在 Web 開發中打下堅實的職業生涯。

exercises

quiz

course

certificate

en

to

are

opening tag

jquery

list

closing tag

tutorial

en

xml

客戶只點Google第一頁自然搜尋結果

根據調查，出現在Google搜尋結果第一頁的網站會有高達88%的使用者會點擊，只有15%的使用者會去看第二頁的內容，故在搜尋引擎結果第一頁排序的網站就成為了絕佳的黃金店面，要想佔據有限位置讓品牌走進消費者心中就需要借助專業SEO公司的幫助。

相關搜尋

立即聯繫