在当前数字化的时代,网页设计与制作可谓是每个互联网企业和开发者必须掌握的一项技能。无论是个人博客、电子商务网站,还是企业官网,精美且高效的网页都能吸引更多的用户。本文将介绍网页设计与制作的基本代码,帮助您掌握网页制作的基础知识

一、HTML—构建网页的基础

HTML(超文本标记语言)是构建网页的基础代码,负责网页的结构和内容。每一个网页都由 HTML 文件构成,以下是一个简单的HTML文档的示例:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<main>
<p>这里是我的第一个网页,希望你喜欢!</p>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>

在这个示例中,DOCTYPE 声明告知浏览器需要使用HTML5标准; 标签包裹整个文档;而 则分别包含了网页的元信息和可视内容。

二、CSS—美化网页的重要利器

CSS(层叠样式表)是用于美化HTML内容的重要工具。通过CSS,我们可以控制网页的布局、颜色、字体等。以下是如何为上面的HTML文档应用CSS样式的例子:

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}

header {
background: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}

footer {
text-align: center;
margin-top: 20px;
}

在此代码中,我们定义了 body 的字体和背景色,另为 headerfooter 设置了背景和文字样式。将这个CSS代码放在HTML文档中的