雖然現(xiàn)在已進(jìn)入 AI 數(shù)字化時代，掌握一些編程技能已成為求職和職業(yè)發(fā)展任然具有一定優(yōu)勢。對于零基礎(chǔ)的初學(xué)者來說，從 HTML 和 CSS 入門是進(jìn)入編程世界的重要一步。本文將帶領(lǐng)大家了解 HTML 和 CSS 的基礎(chǔ)知識，并通過一個實際項目 —— 創(chuàng)建一張代碼風(fēng)格的名片，幫助你更好地掌握這些技能。
一、HTML 基礎(chǔ)知識
HTML（HyperText Markup Language）是構(gòu)成網(wǎng)頁結(jié)構(gòu)的基礎(chǔ)語言。它使用各種標(biāo)簽來定義網(wǎng)頁內(nèi)容的結(jié)構(gòu)，如標(biāo)題、段落、圖像、鏈接等。
（一）基本結(jié)構(gòu)
一個典型的 HTML 文件結(jié)構(gòu)如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>頁面標(biāo)題 - 編程獅（w3cschool.cn）</title>
</head>
<body>
<!-- 頁面內(nèi)容 -->
</body>
</html><!DOCTYPE html>：聲明文檔類型為 HTML5。<html>：根元素，定義整個 HTML 文檔的語言屬性。<head>：包含文檔的元信息，如字符編碼、視口設(shè)置、頁面標(biāo)題等。<body>：網(wǎng)頁的主體內(nèi)容部分，用戶在瀏覽器中看到的所有內(nèi)容都放置在這里。
（二）常用標(biāo)簽
- 標(biāo)題標(biāo)簽 ：
<h1>到<h6>用于定義網(wǎng)頁的標(biāo)題，級別從 1 到 6 遞減。例如<h1>一級標(biāo)題</h1> - 段落標(biāo)簽 ：
<p>用于定義段落文本，例如<p>這是一個段落。</p> - 圖像標(biāo)簽 ：
<img>用于在網(wǎng)頁中插入圖像，需要設(shè)置src（圖像路徑）和alt（替代文本）屬性。例如<img src="image.jpg" alt="描述圖像的文字"> - 鏈接標(biāo)簽 ：
<a>用于創(chuàng)建超鏈接，通過href屬性指定鏈接目標(biāo)。例如<a >編程獅官網(wǎng)</a>
二、CSS 基礎(chǔ)知識
CSS（Cascading Style Sheets）用于美化 HTML 頁面，控制頁面的布局、顏色、字體等樣式。
（一）選擇器
CSS 通過選擇器來選擇要應(yīng)用樣式的 HTML 元素。
- 元素選擇器 ：直接使用 HTML 元素名稱作為選擇器。例如
p { color: red; }將所有段落文本設(shè)置為紅色。 - 類選擇器 ：以
.開頭，后面跟類名。例如.my-class { font-size: 16px; }可以為具有class="my-class"的元素設(shè)置字體大小。 - ID 選擇器 ：以
#開頭，后面跟 ID 名。例如#my-id { background-color: blue; }可以為具有id="my-id"的元素設(shè)置背景顏色。
（二）樣式屬性
- 顏色與背景 ：可以使用
color屬性設(shè)置文本顏色，background-color屬性設(shè)置元素背景顏色。例如color: #333333;或background-color: rgb(255, 255, 255);。 - 字體與文本 ：
font-family設(shè)置字體系列，font-size設(shè)置字體大小，text-align設(shè)置文本對齊方式等。例如font-family: Arial, sans-serif;或text-align: center;。 - 邊距與填充 ：
margin屬性設(shè)置元素外部的邊距，padding屬性設(shè)置元素內(nèi)容與邊框之間的填充距離。例如margin: 10px;或padding: 5px;。
三、創(chuàng)建編程風(fēng)格名片項目
接下來，我們將綜合利用 HTML 和 CSS 創(chuàng)建一張代碼風(fēng)格的名片，該項目的完整代碼如下：
business-card.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>編程獅 - 代碼風(fēng)格名片</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#f97316',
editor: {
bg: '#1e1e1e',
line: '#333333',
text: '#d4d4d4',
keyword: '#569cd6',
string: '#ce9178',
punctuation: '#d4d4d4',
property: '#9cdcfe'
}
},
fontFamily: {
mono: ['Consolas', 'Monaco', 'monospace'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.editor-shadow {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}
.window-button {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
transition: transform 0.2s;
}
.window-button:hover {
transform: scale(1.1);
}
.toolbar-icon {
color: #bbbbbb;
padding: 4px 6px;
transition: color 0.2s;
}
.toolbar-icon:hover {
color: white;
}
.code-line {
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
transition: background-color 0.2s;
}
.code-line:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.qr-code-container {
position: relative;
overflow: hidden;
}
.qr-code-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(240, 240, 240, 0.8);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.qr-code-container:hover .qr-code-placeholder {
opacity: 1;
}
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex items-center justify-center p-4 md:p-8">
<div class="max-w-md w-full mx-auto perspective-1000">
<div class="editor-shadow bg-editor-bg rounded-lg overflow-hidden transform transition-all duration-500 hover:scale-[1.02] hover:rotate-[1deg]">
<!-- 窗口控制區(qū)域 -->
<div class="bg-gray-800 px-4 py-2 flex items-center justify-between border-b border-gray-700">
<div class="flex items-center">
<div class="window-button bg-red-500" title="關(guān)閉"></div>
<div class="window-button bg-yellow-500" title="最小化"></div>
<div class="window-button bg-green-500" title="最大化"></div>
</div>
<div class="text-sm text-gray-300 font-medium flex-1 text-center">Business Card.json</div>
<div class="flex items-center">
<button class="toolbar-icon text-xs" title="保存">
<i class="fa-regular fa-floppy-disk"></i>
</button>
<button class="toolbar-icon text-xs" title="復(fù)制">
<i class="fa-regular fa-copy"></i>
</button>
<button class="toolbar-icon text-xs" title="分享">
<i class="fa-solid fa-share-alt"></i>
</button>
</div>
</div>
<!-- 工具欄 -->
<div class="bg-gray-800 px-4 py-1 flex items-center border-b border-gray-700">
<button class="toolbar-icon text-xs mr-1">
<i class="fa-solid fa-file"></i>
</button>
<button class="toolbar-icon text-xs mr-1">
<i class="fa-solid fa-edit"></i>
</button>
<button class="toolbar-icon text-xs mr-1">
<i class="fa-solid fa-search"></i>
</button>
<button class="toolbar-icon text-xs mr-1">
<i class="fa-solid fa-code"></i>
</button>
<button class="toolbar-icon text-xs mr-1">
<i class="fa-solid fa-terminal"></i>
</button>
<div class="flex-1"></div>
<span class="text-[10px] text-gray-400">UTF-8</span>
<span class="mx-2 text-gray-600">|</span>
<span class="text-[10px] text-gray-400">JSON</span>
</div>
<!-- 代碼區(qū)域 -->
<div class="p-4 overflow-x-auto">
<div class="flex">
<!-- 行號 -->
<div class="text-gray-500 text-right pr-4 select-none font-mono text-sm">
<div class="line-numbers">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<!-- 代碼內(nèi)容 -->
<div class="font-mono text-sm text-editor-text leading-relaxed">
<div class="code-line">{</div>
<div class="code-line pl-4"><span class="text-editor-property">"name"</span>: <span class="text-editor-string">"編程獅"</span>,</div>
<div class="code-line pl-4"><span class="text-editor-property">"title"</span>: <span class="text-editor-string">"隨時隨地學(xué)編程"</span>,</div>
<div class="code-line pl-4"><span class="text-editor-property">"link"</span>: <span class="text-editor-string">"w3cschool.cn"</span></div>
<div class="code-line">}</div>
</div>
</div>
</div>
<!-- 狀態(tài)欄 -->
<div class="bg-gray-800 px-4 py-1 flex items-center justify-between border-t border-gray-700 text-xs text-gray-400">
<div>1-5行，3個屬性</div>
<div class="flex items-center">
<span class="animate-pulse-slow mr-1">●</span>
<span>已保存</span>
</div>
</div>
</div>
<!-- 底部信息 -->
<div class="mt-6 text-center text-gray-400 text-sm">
<p>掃描下方二維碼獲取更多編程資源</p>
<div class="mt-3 flex justify-center">
<div class="bg-white p-2 rounded shadow-md transform transition-all duration-300 hover:scale-105 qr-code-container">
<img
src="https://atts.w3cschool.cn/w3cschool_fwh.png"
alt="編程獅二維碼"
class="w-32 h-32 object-cover rounded">
<div class="qr-code-placeholder text-gray-500 text-xs">
<span>掃碼關(guān)注編程獅</span>
</div>
</div>
</div>
<p class="mt-3">? 2025 編程獅 w3cschool.cn 保留所有權(quán)利</p>
</div>
</div>
</body>
</html>（一）項目解讀
- 頁面結(jié)構(gòu) ：整個頁面采用了 HTML 的基本結(jié)構(gòu)，通過
<head>標(biāo)簽引入了所需的 CSS 樣式和 JavaScript 腳本。在<body>標(biāo)簽中，構(gòu)建了一個模擬的代碼編輯器界面，包含窗口控制區(qū)域、工具欄、代碼區(qū)域和狀態(tài)欄等部分。 - 樣式設(shè)計 ：利用 CSS 為頁面元素設(shè)置了豐富的樣式，如顏色、字體、布局等。通過 Tailwind CSS 的類名快速實現(xiàn)了響應(yīng)式設(shè)計和美觀的界面效果。同時，還自定義了一些樣式類，如
.window-button、.toolbar-icon等，用于實現(xiàn)特定的交互效果和外觀展示。 - 交互效果 ：通過 CSS 的
transition和hover等屬性，為窗口控制按鈕、工具欄圖標(biāo)等元素添加了簡單的交互效果，使頁面更加生動和用戶友好。
（二）運行效果
- 將上述完整代碼復(fù)制到文本編輯器（如記事本、HTML 在線編譯器、Trae、VS Code等）
- 保存為
.html文件（例如：business-card.html） - 用瀏覽器打開該文件即可查看效果
打開該 HTML 文件，即可看到一張具有代碼風(fēng)格、標(biāo)題為 business-card.json 的名片展示在頁面上，看起來像是一個編程代碼編輯器。我們可以直觀地了解 HTML 和 CSS 的實際應(yīng)用效果。
四、推薦課程和工具
編程獅（w3cschool.cn）提供了豐富的編程課程和工具，幫助初學(xué)者更好地學(xué)習(xí)編程知識和技能。
（一）HTML/CSS 基礎(chǔ)課程
- 課程名稱 ：Web 入門 - HTML + CSS 基礎(chǔ)實戰(zhàn)。
- 課程內(nèi)容 ：系統(tǒng)講解 HTML 和 CSS 的基礎(chǔ)知識，包括 HTML 標(biāo)簽、屬性、頁面結(jié)構(gòu)，CSS 選擇器、樣式屬性、布局等。通過大量的實例和練習(xí)，幫助學(xué)員快速掌握前端開發(fā)的基礎(chǔ)技能。
（二）前端開發(fā)實戰(zhàn)課程
- 課程名稱 ：前端開發(fā)：零基礎(chǔ)入門到項目實戰(zhàn)。
- 課程內(nèi)容 ：在掌握 HTML 和 CSS 基礎(chǔ)后，進(jìn)一步學(xué)習(xí) JavaScript 編程，以及前端框架如 Vue、React 等的應(yīng)用。通過實際項目開發(fā)，培養(yǎng)學(xué)員的綜合編程能力和解決問題的能力。
（三）在線代碼編輯器工具
- 工具名稱 ：編程獅在線HTML代碼編輯器。
- 工具介紹 ：提供了一個便捷的在線代碼編輯環(huán)境，支持多種編程語言，如 HTML、CSS、JavaScript 等。學(xué)員可以無需安裝任何軟件，在瀏覽器中直接編寫、運行和調(diào)試代碼，方便快捷地進(jìn)行編程練習(xí)和實驗。
總之，通過學(xué)習(xí) HTML 和 CSS 編程基礎(chǔ)知識，并結(jié)合編程獅提供的優(yōu)質(zhì)課程和工具，零基礎(chǔ)的初學(xué)者可以快速入門編程領(lǐng)域，為未來的職業(yè)發(fā)展打下堅實的基礎(chǔ)。
