【前端】HTML-2022/7/16

前言

准备开始结束HTML的学习，并且从今天开始，该系列文章不再只是个人笔记，也是一个面向所有初学者的教程。

从今天开始可能会花费几天的时间总结HTML，然后就开始CSS。

HTML是什么，前端需要学习什么

HTML指超文本标记语言（英语： HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

学习前端主要需要学习的是HTML，CSS，JS这三门语言，在一个前端网页中，HTML负责的是网页的主要结构（规定这里要显示什么，那里要显示什么），CSS负责的是网页的样式，一个没有CSS的网页基本就是全文字的，甚至连颜色都只有白与黑的单一样式。难以理解？下面有张对比图：

当我的个人网站关闭CSS后：

如果开了CSS（正常显示）：

我猜没有任何一个人会喜欢第一张图。

当关闭了JS后，这个网页就会失去动画（如果正常加载JS，这个图标和文字信息是会有一个显示的动画的，关闭之后就是直接出现），当然，JS能实现的东西远不止这些。

一个只有前端的网页不会出现像PHP之类的语言，基本上只会由HTML，CSS，JS以及其他需要引入的外部资源组成，这种网页叫做静态网页，它的特点是：内容基本固定不变（除非更改源代码），不会涉及后端的操作，没有数据库，无需经过服务器编译，直接就能在浏览器上渲染并显示出来的网页，这种网页的加载速度往往很快，但交互性很差，能实现的功能比较小，基本上只是一个展示类的网页，不能随便增加内容（只能通过修改源代码的方式干涉网站的内容）

现在，一个完整的网站基本上都是由前端+后端组成的，这种叫做动态网页，博客论坛等其他需要不断实时更新内容的网站都是动态网页，除了HTML，CSS，JS等前端的工作外，后端的工作也非常重要，后端需要处理来自前端发送的信息，与数据库进行交互，再返回内容给前端进行显示。它们的文件扩展名一般不是.html，而是.php等。

但动态网页往往都会在URL中有“?”的出现，这是一种传递参数的方式，很正常，但是对搜索引擎的爬虫来说，它们无法理解这是什么意思，所以动态网页对SEO一般不友好，除非通过特殊的技术手段来伪装成静态网页来优化SEO，这种技术叫做伪静态，比如在访问本博客时，点开一个文章，你会发现它的扩展名是.html的，那就意味着这个博客是静态网页吗？不是的，只是我用了伪静态。

HTML编辑器

我们需要一个专业的编辑器来帮助我们编写HTML文档，如果你不怕麻烦，并且保证你能记得所有你需要使用的标签和属性，那你用记事本来写HTML文档我也没有意见。

这里推荐使用VS Code，如果你有其他顺手的编辑器你也可以用你的，只要你用得习惯，那用什么编辑器都没有问题。

VS Code下载地址：https://code.visualstudio.com/

在安装并打开VS Code后，建议先安装简体中文的语言插件，除非你喜欢英文并且能看懂它是什么意思（

安装教程可以参考：https://www.runoob.com/w3cnote/vscode-tutorial.html

然后安装Live Server插件，这是一个能够帮助我们边写代码边在浏览器看效果的插件。

安装完之后我们可以新建一个文件，选择语言为HTML，并保存文件，然后输入：html，选中html: 5的字样的选项，然后一回车，VS Code就能直接把HTML的基本框架给补全出来，此时我们可以写一些内容，然后右键点击“Open With Live Server”，Live Server插件就会帮我们在浏览器运行这个代码，只要我们一按Ctrl+S保存文件，浏览器就会自动刷新，我们就能实时看到效果。

但还是很麻烦，能不能把保存的工作也省了？

可以，只要设置自动保存就行。

点击右下角齿轮，点击设置

点击右边的文本编辑器>文件，找到Files: Auto Save

把Off改成afterDelay，然后在下一项（Auto Save Delay）更改延迟时间（也可以不改，默认就是1000ms，即1秒）

这样，在我们修改完代码后的1s，文件就会自动保存，浏览器也会自动刷新，就能实现效果了

Tips：在VS Code中还有很多能够方便我们的操作，比如：按Ctrl+/，就能自动添加注释（当然，VS Code不止这一个快捷操作，之后会讲到更多）