从零开始学WEB前端——网页的骨架——HTML实战练习

??项目介绍

先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架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基本介绍

  • 前端工具介绍
  • VSCode的使用

• HTML常用标签

  • 基本文档标签
  • 基本标签
  • 文本格式化
  • 链接
  • 图片
  • 无序列表
  • 有序列表
  • 定义列表
  • 表格
  • 框架
  • 表单

• HTML标签练习

  • 标签练习
  • 基本标签实战
  • 列表标签练习
  • 图片标签练习
  • 表格标签练习
  • 表单标签练习

• 善于实用搜索引擎

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

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

VSCode基本介绍

前端工具介绍

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

• VSCode：插件众多，拓展性强；适用于绝大部分前端开发
• Sublime Text：界面简洁，轻量级启动快速。
• HBuilder：国产前端开发工具，非常不错的软件，在开发微信小程序和手机APP上非常好用。
• WebStorm：jetbrains公司旗下的JavaScript开发工具，适合在前端工程化的项目中使用。
• Dreamweaver：曾经以PS+DW+FW称霸网页领域，号称网页三剑客。
• 记事本：大佬都是用记事本写代码的。【手动狗头】

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

VSCode的使用

自动保存

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

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

创建文件/文件夹

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

具体操作如下图：

插件推荐

这里推荐几款目前阶段适合大家的插件。插件这部分我不会一次推荐很多，只会分阶段的推荐，并且讲解每个插件的具体作用。以防大家装了一堆插件，结果连具