html零基礎入門教程及代碼演示例子
HTML是創建網頁的基礎語言。在互聯網的世界裏，網頁是我們獲取信息和與世界連接的主要途徑之一。因此，學習HTML是設計和制作網頁的重要一步。如果您是一個完全零基礎的人，那麼這份教程可以幫助您快速入門，並開始創建自己的網頁。在這個教程中，我們將探討HTML的基礎語法和標記，以及如何將它們組合在一起來構建一個簡單的網頁。無需任何預備知識，您只需要在計算機上安裝一個文本編輯器和瀏覽器，就可以開始學習HTML。讓我們開始！
HTML是一種用於創建網頁的標記語言。對零基礎的人來說，入門教程是很有必要的。以下是HTML零基礎入門教程的步驟：
一. HTML是基於標識(html)的標記語言，
而web瀏覽器使用HTML代碼來顯示網頁。您需要一個基本的文本編輯器(如記事本)來編寫HTML代碼。
當你使用文本編輯器編寫HTML代碼時，需要確保以下事項：
1. 文件擴展名為.html。
2. 在文件的頂部應該是<html>標記。
3. 文件必須包括<head>和<body>標記。
下面是一個例子顯示一個簡單的HTML網頁，使用Windows記事本編寫。
1. 首先，創建一個新文件並將其命名為example.html。
2. 在文件的頂部添加<html>標記，如下所示：
html
<!DOCTYPE html>
<html>
3. 在<head>標記之間，您可以添加一個標題，如下所示：
html
<head>
<title>My First HTML Page</title>
</head>
4. 在<body>標記之間，添加一些HTML元素，例如標題、段落和圖像。
html
<body>
<h1>Welcome to my website</h1>
<p>This is my first HTML page</p>
<img src="https://mippu.qunapu.com/upload/2023/05/202305101683732845501182.jpg" alt="My image">
</body>
5. 最後，為了使HTML文件完成，您需要將</html>標記添加到文件的底部，如下所示：
html </html>
6. 保存文件並在瀏覽器中打開該文件，即可查看創建的HTML網頁。
希望這個例子可以幫助你熟悉HTML代碼的基本結構和編寫過程。
二. 在文件的頂部，使用<html>標記來告訴瀏覽器，這是一個HTML文件。
同樣，在文件的末尾，您需要使用</html>來結束它。
以下是一個示例代碼，展示了如何使用<html>標記來表示一個HTML文件的開頭，並使用</html>標記來表示結束標記：
<!DOCTYPE html>
<html>
<head>
<title>示例頁面</title>
</head>
<body>
<h1>這是一個示例頁面</h1>
<p>這是一個段落，包含了一些文本。</p>
<ul>
<li>這是一個無序列表的第一項</li>
<li>這是一個無序列表的第二項</li>
<li>這是一個無序列表的第三項</li>
</ul>
</body>
</html>
在這個示例中，<html>標記是文件的開頭，告訴瀏覽器這是一個HTML文件。而在</html>標記處，我們告訴瀏覽器整個HTML文檔已經結束。在這兩個標記之間，我們可以使用其他標記來編寫HTML頁面的內容。其中，<head>標記包含一些元數據，例如頁面標題，<body>標記包含了整個頁面的主要內容。在這個例子中，我們添加了一個標題(<h1>)和一個段落(<p>)，還添加了一個無序列表(<ul>)，其中包含三個列表項(<li>)。
三. 添加<head>和<body>標記。
在<head>標記中，您可以添加標題、CSS和JavaScript等元素。在<body>標記中，您添加將在瀏覽器中顯示的所有內容。
以下是一個示例代碼，展示了如何使用<head>和<body>標記來編寫一個簡單的HTML頁面：
<!DOCTYPE html>
<html>
<head>
<title>我的第一個HTML頁面</title>
<meta charset="utf-8">
<style>
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>
<script>
function showAlert() {
alert("Hello, World!");
}
</script>
</head>
<body>
<h1>歡迎來到我的頁面</h1>
<p>這是我的第一個HTML頁面。</p>
<button onclick="showAlert()">點擊這裏</button>
</body>
</html>
在這個示例中，<head>標記包含了頁面的標題、字符集、CSS樣式和JavaScript代碼。標題是在瀏覽器標簽頁中顯示的文本。字符集(meta charset)告訴瀏覽器該頁面的編碼方式。CSS樣式規則(color和font-size)定義了標題和段落的外觀。JavaScript代碼(alert函數)定義了一個函數，當點擊頁面上的按鈕時，瀏覽器將彈出一個帶有"Hello, World!"消息的對話框。在<body>標記中，我們添加了一個標題、一個段落和一個按鈕。當用戶單擊按鈕時，就會調用JavaScript函數。
四. 在<body>標記中，添加不同的HTML標記，來呈現不同的元素。
以下是一個示例代碼，展示了如何使用<head>和<body>標記來編寫一個簡單的HTML頁面：
<!DOCTYPE html>
<html>
<head>
<title>我的第一個HTML頁面</title>
<meta charset="utf-8">
<style>
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>
<script>
function showAlert() {
alert("Hello, World!");
}
</script>
</head>
<body>
<h1>歡迎來到我的頁面</h1>
<p>這是我的第一個HTML頁面。</p>
<button onclick="showAlert()">點擊這裏</button>
</body>
</html>
在這個示例中，<head>標記包含了頁面的標題、字符集、CSS樣式和JavaScript代碼。標題是在瀏覽器標簽頁中顯示的文本。字符集(meta charset)告訴瀏覽器該頁面的編碼方式。CSS樣式規則(color和font-size)定義了標題和段落的外觀。JavaScript代碼(alert函數)定義了一個函數，當點擊頁面上的按鈕時，瀏覽器將彈出一個帶有"Hello, World!"消息的對話框。在<body>標記中，我們添加了一個標題、一個段落和一個按鈕。當用戶單擊按鈕時，就會調用JavaScript函數。
五. <p>標記用於添加段落。
以下是一個使用 `<p>` 標記添加段落的 HTML 代碼示例：
html
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一個段落</p>
<p>這是另一個段落</p>
</body>
</html>
在這個示例中，我們使用了兩個 `<p>` 標記來添加兩個段落。這些標記告訴瀏覽器將它們之間的文本解釋為一個段落。每個段落的文本可以是任何您希望顯示的內容。
六. <br>標記用於添加換行符。
以下是一個使用 `<br>` 標記添加換行符的 HTML 代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一個段落。<br>這是另一行文本。</p>
<p>這是另一個段落。<br>這是另一行文本。</p>
</body>
</html>
在這個示例中，我們在每個 `<p>` 標記中使用了 `<br>` 標記來添加換行符。這些標記告訴瀏覽器將文本分成兩行，在第一行的末尾插入一個換行符，從而在第二行開始繼續顯示文本。這使我們能夠在段落中創建多行文本，而不必創建多個段落。
七. <ul>和<li>標記 是用於添加無序列表的。
以下是使用 `<ul>` 和 `<li>` 標記創建無序列表的 HTML 代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>我的喜愛食物</h1>
<ul>
<li>披薩</li>
<li>漢堡</li>
<li>壽司</li>
<li>墨西哥玉米片</li>
</ul>
</body>
</html>
在這個示例中，我們使用 `<ul>` 標記來創建一個無序列表，其中包含了四個列表項，每個列表項使用 `<li>` 標記包裹。這表示每個列表項是等級相同的，是無序的，瀏覽器會自動添加項目符號來標識它們是列表項。我們可以在列表項中添加任何我們需要的內容。這是一種常用的方法來顯示文本中的一系列項目。
八. <ol>和<li>標記 是用於添加有序列表的。
以下是使用 `<ol>` 和 `<li>` 標記創建有序列表的 HTML 代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>我的閱讀清單</h1>
<ol>
<li>我愛你，你愛我嗎</li>
<li>《射雕英雄傳》 - 金庸</li>
<li>今生最愛你，愛你一生</li>
<li>一生最愛 - 某作家</li>
</ol>
</body>
</html>
在這個示例中，我們使用 `<ol>` 標記來創建一個有序列表，其中包含了四個列表項，每個列表項使用 `<li>` 標記包裹。這表示每個列表項是等級相同的，但是是有序的，瀏覽器會自動添加數字來標識它們是列表項。我們可以在列表項中添加任何我們需要的內容。這是一種常用的方法來顯示文本中的一系列項目，特別是在需要編寫指南、說明或步驟的情況下。
九. <a>標記用於添加超鏈接。您需要設置href屬性來指定鏈接的目標。
以下是使用 `<a>` 標記創建超鏈接的 HTML 代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>歡迎來到我的網誌!</h1>
<p>在這裏我將分享我的觀點、經驗和故事。我希望您喜歡!</p>
<p>如果您有任何問題或反饋，請隨時 <a href="mailto:kf@qunapu.com">聯系我</a>。</p>
</body>
</html>
在這個示例中，我們使用 `<a>` 標記來創建一個超鏈接，其中 `href` 屬性指定了鏈接的目標。在本例中，鏈接指向一個電子郵件地址，當用戶點擊鏈接時，電子郵件應用程序會自動打開，並填寫了目標電子郵件地址。我們可以在 `<a>` 標記中添加任何我們需要的文本或圖像，這些元素都可以成為鏈接的一部分。
十. <img>標記用於添加圖像。您需要設置src屬性來指定圖像的來源。
以下是使用 `<img>` 標記添加圖像的 HTML 代碼示例：
html
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是我的可愛的貓咪，他叫做Tom:</p>
<img src="https://mippu.qunapu.com/upload/2023/05/20230513132800168395568060415.jpg" alt="Tom the cat">
</body>
</html>
在這個示例中，我們使用 `<img>` 標記來添加一張圖片，其中 `src` 屬性指定了圖片的來源。在本例中，圖片來源於 Pixabay 免費圖片庫中的一張照片。我們還可以使用 `alt` 屬性來提供替代文本，以便在無法顯示圖片時提供說明。這裏我們提供了一段簡短的關於貓咪的說明，如果圖片無法加載，這段文本會顯示在頁面上。
十一. 最後，保存此HTML文件，並在瀏覽器中打開它，以查看您創建的網頁。
以下是完整的 HTML 代碼示例，您可以將其保存為 `index.html` 文件並在瀏覽器中打開：
<!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是我的可愛的貓咪，他叫做Tom:</p>
<img src="https://mippu.qunapu.com/upload/2023/05/20230513132800168395568060415.jpg" alt="Tom the cat">
<p>在這裏我將分享我的觀點、經驗和故事。我希望您喜歡!</p>
<p>如果您有任何問題或反饋，請隨時 <a href="mailto:kf@qunapu.com">聯系我</a>。</p>
</body>
</html>在這個示例中，我們使用 `<h1>`、`<p>`、`<img>` 和 `<a>` 等標記創建文本、圖像和鏈接，並把它們組合到一個簡單的網頁中。保存並在瀏覽器中打開該文件，您將看到一個簡單的網頁，它包含一張貓咪的圖片和一些文本內容。因為我們提供了 `alt` 屬性，如果您的瀏覽器無法顯示圖像，它將在頁面上顯示替代文本。
希望能幫助您開始學習HTML。
