初學者的 HTML 最簡單的方法：立即開始學習 HTML 和 CSS

歡迎！您已經找到了學習 HTML 和 CSS 的最簡單方法。

內容目錄

我們絕對的初學者教程將在短短幾個小時內將您從崇拜者轉變為網站管理員。與許多其他 HTML 教程不同，它是一個循序漸進的指南——而不是無聊的冗長參考。

我們的分步指南教您 HTML 的基礎知識以及如何構建您的第一個網站。這意味著如何佈局 HTML 頁面，如何添加文本和圖像，如何添加標題和文本格式，以及如何使用表格。

我們將讓您在幾分鐘內而不是幾小時內建立您的新網站。

絕對初學者的 HTML

雖然 Internet 上的許多指南都嘗試使用許多令人難以置信的理論來教授 HTML，但本教程將重點介紹構建您的第一個站點的實用技能。

目的是向您展示“如何”創建您的第一個網頁，而無需花費整個教程過多地關注“為什麼”。

在本教程結束時，您將掌握創建基本網站的知識，我們希望這將激勵您使用我們的後續指南進一步深入研究 HTML 世界。

什麼是 HTML？

好的，這是唯一的強制性理論。為了開始編寫 HTML，如果您知道自己在寫什麼，這會有所幫助。

HTML 是編寫大多數網站的語言。HTML 用於創建頁面並使它們發揮作用。

用於使它們具有視覺吸引力的代碼稱為 CSS，我們將在後面的教程中重點介紹這一點。目前，我們將專注於教您如何構建而不是設計。

HTML 的歷史

HTML 最初由 Tim Berners-Lee、Robert Cailliau 和其他人於1989 年創建。它代表超文本標記語言。

超文本意味著文檔包含允許讀者跳轉到文檔中的其他位置或完全跳轉到另一個文檔的鏈接。最新版本稱為HTML5。

標記語言是計算機相互交流以控製文本處理和呈現方式的一種方式。要做到這一點，HTML 使用了兩個東西：標籤和屬性。

什麼是標籤和屬性？

標籤和屬性是 HTML 的基礎。

它們一起工作，但執行不同的功能——值得投入 2 分鐘來區分兩者。

什麼是 HTML 標籤？

標籤用於標記 HTML 元素的開始，通常用尖括號括起來。標籤的一個例子是：<h1>.

大多數標籤必須打開<h1>和關閉</h1>才能起作用。

什麼是 HTML 屬性？

屬性包含附加信息。屬性採用開始標籤的形式，附加信息放在裡面。

一個屬性的例子是：

<img src="mydog.jpg" alt="A photo of my dog.">

在這種情況下，圖像源 (src) 和替代文本 (alt) 是<img>標記的屬性。

要記住的黃金法則

絕大多數標籤必須打開（<tag>）和關閉（</tag>），元素信息（例如標題或文本）位於標籤之間。
使用多個標籤時，標籤必須按照打開的順序關閉。例如：

<strong><em>This is really important!</em></strong>

HTML 編輯器

現在我們已經了解了基本理論。是時候學習如何建立我們的第一個網站了。

首先，我們必須確保我們擁有正確的工具。最重要的是，我們需要一個 HTML 編輯器。

市場上有很多選擇。以下是一些最受歡迎的：

崇高的文字 3

但是，對於本教程，我們將使用Sublime Text 3，因為它是免費的，並且還為 Windows、Mac 和 Linux 用戶提供跨平台支持。

優點

輕鬆定制
適合初學者
令人愉快的配色方案可供選擇。

缺點

無法打印文檔或代碼
沒有可用的工具欄或儀表板。

記事本++

HTML 和其他語言編碼器的另一個常見選擇是Notepad ++。它是一個小程序，用於下載和執行編寫乾淨代碼所需的功能。

優點

無干擾的界面
自動完成功能
擴展功能的插件選項。

缺點

初學者可能很難習慣
不支持 Mac。

要避免什麼

您的代碼的前端視圖因瀏覽器而異——您將通過高級 CSS 了解更多信息。

編寫 HTML 代碼時不要使用 Microsoft Word或任何其他文字處理器，只有 HTML 編輯器或至少您機器的內置記事本才適合該任務。

其次，確保您已經安裝了許多不同的瀏覽器，例如Chrome和Firefox，以便預覽您即將創建的作品。

創建您的第一個 HTML 網頁

首先，您需要打開 HTML 編輯器，您會在其中找到一個乾淨的白頁，可以在上面編寫代碼。

從那裡您需要使用以下標籤來佈局您的頁面。

HTML 頁面的基本構造

在您創建的每個 HTML 頁面的頂部，這些標籤應放在彼此下方。

<!DOCTYPE html>— 此標籤指定您將在頁面上書寫的語言。在這種情況下，語言是 HTML 5。

<html>— 這個標籤表明我們將從這裡開始編寫 HTML 代碼。

<head>- 這是頁面的所有元數據所在的地方- 主要用於搜索引擎和其他計算機程序的東西。

<body>— 這是頁面內容所在的位置。

添加內容

接下來，我們將製作<body>標籤。

HTML<body>是我們添加專為人眼查看而設計的內容的地方。

這包括文本、圖像、表格、表格以及我們每天在互聯網上看到的所有其他內容。

如何將 HTML 標題添加到您的網頁

在 HTML 中，標題由以下元素編寫：

<h1>
- <h2>
  - <h3>
    - <h4>
      - <h5>
        <h6>

正如您可能已經猜到的那樣<h1>，<h2>應該將其用於最重要的標題，而其餘標籤應用於子標題和不太重要的文本。

搜索引擎機器人在破譯頁面上最重要的信息時使用此順序。

創建你的標題

讓我們試試看。在 HTML 編輯器的新行中，鍵入：

<h1>Welcome to My Page</h1>

並點擊保存。我們將把這個文件保存為“ index.html ”在一個名為“我的網頁”的新文件夾中。

關鍵時刻：單擊新保存的文件，您的第一個網頁應該會在默認瀏覽器中打開。它可能不漂亮，它是你的……全是你的。*邪惡的笑*

好吧，我們不要得意忘形；我們仍然有很多很棒的功能可以添加到您的頁面中。

如何在 HTML 中添加文本

向我們的 HTML 頁面添加文本很簡單，使用一個用創建新段落的標籤打開的<p>元素。我們將所有常規文本放在元素中。<p>

當我們在 HTML 中編寫文本時，我們還可以使用許多其他元素來控製文本或使其以某種方式出現。

其他關鍵要素

它們如下：

元素	意義	目的
<b>	大膽的	突出顯示重要信息
<強>	強的	與粗體類似，突出顯示關鍵文本
<i>	斜體	表示文本
<em>	強調文本	通常用作圖像標題
<標記>	標記文本	突出顯示文本的背景
<小>	小文本	縮小文本
<罷工>	刪除的文本	在文本上放置一條水平線
<u>	帶下劃線的文字	用於鏈接或文本突出顯示
<插入>	插入文本	顯示下劃線以顯示插入的文本
<子>	下標文本	排版風格選擇
<支持>	上標文字	另一種印刷展示風格

這些標籤必須圍繞相關文本打開和關閉。

讓我們試試看。在 HTML 編輯器的新行中，鍵入以下 HTML 代碼：

<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>

不要忘記點擊保存，然後在瀏覽器中刷新頁面以查看結果。

如何在 HTML 中添加鏈接

您可能已經註意到，互聯網由許多鏈接組成。

您在網上沖浪時單擊的幾乎所有內容都是一個鏈接，會將您帶到您正在訪問的網站內的另一個頁面或外部網站。

鏈接包含在由<a>標籤打開的屬性中。這個元素是我們遇到的第一個使用屬性的元素，因此它看起來與前面提到的標籤不同。

錨標籤

<a>（或錨點）開始標籤的格式如下：

<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>

屬性的第一部分指向單擊鏈接後將打開的頁面。

同時，屬性的第二部分包含將顯示給訪問者以吸引他們點擊該鏈接的文本。

如果您正在構建自己的網站，那麼您很可能會將您的所有頁面託管在專業的虛擬主機上。在這種情況下，您網站上的內部鏈接將<a href="mylinkedpage.html">Link tle Here</a>。

讓我們創建一個錨標記

讓我們試試看。複製當前index.html頁面中的代碼。將其複制/粘貼到 HTML 編輯器的新窗口中。

將此新頁面另存為“page2.html”，並確保它與您的index.html頁面保存在同一文件夾中。

在 page2.html 添加以下代碼：

<a href="http://www.google.com">Google</a>

這將在第 2 頁上創建一個指向 Google 的鏈接。點擊保存並返回您的index.html頁面。

在index.html的新行上添加以下代碼：

<a href="*folder(s)*/page2.html">Page2</a>

確保文件 (page2.html) 的文件夾路徑正確。在瀏覽器中點擊保存並預覽 index.html 。

如果一切正確，您將看到一個鏈接，該鏈接會將您帶到第二頁。在第二頁上，會有一個鏈接將您帶到google.com。

如何將 HTML 格式的圖像添加到您的網站

在當今的現代數字世界中，圖像就是一切。<img>標籤包含在您的網站上顯示圖像所需的一切。很像 <a> 錨元素，<img> 也包含一個屬性。

該屬性為您的計算機提供有關圖像的源、高度、寬度和替代文本的信息。

樣式和格式

您還可以使用 class 屬性定義圖像周圍的邊框和其他樣式。但是，我們將在後面的教程中介紹這一點。

在線圖像文件通常使用的文件類型有：.jpg、.png 和（越來越少）.gif。

替代文字對於確保您的網站在搜索網站上的正確排名以及對於您網站的視障訪問者而言非常重要。

<img>標籤通常是這樣寫的：

<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">

讓我們試試看。

使用替代文本創建您自己的圖像

不要害怕使用測試代碼——這是在學習的同時獲得樂趣的好方法。

將您選擇的圖像（.jpg、.png、.gif 格式）保存在您保存index.html和 page2.html 的同一文件夾中。將此圖像稱為“ testpic.jpg ”。

在 HTML 編輯器的新行中輸入以下代碼：

<img src="testpic.jpg" alt="This is a test image" height="42" width="42">

點擊保存並在瀏覽器中預覽index.html頁面。

如何製作 HTML 列表

在網頁設計中，您可能希望將3 種不同類型的列表添加到您的網站中。

有序列表

第一個是<ol>：這是一個有序的內容列表。例如：

一個物品
另一個項目
另一個去這裡。

在<ol>標記內，我們在<li> </li>標記內列出列表中的每個項目。

例如：

<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>

無序列表

您可能希望包含的第二種類型的列表是<ul>無序列表。這更好地稱為項目符號列表並且不包含數字。

這方面的一個例子是：

<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>

定義列表

最後，您可能希望在您的頁面上包含一個定義列表<dl> 。<dl>列表的示例如下：HTML超文本標記語言是一種用於創建網頁並由網絡瀏覽器呈現的編程語言。

上面使用的代碼如下：

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>

讓我們試試看。打開index.html並在新行上輸入以下 HTML：

<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>

現在點擊保存並在瀏覽器中查看結果。如果一切順利，它將顯示一個顯示上述信息的項目符號表。

如何在 HTML 中添加表格

HTML 表格 — *表格可以通過多種方式設置樣式——Codepen.io 提供實時預覽以跟踪更改。*

另一種讓您的網站看起來整潔有序的方法是使用表格。

不要使用表格來佈置您的網站。搜索引擎討厭它，這通常是一個壞主意。只是……不要。請參閱我們的CSS 教程。

這絕對是本教程中最複雜的部分，但是，從長遠來看，學習它肯定會有所回報。

考慮到這一點，表格仍然是在頁面上呈現內容的有用方式。

表由什麼組成？

繪製表格時，我們必須使用<table>開始標記打開一個元素。在這個標籤中，我們使用表格行<tr>和單元格<td>來構造表格。

HTML 表格的示例如下：

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Colunm 2 </td>
<td>Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>

這將生成一個 2 行表格，每行有 3 個單元格。

表格可能會變得非常複雜，因此請務必查看我們的特殊HTML 表格教程。

表標籤

但是，請注意這些標籤，以便您可以識別它們並在您的技能發展時使用它們。

以下是表格中顯示的表格標籤——完全是雙關語。

表標籤	意義	地點
<頭>	表頭	桌子的頂部
<tbody>	表體	表格內容
<tfoot>	桌腳	桌子底部
<colgroup>	列組	表內
<th>	表頭	表格標題的數據單元格

表格、邊框、間距通常使用 CSS設置樣式，但我們將在後面的教程中介紹。

讓我們做一張桌子

在文本編輯器中轉到index.html頁面上的新行。輸入以下 HTML 代碼：

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>

點擊保存並在瀏覽器中預覽。

恭喜：你做到了！

如何關閉 HTML 文檔

您已經完成了我們的絕對初學者 HTML 教程。

我們需要完成的最後一步是使用以下 HTML 代碼關閉每個頁面末尾的 <body> 和 <html> 標籤：

</body>
</html>

下一步是什麼？

您現在可以使用這些知識來創建您自己的包含這些功能的網頁並將它們鏈接在一起。

我們建議您通過使用不同變量來試驗您所學的代碼來進一步提高您的技能。您可能還希望了解如何使用CSS使您的頁面美觀。

創建自己的網站的權力現在掌握在您手中。

故障排除

如果事情沒有按預期進行，只需對照以下示例檢查您的 HTML 代碼。

Index.html故障排除代碼：

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to <em>my</em> brand new website.</p>
<p>This site will be my <strong>new</strong> home on the web.</p>
<a href="/page2.html">Page2</a>
<img src="testpic.jpg" alt="This is a test image" height="42" width="42">
<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>
</body>
</html>

page2.html 故障排除代碼：

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to <em>my</em> brand new website.</p>
<p>This site will be my <strong>new<strong> home on the web.</p>
<a href="http://www.google.com">Google</a>
</body>
</html>

我們的其他 HTML 教程

我們的 HTML 教程教您如何為您的企業創建個人網站或站點，而不會強迫您學習不必要的理論。

我們最受歡迎的初學者教程包括：

HTML 表格

這些教程將指導您完成為您的確切需求創建表的過程。表格曾經是佈置頁面的主要方式。

隨著 CSS 的採用，這不再是必要的。並且有充分的理由，因為這創建了幾乎無法維護的頁面。但是為了顯示表格，HTML 提供了您需要的所有工具。

鏈接

鏈接不僅僅是從一個頁面移動到另一個頁面。在本教程中，您將學習如何導航頁面和下載文件。

您還將學習如何使您的鏈接盡可能用戶友好。鏈接是 HTML 的核心，所以這很重要。

形式

表單對於營銷以及創建 Web 應用程序等非常重要。

這個詳細的教程將引導您從最基本的到最高級的使用CSS 和 JavaScript 的表單。

字體

曾幾何時，該字體是一種 HTML 標記，它使創建可維護的網頁成為一場噩夢。現在我們使用 CSS 來設置字體及其屬性，例如粗細、樣式和大小。

通過使用 CSS，您可以一致地設置頁面外觀，並且只需更改幾行代碼即可從根本上改變它們。本教程解釋了一切。

圖片

通過使用 img 標籤和 CSS，你可以做任何你想做的事情。

但是在 HTML5 中，您可以添加picture和figure元素。通過這個詳盡的教程了解如何正確製作圖像。

中級和高級教程

我們也為中級和高級HTML 學習者提供了很多主題：

CSS 教程

CCS，級聯樣式表，允許您設計和裝飾您的網頁。

本教程將帶您從一開始就熟練掌握 CSS，以便您可以創建易於維護的複雜頁面。

JavaScript

JavaScript 可以說是繼 HTML 之後最重要的網絡編碼語言。您訪問的大多數網站都至少使用了一點 JavaScript 編碼。

與 HTML 和 CSS 一起，JavaScript 構成了網頁設計和構建的三位一體。

本教程假設您一無所知，並讓您使用這種基本的編程語言。它甚至向您介紹了 AJAX 和 jQuery 等高級主題。

HTML5

視頻：這個 3 分鐘的速成課程是開始理解 HTML5 的好方法。

HTML5 通過語義和多媒體元素等方式徹底改變了網頁標記。找出所有等待探索的新好東西。

語義標記

本教程向您介紹語義標記，它允許您構建頁面，以便它們的結構顯示其內容。

隨著搜索引擎變得越來越先進，這尤其有用——允許他們為用戶找到他們正在尋找的正確信息。

邏輯標籤

您可能已經註意到，很少有人將i標籤用於斜體，而是使用em標籤。

這是因為i標籤只是一個格式化標籤，因此應該用 CSS 來完成。有em含義：強調文本。

邏輯標籤em和語義標記一樣cite重要。在這個簡短的討論中找到更多。

以下是一些最常見的標籤——您遇到的幾乎每個網站都使用：

Button標籤

HTML 按鈕 — *可以使用 CSS 和 JS 以驚人的方式自定義按鈕。這是 Codepen.io - 一個在線編輯和代碼共享平台。*

將 abutton放到網頁上的標籤。它必須與 JavaScript 結合才能執行任何操作。此頁面提供您需要的所有詳細信息。

Anchor標籤

鏈接比新的 HTML 編碼人員意識到的要強大得多。找出你需要知道的一切，以最大限度地利用a標籤。

Link標籤

標籤可能會令人困惑，link因為它很容易與“鏈接”（用a標籤定義）混淆。

Butlink是一個非常強大的標籤，它允許您將HTML 文檔鏈接到外部資源，如 CSS 文件。在這裡找到你需要知道的一切。

圖像處理

儘管 HTML 使用標記使顯示圖像變得容易，但img通過使用一些 JavaScript，您可以即時更改圖像。

本教程向您展示如何。

字符代碼

HTML 屬性部分旨在讓您近距離了解您熟悉和喜愛的 HTML 屬性，同時向您介紹一些高級屬性。

我們最受歡迎的屬性包括：

<img src="">— 了解如何選擇要顯示的圖像。

<img alt="">— 這為那些由於某種原因看不到圖像的人設置了圖像的名稱。

<a target="">– 鏈接不必填滿當前頁面。還有其他通常更好的選擇。

<a href="">— 基本鏈接屬性設置將用戶傳送到的位置。

<body background-*="">— 學習設置網頁的背景顏色、圖像等。

<table bordercolor="">— 了解如何設置表格的邊框顏色。

資料來源: HTML COM