今日学习之 JavaWeb：HTML与CSS基础-优快云博客

今天，我学习了JavaWeb中 HTML和CSS的基础知识，并通过实际编写前端页面，将理论知识应用到实践中。以下是我对这段今日学习的总结。希望可以和大家分享交流。

一、HTML与CSS基础

HTML（超文本标记语言）是用于创建网页结构和内容的基础语言，通过各种标签来定义页面的元素，如标题、段落、链接、图像等。CSS（层叠样式表）则用于美化HTML页面，控制页面的布局、颜色、字体等样式。

学习过程中，我掌握了HTML的基本语法，如<html>、<head>、<body>等基本标签的使用，以及如何通过CSS选择器为页面元素添加样式。同时，我也了解了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 {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #f8f8f8;
            padding: 20px;
            border-bottom: 1px solid #ddd;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <div class="container">
        <h2>欢迎访问我的网站</h2>
        <p>这是一个使用HTML和CSS创建的简单页面。</p>
    </div>
</body>
</html>

二、常见标签与样式实践

在掌握了基础语法后，我开始通过实际案例来加深对HTML和CSS的理解和应用。以一个简单的新闻页面为例，我学习了如何对页面进行排版和样式设计。

标题排版与样式

使用<h1>到<h6>等标题标签来定义新闻的标题层次，并通过CSS设置字体大小、颜色、加粗等样式，使标题更加醒目和有层次感。同时，利用选择器对不同的标题进行个性化的样式设计，如为主标题添加底部边框等装饰效果。

<style>
    h1 {
        color: #333;
        font-size: 28px;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }
    h2 {
        color: #555;
        font-size: 24px;
        margin-top: 30px;
    }
    h3 {
        color: #777;
        font-size: 20px;
    }
</style>

正文排版与样式

对于新闻的正文部分，使用<p>标签来定义段落，并通过CSS设置行高、字间距、文本对齐方式等，提高文章的可读性。此外，还学习了如何使用列表标签<ul>、<li>等来组织新闻中的列表信息，使其更加清晰有条理。

<style>
    p {
        line-height: 1.6;
        margin-bottom: 15px;
        text-align: justify;
    }
    ul {
        list-style-type: disc;
        padding-left: 20px;
    }
    li {
        margin-bottom: 8px;
    }
</style>

页面整体布局

通过CSS的布局属性，如display、flexbox等，实现了页面的整体布局。例如，将页面分为头部、主体和底部三个部分，并分别为它们设置不同的背景色、内边距等样式，使页面结构更加合理和美观。

<style>
    .header {
        background-color: #333;
        color: white;
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo {
        margin-left: 20px;
    }
    .nav {
        margin-right: 20px;
    }
    .nav ul {
        display: flex;
        list-style: none;
        padding: 0;
    }
    .nav li {
        margin-left: 20px;
    }
    .nav a {
        color: white;
        text-decoration: none;
    }
    .main {
        display: flex;
        margin: 20px;
    }
    .content {
        flex: 3;
        padding: 20px;
    }
    .sidebar {
        flex: 1;
        padding: 20px;
        background-color: #f8f8f8;
        margin-left: 20px;
    }
    .footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 15px 0;
        margin-top: 20px;
    }
</style>

三、学习心得与展望

通过今天学习，我对HTML和CSS有了较为系统的认识，能够独立完成一些简单的页面设计和布局。在学习过程中，我经过了不少的尝试才将元素的定位和样式排版好。

明天我将学习HTML5和CSS3的新特性和功能，提升自己的开发能力。

今日的修炼就到此为止，但学习之路永无止境。希望以后能与大家一起进步。