當(dāng)前位置：
  1. 首頁
  2. 知識學(xué)院
  3. 正文

用 HTML 制作一個簡單網(wǎng)頁，在互聯(lián)網(wǎng)時代，擁有一個屬于自己的網(wǎng)頁是一種展示自我、分享信息的絕佳方式。而 HTML（HyperText Markup Language，超文本標(biāo)記語言）作為網(wǎng)頁制作的基礎(chǔ)語言，為我們搭建網(wǎng)頁提供了強大的工具。接下來，我將帶你一步步使用 HTML 代碼制作一個簡單卻實用的網(wǎng)頁。

一、規(guī)劃網(wǎng)頁內(nèi)容
在動手寫代碼之前，先要明確網(wǎng)頁的主題和內(nèi)容。假設(shè)我們要制作一個個人簡介網(wǎng)頁，內(nèi)容包括個人基本信息、興趣愛好、聯(lián)系方式等板塊。

二、搭建網(wǎng)頁基本結(jié)構(gòu)
打開文本編輯器（如 Notepad++、Sublime Text 等），輸入以下代碼搭建網(wǎng)頁的基本框架：

html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>我的個人簡介</title>
</head>
<body>
<!– 網(wǎng)頁主體內(nèi)容將在這里填充 –>
</body>
</html>
這段代碼中，<!DOCTYPE html> 聲明文檔類型，確保瀏覽器以標(biāo)準(zhǔn)模式渲染頁面；<html> 元素是網(wǎng)頁的根元素，lang 屬性指定網(wǎng)頁語言為中文；<head> 包含網(wǎng)頁的元數(shù)據(jù)，如字符編碼 <meta charset=”UTF-8″> 用于正確顯示中文字符，視口設(shè)置 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 使網(wǎng)頁能在不同設(shè)備上良好顯示，<title> 定義網(wǎng)頁標(biāo)題，顯示在瀏覽器標(biāo)簽頁上；<body> 標(biāo)簽內(nèi)的內(nèi)容將是我們網(wǎng)頁的主體部分。

三、填充網(wǎng)頁主體內(nèi)容
（一）添加標(biāo)題
在 <body> 標(biāo)簽內(nèi)，首先添加一個一級標(biāo)題來突出網(wǎng)頁主題：

html
<h1>我的個人簡介</h1>
<h1> 到 <h6> 是 HTML 中的標(biāo)題標(biāo)簽，數(shù)字越小級別越高，字體也越大，這里使用 <h1> 來醒目地展示網(wǎng)頁主題。

（二）個人基本信息
接著，用段落 <p> 標(biāo)簽來介紹個人基本信息：

html
<p>姓名：張三</p>
<p>年齡：25歲</p>
<p>職業(yè)：網(wǎng)頁設(shè)計師</p>
段落是網(wǎng)頁中組織文本的基本單位，瀏覽器會在段落前后自動添加一些空白空間，使內(nèi)容更清晰易讀。

（三）興趣愛好
興趣愛好部分可以用無序列表 <ul> 來呈現(xiàn)，讓內(nèi)容更有條理：

html
<h2>興趣愛好</h2>
<ul>
<li>閱讀</li>
<li>攝影</li>
<li>旅行</li>
</ul>
<h2> 是二級標(biāo)題，用于標(biāo)識興趣愛好這一小節(jié)；<ul> 表示無序列表，其內(nèi)部通過 <li>（列表項）標(biāo)簽列出各個興趣愛好，瀏覽器會自動在每個列表項前添加項目符號。

（四）聯(lián)系方式
聯(lián)系方式同樣用段落 <p> 標(biāo)簽展示，并且可以添加超鏈接 <a> 以便用戶直接點擊聯(lián)系：

html
<h2>聯(lián)系方式</h2>
<p>郵箱：<a href=”mailto:zhangsan@example.com”>zhangsan@example.com</a></p>
<p>電話：123-4567-8901</p>
<a> 標(biāo)簽用于創(chuàng)建超鏈接，href 屬性指定鏈接目標(biāo)，這里使用 mailto: 協(xié)議，當(dāng)用戶點擊郵箱鏈接時，會自動調(diào)用默認的郵件客戶端并填充收件人地址。

四、美化網(wǎng)頁（可選）
雖然 HTML 主要負責(zé)網(wǎng)頁的結(jié)構(gòu)，但也可以通過一些簡單的內(nèi)聯(lián)樣式來初步美化網(wǎng)頁。例如，給標(biāo)題設(shè)置顏色和字體大小：

html
<h1 style=”color: #333; font-size: 2em;”>我的個人簡介</h1>
style 屬性直接在標(biāo)簽內(nèi)定義樣式，color 設(shè)置文本顏色，font-size 設(shè)置字體大小，#333 是一種深灰色的十六進制顏色代碼，2em 表示字體大小是默認字體大小的兩倍。

五、保存與預(yù)覽
將編輯好的代碼保存為 .html 文件，例如命名為 my_profile.html。然后，雙擊該文件，它會在默認的網(wǎng)頁瀏覽器中打開，你就能看到自己制作的個人簡介網(wǎng)頁了。

通過以上步驟，我們就用 HTML 代碼制作出了一個簡單卻內(nèi)容完整的網(wǎng)頁。當(dāng)然，實際的網(wǎng)頁制作還會涉及到 CSS（層疊樣式表）來進一步美化布局和外觀，以及 JavaScript 來添加交互功能，但掌握 HTML 是邁向復(fù)雜網(wǎng)頁制作的第一步，希望這篇文章能為你開啟網(wǎng)頁制作的大門。