【超级无敌详细的黑马前端笔记！即时更新~】

【超级无敌详细的黑马前端笔记！即时更新~】

学习路径

1. 基础概念铺垫（了解）
   1. 认识网页
   2. 五大浏览器和渲染引擎
   3. Web标准
2. HTML初体验
   1. HTML的感知
   2. HTML骨架结构
   3. 开发工具的使用
3. 语法规范
   1. HTML的注释
   2. HTML标签的构成
   3. HTML标签的关系

目标：认识 网页组成 和 五大浏览器，明确 Web标准的构成，使用 HTML骨架 搭建出一个网页。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、基础认知

1.1 认识网页

1. 网页由哪些部分组成？
   • 文字、图片、音频、视频、超链接

2. 咱们程序员写的代码是通过什么软件转换成网页的？
   • 浏览器

1.2 五大浏览器和渲染引擎

1. 浏览器：是网页显示、运行的平台，是前端开发必备利器
2. 五大浏览器有哪些？
   • IE浏览器
   • 火狐浏览器（Firefox）
   • 谷歌浏览器（Chrome）
   • Safari浏览器
   • 欧朋浏览器（Opera）
3. 相同的网页在不同浏览器中显示效果会完全一致吗？
   • 因为不同浏览器渲染引擎不同，解析的效果会存在差异
4. 前端工程师日常推荐使用哪一个浏览器？
   • 谷歌浏览器（Chrome）
   

1.3 Web标准

构成	语言	说明
结构	表现	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

2.1 HTML初体验

HTML（Hyper Text Markup Language）
中文译为：超文本标记语言

网页体验-构建基本网页的步骤

1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为：文字变粗案例.txt
2. 双击这个文件，输入代码等内容 → 记得保存！
3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
4. 双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容

HTML骨架结构

HTML骨架结构由哪些标签组成？

• html标签：网页的整体
• head标签：网页的头部
• body标签：网页的身体
• title标签：网页的标题
  

开发工具的使用

1. 双击打开VS Code软件
2. 将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
3. 点击目录上的**+新建文件按钮**创建页面，注意：文件后缀名需要是.html

VS Code的基本快捷键

1. 快速生成标签：英文 + tab
2. 保存文件：ctrl + s
3. 快速查看网页效果：右击 → Open in Default Browser
   • 快捷键：alt + b （安装了open in browser 插件）
4. 快速生成结构标签：! + tab/回车

语法规范

3.1HTML的注释

1. 注释的快捷键：ctrl + /
2. 注释的作用：

• 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
• 浏览器执行代码时会忽略所有的注释