【前端】HTML-2022/7/16

前言

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

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

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

HTML指超文本标记语言(英语: HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

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

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

图片[1]-【前端】HTML-2022/7/16-Abyss-博客
是的,我的系统是Win11,不是我想升级,是我换电脑了它的原装系统就是这样(华硕天选3,之后可能会出测评文章)

如果开了CSS(正常显示):

图片[2]-【前端】HTML-2022/7/16-Abyss-博客

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

图片[3]-【前端】HTML-2022/7/16-Abyss-博客

当关闭了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保存文件,浏览器就会自动刷新,我们就能实时看到效果。

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

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

图片[4]-【前端】HTML-2022/7/16-Abyss-博客

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

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

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

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论