毕业工作一年之后，有了转行的想法，偶然接触到程序员这方面，产生了浓厚且强烈的兴趣，开始学习前端，成功收割了大厂offer，开始了我的程序员生涯。

在自学过程中有过一些小厂的面试经历，也在一些小型的互联网公司实习过，这些都不是本文重点。本篇章主要分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

标签语义化：

语义和默认样式的区别：

• 默认样式是浏览器设定的一些常用tag的表现形式；
• 语义化的主要目的就是让大家直观的认识标签和属性的用途和作用；

标签语义化作用：

• 当只有HTML页面时，没有CSS，我们仍然可以很清晰的看懂页面的DOM结构
• 团队维护，当团队来review代码或者重构时，增强代码的可读性，更利于维护
• 有利于SEO，搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重
• 提高用户体验，比如 title 和 alt 等用来解释内容信息

常用语义化的标签：

• <header>头部标签，用来写网页最上方的公共头部，也就是页眉。

<header><h1>一级标题</h1><h2>二级标题</h2>
</header>

• <nav>标签，用来写导航，一般写在<header>标签里面，内部用<ul>无序列表。

<nav><ul><li></li><li></li><li></li></ul>
</nav>

• <code>：code可以包裹html语句而不会被浏览器再去解析。

• <pre>，<samp>：这是一段HTTP协议的内容描述，因为这段内容的换行是非常严格的，所以我们不需要浏览器帮我们做自动换行，因此我们使用了pre标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。

• <article>标签，当我们要写网页文章的主要内容时，要用到这个标签。

<article><h2>标题</h2><p>内容</p>
</article>

• <address>标签，定义文档作者或拥有者的联系信息。

如果 <address> 元素位于<article>元素内部，则它表示该文章作者或拥有者的联系信息。

通常的做法是将 address 元素添加到网页的头部或底部。

• <p>段落标签

知道了

作为段落，你就不会再使用<br/>来换行了，而且不需要<br/>来区分段落与段落。
<p></p>中的文字会自动换行，而且换行的效果优于<br/>。

<p>段落内容</p>

• <span>标签

<span>标签的语义为被用来组合文档中的行内元素

• <b>、<em>、<strong>

<b>标签语义为“加粗”

<em>标签语义为“强调”

<strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示，strong 用粗体表示。

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。

取](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)。

[外链图片转存中…(img-aoLghM1l-1622807137317)]