HTML和CSS是网页制作中最基础、最重要的两个部分。HTML是超文本标记语言的缩写，是网页的骨架，规定了网页的结构和内容。CSS是层叠样式表的缩写，是网页的外观，规定了网页的样式和布局。本文将介绍如何使用HTML和CSS制作静态网页。
一、HTML基础
1.文本编辑器
在编写HTML代码之前，需要选择一个文本编辑器。常用的文本编辑器有Notepad++、Sublime、Atom等。在文本编辑器中打开一个新文件，使用“另存为”将文件保存为.html格式。
2.基本结构
HTML文档由以下几部分组成：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>其中，<!DOCTYPE html>是文档类型声明，告诉浏览器这是一个HTML5文档。<html>标签是整个文档的根元素。<head>标签包含了文档的元数据，如文档标题、字符集等。<title>标签是文档的标题，会显示在浏览器的标签页上。<body>标签包含了文档的主要内容。
3.常用标签
HTML中有很多标签，这里只介绍一些常用的标签。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>标题标签用于定义文档的标题，从h1到h6分别表示不同级别的标题。一般情况下，一个页面只需要一个h1标签。
<p>这是一个段落。</p>段落标签用于定义文本段落。
<a href="http://www.example.com">链接文本</a>链接标签用于定义超链接，href属性表示链接的目标地址。
<img src="image.jpg" alt="图片描述">图片标签用于插入图片，src属性表示图片的地址，alt属性表示图片的描述，当图片无法显示时会显示这个描述。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>无序列表用<ul>标签，有序列表用<ol>标签，列表项用<li>标签。
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>表格用<table>标签，行用<tr>标签，表头用<th>标签，单元格用<td>标签。
二、CSS基础
1.样式表
在HTML中，可以在标签内使用style属性来定义样式，如：
<p style="color:red;">红色文本</p>但是在实际开发中，一般使用样式表来定义样式，样式表可以在HTML文档中使用<style>标签定义，也可以单独使用.css文件。
2.基本语法
样式表由选择器和声明块组成，其中选择器用于选择要应用样式的元素，声明块用于定义样式。
选择器 {
属性1: 值1;
属性2: 值2;
...
}例如，以下样式将所有p标签的颜色设置为红色：
p {
color: red;
}3.常用属性
CSS中有很多属性，这里只介绍一些常用的属性。
color: red;color属性用于定义文本颜色。
background-color: yellow;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center;background-color属性用于定义背景颜色，background-image属性用于定义背景图片，background-repeat属性用于定义图片是否重复，background-position属性用于定义图片的位置。
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;font-family属性用于定义字体，font-size属性用于定义字体大小，font-weight属性用于定义字体粗细。
border-width: 1px;
border-color: black;
border-style: solid;border-width属性用于定义边框宽度，border-color属性用于定义边框颜色，border-style属性用于定义边框样式。
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;width属性用于定义元素宽度，height属性用于定义元素高度，padding属性用于定义内边距，margin属性用于定义外边距。
三、制作静态网页
1.准备工作
在制作静态网页之前，需要准备好设计图和所需的资源，如图片、字体等。
2.制作页面结构
根据设计图，使用HTML代码构建页面结构，包括头部、导航、主体、侧边栏、底部等部分。
3.添加样式
使用CSS代码为页面添加样式，包括颜色、字体、布局、边框等。
4.优化网页性能
为了提高网页性能，可以使用以下方法：
5.测试网页
在完成静态网页制作后，需要对网页进行测试，包括在不同浏览器和设备上测试网页的兼容性，以及测试网页的加载速度和响应时间。
以上就是使用HTML和CSS制作静态网页的基本步骤和注意事项。需要注意的是，HTML和CSS只是网页制作的基础，还有很多高级技术需要掌握，如JavaScript、响应式设计、SEO等。