前端入门:第一天学习总结
需积分: 10 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脚本,实现更复杂的网页交互和设计。
2020-07-23 上传
2020-07-23 上传
2020-06-16 上传
2020-11-29 上传
2023-09-21 上传
2023-09-30 上传
2021-06-19 上传
篝篝
- 粉丝: 0
- 资源: 1
最新资源
- 平尾装配工作平台运输支撑系统设计与应用
- MAX-MIN Ant System:用MATLAB解决旅行商问题
- Flutter状态管理新秀:sealed_flutter_bloc包整合seal_unions
- Pong²开源游戏:双人对战图形化的经典竞技体验
- jQuery spriteAnimator插件:创建精灵动画的利器
- 广播媒体对象传输方法与设备的技术分析
- MATLAB HDF5数据提取工具:深层结构化数据处理
- 适用于arm64的Valgrind交叉编译包发布
- 基于canvas和Java后端的小程序“飞翔的小鸟”完整示例
- 全面升级STM32F7 Discovery LCD BSP驱动程序
- React Router v4 入门教程与示例代码解析
- 下载OpenCV各版本安装包,全面覆盖2.4至4.5
- 手写笔画分割技术的新突破:智能分割方法与装置
- 基于Koplowitz & Bruckstein算法的MATLAB周长估计方法
- Modbus4j-3.0.3版本免费下载指南
- PoqetPresenter:Sharp Zaurus上的开源OpenOffice演示查看器