轻松上手前端：第二课带你探索HTML与CSS的奥秘

在上一课中，我们初步了解了前端开发的基础，现在我们将深入探索HTML与CSS的奥秘。HTML（HyperText Markup Language）是构建网页的结构语言，而CSS（Cascading Style Sheets）则是用于美化网页的样式表语言。这两者相辅相成，是前端开发的核心。

HTML：网页的骨架

HTML定义了网页的结构，它由一系列的标签组成，这些标签告诉浏览器如何展示内容。以下是一些常见的HTML标签：

<html>：定义了整个HTML文档的根元素。
<head>：包含了文档的元数据，如标题、链接和脚本等。
<title>：定义了网页的标题，这将在浏览器的标题栏显示。
<body>：包含了网页的实际内容，如文本、图片、链接等。
<h1>至<h6>：定义了标题的层级，<h1>是最高层级，<h6>是最低层级。
<p>：定义了段落。

实例：一个简单的HTML页面

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页，很激动吧！</p>
</body>
</html>

CSS：网页的衣裳

CSS用于美化网页，它可以通过选择器来指定样式。以下是一些常见的CSS属性：

color：定义文本颜色。
background-color：定义背景颜色。
font-size：定义字体大小。
margin和padding：定义元素的外边距和内边距。

实例：为上面的HTML页面添加CSS样式

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页，很激动吧！</p>
</body>
</html>

HTML与CSS的结合

在实际开发中，HTML和CSS通常是结合使用的。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML与CSS结合示例</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML与CSS结合示例</h1>
        <p>这是一个使用HTML和CSS结合的示例页面。</p>
    </div>
</body>
</html>

在这个例子中，我们使用HTML定义了一个div元素，并通过CSS给它添加了样式，如宽度、边距、背景颜色、边框和阴影等。

总结

本节课我们学习了HTML和CSS的基本知识，包括它们的作用、常用标签和属性。通过结合使用HTML和CSS，我们可以创建出结构清晰、样式美观的网页。在下一课中，我们将学习JavaScript，这是前端开发的另一项重要技能。