web前端开发书籍，前端项目开发流程-CFANZ编程社区

背景

我18年本科毕业，年前已有换工作想法，一直没有付诸行动，疫情爆发后回到老家，年后开始找工作，对于自己水平不是很清楚，之前找工作一直都挺顺利的。大学毕业没有留在实习单位继续做前端开发，那时候三大框架已经开始流行了，实习公司用的还是jquery。回老家学了一个月的车和vue、小程序后，凭着自学做的项目找了一周工作入职第一家公司。面试经验比较少，想着多面面看看对方公司的反馈。年前还没开始准备就面了腾讯，终止于二面，所以说还是要好好复习再面大厂。

面的岗位以两三年为主，虽然我是1.5年经验，但有的岗位年限要求没那么严格也可以试试，尤其写的优秀者可放宽年限要求。面了四五家，有上市公司，也有小公司，都是远程面试。

标签语义化：

语义和默认样式的区别：

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

标签语义化作用：

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

常用语义化的标签：

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

<header>
    一级标题
    <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>段落标签

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

<p>段落内容</p>

<span>标签

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

<b>、<em>、<strong>

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

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

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

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

Vue部分截图