这是我参与「第五届青训营 」笔记创作活动的第1天
基础认知
目标：认识 网页组成 和五大浏览器，明确 Web标准的构成，使用 HTML骨架 搭建出一个网页。 学习路径： 1.基础概念铺垫(了解)
- 认识网页
- 五大浏览器和渲染引擎
- Web标准 4.HTML初体验 5.语法规范
认识网页(了解)
问题1：网页由哪些部分组成？
文字，图片，音频，视频，超链接
问题2：我们看到的网页背后本质是什么？
前端程序员写的代码
问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页
五大浏览器
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：
IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器(Opera) 浏览器市场份额∶谷歌最高
注意点：
渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱(推荐)
小结
五大浏览器有哪些？ IE浏览器 火狐浏览器(Firefox) 谷歌浏览器(Chrome) Safari浏览器 欧朋浏览器(Opera) 相同的网页在不同浏览器中显示效果会完全一致吗？ 因为不同浏览器渲染引擎不同，解析的效果会存在差异前端工程师日常推荐使用哪一个浏览器？
Web标准中分成三个构成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式 （如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
Web标准要求页面实现：结构、表现、行为三层分离 结构：HTML(决定了身体） 表现：CS5(决定了样式美观) 行为：JavaScript（决定了交互的动态效果）
网页体验-构建基本网页的步骤
- 在代码文件夹中点击鼠标右击一 新建文本文档一命名为：文字变粗案例.txt
- 双击这个文件，输入代码等内容一 记得保存！ 3.在文件上点击鼠标右键一重命名一修改文件后缀为为.html 4.双击文字变粗案例.html，浏览器会自动打开文件并显示之前输入的内容
小结
HTML的中文译名叫做?
超文本标记语言 HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的？ HTML标签
HTML骨架结构由哪些标签组成?
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
为什么要使用 VS Code?
刚刚通过文本编辑器，如：记事本，完全可以编写网页源代码 但是效率.…不忍直视
实际开发中，注重开发的 效率和便捷性，因此我们会使用一些开发工具
开发工具有很多：Visual Studio Code、Webstorm、Sublime、Dreamweaver. Hbuilder
前端开发神器：VS Code一速度快、体积小、插件多
VS Code的基本快捷健
1.快速生成标签：英文+ tab
2保存文件：ctl +s
注意1：写完文件之后务必需要保存文件，否列网页无变化
注路2：可以设置自动保存给去每次梁存的麻质
3.打开网页快捷键，alt+b
按Alt+Z切换自动换行
4.快速生成结构标签： ！+tab
注意1：！必须是英文的，中文！无效
注意2：必须保证当前文件后缀名是.html，否则无效VS Code自动生成的骨架多了其他标签，之后会介绍
注释的作用：
为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码 浏览器执行代码时会忽略所有的注释
注释的快捷键： ctrl+/
总结
目标：认识 网页组成 和 五大浏览器，明确 Web标准的构成，使用 HTML骨架 搭建出一个网页。
1.前端基础概念铺垫：
1.网页的基本组成元素：文字、图片、音频、视频、超链接等
2.五大浏览器+Web标准
2.HTML初体验：
- HTML：超文本标记语言
2.HTML骨架结构
- VS Code的使用
3. 语法规范：
- HTML的注释
2.标签的构成：双标签/ 单标签
3.标签的属性：属性名=“属性值”
4.标签的关系：父子+兄弟
