老徐WEB：学好这几个HTML标签就够用了（一）

﹏ヽ暗。殇╰゛Y 2023-07-06 06:20 7阅读 0赞

先说一下老徐刚开始学习HTML基础的情景，打开w3school网站，找到HTML基础教程，兴致勃勃的准备从上到下一个一个的内容开始看起来，一个字一个字的看，十分投入，每看完一节内容就觉得有很大的收获了，信心满满。看到第5节内容的时候，有点疲惫了，注意力不集中了，开始走神了。

此时我意识到不能光看内容，还是动起手来写一写，练一练，可以加深印象，至少不会走神了。

然后在网站的示例里开始添加一点自己学过的HTML标签及相应属性，运行之后看看效果有什么变化。如果是按照自己想象来变化，那就说明自己对这个标签已经有了深入的认识了，心里会很高兴，至少把学过的标签能用到网页中了。

接着又看了几节内容，虽然在示例中也增加了自己要用到的标签，同时也呈现了想要的效果，但此时心里已经有些失落了，因为没有一个清晰的目标，只能做一点点示例，还不知道这样的示例能在实际项目中有多大用处。接下来我就快速的学习剩下的内容了，基本就是看一看，也不动手调示例了，就这样潦草的过了一遍HTML基础教程，至少对学习的标签有了一点印象。

老徐接下来就想我的目标是什么，其实目标已经有明确了，就是自己能够完整的编写一个网页，那怕是一个最简单的网页也好。那么老徐就从网页出发，看看一个完整的网页都需要哪些HTML标签。

去网上随便找几个博客的页面（为什么要找博客的页面，一、页面简洁，二、布局工整，三、简单入手），查看页面源代码，记录一下都需要哪些标签，然后把其他几个页面的标签也都记录下来，你会发现这几个博客的HTML标签不多，但已经能够做出一个页面了。

那么一个简单页面的HTML标签有哪些呢，老徐记录一下，大概有如下几个：html，head，meta，title，link，script，style，body，div，p，h1~h6，span，a，img，ul，ol，li。

老徐心里知道了，只要我能把这几个标签的作用弄明白了，就可以编写出一个最简单的网页了，心里还有挺开心的。数了一下标签，大概有20个左右，至少比那几十上百的标签要有目的性了吧。再来分析一下这几个HTML标签，其他有几个是网页固定需要的，比如html，head，meta，title，link，script，style，body，这几个HTML标签是网页中必需的，最基础的，也是最简单的。除了这几个标签，剩下的也就10个左右的标签了。意思就是把这剩下的10个左右的标签的作用弄清楚了，再加强一下训练，就可以写出网页了。

当然网页里肯定会涉及CSS的知识，这遍文章里我们先不讲CSS，只是先让大家对网页中经常用到的几个HTML的标签有所认识。同时也认识到一个网页只需要几个标签就可以了，并不是需要学习所有的HTML标签，这样学习的信心就会增强。还有一点就是带着目标去学习，去练习。

页面的框架思维，页面结构是有共性的，大致分为头部(页面上面的部分，包括主标题、LOGO、导航等)、中间部分（有的分一列，有的分成二列，三列的不多）、尾部（包括关于、联系、外链、版权等信息）。

下面是一个最简单的网页结构，不要看它简单，它是网页的基础结构，在此基础上加上相应的变化就是你需要的网页。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3V2eW9hYQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3V2eW9hYQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200216191413796.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3V2eW9hYQ==,size_16,color_FFFFFF,t_70