在做SEO时候前端 seo，我们有时候会面临网站改版。但是这样就需要做布局调整和布局的页面的模板的优化，既要满足用户体验、又要美观。那么网页制作学会了你就可以在网站代码这个环节利于SEO优化，而且做出优美页面

在网站面临微调时候。例如给你网站增加一个浮动导航前端 seo，增加一个广告位。都有可能导致你网站页面走形，不兼容。这个时候怎么办，丢给网络公司？面对500-600多块钱的修改费用，比你买一个模板还要贵。换新的模板你好不容易坐上来的排名会受到沉重打击，这个时候应该如何取舍。

在我们做网站时候前端 seo，同样也会遇到一些网站变形现象、或者浏览器不兼容的现象。那么在网页制作这块就可以更好的去做好你网站的页面

如果网站需要做活动时候的营销页面设计，就需要用到网页制作.这块就能更好的去做好一个页面。

同样我们有一定的SEO基础。我们需要去做一个好的模板。或者看到一个网站模板不错，但是有些方便不是我们想要的。所以就可以来进行来做好页面

同样我们可以结合SEO做出精美的符合SEO模板然后去销售。同时也额外增加了一份收入。。

前端基础(HTML)呕心沥血整理，希望能帮到你

前端基础，个人认为就是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与@importlink与import , 本质使用上，我们都是用它来引入css，但是他们有一定的区别。

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

也许我们可以保证自己服务器的正常，但是你决定保证不了第三方服务器的正常，于是引入了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章节，本文仅列出笔者任务相对重要的知识点，且介绍上，针对重点。当然，遗漏很正常，希望能收到你的意见。

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

来源 }