前端入门:第一天学习总结

需积分: 10 0 下载量 69 浏览量 更新于2024-08-05 收藏 16KB MD 举报
"前端基础第一天的学习内容,包括网页的基本结构标签和VSCode的使用方法" 在前端开发中,学习基础知识是至关重要的第一步。本资源主要涵盖了前端页面的基本结构和如何使用Visual Studio Code(VSCode)进行网页开发。 首先,每个HTML网页都有一个基本的结构,也称为“骨架标签”。这些标签包括`<html>`、`<head>`和`<body>`。`<html>`标签是页面中最大的标签,被称为根标签,它包裹着整个页面的内容。`<head>`和`<body>`标签是并列关系,分别用于存放元信息(如标题、样式表链接等)和实际可见的内容。在`<head>`中,通常需要设置`<title>`标签来定义网页的标题,这将在浏览器的标签页中显示。`<body>`则包含文档的所有内容,比如文字、图片、链接等,所有用户在浏览器中看到的元素都应放在`<body>`内。 此外,HTML标签有单标签和双标签之分。双标签如`<html>`、`<head>`和`<body>`,它们有开始和结束标签;而单标签如`<a/>`,没有结束标签。标签之间的关系可以是包含或并列。在上述示例中,`<head>`和`<title>`是包含关系,`<head>`和`<body>`是并列关系。 接下来,我们探讨了如何使用VSCode创建和运行HTML页面。VSCode是一款强大的代码编辑器,适合前端开发。新建文件后,保存为`.html`格式,然后可以通过快捷键(Ctrl+N)创建新文件。输入`<!DOCTYPE html>`并按Tab键,VSCode会自动生成HTML5的基础骨架结构。此结构包括`<meta>`标签,用于指定字符集(charset="UTF-8")、浏览器兼容性(X-UA-Compatible="IE=edge")以及页面的视口设置(viewport="width=device-width, initial-scale=1.0"`),这些元信息有助于确保页面在不同设备和浏览器上的正确显示。在`<body>`中添加内容,如示例中的“第一次用vscode创建页面”,最后选择浏览器运行即可查看结果。 通过VSCode的这些基本操作,开发者可以快速地构建和预览HTML页面,极大地提高了开发效率。随着对前端基础知识的深入理解和实践,开发者可以进一步学习CSS样式表和JavaScript脚本,实现更复杂的网页交互和设计。