网页设计与制作教材

认识HTML及Visual Studio Code

一、教学目标

通过本章的学习，学生应达到以下目标：

理解网页与网站的基本概念及其区别
了解网页前端三大核心技术（HTML/CSS/JavaScript）的作用
学会安装并使用Visual Studio Code编辑器
能够创建并运行第一个HTML网页
掌握网页基本结构并使用浏览器开发者工具进行调试

二、理论知识

1.1 什么是网页与网站

网页（Web Page）是指通过浏览器访问的单个页面，是构成网站的基本单元。它通常由文字、图片、链接、音频、视频等元素组成。

网站（Website）则是由多个相互关联的网页组成的集合，这些网页通过超链接相互连接，共享同一个域名，并通常具有一致的设计风格和功能结构。

1.2 网页前端三大核心技术

网页前端开发主要依赖三大核心技术：

HTML（HyperText Markup Language）：用于定义网页的结构和内容，是网页的骨架。
CSS（Cascading Style Sheets）：用于控制网页的外观和布局，使网页更美观和易于阅读。
JavaScript：用于实现网页的交互功能，使网页更加动态和用户友好。

1.3 Visual Studio Code简介

Visual Studio Code（简称VS Code）是一款由微软开发的免费开源代码编辑器，支持多种编程语言和扩展插件，广泛应用于前端开发。其主要特点包括：

轻量级且启动快速
强大的代码补全和语法高亮功能
内置Git支持，方便版本控制
丰富的扩展插件生态系统，支持各种开发需求

1.4 创建第一个HTML网页

创建一个简单的HTML网页的步骤如下：

安装并打开Visual Studio Code编辑器。
创建一个新的文件夹用于存放网页文件，例如“MyFirstWeb”。
在该文件夹中创建一个新的HTML文件，命名为“index.html”。
在“index.html”文件中输入以下基本HTML结构代码：

<!DOCTYPE html>
<html lang="en">       
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f0f4f8;
            margin: 40px;
            text-align: center;
        }
        h1 {
            color: #2d7ff9;
        }
        p {
            font-size: 1.2em;
            color: #333;
        }
        .box {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: inline-block;
            padding: 30px 50px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>Welcome to My First Web Page!</h1>
        <p>This is a simple HTML page created as my first web project.</p>
        <p>I'm learning how to design and build web pages!</p>
    </div>  
</body> 
</html>

保存文件。
保存文件后，右键点击编辑器中的“index.html”文件，选择“在默认浏览器中打开”即可查看网页效果。
使用浏览器的开发者工具（通常按F12键打开）可以查看和调试网页的HTML结构和CSS样式。

三、总结

通过本章的学习，学生应掌握网页与网站的基本概念，了解前端三大核心技术的作用，并能够使用Visual Studio Code创建和运行一个简单的HTML网页。掌握这些基础知识和技能将为后续的网页设计与制作学习打下坚实的基础。

附：教学内容整理

（本章知识点思维导图、练习题目待补充）