到

、

、和<img src="/static/imghwm/default1.png" data-src="example.jpg" class="lazy" alt="如何啟動基本HTML代碼？" >等標籤。

引言

當你初次接觸網頁開發時，HTML 是你必須掌握的第一門語言。它不僅是構建網頁的基礎，也是你進入前端世界的敲門磚。在本文中，我們將從零開始，帶你一步步了解如何編寫基本的HTML 代碼。閱讀完這篇文章，你將學會如何創建一個簡單的網頁，並且對HTML 的基本結構和標籤有初步的認識。

當我們談到如何開始編寫基本的HTML 代碼時，首先需要理解HTML 的基本結構和常用標籤。這不僅僅是技術上的學習，更是一種對網頁構建的藝術探索。

HTML，全稱為HyperText Markup Language，即超文本標記語言，它是用來描述網頁結構的一種標記語言。 HTML 通過一系列的標籤來定義網頁的各個部分，如標題、段落、鏈接等。開始編寫HTML 代碼的第一步就是創建一個基本的HTML 文檔結構。

讓我們來看一下一個最基本的HTML 文檔長什麼樣：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1 id="Welcome-to-My-Web-Page">Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

這是一個非常簡單的HTML 文檔，它包含了所有基本的元素： 聲明文檔類型， <code>標籤包裹整個文檔，包含了元數據和標題，則包含了網頁可見內容。

HTML 文檔的基本結構

HTML 文檔的基本結構包括以下幾個部分：

：這是文檔類型聲明，告訴瀏覽器這是一個HTML5 文檔。
：這是HTML 文檔的根元素，所有的HTML 元素都包含在其中。
：包含了網頁的元數據，如字符編碼、視口設置和標題。
：包含了網頁的可見內容，如標題、段落等。

常用HTML 標籤

在編寫HTML 代碼時，你會經常使用到一些基本標籤：

<h1></h1>到<h6></h6> ：用於定義標題， <h1></h1>是最高級別的標題， <h6></h6>是最低級別的。
<p></p> ：用於定義段落。
<a></a> ：用於創建超鏈接。
<img src="/static/imghwm/default1.png" data-src="example.jpg" class="lazy" alt="如何啟動基本HTML代碼？" > ：用於嵌入圖像。

創建你的第一個網頁

現在，讓我們來創建一個更複雜一點的網頁，展示一下如何使用這些標籤：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1 id="Welcome-to-My-Web-Page">Welcome to My Web Page</h1>
    <p>This is a paragraph of text. You can add as much text as you want here.</p>
    <h2 id="About-Me">About Me</h2>
    <p>I am a web developer learning HTML.</p>
    <a href="https://www.example.com">Visit Example.com</a>
    <img src="/static/imghwm/default1.png"  data-src="example.jpg"  class="lazy" alt="An example image">
</body>
</html>

在這個例子中，我們添加了更多的內容，包括一個二級標題、一個鏈接和一張圖片。注意<a></a>標籤的href屬性用於指定鏈接的目標URL，而<img alt="如何啟動基本HTML代碼？" >標籤的src屬性用於指定圖像的源文件， alt屬性則用於提供圖像的替代文本。