总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
- CSS3
- JavaScript
- ```
nav实例
但是我在有些时候却情不自禁的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。nav使用注意：
- 用在整个页面主要导航部分上，不合适就不要用nav元素；
aside元素
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
<article> <p>内容</p> <aside> <h1>作者简介</h1> <p>小北，前端一枚</p> </aside> </article>aside实例
aside使用总结：- aside在article内表示主要内容的附属信息，
- 在article之外则可做侧边栏，没有article与之对应，最好不用。
- 如果是广告，其他日志链接或者其他分类导航也可以用
section元素
section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下：
<section> <h1>section是啥？</h1> <article> <h2>关于section</h1> <p>section的介绍</p> <section> <h3>关于其他</h3> <p>关于其他section的介绍</p> </section> </article> </section>section示例代码
section使用注意：一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
- 表示文档中的节或者段；
- article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div
article元素
article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，
article会有一个标题（通常会在header里），会有一个footer页脚。我们举几个例子介绍一下article，好更好区分article、section、div<article> <h1>一篇文章</h1> <p>文章内容..</p> <footer> <p><small>版权：html5jscss网所属，作者：小北</small></p> </footer> </article>一篇简单文章的article示例代码
上例是最好简单的article标签使用情况，如果在article内部再嵌套article，那就代表内嵌的article是与它外部的内容有关联的，如博客文章下面的评论，如下：
<article> <header> <h1>一篇文章</h1> <p><time pubdate datetime="2012-10-03">2012/10/03</time></p> </header> <p>文章内容..</p> <article> <h2>评论</h2> <article> <header> <h3>评论者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈哈哈</p> </article> <article> <header> <h3>评论者: XXX</h3> <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p> </header> <p>哈？哈？哈？</p> </article> </article> </article>文章里的评论，一个article嵌套article来表示的实例
article内部嵌套article，有可能是评论或其他跟文章有关联的内容。那article内部嵌套section一般是什么情况呢。如下：<article> <h1>前端技术</h1> <p>前端技术有那些</p> <section> <h2>CSS</h2> <p>样式..</p> </section> <section> <h2>JS</h2> <p>脚本</p> </section> </article>文章里的章节，一个article里的section实例
因为文章内section部分虽然也是独立的部分，但是它门只能算是组成整体的一部分，从属关系，article是大主体，section是构成这个大主体的一部分。本网站的全部文章都是article嵌套一个个section章节，这样能让浏览器更容易区分各个章节所包括的内容。那section内部嵌套article又有哪些情况呢，如下
<section> <h1>介绍: 网站制作成员配备</h1> <article> <h2>设计师</h2> <p>设计网页的...</p> </article> <article> <h2>程序员</h2> <p>后台写程序的..</p> </article> <article> <h2>前端工程师</h2> <p>给楼上两位打杂的..</p> </article> </section>一个section里的article实例
设计师、程序员、前端工程师都是一个独立的整体，他们组成了网站制作基本配备，当然还有其他成员~~。设计师、程序员、前端工程师就像article，是一个个独立的整体，而section将这些自成一体的article包裹，就组成了一个团体。article和section和例子就例举这么多了，具体情况具体分析，不易深究。漏了
divd，其实div就是只是想用来把元素组合或者给它们加样式时使用。article使用注意：
- 自身独立的情况下：用article
- 是相关内容：用section
- 没有语义的：用div
HTML5其他结构元素标签
HTML5节元素标签包括
body article nav aside section header footer hgroup，还有h1-h6 address。address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。h1-h6因为hgroup，section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个h1。
四、还有一些细节需要注意
1、title与h1的区别
title与H1是不能划等号的
（1）H1是大标题的意思。一般出现网页文章页面，作用如同一张报纸的大标题，使用读者在没看内容之前就大概了解本文的旨意，它是直接给用户看的。而且在SEO中，搜索引擎也非常重视H1，目的是告诉搜索引擎，这地方的内容很重要,H1要求贴近文章内容，突出主题，言简意赅。（2）title是用来面对的是搜索引擎和用户，其范围相对于H1来说要广，title中可以包含H1，在搜索引擎中
tiele的权重要高于H1;一般来讲，H1做到突出主题目，title修饰主题关键字。2. H1与title之间的联系
A.从网站角度而言，title则重于网站信息标题,突出网站标题或关键字用title,一篇文章，一个页面最好只
用一个H1，H1用得太多，会稀释主题;一个网站可以有多个title，最好一个单页用一个title以便突出网站页面主题信息。
B.从文章角度而言，H1则概括的是文章主题,突出文章主题，用H1，面对的用户，要突出其视觉效果。
从SEO角度看，title的权重高于H1，其适用性要比H1广。一个好网站是：H1与title并存，既突出H1文章主题，又突出网站主题和关键字。达到双重优化网站的效果。
3. b与strong的区别，i与em的区别
b和strong标签，在网页中默认的情况下均是加粗字体的作用；b标签是一个实体标签，它所包含的字符将被设为blod粗体，是html语言中的；—视觉化
strong 标签是一个逻辑标签，作用是为了加强语气而加粗字体，是xhtml中的，其强调作用，可以用css标
签控制strong强调的方式。----语义化标签
在符合w3c的标准，推荐使用strong标签—语义化在默认的html样式中和,和的样式一样。不过从语义上来讲和是表现元素，仅仅改变外观,**和分别意味着行为的强调和加重强调，在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。
另外所有的表现元素其实都是不推荐使用的，应该使用css来代替**
4.em和strong,i和b.
还是贴一篇玉伯的文章吧,阐述很详细:http://lifesinger.org/blog/2008/12/the-different-of-em-and-strong/
首先,em和i在现在的浏览器上表现为斜体,strong和b表现为粗体,但是因为斜体的字体会导致锯齿,所以一般都不太用em.但是按照语义化来 说,应该适当使用em,样式可以用css来控制,而且不敢确保以后的浏览器会将em渲染成什么效果,这也是为什么不能依赖标签本身的表现来使用标签的原 因,说不定ie9突然觉得em渲染成灰色的粗体更好一点,然后改了渲染方式,应该用标签来表示结构,而不是样式.在语意上,em表示对内容的强调,strong也表示强调,但是强调的程度更重一些.玉伯文章里也说了在html5里,em表示局部强 调,strong表示全局强调.我的理解就是,em表示你在看到这个网页的时候你不必注意em里的内容,而是在深入阅读的时候通过em的强调来理解内容的 含义,而strong则表示你一眼看去就知道了内容的重点,例如用在每篇文章的第一句话里.这也就是个局部和全局的概念吧.
玉伯文章里还提到:em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance).这个理解起来其实也就是局部和全局的概念,可以自己去体会.
i和b标签前一阵传言即将被抛弃,不推荐使用,很多人用它来表示单纯的样式,当成一个非语义化的标签,但是在html5中他们被赋予了语意,b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如：文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本，例如：一个分类名称，一个技术术语，一个外语中的谚语，一个想法等。或者代表斜体的排版 方式.
有一点要注意,按照理论,应该更多地应用em标签来表示着重,因为按常理,要着重加着重强调的总是比着重一次的几率少很多,所以strong只应该 用在需要的地方,不能够乱用.
五、如何让旧浏览器支持HTML5新增标签
<span style="font-size:14px;"><!doctype html> <html> <head> <meta charset="UTF-8"> <title>让旧浏览器支持HTML5新增标签-独行冰海</title> </head> <body> <header>顶部内容</header> <nav>导航内容</nav> <article>文章内容</article> ### 最后 由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！ **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**   ad> <body> <header>顶部内容</header> <nav>导航内容</nav> <article>文章内容</article> ### 最后 由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！ **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)** [外链图片转存中...(img-9NXolu68-1715824292038)] [外链图片转存中...(img-QAwOHg6U-1715824292039)]
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
