【融职培训】Web前端学习 第2章 网页重构1 第一个网页

一、内容概述

从本节我们开始正式学习前端开发的课程内容，首先我们从第一个网页开始了解html和css的基本概念，并通过创建第一个网页了解vscode的基本使用方法。

二、安装vscode插件

汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code

浏览器打开：open in browser

三、HTML概述

HTML的全称是【超文本标记语言】，，超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它一个标记语言通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件， 使用 ！+ tab生成html模板; 

1 2 3 4 5 6 7 8 9

我的第一个网页

1011

HTML主要控制网页的内容，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果如下所示：

不同的标签具有不同的含义，HTML有上百个标签，有些是不常用的，有些甚至已经被废弃。很多初学者都会困惑，不知道自己到底要学习哪些标签。庆幸的是有了这本《前端开发学习手册》，只要掌握十几个标签，就能完成生动的网页。

在下一节我们会列举常用的HTML标签。

四、CSS概述

CSS全称【层叠样式表(英文全称：Cascading Style Sheets)】。刚才我们了解了，使用HTML可以设置网页中的内容（标准通用标记语言的一个应用）等文件样式的计算机语言，那么使用CSS就可以进一步装饰这些内容，录入设置文本的字体颜色，或是改变图片的尺寸等等。如下面的代码所示，CSS的代码是在style标签内部编写的。

1 2 3 4 5 6 7121314

我的第一个网页

1516

上面的代码我们可以将p标签的文字设置成红色。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

关于CSS的更多内容，我们会在后续章节继续讲解。

五、课后练习

本节我们简单地概括了什么是HTML和CSS，接下来大家可以在vscode中编写上面的两个例子，步骤如下：

打开vscode

点击菜单 File => New File 创建文件。

点击菜单 Save 保存成后缀为html的文件，例如index.html

在文件中输入一个英文的感叹号（!），然后按tab键，就可以生成一个HTML文件的模板了。

接下来按照上面的代码示例编写自己的网页。

用浏览器打开此html文件。

通过上面的六步，我们就可以访问我们自己的第一个网页了;

【融职教育】在工作中学习，在学习中工作