从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界
在学习JavaWeb之前，我首先接触到了网页设计的基础知识：HTML和CSS。HTML（超文本标记语言）是构建网页的骨架，而CSS（层叠样式表）则为网页添加了美丽的外观。本文将分享我在学习这两者时的心得体会，以及一些基本的代码示例，帮助大家更好地了解网页设计的起步。
一、HTML的基本结构
HTML使用标记（tags）来定义网页的元素。一个标准的HTML文档结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我学习HTML与CSS的第一篇文章。</p>
</body>
</html>
在这个例子中，我们定义了一个包含标题和段落的基本网页。<!DOCTYPE html> 声明了文档类型，<html> 标签是HTML文档的根元素，<head> 部分包含了文档的信息，比如字符集和标题，<body> 部分包含了真正的内容。
二、CSS的基本用法
CSS用于控制HTML元素的样式，比如颜色、字体、布局等。它可以放在HTML文档的 <head> 部分，或者单独作为一个外部样式表引入。以下是一个简单的CSS示例：
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.5;
padding: 0 20px;
}
</style>
</head>
在这个CSS示例中，我们给 body 设置了背景颜色，调整了字体品牌；为 h1 和 p 元素定义了颜色和对齐方式，使页面看起来更加美观。
三、HTML与CSS结合
将HTML和CSS结合在一起，可以创造出丰富多彩的网页。接下来，展示一个完整的例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页</title>
<style>
body {
background-color: #f4f4f4;
font-family: 'Microsoft Yahei', sans-serif;
margin: 0;
padding: 0;
}
header {
background: #35424a;
color: white;
padding: 10px 0;
text-align: center;
}
nav {
margin: 20px 0;
}
nav a {
color: #35424a;
margin: 0 15px;
text-decoration: none;
}
section {
padding: 20px;
background: white;
margin: 0 10%;
}
</style>
</head>
<body>
<header>
<h1>我的个人主页</h1>
</header>
<nav>
<a href="#">关于我</a>
<a href="#">项目</a>
<a href="#">联系</a>
</nav>
<section>
<h2>欢迎来到我的主页！</h2>
<p>这里是我的学习笔记和项目展示。</p>
</section>
</body>
</html>
在这个示例中，我们创建了一个简单的个人主页，包含一个标题、导航链接和一个内容区域。利用CSS，使得网页的布局和配色更加和谐，用户体验更好。
四、总结
通过学习HTML和CSS，我对网页设计有了初步的认识和理解。从简单的结构到应用样式，这个过程让我意识到网页设计不仅仅是编码，更是创造与美学的结合。未来，我将继续深入学习JavaWeb，将前端和后端的技术结合起来，构建更为复杂和功能强大的网页应用。希望通过我的学习笔记，能够帮助同样想要入门网页设计的朋友们，共同探索这个奇妙的世界！
