本文将介绍静态网页设计的基本概念和常用代码，帮助初学者快速入门。静态网页是指不包含服务器端处理程序的网页，其内容在客户端浏览器中直接呈现。静态网页的设计主要依赖于HTML、CSS和JavaScript等技术。本文将重点介绍HTML和CSS的基本知识。
一、HTML简介
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它使用一系列标签来描述网页的内容和结构。以下是一个简单的HTML文档示例：
“`html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>静态网页设计代码入门</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个简单的静态网页。</p>
</body>
</html>
“`
二、HTML常用标签
1. 标题标签：`<h1>`至`<h6>`，用于定义不同级别的标题。`<h1>`最高级别，`<h6>`最低级别。
2. 段落标签：`<p>`，用于定义一个段落。
3. 链接标签：`<a>`，用于创建超链接。例如：`<a href=”https://www.example.com”>点击这里访问示例网站</a>`。
4. 图像标签：`<img>`，用于插入图像。例如：`<img src=”image.jpg” alt=”示例图片”>`。
5. 列表标签：有序列表（`<ol>`）、无序列表（`<ul>`）和列表项（`<li>`）。例如：
“`html
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
“`
三、CSS简介
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML文档外观和格式的语言。通过使用CSS，可以实现对网页元素的样式控制，如字体、颜色、布局等。以下是一个简单的CSS样式示例：
“`html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>静态网页设计代码入门</title>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #f00;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个简单的静态网页。</p>
</body>
</html>
“`
四、CSS常用属性和选择器
1. 字体属性：`font-family`、`font-size`、`font-weight`等，用于设置文本的字体样式。例如：`font-family: Arial, sans-serif;`。
2. 颜色属性：`color`，用于设置文本的颜色。例如：`color: #f00;`。
3. 选择器：用于选择HTML元素并应用样式。常用的选择器有元素选择器（如`h1`、`p`等）、类选择器（以`.`开头，如`.myClass`）、ID选择器（以`#`开头，如`#myId`）等。例如：`h1 { color: #f00; }`表示将所有`h1`元素的文字颜色设置为红色。
