从零开始：手把手教你制作第一个静态网页（附完整代码） 前端小白必看！HTML 和 CSS 入门教程：打造你的第一个网页 新手友好：用 HTML 和 CSS 制作简单而美观的个人主页 超详细教程：零基础
南北极之间 2024-10-07 09:03:01 阅读 71
使用 HTML 和 CSS 制作一个简单的静态网页（完整代码在后面）
目录
步骤
一、新建一个 HTML 项目二、创建基本结构三、使用 CSS 美化页面四、添加图片和链接 完整代码结语
步骤
对于前端初学者来说，制作一个简单的静态网页是入门的第一步。今天，我们将一起学习如何使用 HTML 和 CSS 创建一个包含文本、图片和链接的静态网页，帮助你快速掌握基本的网页制作技能。
一、新建一个 HTML 项目
首先，创建一个新的 HTML 文件，命名为 <code>index.html。你可以使用任何代码编辑器，如 VSCode、Sublime Text 或 Notepad++。
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<title>我的第一个静态网页</title>
</head>
<body>
</body>
</html>
二、创建基本结构
在 <body> 标签中，添加网页的基本内容，包括标题、段落和列表。
<body>
<h1>欢迎来到我的个人主页</h1>
<p>大家好，我是前端开发初学者，这是我制作的第一个静态网页。</p>
<h2>我的兴趣爱好</h2>
<ul>
<li>编程</li>
<li>阅读</li>
<li>音乐</li>
<li>旅行</li>
</ul>
</body>
<h1> 和 <h2> 标签用于标题。<p> 标签用于段落文本。<ul> 和 <li> 标签用于无序列表。
三、使用 CSS 美化页面
在 <head> 标签中，添加 <style> 标签，编写页面的样式。
<head>
<meta charset="UTF-8">code>
<title>我的第一个静态网页</title>
<style>
body { -- -->
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
}
h1, h2 {
color: #333;
}
p {
font-size: 18px;
color: #666;
}
ul {
list-style-type: square;
color: #555;
}
li {
margin-bottom: 5px;
}
</style>
</head>
设置了字体、背景色和文本颜色。调整了标题和段落的样式。
四、添加图片和链接
在网页中插入一张图片和一些链接，使页面内容更加丰富。
<body>
<!-- 之前的内容 -->
<!-- ... -->
<h2>我的照片</h2>
<img src="your-photo.jpg" alt="我的照片" width="200">code>
<h2>联系我</h2>
<p>你可以通过以下方式联系我：</p>
<ul>
<li><a href="mailto:your-email@example.com">发送邮件</a></li>code>
<li><a href="https://github.com/your-username" target="_blank">访问我的 GitHub</a></li>code>
</ul>
</body>
使用 <img> 标签插入图片，记得将 src 属性替换为你的图片路径。使用 <a> 标签创建超链接，href 属性为链接地址。
更新 CSS 样式，调整图片和链接的样式：
img { -- -->
border-radius: 50%;
margin-top: 10px;
}
a {
color: #0088cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
完整代码
将以上部分组合在一起，得到完整的代码：
<!DOCTYPE html>
<html lang="zh-CN">code>
<head>
<meta charset="UTF-8">code>
<title>我的第一个静态网页</title>
<style>
body { -- -->
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
}
h1, h2 {
color: #333;
}
p {
font-size: 18px;
color: #666;
}
ul {
list-style-type: square;
color: #555;
}
li {
margin-bottom: 5px;
}
img {
border-radius: 50%;
margin-top: 10px;
}
a {
color: #0088cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>欢迎来到我的个人主页</h1>
<p>大家好，我是前端开发初学者，这是我制作的第一个静态网页。</p>
<h2>我的兴趣爱好</h2>
<ul>
<li>编程</li>
<li>阅读</li>
<li>音乐</li>
<li>旅行</li>
</ul>
<h2>我的照片</h2>
<img src="your-photo.jpg" alt="我的照片" width="200">code>
<h2>联系我</h2>
<p>你可以通过以下方式联系我：</p>
<ul>
<li><a href="mailto:your-email@example.com">发送邮件</a></li>code>
<li><a href="https://github.com/your-username" target="_blank">访问我的 GitHub</a></li>code>
</ul>
</body>
</html>
结语
通过本篇教程，我们学习了如何使用 HTML 和 CSS 创建一个简单的静态网页，包含文本、图片和链接等元素。希望通过本次实践，大家对网页制作有了初步的了解，为日后的前端学习打下基础。
提示：你可以根据自己的喜好，进一步丰富页面内容，调整样式，或者添加更多的元素，如表格、视频等。
版权声明：本文为原创文章，转载请注明出处。
下一篇： 什么是new FormData()
本文标签
从零开始：手把手教你制作第一个静态网页（附完整代码） 前端小白必看！HTML 和 CSS 入门教程：打造你的第一个网页 新手友好：用 HTML 和 CSS 制作简单而美观的个人主页 超详细教程：零基础
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。