小白学习Web前端（第一周）

Web前端技术（一）

前言
 在学习Web前端技术前，相信大家对这门技术都不太了解，所以在学习之前，先像大家介绍一下什么是Web前端。
 ;Web前端即网站前台部分，运行PC端（个人计算机），移动端等浏览器上展现给用户浏览的网页，Web前端开发从网页制作演变而来，网站的前端开发是创建Web页面或app等前端界面呈现给用户的过程，早期网站主要内容都是静态，以图片和文字为主。
 那么怎样进行Web前端开发呢？这就是我们接下来所要学习的。如何学好Web前端呢？感兴趣，够努力！

一、课程划分为四大部分

1.HTML+CSS系列教程第一步：拨云见日

• 学习基础的HTML、CSS；
• 学习切图流程：传统切图、智能切图以及现代公司较流行的一种切图方式；
• 进入实战阶段讲解：PC企业站布局、PC游戏站布局。

2.HTML+CSS系列教程第二步：溯本求源

• 学习HTML、CSS扩展知识点，在第一步的基础上进行一些强化；
• 新语法：HTML5、CSS3；
• 了解不同浏览器的兼容问题并学习解决方案。

3.HTML+CSS系列教程第三步：风生水起

• 学习现代流程布局：弹性布局、网格布局、移动端布局、响应式布局、Bootstrap（基于响应式布局的框架，可快速搭建一个网页）。

4.HTML+CSS系列教程第四步：巧夺天工
  讲解工程方面的问题：

• 如何使用预编译CSS；
• postcss：如何工程化的去操作CSS；
• 对CSS的架构进行讲解；
• 了解CSS的高级功能
• CSS与JS交互部分的内容（一些CSS需配合JS才能体现它强大的地方）

二、前端的基础学习

1.HTML、CSS、

1.1什么是HTML、CSS？

HTML：

CSS：

一个网站是由n多个网页组成的，每个网页都是一个.html文件。

1.2如何创建.html文件？

首先在某一指定目录下点击右键，在选项“建设”中创建一个文本文档。创建的文本文档是.txt文件，我们需要对它重新命名为.html文件。

1.3如何在.html文件中写内容

选定.html文件并点击右键，找到打开方式，选中我们所较熟悉的记事本来进行操作。在记事本中输入我们要写的内容，写完后需保存再关闭。

1.4如何看到我们写的内容呢？

对.html选定点击右键直接打开或者进行双击然后拖拽至浏览器页面就可自动生成。

2.宇宙第一编辑器VS Code

上文我们学习通过创建文本文档，然后再用记事本的方式编写内容。但这种方式效率非常低且容易出现问题。所以我们可以进行采用代码（网页）编辑器来进行编写。代码编辑器种类很多，而我在这里介绍的是号称宇宙第一编辑器的VS Code。

2.1VS Code的介绍

• 首先它来自微软，说明它是一个来自大厂的产品，品质有保障。
• 它是一个开源的，意思就是它是免费的。
• 轻量：质量很小，开启速度非常快

总之就一句话：谁用谁知道！

下载VS Code后多进行操作，了解编辑器的操作方法，对它大致有个了解。

VS Code下载链接: