前端基础，个人认为就是html + js + css。无论过程如何，无论你用的是less还是sass，无论你用的vue还是react，输出的结果，只有html + js + css。

此部分列举，笔者觉得重点的知识点，如有遗漏，欢迎指出。

1.语义化

所谓，语义化的标签，说明让标签有自己的含义。也是近十年。最典型的例子就是header，footer等，它可以让你在没有样式的情况下，就大概能想到，他就是个头部或者底部。他存在的意义，就是让前端开发人员，在开发过程中，更容易去阅读代码，以及明白这些代码的意义。

它的好处是：1.能够更好的展示内容结构 2.便于团队的维护与开发 3.有利于SEO，爬虫可以分析每个关键词的权重。4.方便其他设备解析 (如屏幕阅读器)

2.SEO

作为前端，你不得不知道的SEO，这涉及到公司的网站推广。

SEO，中文称搜索引擎优化，一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。他的实现原来分别为，页面抓取，分析入库，检索排序。

有兴趣深入SEO优化的朋友：segmentfault.com/a/119000001…

3.doctype

前端经常在html头部看到DOCTYPE的声明，一般常位于文档的第一行。那么他的作用是什么，可能对新的浏览器或者新的网站暂无什么影响，但是相对古老的浏览器或者是网站，可能会出现不同。因为浏览器有标准模式与兼容模式，差异相对比较大。

标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。兼容模式中，页面以宽松的向后兼容的方式显示 ，模拟老式浏览器的行为以防止站点无法工作。

而DOCTYPE的存在，就是为了声明，该页面使用标准模式。不声明，可能一些旧的网站会出现兼容模式。

4.link与@import

link与import , 本质使用上，我们都是用它来引入css，但是他们有一定的区别。

link是一种引入资源的标签，import是引入css的方式。所以，import引入的只能是css，而link可以引入所有的资源，包括图片，RSS等。加载顺序上也有一些差异。link引用的CSS会同时被加载。import引用的CSS会等到页面全部被下载完再加载。兼容性的差别。link无任何兼容问题，import兼容IE5以上。（当然，IE5估计也找不到了）动态引入样式 link可以后期引入样式，而import是不可以后期引入的，只能初始化页面之前引入。复用率的问题 import可以复用之前的css文件，而link只能一次引用一个文件。当然，import复用文件时，在浏览器实际上是加载了多个文件，会有多个请求。而每一个link只是一个http请求。5.async与defer

首先这两个东西为什么而存在的问题。在日渐复杂的前端，异常已经是程序的一部分。如果出现一些小问题，或者服务器加载上出现延迟。而我们默认的引入的script脚本，会阻塞后续的DOM渲染。一旦没有部分异常无法及时加载完成，那么我们的页面因为阻塞问题，将整个白屏。

也许我们可以保证自己服务器的正常，但是你决定保证不了第三方服务器的正常，于是引入了async和defer来优化这个问题。

再来谈谈script的默认，async，defer的之前的差异。

默认情况下：浏览器会立即加载并执行指定的脚本。指定的脚本，指在script标签之上的脚本。所以，如果script放在header中，而对应的文件还未加载完成，会形成阻塞。所以这就是现在很多页面，都会使用默认且把scipt放在页面结尾的原因。

async情况下：async ，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。async是乱序的。

defer情况下：defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。defer是顺序执行。

此外，async跟defer，不支持或者不兼容IE9一下浏览器，总体来说，笔者还是觉得script放最下方靠谱一些。

6.文本元素的冒泡与委托

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

优点：1.减少事件注册，节省内存。例如上面代码，只指定 父元素的处理程序，即可管理所有所有子元素的“click”事件；2.简化了dom节点更新时，相应事件的更新缺点：1.利用事件冒泡的原理，不支持不冒泡的事件；2.层级过多，冒泡过程中，可能会被某层阻止掉；3. 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在ol上代理li，而不是在document上代理li。4. 把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用该js时，可能不知道，造成单击button触发了两个click事件。

html章节，本文仅列出笔者任务相对重要的知识点，且介绍上，针对重点。当然，遗漏很正常，希望能收到你的意见。

喜欢的老铁，加个关注！今后会分享更多的前端干货，欢迎点赞转发关注[比心][比心][比心]

来源