先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员🙇。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员😂。

该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才放上去的。每次的代码和笔记我都放在了开源仓库里，有需要的同学请不要吝啬给我一个star。如果觉得本文写的不错的话记得点赞+关注，你们的支持是我坚持下去的动力😃。

纸上得来终觉浅，绝知此事要躬行。 ——陆游《冬夜读书示子聿》

语雀地址：https://www.yuque.com/beilayanmen

Github地址：https://github.com/SuZui-cn/my-web

Gitee地址：https://gitee.com/north_gate/my-web

个人博客地址：https://foollyone.cn/

VSCode基本介绍

HTML常用标签

HTML标签练习

善于实用搜索引擎

在上一篇文章中，我们主要是针对于HTML的基础理论进行了探讨。但是学习一门技术不能总停留在理论，本文将会和大家一起来对HTML进行练习。

实践是检验真理的唯一标准。

作为一个合格的程序员，熟练的掌握开发工具是必不可少的。这里给大家稍微的讲解一下前端常用的开发工具。

在以前编写网页大多数是使用的dreamweaver（DW），DW对于新手而言很友好，可以用可视化的编辑方式编写网页，但是DW自己生成的样式代码略微复杂，后期的维护难度很大。随着时代的进步，开发工具也在逐步的更新换代，DW逐渐退出前端开发的视野中。这里推荐大家使用VSCode这款神器。（想要编写微信小程序的同学可以试着使用HBuilder）。

在编写完代码之后需要保存再打开浏览器才能看到界面的效果，作者在初学网页的时候经常忘记保存代码，导致页面一直不出现效果。所以推荐大家开启vscode里的自动保存。

左上角：文件->勾选自动保存。

在VSCode中除了在之前介绍的可以直接将文件/文件夹直接拖进vscode以外，还可以快捷的创建文件/文件夹。只需要选中要创建文件/文件夹的父级目录再点击按钮就可以快捷创建。

具体操作如下图：

这里推荐几款目前阶段适合大家的插件。插件这部分我不会一次推荐很多，只会分阶段的推荐，并且讲解每个插件的具体作用。以防大家装了一堆插件，结果连具体插件是做什么的都不知道。（也欢迎大家多多关注作者的干货推荐专栏，里面会推荐很多实用的插件）

自动闭合标签。装上这款插件我们在写标签的时候只需要输入/就可以快速生成闭合标签。

自动重命名标签。这个插件可以让我们在修改标签时自动帮我们修改另一个。比如 在修改标签为标签的时候，它会自动帮我们把标签替换为标签。

快速在浏览器打开，装上这个插件可以让我们在vscode界面中快速打开浏览器

pass：该插件作者在初学的时候出现过快捷键不能正常打开浏览器的情况，解决办法是降低该插件的版本即可。

使用方式：

实时预览，这款插件可以在本地运行一个微型服务器，让我们可以实时预览编辑的效果。（在修改召唤神龙那篇文章中就是用该插件和谷歌的另一个路径映射的插件联动，从而达到修改游戏的效果。有兴趣的同学可以去看看我写的修改召唤神龙的文章）

使用方式：

安装好该插件之后在vscode右下角会出现一个’Go Live’，点击即可。

路径联想，在我们引入图片或者其他文件的时候这款软件会为我们提示路径。

在网页中，每个html标签被称为元素，每个元素都有对应的属性（关于属性，会在下一篇CSS介绍的文章中详细讲解）

HTML标签的本质是为文本添加语义！

在学习编程的时候会涉及大量的概念，以及一些常用的代码片段。所以建议大家养成记笔记的习惯。

拓展内容

建议大家自主学习gitpage搭建个人博客（后期可能会出教程，等不了的同学可以自行百度，关键词：gitpage搭建个人博客）

同时建议大家学习markdown语法，并选择一款顺手的markdown编辑器。作者使用的是typroa 0.9版本（因为该软件1.0之后的版本收费）

typroa历史版本下载：https://typora.io/releases/all

既然安装了typroa可以自主学习一下图床的概念，再将Typroa和PicGo联动起来

世上无难事，只要肯登攀。 —— 毛泽东《水调歌头·重上井冈山》

pass:以下标签取自菜鸟教程

网页基础的结构，主要需要注意层级结构，以及外部文件是在标签中引入（js文件可以在body中引入）

大家在这里可以试试标签和标签有什么区别

提示：行级元素，块级元素（后续DIV+CSS布局章节会详细讲解）

注意a标签设置跳转的属性是href可不是src。

图片这里的话需要注意一点就是文件的引用路径，相对路径和绝对路径是不同的

相对路径和绝对路径的区别：https://blog.csdn.net/qq_34107571/article/details/82834825

./是当前文件夹

…/是上一级文件夹

…/…/是上上一级文件夹

在目前的阶段，图片显示不出绝大部分是因为路径的问题，相对路径需要结合之前推荐的Path Intellisense 路径联想插件多多练习。

pass：使用绝对路径的时候将代码发送给别人，图片会因为路径位置没有对应图片而显示不出来，所以需要注意。其他外部文件（列如CSS、JS文件）在使用绝对路径的时候也会出现这种问题。这点需要注意。

表单需要重点掌握，后期前后端交互的时候经常用到。

还是那句话。

实践是检验真理的唯一标准。

建议大家建一个index.html文件，然后把上面所说的标签都敲一下，有人可能要说，那么多东西怎么记得住。

我亦无他，惟手熟尔。 ——欧阳修《卖油翁》

不断的练习是学习代码的必经之路。下面给大家推荐两篇文章，以及作者当时学习时候写的代码（代码都放在了文章开头的github和gitee仓库，有需要的自取能点个star那就更好了）

html速写语法规则：https://blog.csdn.net/qq_33744228/article/details/80910377

vscode快捷键：https://www.php.cn/tool/vscode/473194.html

这两个练习就是当时每个标签都使用了一下，看了一下每个标签会是什么效果。

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\HTML练习\i标签练习.html

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\HTML练习\i标签实例.html

大家可以试着做一下下面的结构，图片可以截图自取。

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\HTML练习\index.html

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\HTML练习\列表嵌套\index.html

下面有五张图片（截图自取）试试相对路径和绝对路径吧。

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\HTML练习\图片链接\index.html

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\表格练习\table.html

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\HTML练习\表格制作\index.html

文件路径：\my-web\03网页的骨架——HTML实战练习\代码\表单练习\index.html

以上所有案例代码都在仓库里，有需要的同学可以在仓库下载，github访问不了的同学可以访问gitee。

github：https://github.com/SuZui-cn/my-web

gitee：https://gitee.com/north_gate/my-web

学习编程时会出现大量的问题，如果不愿意问人的话，强烈建议多用搜索引擎。我的文章中会出现很多前端系列外的知识和工具，这就需要大家善于使用搜索引擎，遇到不会的知识点就去搜索一下。遇到概念性的就百度百度/谷歌百科。

建议大家学习一下谷歌语法（百度同样实用）

谷歌语法：https://blog.csdn.net/qq_50589021/article/details/115377111

比如我只想搜索CSDN的相关内容就可以使用

如果大家出现问题，可以私信我，我很乐意帮大家解决问题，但是有时候私信太多我会来不及处理，所以可以把问题写在评论区，知道问题所在的同学可以帮忙解决一下。