这是一级标题

这是一个段落。

• 列表项

4. 示例：创建一个简单的 HTML 页面

    
    


    
欢迎来到我的网站
    
这是我的第一个网页。
    点击这里访问示例网站

二、理解 CSS

1. 什么是 CSS？

CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。

2. CSS 的使用方式

CSS 可以通过三种方式添加到 HTML 中：

1. 内联样式 ：直接在 HTML 标签中使用style 属性。

   红色文本

2. 内部样式表 ：在 部分使用

   标签。

3. 外部样式表 ：使用 标签链接一个 CSS 文件。

3. CSS 选择器和属性

CSS 使用选择器来指定要应用样式的 HTML 元素。

4. 常用的 CSS 属性

三、创建网页的步骤

1. 规划网页布局

在编写代码之前，首先需要规划网页的布局和结构。这可以通过绘制草图或使用原型工具来实现。

2. 编写 HTML 结构

根据规划好的布局，使用 HTML 编写网页的结构。确保使用语义化的标签，这有助于 SEO 和可访问性。

3. 添加内容

在 HTML 结构中填充实际的内容，如文本、图像、链接等。

4. 添加 CSS 样式

使用 CSS 为网页添加样式，使其视觉效果更佳。可以从设置基本的颜色和字体开始，然后逐步完善布局和响应式设计。

5. 测试和优化

在不同的浏览器和设备上测试网页，以确保兼容性。根据需要进行优化，例如压缩图片、精简代码等。

四、实践：创建一个简单的网页示例

1. 编写 HTML 文件（index.html）

    
        
    

        
欢迎来到我的个人主页
    
    
    

        

            
关于我
            
这里是关于我的简介。
        
        

            
项目展示
            
这里是我的项目列表。
        
    
    

2. 编写 CSS 文件（styles.css）

/* 通用样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* 头部样式 */
header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 导航栏样式 */
nav ul {
    list-style-type: none;
    background-color: #333;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

nav li {float: left;}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {background-color: #111;}

/* 主体内容样式 */
main {padding: 20px;}

section {margin-bottom: 20px;}

/* 页脚样式 */
footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px;
}

3. 解释代码

• HTML 部分：

  • 使用了
    

    、

    、

    、

    和

    等语义化标签，增强了代码的可读性和结构性。

  • 导航栏使用了无序列表

    和列表项

  • ，并在其中嵌套了链接。
  • 内容部分分为“关于我”和“项目展示”两个部分，使用
    

    标签区分。

• CSS 部分：

  • 设置了通用的字体和重置了默认的边距和填充。
  • 使用选择器为不同的部分设置了背景颜色、文本颜色、边距和填充等样式。
  • 导航栏使用了浮动布局，使菜单项水平排列。

4. 最终效果

完成上述代码后，打开 index.html 文件，即可在浏览器中查看最终效果。页面包括一个标题、导航栏、主要内容区域和页脚，具有基本的样式和布局。

五、总结

通过以上步骤，我们已经了解了如何使用 HTML 和 CSS 创建一个简单但完整的网页。以下是本次内容的关键要点总结：

结语

掌握 HTML 和 CSS 是网页制作的基础，通过不断练习和实践，您可以创建出更加复杂和美观的网页。希望本篇文章能够帮助您深入了解网页制作的过程，为您的学习之路提供指引。