當(dāng)前位置：
  1. 首頁
  2. 知識(shí)學(xué)院
  3. 建站指南
  4. 正文

本文將介紹靜態(tài)網(wǎng)頁設(shè)計(jì)的基本概念和常用代碼，幫助初學(xué)者快速入門。靜態(tài)網(wǎng)頁是指不包含服務(wù)器端處理程序的網(wǎng)頁，其內(nèi)容在客戶端瀏覽器中直接呈現(xiàn)。靜態(tài)網(wǎng)頁的設(shè)計(jì)主要依賴于HTML、CSS和JavaScript等技術(shù)。本文將重點(diǎn)介紹HTML和CSS的基本知識(shí)。

一、HTML簡介

HTML（HyperText Markup Language，超文本標(biāo)記語言）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。它使用一系列標(biāo)簽來描述網(wǎng)頁的內(nèi)容和結(jié)構(gòu)。以下是一個(gè)簡單的HTML文檔示例：

“`html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>靜態(tài)網(wǎng)頁設(shè)計(jì)代碼入門</title>
</head>
<body>
<h1>歡迎來到我的網(wǎng)站！</h1>
<p>這是一個(gè)簡單的靜態(tài)網(wǎng)頁。</p>
</body>
</html>
“`

二、HTML常用標(biāo)簽

1. 標(biāo)題標(biāo)簽：`<h1>`至`<h6>`，用于定義不同級(jí)別的標(biāo)題。`<h1>`最高級(jí)別，`<h6>`最低級(jí)別。

2. 段落標(biāo)簽：`<p>`，用于定義一個(gè)段落。

3. 鏈接標(biāo)簽：`<a>`，用于創(chuàng)建超鏈接。例如：`<a href=”https://www.example.com”>點(diǎn)擊這里訪問示例網(wǎng)站</a>`。

4. 圖像標(biāo)簽：`<img>`，用于插入圖像。例如：`<img src=”image.jpg” alt=”示例圖片”>`。

5. 列表標(biāo)簽：有序列表（`<ol>`）、無序列表（`<ul>`）和列表項(xiàng)（`<li>`）。例如：

“`html
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
“`

三、CSS簡介

CSS（Cascading Style Sheets，層疊樣式表）是一種用于描述HTML文檔外觀和格式的語言。通過使用CSS，可以實(shí)現(xiàn)對(duì)網(wǎng)頁元素的樣式控制，如字體、顏色、布局等。以下是一個(gè)簡單的CSS樣式示例：

“`html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>靜態(tài)網(wǎng)頁設(shè)計(jì)代碼入門</title>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #f00;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>歡迎來到我的網(wǎng)站！</h1>
<p>這是一個(gè)簡單的靜態(tài)網(wǎng)頁。</p>
</body>
</html>
“`

四、CSS常用屬性和選擇器

1. 字體屬性：`font-family`、`font-size`、`font-weight`等，用于設(shè)置文本的字體樣式。例如：`font-family: Arial, sans-serif;`。

2. 顏色屬性：`color`，用于設(shè)置文本的顏色。例如：`color: #f00;`。

3. 選擇器：用于選擇HTML元素并應(yīng)用樣式。常用的選擇器有元素選擇器（如`h1`、`p`等）、類選擇器（以`.`開頭，如`.myClass`）、ID選擇器（以`#`開頭，如`#myId`）等。例如：`h1 { color: #f00; }`表示將所有`h1`元素的文字顏色設(shè)置為紅色。